<template>
  <div class="part-box is-filter">
    <a-space class="filter-line" :size="12" wrap>
      <a-input v-model.trim="searchModel.name" placeholder="请输入" allow-clear>
        <template #prefix>任务名称</template>
      </a-input>
      <a-button type="primary" @click="toPage(1)">查询</a-button>
    </a-space>
  </div>
  <div class="part-box">
    <a-space class="part-action" :size="6">
      <a-button type="text" @click="toAdd">
        <template #icon>
          <svg-icon name="icon-add"></svg-icon>
        </template>
        新增
      </a-button>
    </a-space>
    <a-table
      :columns="columns"
      :data="dataList"
      :pagination="pagination"
      :scroll="{ x: 1200 }"
      :bordered="false"
    >
      <template #enable="{ record }">
        <status-tag type="enable" :value="record.enable" />
      </template>
      <template #selfApplyStartTime="{ record }">
        {{ timestampFilter(record.selfApplyStartTime) }}
      </template>
      <template #openApplyStartTime="{ record }">
        {{ timestampFilter(record.openApplyStartTime) }}
      </template>
      <template #updateTime="{ record }">
        {{ timestampFilter(record.updateTime) }}
      </template>
      <template #action="{ record }">
        <a-button type="text" class="btn-primary" @click="toEdit(record)"
          >编辑</a-button
        >
        <a-button
          :class="record.enable ? 'btn-danger' : 'btn-primary'"
          type="text"
          @click="toEnable(record)"
          >{{ record.enable ? '禁用' : '启用' }}</a-button
        >
      </template>
    </a-table>
  </div>

  <!-- modifyTask -->
  <modify-task
    ref="modifyTaskRef"
    :row-data="curRow"
    @modified="getList"
  ></modify-task>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { Message, TableColumnData } from '@arco-design/web-vue';
  import { ableTask, taskListPage } from '@/api/order';
  import { TaskItem } from '@/api/types/order';
  import useTable from '@/hooks/table';
  import { timestampFilter } from '@/utils/filter';
  import { modalConfirm } from '@/utils/arco';
  import { useAppStore } from '@/store';

  import modifyTask from './modifyTask.vue';

  defineOptions({
    name: 'TaskManage',
  });
  const appStore = useAppStore();
  appStore.setInfo({ breadcrumbs: ['考试预约管理', '预约任务列表'] });

  const searchModel = reactive({
    name: '',
  });

  const columns: TableColumnData[] = [
    {
      title: '任务ID',
      dataIndex: 'id',
      width: 80,
    },
    {
      title: '任务名称',
      dataIndex: 'name',
    },
    {
      title: '开启预约时间',
      slotName: 'selfApplyStartTime',
      width: 170,
    },
    {
      title: '自由预约时间',
      slotName: 'openApplyStartTime',
      width: 170,
    },
    {
      title: '任务状态',
      slotName: 'enable',
      width: 100,
    },
    {
      title: '更新时间',
      slotName: 'updateTime',
    },
    {
      title: '操作',
      slotName: 'action',
      width: 120,
      fixed: 'right',
      cellClass: 'action-column',
    },
  ];
  const { dataList, pagination, toPage, getList } = useTable<TaskItem>(
    taskListPage,
    searchModel,
    true
  );

  // table action
  const modifyTaskRef = ref();
  const curRow = ref({} as TaskItem);
  function toAdd() {
    curRow.value = {} as TaskItem;
    modifyTaskRef.value?.open();
  }
  function toEdit(row: TaskItem) {
    curRow.value = row;
    modifyTaskRef.value?.open();
  }

  async function toEnable(row: TaskItem) {
    const action = row.enable ? '禁用' : '启用';
    const confirmRes = await modalConfirm(
      '提示',
      `确定要${action}任务【${row.name}】吗?`
    ).catch(() => false);
    if (confirmRes !== 'confirm') return;

    await ableTask({ id: row.id, enable: !row.enable });
    Message.success('操作成功！');
    getList();
  }
</script>
