<template>
  <BasicModal v-bind="$attrs" :title="modalTitle" :width="1100" @register="registerModal" @ok="handleOk">
    <BasicTable @register="registerTable" />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { list } from '/@/views/xslmes/mesXslInspectMaintainItem/MesXslInspectMaintainItem.api';

  const emit = defineEmits(['register', 'select']);

  const multipleMode = ref(true);
  const filterItemCategory = ref('');
  const selectedRows = ref<Recordable[]>([]);

  const modalTitle = computed(() => (multipleMode.value ? '选择点检及保养项目（可多选）' : '选择点检及保养项目'));

  function handleSelectionChange(_keys: string[], rows: Recordable[]) {
    selectedRows.value = rows || [];
  }

  function fetchItemPage(params: Recordable) {
    const p = { ...params };
    if (filterItemCategory.value) {
      p.itemCategory = filterItemCategory.value;
    }
    return list(p);
  }

  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
    api: fetchItemPage,
    columns: [
      { title: '项目编号', dataIndex: 'itemCode', width: 120 },
      { title: '项目名称', dataIndex: 'itemName', width: 140 },
      { title: '项目类别', dataIndex: 'itemCategory_dictText', width: 90 },
      { title: '项目类型', dataIndex: 'itemType_dictText', width: 90 },
      { title: '设备部位', dataIndex: 'equipmentPartName', width: 110 },
      { title: '设备小部位', dataIndex: 'equipmentSubPartName', width: 110 },
      { title: '点检方式', dataIndex: 'inspectMethod_dictText', width: 90 },
      { title: '判断基准', dataIndex: 'judgmentCriteria', width: 160, ellipsis: true },
    ],
    rowKey: 'id',
    useSearchForm: true,
    formConfig: {
      labelWidth: 90,
      schemas: [
        { label: '项目编号', field: 'itemCode', component: 'Input', colProps: { span: 8 } },
        { label: '项目名称', field: 'itemName', component: 'Input', colProps: { span: 8 } },
      ],
    },
    pagination: { pageSize: 10 },
    canResize: false,
    showIndexColumn: false,
    immediate: true,
    rowSelection: {
      type: 'checkbox',
      columnWidth: 48,
      onChange: handleSelectionChange,
    },
    clickToRowSelect: true,
  });

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    multipleMode.value = data?.multiple !== false;
    filterItemCategory.value = data?.itemCategory ? String(data.itemCategory) : '';
    selectedRows.value = [];
    clearSelectedRowKeys?.();
    setModalProps({ confirmLoading: false });
    reload();
  });

  async function handleOk() {
    let rows = selectedRows.value?.length ? [...selectedRows.value] : ((getSelectRows?.() || []) as Recordable[]);
    const valid = rows.filter((r) => r?.id && (r.itemCode != null || r.itemName != null));
    if (!valid.length) {
      closeModal();
      return;
    }
    if (multipleMode.value) {
      emit('select', valid);
    } else {
      emit('select', valid[0]);
    }
    closeModal();
  }
</script>
