<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">
        <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>
                <a-select
                  v-model:value="record.checkDeviceId"
                  :options="Options"
                  :disabled="isViewMode"
                  :field-names="{ label: 'name', value: 'id' }"
                  placeholder="请选择"
                />
              </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>
</template>
<script setup lang="ts">
// 定义 props
import {onMounted, ref, watch} from "vue";
import {getLedgerList} from "/@/api/equipment/ledger";
import {getPlanList} from "/@/api/equipment/chenkPlan";
const Options = ref([]);
const planOptions = ref([]);
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']);
// 监听 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?.map((item: any) => {
      return {
        value: item?.id,
        label: item?.name
      }
    })
    planOptions.value = response1.items?.map((item: any) => {
      return {
        value: item?.id,
        label: item?.name
      }
    });
  } catch (error) {
    console.error('失败:', error);
  }
};
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>