<script setup lang="ts">
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { columns, querySchema } from './config-data';
//@ts-ignore
import type { VbenFormProps } from '@vben/common-ui';
import { queryrhistoryApilist } from '#/api/schedule/history/index';
import { DictEnum } from '@vben/constants';
import { getDictOptions } from '#/utils/dict';
import { useRouter } from 'vue-router';
const router = useRouter();

// 获取任务类型文本
const getTaskTypeText = (taskType: string | undefined) => {
  if (!taskType) return '';
  const taskTypeOptions = getDictOptions(DictEnum.TASK_TYPE);
  const option = taskTypeOptions.find((opt) => opt.value === taskType);
  return option?.label || '';
};

const formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      clearable: true,
    },
  },
  schema: querySchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
  // 日期选择格式化
  fieldMappingTime: [
    [
      'createTime',
      ['params[beginTime]', 'params[endTime]'],
      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
    ],
  ],
};
// 列表中显示配置
const gridOptions: VxeGridProps = {
  checkboxConfig: {
    // 高亮
    highlight: true,
    // 翻页时保留选中状态
    reserve: true,
    // 点击行选中
    trigger: 'default',
    checkMethod: ({ row }) => row?.roleId !== 1,
  },
  columns,
  size: 'medium',
  height: 'auto',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues = {}) => {
        const resp = await queryrhistoryApilist({
          ...formValues,
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          // taskStatus: '2',
        });
        return { items: resp.rows, total: resp.total };
      },
    },
  },
  rowConfig: {
    keyField: 'roleId',
  },
  toolbarConfig: {
    custom: true,
    refresh: true,
    zoom: true,
  },
  id: 'system-role-index',
};
const [BasicTable, BasicTableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});
const handleView = (taskId: any) => {
  router.push(`/schedule/detail/${taskId}`);
};
</script>
<template>
  <Page :auto-content-height="true">
    <BasicTable table-title="历史任务列表">
      <template #action="{ row }">
        <el-button
          size="small"
          type="primary"
          plain
          @click="handleView(row?.taskId)"
          >查看</el-button
        >
      </template>
      <template #isLicensable="{ row }">
        {{
          row?.isLicensable == '1' ? '是' : row?.isLicensable == '0' ? '否' : ''
        }}
      </template>
      <template #authStatus="{ row }">
        {{
          row?.isLicensable == '1' && row?.authStatus == '0'
            ? '可授权'
            : row?.authStatus == '0'
              ? '未授权'
              : row?.authStatus == '1'
                ? '已授权'
                : row?.authStatus == '2'
                  ? '被授权'
                  : ''
        }}
      </template>
      <template #taskType="{ row }">
        {{ getTaskTypeText(row.taskType) }}
      </template>
      <template #status="{ row }">
        {{
          row?.status == '0'
            ? '未开始取消'
            : row?.status == '1'
              ? '待处理'
              : row?.status == '2'
                ? '任务过期未完成'
                : row?.status == '3'
                  ? '任务已完成'
                  : ''
        }}
      </template>
    </BasicTable>
  </Page>
</template>
<style scoped lang="scss">
:deep(.el-tooltip__trigger:focus) {
  outline: none;
}
</style>
