<template>
  <div class="plan-container">
    <h2>计划管理</h2>
    <a-table
      :columns="columns"
      :data-source="planData"
      :pagination="false"
      :loading="loading"
      :row-key="record => record.planId"
    >
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.status)">
          {{ statusMap[record.status] || record.status }}
        </a-tag>
      </template>
      <template #createdAt="{ record }">
        {{ formatDate(record.createdAt) }}
      </template>
    </a-table>
    <div class="pagination-wrapper">
      <a-pagination
        v-model:current="pagination.current"
        v-model:pageSize="pagination.pageSize"
        :total="pagination.total"
        :show-size-changer="true"
        :page-size-options="['10', '20', '50', '100']"
        @change="handlePageChange"
        @showSizeChange="handlePageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import dayjs from 'dayjs';
import { Tag } from 'ant-design-vue';
import { apiRequestGet } from '@/utils/api';

export default {
  name: 'PlanManagement',
  setup() {
    // 表格列定义
    const columns = [
      {
        title: '计划ID',
        dataIndex: 'planId',
        key: 'planId',
        width: 100,
      },
      {
        title: '区域',
        dataIndex: 'area',
        key: 'area',
        width: 150,
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        slots: { customRender: 'status' },
        width: 120,
      },
      {
        title: '创建时间',
        dataIndex: 'createdAt',
        key: 'createdAt',
        slots: { customRender: 'createdAt' },
        width: 150,
      },
    ];

    // 计划数据和加载状态
    const planData = ref([]);
    const loading = ref(false);

    // 分页参数
    const pagination = ref({
      current: 1,
      pageSize: 10,
      total: 0,
    });

    // 状态映射和颜色
    const statusMap = {
      COMPLETED: '已完成',
      CANCELLED: '已取消',
      SCHEDULED: '已计划',
    };

    const getStatusColor = (status) => {
      switch (status) {
        case 'COMPLETED':
          return 'green';
        case 'CANCELLED':
          return 'red';
        case 'SCHEDULED':
          return 'blue';
        default:
          return 'default';
      }
    };

    // 日期格式化
    const formatDate = (date) => {
      return date ? dayjs(date).format('YYYY-MM-DD HH:mm:ss') : '-';
    };

    // 获取计划数据
    const fetchPlanData = async () => {
      loading.value = true;
      try {
        // 模拟分页参数传递给后端
        const response = await apiRequestGet("/inspection-plans/employee/my-plan")

        if (response.data.success) {
          planData.value = response.data.data;
          // 假设后端返回总记录数，这里模拟数据，实际应从响应中获取
          pagination.value.total = 50; // 实际项目中改为 response.data.total 或类似字段
        } else {
          console.error('获取计划数据失败:', response.data.errorMsg);
        }
      } catch (error) {
        console.error('请求失败:', error);
      } finally {
        loading.value = false;
      }
    };

    // 页码变化处理
    const handlePageChange = (page) => {
      pagination.value.current = page;
      fetchPlanData();
    };

    // 每页数量变化处理
    const handlePageSizeChange = (current, size) => {
      pagination.value.pageSize = size;
      pagination.value.current = 1; // 改变每页数量时重置到第一页
      fetchPlanData();
    };

    // 组件挂载时加载数据
    onMounted(() => {
      fetchPlanData();
    });

    return {
      columns,
      planData,
      loading,
      pagination,
      statusMap,
      getStatusColor,
      formatDate,
      handlePageChange,
      handlePageSizeChange,
    };
  },
};
</script>

<style scoped>
.plan-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-bottom: 20px;
  font-size: 20px;
  color: #333;
}

.pagination-wrapper {
  margin-top: 16px;
  text-align: right;
}
</style>