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

const route = useRoute();

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,
      scoredPerson: '张三',
      scoredPersonPosition: '营业员',
      station: '油站1',
      name: '访客检查任务1',
      scorer: '李四',
      scorerPosition: '站长',
      score: 95,
      comment: '表现优秀，工作认真负责',
      scoringTime: '2024-05-01',
      intervalDays: 5,
    },
    {
      id: 2,
      scoredPerson: '王五',
      scoredPersonPosition: '安全员',
      station: '油站2',
      name: '安全检查任务1',
      scorer: '赵六',
      scorerPosition: '主管',
      score: 88,
      comment: '安全意识强，但细节处理需要加强',
      scoringTime: '2024-05-02',
      intervalDays: 3,
    },
    {
      id: 3,
      scoredPerson: '孙七',
      scoredPersonPosition: '站长',
      station: '油站3',
      name: '管理检查任务1',
      scorer: '周八',
      scorerPosition: '区域经理',
      score: 92,
      comment: '管理能力出色，团队协作良好',
      scoringTime: '2024-05-03',
      intervalDays: 7,
    },
    {
      id: 4,
      scoredPerson: '吴九',
      scoredPersonPosition: '营业员',
      station: '油站1',
      name: '服务检查任务1',
      scorer: '郑十',
      scorerPosition: '主管',
      score: 90,
      comment: '服务态度好，客户满意度高',
      scoringTime: '2024-05-04',
      intervalDays: 2,
    },
    {
      id: 5,
      scoredPerson: '张三',
      scoredPersonPosition: '营业员',
      station: '油站2',
      name: '访客检查任务2',
      scorer: '李四',
      scorerPosition: '站长',
      score: 93,
      comment: '进步明显，继续保持',
      scoringTime: '2024-05-05',
      intervalDays: 4,
    },
    {
      id: 6,
      scoredPerson: '王五',
      scoredPersonPosition: '安全员',
      station: '油站3',
      name: '安全检查任务2',
      scorer: '赵六',
      scorerPosition: '主管',
      score: 85,
      comment: '需要加强安全培训',
      scoringTime: '2024-05-06',
      intervalDays: 6,
    },
    {
      id: 7,
      scoredPerson: '孙七',
      scoredPersonPosition: '站长',
      station: '油站4',
      name: '管理检查任务2',
      scorer: '周八',
      scorerPosition: '区域经理',
      score: 96,
      comment: '管理有方，业绩突出',
      scoringTime: '2024-05-07',
      intervalDays: 1,
    },
    {
      id: 8,
      scoredPerson: '吴九',
      scoredPersonPosition: '营业员',
      station: '油站5',
      name: '服务检查任务2',
      scorer: '郑十',
      scorerPosition: '主管',
      score: 89,
      comment: '服务质量良好，需提升效率',
      scoringTime: '2024-05-08',
      intervalDays: 3,
    },
  ],
  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.station) {
          filteredRows = filteredRows.filter(row => row.station === formValues.station);
        }
        if (formValues.name) {
          filteredRows = filteredRows.filter(row => row.name.includes(formValues.name));
        }
        if (formValues.scoringTime && formValues.scoringTime.length === 2) {
          const [startTime, endTime] = formValues.scoringTime;
          filteredRows = filteredRows.filter(
            row => row.scoringTime >= startTime && row.scoringTime <= endTime
          );
        }
        if (formValues.scorer) {
          filteredRows = filteredRows.filter(row => row.scorer.includes(formValues.scorer));
        }
        if (formValues.scorerPosition) {
          filteredRows = filteredRows.filter(row => row.scorerPosition === formValues.scorerPosition);
        }
        if (formValues.scoredPerson) {
          filteredRows = filteredRows.filter(row => row.scoredPerson.includes(formValues.scoredPerson));
        }
        if (formValues.scoredPersonPosition) {
          filteredRows = filteredRows.filter(row => row.scoredPersonPosition === formValues.scoredPersonPosition);
        }
        if (formValues.intervalDaysMin !== undefined) {
          filteredRows = filteredRows.filter(row => row.intervalDays >= formValues.intervalDaysMin);
        }
        if (formValues.intervalDaysMax !== undefined) {
          filteredRows = filteredRows.filter(row => row.intervalDays <= formValues.intervalDaysMax);
        }
        if (formValues.scoreMin !== undefined) {
          filteredRows = filteredRows.filter(row => row.score >= formValues.scoreMin);
        }
        if (formValues.scoreMax !== undefined) {
          filteredRows = filteredRows.filter(row => row.score <= formValues.scoreMax);
        }

        // 模拟分页
        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',
  },
  id: 'system-checklis-visitorCheckTask-index',
};

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

// 查看任务详情
function handleView(row: any) {
  console.log('查看详情:', row);
}

// 导出数据
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>
