<script setup lang="ts">
import type { VbenFormProps } from '@vben/common-ui';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { queryFormSchema, tableColumns } from './taskDetailReport-data';

const formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      allowClear: true,
    },
  },
  schema: queryFormSchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
};

// 模拟数据
const mockData = {
  rows: [
    {
      id: 1,
      department: '运营部',
      taskName: '日常巡检任务',
      validTime: '2024-06-01 00:00:00 - 2024-06-01 23:59:59',
      taskSource: '系统自动',
      departmentTaskName: '运营部日常巡检',
      taskSourcePerson: '系统',
      taskType: '日常巡检',
      taskPersonCount: 10,
      onTimeComplete: 8,
      overdueComplete: 1,
      expiredNotComplete: 1,
      cancelled: 0,
      completionRate: '90%',
      overdueRate: '10%',
    },
    {
      id: 2,
      department: '市场部',
      taskName: '市场调研任务',
      validTime: '2024-06-02 00:00:00 - 2024-06-05 23:59:59',
      taskSource: '人工分配',
      departmentTaskName: 'Q2市场调研',
      taskSourcePerson: '张三',
      taskType: '市场调研',
      taskPersonCount: 5,
      onTimeComplete: 3,
      overdueComplete: 1,
      expiredNotComplete: 0,
      cancelled: 1,
      completionRate: '80%',
      overdueRate: '20%',
    },
    {
      id: 3,
      department: '技术部',
      taskName: '系统维护任务',
      validTime: '2024-06-03 00:00:00 - 2024-06-03 08:00:00',
      taskSource: '系统自动',
      departmentTaskName: '月度系统维护',
      taskSourcePerson: '系统',
      taskType: '系统维护',
      taskPersonCount: 3,
      onTimeComplete: 3,
      overdueComplete: 0,
      expiredNotComplete: 0,
      cancelled: 0,
      completionRate: '100%',
      overdueRate: '0%',
    },
    {
      id: 4,
      department: '财务部',
      taskName: '财务报表任务',
      validTime: '2024-06-01 00:00:00 - 2024-06-03 23:59:59',
      taskSource: '人工分配',
      departmentTaskName: '5月财务报表',
      taskSourcePerson: '李四',
      taskType: '财务报表',
      taskPersonCount: 2,
      onTimeComplete: 1,
      overdueComplete: 1,
      expiredNotComplete: 0,
      cancelled: 0,
      completionRate: '100%',
      overdueRate: '50%',
    },
    {
      id: 5,
      department: '人力资源部',
      taskName: '员工培训任务',
      validTime: '2024-06-05 00:00:00 - 2024-06-10 23:59:59',
      taskSource: '用户提交',
      departmentTaskName: '新员工入职培训',
      taskSourcePerson: '王五',
      taskType: '员工培训',
      taskPersonCount: 8,
      onTimeComplete: 6,
      overdueComplete: 1,
      expiredNotComplete: 1,
      cancelled: 0,
      completionRate: '87.5%',
      overdueRate: '12.5%',
    },
    {
      id: 6,
      department: '运营部',
      taskName: '客户回访任务',
      validTime: '2024-06-02 00:00:00 - 2024-06-04 23:59:59',
      taskSource: '系统自动',
      departmentTaskName: 'VIP客户回访',
      taskSourcePerson: '系统',
      taskType: '客户回访',
      taskPersonCount: 15,
      onTimeComplete: 12,
      overdueComplete: 2,
      expiredNotComplete: 1,
      cancelled: 0,
      completionRate: '93.3%',
      overdueRate: '6.7%',
    },
    {
      id: 7,
      department: '市场部',
      taskName: '活动策划任务',
      validTime: '2024-06-01 00:00:00 - 2024-06-07 23:59:59',
      taskSource: '人工分配',
      departmentTaskName: '618活动策划',
      taskSourcePerson: '张三',
      taskType: '活动策划',
      taskPersonCount: 7,
      onTimeComplete: 5,
      overdueComplete: 1,
      expiredNotComplete: 1,
      cancelled: 0,
      completionRate: '85.7%',
      overdueRate: '14.3%',
    },
    {
      id: 8,
      department: '技术部',
      taskName: '功能开发任务',
      validTime: '2024-06-03 00:00:00 - 2024-06-10 23:59:59',
      taskSource: '人工分配',
      departmentTaskName: '新功能开发',
      taskSourcePerson: '管理员',
      taskType: '功能开发',
      taskPersonCount: 12,
      onTimeComplete: 8,
      overdueComplete: 2,
      expiredNotComplete: 1,
      cancelled: 1,
      completionRate: '83.3%',
      overdueRate: '16.7%',
    },
  ],
  total: 8,
};

