<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="preserveCode">
            <a-input v-model:value="form.preserveCode" :disabled="isViewMode" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="计划名称" name="preserveName">
            <a-input v-model:value="form.preserveName" :disabled="isViewMode" />
          </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"
              :options="statusOptions"
              :disabled="isViewMode"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="次数" name="times">
            <a-input v-model:value="form.times" :disabled="isViewMode" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="频率" name="frequency">
            <a-input v-model:value="form.frequency" :disabled="isViewMode" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="保养明细" name="preserveDetailList">
        <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>
        </div>
        <a-table bordered :data-source="tableData" :columns="columns">
          <template #detailCode="{ text, record, index }">
            <div>
              <a-input v-model:value="record.detailCode" :disabled="isViewMode"/>
            </div>
          </template>
          <template #deviceId="{ text, record, index }">
            <div>
              <a-select
                v-model:value="record.deviceId"
                :options="Options"
                :disabled="isViewMode"
                :field-names="{ label: 'name', value: 'id' }"
                placeholder="请选择"
              />
            </div>
          </template>
          <template #checkPlanId="{ record }">
            <div>
              <a-select
                v-model:value="record.checkPlanId"
                :options="planOptions"
                :disabled="isViewMode"
                :fieldNames="{ label: 'name', value: 'id' }"
                placeholder="请选择"
              />
            </div>
          </template>
          <template #preserveDetail="{ record }">
            <div>
              <a-textarea v-model:value="record.preserveDetail"  :disabled="isViewMode"/>
            </div>
          </template>
          <template #operation="{ index }">
            <div>
              <a-button type="link" @click="handleDelete(index)" :disabled="isViewMode">删除</a-button>
            </div>
          </template>
        </a-table>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, onMounted, watch  } from 'vue';
import { getLedgerList } from "/@/api/equipment/ledger";
import { getPlanList } from "/@/api/equipment/chenkPlan";
import { useI18n } from "/@/hooks/web/useI18n";

const Options = ref([]);
const planOptions = ref([]);
const { t } = useI18n();
// 定义 props
const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({
      form: {
        preserveCode: '',
        preserveName: '',
        status: '',
        times: '',
        frequency: '',
      },
      tableData: [],
    }),
  },
  visible: {
    type: Boolean,
    default: false,
  },
  isViewMode: {
    type: Boolean,
    default: false,
  },
  modalTitle: {
    type: String,
    default: '',
  },
});
const visible = ref(props.visible);
const isViewMode = ref(props.isViewMode);
const modalTitle = ref(props.modalTitle);
const rules = {
  preserveCode: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  preserveName: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],

  frequency: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],

  times: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  status: [{ required: true, message: '请选择', trigger: 'change' }],
  preserveDetailList: [{ required: true, message: '请选择', trigger: 'change' }],

};

const statusOptions = [
  { label: t('inspection.servicePlan.NOTSTART'), value: 'NOTSTART' },
  { label: t('inspection.servicePlan.UNDERWAY'), value: 'UNDERWAY' },
  { label: t('inspection.servicePlan.COMPLETED'), value: 'COMPLETED' },
  { label: t('inspection.servicePlan.STOP'), value: 'STOP' },
];
const form = ref({ ...props.initialData.form });
const tableData = ref([...props.initialData.tableData]);
const emit = defineEmits(['update:visible', 'submit']);
onMounted(() => {
  fetchAgeOptions();
});

const fetchAgeOptions = async () => {
  try {
    const response = await getLedgerList({ page: 1, pageSize: 999 }); // 调用接口
    const response1 = await getPlanList({ page: 1, pageSize: 999, type: 'MAINTENANCE' }); // 调用接口
    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);
  }
};

// 监听 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 }
);

const columns = [
  {
    title: '明细编号',
    dataIndex: 'detailCode',
    slots: { customRender: 'detailCode' },
    width: '160px'
  },
  {
    title: '保养设备',
    dataIndex: 'deviceId',
    slots: { customRender: 'deviceId' },
    width: '180px'
  },
  {
    title: '保养方案',
    dataIndex: 'checkPlanId',
    slots: { customRender: 'checkPlanId' },
    width: '180px'
  },
  {
    title: '方案明细',
    dataIndex: 'preserveDetail',
    slots: { customRender: 'preserveDetail' },
    width: '160px'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    slots: { customRender: 'operation' },
    width: '120px'
  }
];

const handleAdd = () => {
  tableData.value.push({
    detailCode: '',
    deviceId: undefined,
    checkPlanId: undefined,
    preserveDetail: '',
  });
};

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

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

const handleCancel = () => {
  resetForm();
  visible.value = false;
};
// 清空表单和表格数据
const resetForm = () => {
  form.value = {
    serveCode: '',
    preserveName: '',
    status: '',
    times: '',
    frequency: '',
};
  tableData.value = [];
  isViewMode.value = false;
};
</script>