<template>
  <base-dialog
    v-model:visible="props.visible"
    title="巡查情况"
    :table-data="tableData"
    :table-columns="tableColumns"
    :table-height="tableHeight"
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @close="handleClose"
  />
</template>

<script setup>
import { ref, watch } from 'vue';
import BaseDialog from '../component/baseDialog.vue';
import { request } from '@/utils/request';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['update:visible', 'close']);

// 表格高度
const tableHeight = ref(350);

// 表格列配置 - 不设置宽度，由数据自动控制
const tableColumns = ref([
  { prop: 'id', label: '序号' },
  { prop: 'type', label: '类型' },
  { prop: 'nationalRoad', label: '国省道' },
  { prop: 'ruralRoad', label: '农村公路' },
  { prop: 'total', label: '总数' },
]);

// 表格数据
const tableData = ref([]);

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false);
  emit('close');
};

// 分页操作
const handleSizeChange = val => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = val => {
  currentPage.value = val;
  fetchData();
};

// 获取数据
const fetchData = async () => {
  try {
    const res = await request({
      url: '/snow-ops-platform/patrol/situation-list',
      method: 'GET',
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
      },
    });

    if (res.code === '00000' && res.data) {
      const data = res.data;
      tableData.value = data.records.map((item, index) => {
        return {
          id: currentPage.value * pageSize.value - (pageSize.value - index - 1),
          type: item.type || '-',
          nationalRoad: item.nationalRoadNo || item.nationalRoad || '-',
          ruralRoad: item.ruralRoadValue || item.ruralRoad || '-',
          total: item.totalValue ? `${item.totalValue}公里` : item.total || '-',
        };
      });
      total.value = data.total;
    }
  } catch (error) {
    console.error('获取巡查情况数据失败:', error);
  }
};

// 监听visible变化
watch(
  () => props.visible,
  newVal => {
    if (newVal) {
      currentPage.value = 1;
      fetchData();
    }
  }
);
</script>

<style lang="scss" scoped>
// 组件样式
</style>
