<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="关联报废车"
    width="800px"
    :footer="null"
    :loading="loading"
    zIndex="9999"
  >
    <div v-if="loading" class="empty-text">加载中...</div>
    <div v-else-if="bfcList.length === 0" class="empty-text">暂无关联报废车</div>
    <a-table
      v-else
      :data-source="bfcList"
      :columns="columns"
      :pagination="false"
      row-key="plate_number"
      bordered
    />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getBfcListByids } from '/@/api/ckgl/bfccgrk';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { notification } = useMessage();

  const bfcList = ref<any[]>([]);
  const loading = ref(false);

  const columns = [
    { title: '车牌号', dataIndex: 'plate_number', key: 'plate_number' },
    { title: '批次号', dataIndex: 'batch_no', key: 'batch_no' },
    { title: '车辆类型', dataIndex: 'vehicle_type', key: 'vehicle_type' },
    { title: '品牌型号', dataIndex: 'brand_model', key: 'brand_model' },
    { title: '重量(kg)', dataIndex: 'weight_kg', key: 'weight_kg' },
    { title: '创建日期', dataIndex: 'create_date', key: 'create_date' },
  ];

  const [registerModal] = useModalInner(async (data) => {
    const { bfcIds } = data;
    if (!bfcIds) {
      bfcList.value = [];
      return;
    }

    loading.value = true;
    try {
      const res = await getBfcListByids(bfcIds);
      console.log(res);
      // 直接使用 res，因为后端返回的就是数组
      bfcList.value = Array.isArray(res) ? res : [];
    } catch (error) {
      notification.error({ message: '请求失败', description: (error as Error).message });
      bfcList.value = [];
    } finally {
      loading.value = false;
    }
  });
</script>

<style scoped>
  .empty-text {
    text-align: center;
    padding: 40px 0;
    color: #999;
  }
</style>
