<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { addCabinetCell } from "@/api/cabinet/cabinet-cell";
import Confirm from "@iconify-icons/ep/check";
import type { FormRules } from 'element-plus';

export interface FormDTO {
  cabinetId: number;
  mainboardId: number;
  cellNo: number;
  pinNo: number;
  cellType: number;
  availableStatus: number;
  usageStatus: number;
}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  initialCabinetId: {
    type: Number,
    default: null
  }
});

(window as any).cellProps = props;

const emit = defineEmits(["update:modelValue", "refresh"]);

const formRef = ref();
const formData = reactive<FormDTO>({
  cabinetId: props.initialCabinetId,
  mainboardId: null,
  cellNo: null,
  pinNo: null,
  cellType: 1,
  availableStatus: 1,
  usageStatus: 1
});

const rules = reactive<FormRules>({
  cabinetId: [],
  mainboardId: [
    { required: true, message: "主板ID必填", trigger: "blur" },
    { type: 'number', message: '必须为数字类型' }
  ],
  cellNo: [
    { required: true, message: "单元格号必填", trigger: "blur" },
    { type: 'number', message: '必须为数字类型' }
  ],
  pinNo: [
    { required: true, message: "针脚号必填", trigger: "blur" },
    { type: 'number', message: '必须为数字类型' }
  ],
  cellType: [
    { required: true, message: "请选择单元格类型", trigger: "change" }
  ],
  availableStatus: [
    { required: true, message: "请选择可用状态", trigger: "change" }
  ],
  usageStatus: [
    { required: true, message: "请选择使用状态", trigger: "change" }
  ]
});

const handleConfirm = async () => {
  try {
    formData.cabinetId = props.initialCabinetId;
    await formRef.value.validate();
    await addCabinetCell(formData);
    ElMessage.success("新增成功");
    emit("refresh");
    closeDialog();
  } catch (error) {
    console.error("表单提交失败", error);
  }
};

const closeDialog = () => {
  formRef.value.resetFields();
  emit("update:modelValue", false);
};
</script>

<template>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
    <el-form-item label="主板ID" prop="mainboardId">
      <el-input v-model.number="formData.mainboardId" placeholder="请输入主板ID" />
    </el-form-item>

    <el-form-item label="单元格号" prop="cellNo">
      <el-input v-model.number="formData.cellNo" placeholder="请输入单元格号" />
    </el-form-item>

    <el-form-item label="针脚号" prop="pinNo">
      <el-input v-model.number="formData.pinNo" placeholder="请输入针脚号" />
    </el-form-item>

    <el-form-item label="单元格类型" prop="cellType">
      <el-select v-model="formData.cellType" placeholder="请选择类型">
        <el-option label="小格" :value="1" />
        <el-option label="中格" :value="2" />
        <el-option label="大格" :value="3" />
        <el-option label="超大格" :value="4" />
      </el-select>
    </el-form-item>

    <el-form-item label="使用状态" prop="usageStatus">
      <el-select v-model="formData.usageStatus" placeholder="请选择状态">
        <el-option label="空闲" :value="1" />
        <el-option label="已占用" :value="2" />
      </el-select>
    </el-form-item>

    <el-form-item label="可用状态" prop="availableStatus">
      <el-select v-model="formData.availableStatus" placeholder="请选择状态">
        <el-option label="正常" :value="1" />
        <el-option label="故障" :value="2" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
        提交
      </el-button>
    </el-form-item>
  </el-form>
</template>