<!-- 列表选择器 -->
<template>
    <table-select
      :text="text"
      :select-config="selectConfig"
      @confirm-click="handleConfirm"
      @clear-click="handleClearSelection"
    >
      <template #status="scope">
        <el-tag :type="scope.row[scope.prop] === '0' ? 'success' : 'danger'">
          {{ scope.row[scope.prop] === "0" ? "启用" : "停用" }}
        </el-tag>
      </template>
    </table-select>
  </template>
  
  <script setup lang="ts">
  import type { ISelectConfig } from "@/components/TableSelect/index.vue";
  import UserAPI from "@/api/module_business/crane";
  
  // 父组件双向绑定的值（选中行车ID）
  const props = defineProps<{ modelValue?: number }>();
  
  // 事件向上派发，支持父组件监听和 v-model（仅回传选中行车ID）
  const emit = defineEmits<{
    confirmClick: [data: ICrane[]];
    "update:modelValue": [val: number | undefined];
  }>();
  
  const selectConfig: ISelectConfig = {
    pk: "id",
    width: "167.5px", // 与搜索表单其他输入宽度一致
    placeholder: "请选择行车",
    popover: {
      width: 720, // 弹出层宽度，提升可用性（约 720px）
    },
    formItems: [
      {
        type: "select",
        label: "状态",
        prop: "status",
        initialValue: "0",
        attrs: {
          placeholder: "全部",
          clearable: true,
          style: {
            width: "140px",
          },
        },
        options: [
          { label: "启用", value: "0" },
          { label: "停用", value: "1" },
        ],
      },
    ],
    indexAction(params) {
      // 映射查询参数到后端接口
      const query: any = { ...params };
      // 清理空字符串/空值，避免后端 422
      Object.keys(query).forEach((k) => {
        const v = query[k];
        if (v === "" || v === null || v === undefined) {
          delete query[k];
        }
      });
      // 规范化状态为布尔值
      if (typeof query.status === "string") {
        if (query.status === "true") query.status = true;
        else if (query.status === "false") query.status = false;
      }
      // 请求用户分页列表并适配 TableSelect 需要的结构
      return UserAPI.listBizCrane(query).then((res: any) => {
        return {
          total: res.data.data.total,
          list: res.data.data.items,
        };
      });
    },
    tableColumns: [
      { type: "selection", width: 50, align: "center" },
      { label: "编号", align: "center", prop: "id", width: 100 },
      { label: "行车名称", align: "center", prop: "crane_name" },
      { label: "行车类型", align: "center", prop: "crane_model", width: 120 },
      {
        label: "状态",
        align: "center",
        prop: "status",
        templet: "custom",
        slotName: "status",
      },
    ],
  };
  
  interface ICrane {
    id: number;
    crane_name: string;
    crane_model?: string;
  }
  const selectedCrane = ref<ICrane>();
  function handleConfirm(data: ICrane[]) {
    selectedCrane.value = data[0];
    const id = selectedCrane.value?.id;
    emit("update:modelValue", id);
    emit("confirmClick", data);
  }
  function handleClearSelection() {
    selectedCrane.value = undefined;
    emit("update:modelValue", undefined);
  }
  
  // 当父组件重置 v-model（modelValue）为 undefined 时，清空本地显示
  watch(
    () => props.modelValue,
    (val) => {
      if (val === undefined || val === null) {
        selectedCrane.value = undefined;
      }
    }
  );
  
  const text = computed(() => {
    return selectedCrane.value ? `${selectedCrane.value.crane_name} - ${selectedCrane.value.crane_model}` : "";
  });
  </script>
  