<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    width="80vw"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" style="margin-top: 32px" :rules="rules">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="计划编号" name="code">
            <a-input v-model:value="form.code" :disabled="isViewMode" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="计划名称" name="name">
            <a-input v-model:value="form.name" :disabled="isViewMode" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="开始时间" name="startTime">
            <a-date-picker
              v-model:value="form.startTime"
              :disabled="isViewMode"
              placeholder="请选择"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="结束时间" name="endTime">
            <a-date-picker
              v-model:value="form.endTime"
              :disabled="isViewMode"
              placeholder="请选择"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="计划状态" name="status">
            <a-select
              v-model:value="form.status"
              :disabled="isViewMode"
              placeholder="请选择"
              :options="[
                {label:'未开始',value:'NOT_START'},
                {label:'进行中',value:'UNDERWAY'},
                {label:'已完成',value:'FINISH'},
                {label:'停用',value:'STOP'},
                ]"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="计划备注" name="remark">
            <a-textarea
              v-model:value="form.remark"
              :disabled="isViewMode"
            >
            </a-textarea>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="巡检明细" 
      name="tkCheckDetailsDTOList"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 19 }"
      >
        <div style="text-align: end">
          <a-button class="editable-add-btn" type="primary" @click="handleAdd" style="margin-bottom: 8px" :disabled="isViewMode">
            <template #icon>
              <PlusOutlined/>
            </template>
            新增
          </a-button>
          <a-table bordered :data-source="tableData" :columns="columns">
            <template #code="{ text, record, index }">
              <div>
                <a-input v-model:value="record.code" :disabled="isViewMode"/>
              </div>
            </template>
            <template #checkDeviceId="{ text, record, index }">
              <div>
                <template v-if="userStore.isTargetTenant">
                  <div style="display: flex; gap: 8px">
                    <a-input :value="getDeviceLabel(record)" :disabled="true" placeholder="请选择" />
                    <a-button type="primary" @click="goChooseDevice(record)" :disabled="isViewMode">
                      选设备
                    </a-button>
                  </div>
                </template>
                <template v-else>
                  <a-select
                    v-model:value="record.checkDeviceId"
                    :options="Options"
                    :disabled="isViewMode"
                    :field-names="{ label: 'name', value: 'id' }"
                    placeholder="请选择"
                  />
                </template>
              </div>
            </template>
            <template #checkPlanId="{ text, record, index }">
              <div>
                <a-select
                  v-model:value="record.checkPlanId"
                  :options="planOptions"
                  :disabled="isViewMode"
                  :fieldNames="{ label: 'name', value: 'id' }"
                  placeholder="请选择"
                />
              </div>
            </template>
            <template #planDetails="{ text, record, index }">
              <div>
                <a-textarea v-model:value="record.planDetails"  :disabled="isViewMode"/>
              </div>
            </template>
            <template #operation="{ text, record, index }">
              <div>
                <a-button type="link" @click="handleDelete(index)" :disabled="isViewMode">删除</a-button>
              </div>
            </template>
          </a-table>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal
    v-model:visible="deviceVisible"
    title="选择设备"
    width="70vw"
    height="60vh"
    @ok="handleDeviceOk"
    @cancel="handleDeviceCancel"
  >
    <div style="padding: 20px">
      <div style="display: flex; gap: 12px; margin-bottom: 12px">
        <a-input
          v-model:value="deviceSearchInfo.code"
          placeholder="设备位号"
          allowClear
          style="width: 240px"
        />
        <a-input
          v-model:value="deviceSearchInfo.name"
          placeholder="设备名称"
          allowClear
          style="width: 240px"
        />
        <a-button type="primary" @click="handleDeviceSearch">搜索</a-button>
        <a-button @click="handleDeviceReset">重置</a-button>
      </div>
      <BasicTable @register="registerDeviceTable" />
    </div>
  </a-modal>
</template>
<script setup lang="ts">
// 定义 props
import {onMounted, ref, watch, reactive} from "vue";
import {getLedgerList} from "/@/api/equipment/ledger";
import {getPlanList} from "/@/api/equipment/chenkPlan";
import { useUserStore } from '/@/store/modules/user';
import { BasicTable, useTable } from '/@/components/Table';
const Options = ref([]);
const planOptions = ref([]);
const userStore = useUserStore();
const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({
      form: {
        code: '',
        name: '',
        status: '',
        enabled: '',
        startTime: '',
        endTime: '',
        remark: '',
      },
      tableData: [],
    }),
  },
  visible: {
    type: Boolean,
    default: false,
  },
  isViewMode: {
    type: Boolean,
    default: false,
  },
  modalTitle: {
    type: String,
    default: '',
  },
});

