<template>
  <div class="searchBox">
    <n-space>
      <n-input v-model:value="searchValue" clearable placeholder="请输入···" />
      <n-button type="primary" @click="handleClick('search')"
        ><template #icon>
          <n-icon>
            <Search />
          </n-icon> </template
        >搜索</n-button
      >
      <n-button type="primary" @click="handleClick('add')" attr-type="button"
        ><template #icon>
          <n-icon>
            <Add />
          </n-icon> </template
        >新增</n-button
      >
      <n-button
        type="success"
        @click="handleClick('batchdelete')"
        attr-type="button"
        ><template #icon>
          <n-icon>
            <Remove />
          </n-icon> </template
        >批量删除</n-button
      >
      <n-button
        type="success"
        @click="handleClick('batchstop')"
        attr-type="button"
        ><template #icon>
          <n-icon>
            <StopCircle />
          </n-icon> </template
        >批量暂停</n-button
      >
      <n-button
        type="success"
        @click="handleClick('batchstart')"
        attr-type="button"
        ><template #icon>
          <n-icon>
            <PlayCircleSharp />
          </n-icon> </template
        >批量恢复</n-button
      >
      <n-button
        type="success"
        @click="handleClick('batchimplement')"
        attr-type="button"
        ><template #icon>
          <n-icon>
            <PlayCircle />
          </n-icon> </template
        >批量立即执行</n-button
      >
      <n-button type="warning" @click="handleClick('logs')" attr-type="button"
        ><template #icon>
          <n-icon>
            <List />
          </n-icon> </template
        >日志列表</n-button
      >
    </n-space>
  </div>
  <n-data-table
    ref="tableRef"
    :bordered="false"
    :max-height="700"
    striped
    :columns="columns"
    :data="data"
    :pagination="pagination"
    v-model:checked-row-keys="checkedRowKeys"
  ></n-data-table>
  <n-modal
    v-model:show="showModal"
    :show-icon="false"
   preset="card"
    :title="modelTitle"
    :style="{ width: width }"
  >
    <n-form
      v-if="modelTitle == '新增' || modelTitle == '修改'"
      :label-width="80"
      :model="addFormValue"
      :rules="addFormRules"
      :size="medium"
      label-placement="left"
      ref="addFormRef"
    >
      <n-form-item label="名称：" path="name">
        <n-input
          v-model:value="addFormValue.name"
          clearable
          placeholder="请输入···"
        />
      </n-form-item>
      <n-form-item label="参数：" path="params">
        <n-input
          v-model:value="addFormValue.params"
          clearable
          placeholder="请输入···"
        />
      </n-form-item>
      <n-form-item label="cron表达式" path="cronExpression">
        <n-input
          v-model:value="addFormValue.cronExpression"
          clearable
          placeholder="请输入···"
        />
      </n-form-item>
      <n-form-item label="备注：" path="remarks">
        <n-input
          placeholder="请输入···"
          v-model:value="addFormValue.remarks"
          type="textarea"
          :autosize="{
            minRows: 3,
            maxRows: 5,
          }"
        />
      </n-form-item>
    </n-form>
    <template #action v-if="modelTitle == '新增' || modelTitle == '修改'">
      <n-space>
        <n-button @click="() => (showModal = false)">取消</n-button>
        <n-button
          type="primary"
          :loading="formBtnLoading"
          @click="handleClick('rows', 'sure')"
          >确定</n-button
        >
      </n-space>
    </template>
    <div class="logsTable" v-if="modelTitle == '日志列表'">
      <div class="searchBox">
        <n-space>
          <n-input v-model:value="searchValue" clearable placeholder="任务ID" />
          <n-button type="primary" @click="handleClick('search')"
            ><template #icon>
              <n-icon>
                <Search />
              </n-icon> </template
            >搜索</n-button
          >
        </n-space>
      </div>
      <n-data-table
        ref="tableRef"
        :bordered="false"
        :max-height="500"
        striped
        :columns="modalColumns"
        :data="modalData"
        :pagination="pagination"
      ></n-data-table>
    </div>
  </n-modal>
</template>

<script>
import { reactive, ref, toRefs, h, onMounted } from "vue";
import { NButton, useDialog, useMessage } from "naive-ui";
import {
  Search,
  Add,
  Remove,
  StopCircle,
  PlayCircleSharp,
  List,
  PlayCircle,
} from "@vicons/ionicons5";