const gridOptions: VxeGridProps = {
  checkboxConfig: {
    highlight: true,
    reserve: true,
    trigger: 'default',
  },
  columns: tableColumns,
  size: 'medium',
  height: 'auto',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues = {}) => {
        // 模拟数据过滤和分页
        let filteredRows = [...mockData.rows];

        // 根据搜索条件过滤
        if (formValues.department) {
          filteredRows = filteredRows.filter(row => row.department === formValues.department);
        }
        if (formValues.taskName) {
          filteredRows = filteredRows.filter(row => row.taskName.includes(formValues.taskName));
        }
        if (formValues.validTime && formValues.validTime.length === 2) {
          const [startTime, endTime] = formValues.validTime;
          // 这里简化处理，实际应该根据具体的时间格式进行解析和比较
          filteredRows = filteredRows.filter(
            row => row.validTime.includes(startTime.split(' ')[0]) || row.validTime.includes(endTime.split(' ')[0])
          );
        }
        if (formValues.taskSource) {
          filteredRows = filteredRows.filter(row => row.taskSource === formValues.taskSource);
        }
        if (formValues.departmentTaskName) {
          filteredRows = filteredRows.filter(row => row.departmentTaskName.includes(formValues.departmentTaskName));
        }
        if (formValues.taskSourcePerson) {
          filteredRows = filteredRows.filter(row => row.taskSourcePerson === formValues.taskSourcePerson);
        }

        // 模拟分页
        const start = (page.currentPage - 1) * page.pageSize;
        const end = start + page.pageSize;
        const paginatedRows = filteredRows.slice(start, end);
        return {
          items: paginatedRows,
          total: filteredRows.length,
        };
      },
    },
  },
  rowConfig: {
    keyField: 'id',
  },
  toolbarConfig: {
    custom: true,
    refresh: true,
    zoom: true,
    buttons: [
      {
        code: 'query',
        name: '查询',
        icon: 'Search',
        status: 'primary',
      },
      {
        code: 'reset',
        name: '重置',
        icon: 'Refresh',
      },
    ],
    onClick: (code: string) => {
      if (code === 'query') {
        // 执行查询操作
        basicTableApi.refresh();
      } else if (code === 'reset') {
        // 执行重置操作
        basicTableApi.resetForm();
      }
    },
  },
  id: 'system-checklis-visitorCheckTask-index',
};

const [BasicTable, basicTableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

// 查看任务详情的功能已移除，因为表格中不再需要操作按钮

// 导出数据
function handleExport() {
  // 这里可以添加实际的导出逻辑
  console.log('导出数据');
}


</script>

<template>
  <Page :auto-content-height="true">
    <BasicTable table-title="任务明细报表">
      <template #toolbar-actions>
        <div class="text-sm text-gray-600 bg-gray-50 p-2 rounded-md ml-2">
          每天更新一次昨天的数据
        </div>
      </template>
      <template #toolbar-tools>
        <ElSpace>
          <ElButton
            @click="handleExport"
            v-access:code="['system:taskScoringRecord:export']"
          >
            导出
          </ElButton>
        </ElSpace>
      </template>
    </BasicTable>
  </Page>
</template>

<style scoped lang="scss">
:deep(.el-tooltip__trigger:focus) {
  outline: none;
}
</style>