const columns = [
  {
    title: '明细编号',
    dataIndex: 'code',
    slots: { customRender: 'code' },
    width: '160px'
  },
  {
    title: '巡检设备',
    dataIndex: 'checkDeviceId',
    slots: { customRender: 'checkDeviceId' },
    width: '180px'
  },
  {
    title: '巡检方案',
    dataIndex: 'checkPlanId',
    slots: { customRender: 'checkPlanId' },
    width: '180px'
  },
  {
    title: '方案明细',
    dataIndex: 'planDetails',
    slots: { customRender: 'planDetails' },
    width: '160px'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    slots: { customRender: 'operation' },
    width: '120px'
  }
];
const rules = {
  code: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  remark: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  status: [{ required: true, message: '请选择', trigger: 'change' }],
};
const visible = ref(props.visible);
const isViewMode = ref(props.isViewMode);
const modalTitle = ref(props.modalTitle);
const form = ref({ ...props.initialData.form });
const tableData = ref([...props.initialData.tableData]);
const emit = defineEmits(['update:visible', 'submit']);
const deviceVisible = ref(false);
const deviceSearchInfo = reactive<Recordable>({ code: '', name: '' });
const selectedDevice = ref<any>(null);
const activeDeviceRecord = ref<any>(null);

const [registerDeviceTable, { reload: reloadDeviceTable }] = useTable({
  api: getLedgerList,
  columns: [
    { title: '设备位号', dataIndex: 'code', width: 160 },
    { title: '设备名称', dataIndex: 'name', width: 240 },
  ],
  searchInfo: deviceSearchInfo,
  useSearchForm: false,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  clickToRowSelect: false,
  rowKey: 'id',
  pagination: { pageSize: 10 },
  rowSelection: {
    type: 'radio',
    onSelect: (record) => {
      selectedDevice.value = record;
    },
    onSelectAll: () => {},
  },
});
// 监听 visible 的变化
watch(
  () => props.visible,
  (newVal) => {
    visible.value = newVal;
  }
);

watch(
  () => props.isViewMode,
  (newVal) => {
    isViewMode.value = newVal;
  }
);

// 监听 visible 的变化并通知父组件
watch(
  () => visible.value,
  (newVal) => {
    emit('update:visible', newVal);
  }
);

// 监听 initialData 的变化
watch(
  () => props.initialData,
  (newVal) => {
    form.value = { ...newVal.form };
    tableData.value = [...newVal.tableData];
  },
  { deep: true }
);


onMounted(() => {
  fetchAgeOptions();
});

const fetchAgeOptions = async () => {
  try {
    const response = await getLedgerList({ page: 1, pageSize: 999 }); // 调用接口
    const response1 = await getPlanList({ page: 1, pageSize: 999, type: 'INSPECTION' }); // 调用接口
    Options.value = response.items || [];
    planOptions.value = response1.items || [];
  } catch (error) {
    console.error('失败:', error);
  }
};

const getDeviceLabel = (record: any) => {
  const code = record?.deviceCode;
  const name = record?.deviceName;
  if (code && name) return `${code} / ${name}`;
  return name || code || '';
};

const goChooseDevice = (record: any) => {
  activeDeviceRecord.value = record;
  selectedDevice.value = null;
  deviceVisible.value = true;
  reloadDeviceTable();
};

const handleDeviceSearch = () => {
  reloadDeviceTable();
};

const handleDeviceReset = () => {
  deviceSearchInfo.code = '';
  deviceSearchInfo.name = '';
  reloadDeviceTable();
};

const handleDeviceOk = () => {
  if (!selectedDevice.value?.id || !activeDeviceRecord.value) {
    deviceVisible.value = false;
    return;
  }
  activeDeviceRecord.value.checkDeviceId = selectedDevice.value.id;
  activeDeviceRecord.value.deviceCode = selectedDevice.value.code;
  activeDeviceRecord.value.deviceName = selectedDevice.value.name;
  deviceVisible.value = false;
};

const handleDeviceCancel = () => {
  deviceVisible.value = false;
};
const handleAdd = () => {
  tableData.value.push({
    code: '',
    checkDeviceId: undefined,
    checkPlanId: undefined,
    planDetails: '',
  });
};

const handleDelete = (index) => {
  tableData.value.splice(index, 1);
};

const handleOk = () => {
  if (isViewMode.value) {
    visible.value = false;
    return;
  }
  const objData = { ...form.value, tkCheckDetailsDTOList: tableData.value };
  emit('submit', objData); // 将数据提交给父组件
  resetForm();
}

const handleCancel = () => {
  resetForm();
  visible.value = false;
};
// 清空表单和表格数据
const resetForm = () => {
  form.value = {
    code: '',
    name: '',
    status: '',
    enabled: '',
    startTime: '',
    endTime: '',
    remark: '',
  };
  tableData.value = [];
  isViewMode.value = false;
};
</script>