export default {
  name: "scheduled",
  components: {
    Search,
    Add,
    Remove,
    StopCircle,
    PlayCircleSharp,
    List,
    PlayCircle,
  },
  setup() {
    const dialog = useDialog();
    const message = useMessage();

    const checkedRowKeysRef = ref([]);
    const state = reactive({
      //搜索相关
      searchValue: "",
      //表格相关
      columns: [
        {
          type: "selection",
          width: "30",
        },
        {
          title: "ID",
          key: "id",
          align: "center",
          width: "60",
        },
        {
          title: "名称",
          key: "name",
          align: "center",
        },
        {
          title: "参数",
          key: "params",
          align: "center",
        },
        {
          title: "cron表达式",
          key: "cronExpression",
          align: "center",
        },
        {
          title: "备注",
          key: "remarks",
          align: "center",
        },
        {
          title: "状态",
          key: "status",
          align: "center",
        },
        {
          title: "操作",
          key: "actions",
          width: "400",
          align: "center",
          render(row) {
            const btn = state.actionColumn.map((item, index) => {
              return h(
                NButton,
                {
                  text: true,
                  size: item.size,
                  style: {
                    margin: "10px",
                  },
                  type: item.btnType,
                  onClick: () => handleClick(item.type, row),
                },
                { default: () => item.default }
              );
            });
            return btn;
          },
        },
      ],
      data: [],
      actionColumn: [
        {
          size: "small",
          btnType: "primary",
          type: "edit",
          default: "修改",
        },
        {
          size: "small",
          btnType: "primary",
          type: "delete",
          default: "删除",
        },
        {
          size: "small",
          btnType: "primary",
          type: "stop",
          default: "暂停",
        },
        {
          size: "small",
          btnType: "primary",
          type: "start",
          default: "恢复",
        },
        {
          size: "small",
          btnType: "primary",
          type: "implement",
          default: "立即执行",
        },
      ],
      //弹窗相关
      width: "600px",
      showModal: false,
      formBtnLoading: false,
      modelTitle: "",
      addFormValue: {
        name: "",
        params: "",
        cronExpression: "",
        remarks: "",
      },
      addFormRules: {
        name: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入名称",
          },
        ],
        cronExpression: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入表达式",
          },
        ],
      },
      modalColumns: [
        {
          title: "日志ID",
          key: "logsId",
          align: "center",
        },
        {
          title: "任务ID",
          key: "taskId",
          align: "center",
        },
        {
          title: "名称",
          key: "name",
          align: "center",
        },
        {
          title: "参数",
          key: "params",
          align: "center",
        },
        {
          title: "状态",
          key: "status",
          align: "center",
        },
        {
          title: "耗时（单位：毫秒）",
          key: "times",
          align: "center",
        },
        {
          title: "执行时间",
          key: "createTime",
          align: "center",
        },
      ],
      modalData: [
        {
          name: "testTask",
          createTime: "2022-02-11 16:00:00",
          taskId: 1,
          logsId: 1,
          params: "renren",
          status: 0,
          times: 0,
        },
        {
          name: "testTask",
          createTime: "2022-02-11 16:00:00",
          taskId: 1,
          logsId: 1,
          params: "renren",
          status: 0,
          times: 0,
        },
      ],
    });
    // 分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      onChange: (page) => {
        paginationReactive.page = page;
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
      },
    });
    //获取表格数据
    async function getTableData() {
      const res = reactive(
      {"code":200,"message":"获取系统管理-定时任务数据","data":{"totalCount":17,"pageSize":10,"totalPage":1,"currPage":1,"list":[{"key":0,"id":0,"name":"John Jackson","params":"John Jackson","cronExpression":"应反市有林手者在场区教少。","remarks":"义解分军劳看西便收毛书六运细机。","status":1},{"key":1,"id":1,"name":"Betty Thompson","params":"Betty Thompson","cronExpression":"给矿具支书对直做及周各斗前形。","remarks":"定着再位以入称标院可已导。","status":0},{"key":2,"id":2,"name":"Cynthia Perez","params":"Cynthia Perez","cronExpression":"确最她比众油两又给节知非话除半只以。","remarks":"子写新制由理难压铁非统划以低老先市。","status":1},{"key":3,"id":3,"name":"Robert Perez","params":"Robert Perez","cronExpression":"民局发老去实个化新时只见走。","remarks":"飞年明近基民易已走我速义听。","status":1},{"key":4,"id":4,"name":"Jessica Robinson","params":"Jessica Robinson","cronExpression":"保团次全三完也市行流府部见各。","remarks":"战列由表在片思议听解好石着法重引面识。","status":0},{"key":5,"id":5,"name":"Helen Thompson","params":"Helen Thompson","cronExpression":"争样米书石山民这当十复意复状老将处。","remarks":"放构门接子更快计各及调回。","status":1},{"key":6,"id":6,"name":"Brenda Jones","params":"Brenda Jones","cronExpression":"心今越记队金次对日科县界圆议。","remarks":"说器运金局化报各山证志格亲。","status":1},{"key":7,"id":7,"name":"Richard Davis","params":"Richard Davis","cronExpression":"律马治会入心员维机眼三见系。","remarks":"儿没干完素周者最应中化意头。","status":0},{"key":8,"id":8,"name":"Nancy Walker","params":"Nancy Walker","cronExpression":"存除联按厂到后低面名志几生。","remarks":"造直片一由每求无格段何然当报。","status":1},{"key":9,"id":9,"name":"Deborah Lopez","params":"Deborah Lopez","cronExpression":"众们精何使长至华导治拉江便厂平。","remarks":"历时酸性证很因常联清十争到效。","status":0},{"key":10,"id":10,"name":"Mark Miller","params":"Mark Miller","cronExpression":"始用引联究每样解大之与要王元相图。","remarks":"种最使日部越几入着专候人己你已研原治。","status":0},{"key":11,"id":11,"name":"Paul Gonzalez","params":"Paul Gonzalez","cronExpression":"斗动们据达局千是级思领社理当分。","remarks":"提号眼容研走织处来酸向江。","status":0},{"key":12,"id":12,"name":"Frank Martinez","params":"Frank Martinez","cronExpression":"派前走不目目内组离资步许应现进步。","remarks":"可在出圆并写知住技计间号装象象信。","status":1},{"key":13,"id":13,"name":"Karen Hernandez","params":"Karen Hernandez","cronExpression":"知队准提克论变那集认出许林听油以半。","remarks":"性持参单数才革层王国每美称场转且。","status":0},{"key":14,"id":14,"name":"Kenneth Lewis","params":"Kenneth Lewis","cronExpression":"合号空段儿油置复统业动几相究切。","remarks":"温小铁候意酸小即几清据先在容建打证。","status":1},{"key":15,"id":15,"name":"Kenneth Gonzalez","params":"Kenneth Gonzalez","cronExpression":"土题已团般题史装公回量织海林都上。","remarks":"路拉精习上机机革三身半实已。","status":0},{"key":16,"id":16,"name":"Amy Anderson","params":"Amy Anderson","cronExpression":"造好白分划变矿干不气带几。","remarks":"记太办即米意因况空入学改写革农头大。","status":0}]}}

      )
      if (res.code == 200) {
        state.data = res.data.list;
      }
    }
    //按钮点击事件
    const handleClick = (type, row) => {
      switch (type) {
        //搜索
        case "search":
          console.log("刷新界面", state.searchValue);
          break;
        //新增
        case "add":
          state.width = "600px";
          state.modelTitle = "新增";
          state.showModal = true;
          break;
        //删除
        case "batchdelete":
          if (checkedRowKeysRef.value.length < 1) {
            message.error("请选择至少一项进行删除！");
          } else {
            dialog.info({
              title: "提示",
              content: `您想删除${checkedRowKeysRef.value}项吗？`,
              positiveText: "确定",
              negativeText: "取消",
              onPositiveClick: () => {
                message.success("删除成功");
              },
              onNegativeClick: () => {},
            });
          }
          break;
        case "batchstop":
          if (checkedRowKeysRef.value.length < 1) {
            message.error("请选择至少一项进行暂停！");
          } else {
            dialog.info({
              title: "提示",
              content: `您想暂停${checkedRowKeysRef.value}项吗？`,
              positiveText: "确定",
              negativeText: "取消",
              onPositiveClick: () => {
                message.success("成功");
              },
              onNegativeClick: () => {},
            });
          }
          break;
        case "batchstart":
          if (checkedRowKeysRef.value.length < 1) {
            message.error("请选择至少一项进行恢复！");
          } else {
            dialog.info({
              title: "提示",
              content: `您想恢复${checkedRowKeysRef.value}项吗？`,
              positiveText: "确定",
              negativeText: "取消",
              onPositiveClick: () => {
                message.success("成功");
              },
              onNegativeClick: () => {},
            });
          }
          break;
        case "logs":
          state.width = "70%";
          state.modelTitle = "日志列表";
          state.showModal = true;
          break;
        case "edit":
          state.width = "600px";
          state.modelTitle = "修改";
          state.showModal = true;
          state.addFormValue = row;
          break;
          case "delete":
             dialog.info({
              title: "提示",
              content: `您想删除第${row.id+1}项吗？`,
              positiveText: "确定",
              negativeText: "取消",
              onPositiveClick: () => {
                message.success("成功");
              },
              onNegativeClick: () => {},
            });
            break;
            case "stop":
             dialog.info({
              title: "提示",
              content: `您想暂停第${row.id+1}项吗？`,
              positiveText: "确定",
              negativeText: "取消",
              onPositiveClick: () => {
                message.success("成功");
              },
              onNegativeClick: () => {},
            });
            break;
             case "start":
             dialog.info({
              title: "提示",
              content: `您想恢复第${row.id+1}项吗？`,
              positiveText: "确定",
              negativeText: "取消",
              onPositiveClick: () => {
                message.success("成功");
              },
              onNegativeClick: () => {},
            });
            break;
      }
    };
    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(state),
      checkedRowKeys: checkedRowKeysRef,
      pagination: paginationReactive,
      handleClick,
    };
  },
};
</script>

<style lang="less" soped>
.searchBox {
  margin-bottom: 20px;
}
</style>