<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { addSmartCabinet } from "@/api/cabinet/smart-cabinet";
import Confirm from "@iconify-icons/ep/check";
import type { FormRules } from 'element-plus';
import { CabinetImgMap } from "@/utils/cabinetImgMap";
import { cabinetNames } from "@/utils/constant/cabinet";
import { useWxStore } from "@/store/modules/wx";

export interface FormDTO {
  cabinetName: string;
  cabinetType: number;
  templateNo: string;
  lockControlNo: number;
  location: number;
  belongType: number;
  mode: number;
  balanceEnable: number;
  corpid: string;
}

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

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

const wxStore = useWxStore();

const formRef = ref();
const formData = reactive<FormDTO>({
  cabinetName: "",
  cabinetType: 0,
  templateNo: "",
  lockControlNo: 0,
  location: 0,
  belongType: 0,
  mode: 0,
  balanceEnable: 1,
  corpid: wxStore.corpid
});

const rules = reactive<FormRules>({
  cabinetName: [{ required: true, max:4, message: "柜体名称必填", trigger: "blur" }],
  cabinetType: [{ required: true, message: "请选择柜体类型", trigger: "change" }],
  templateNo: [{ required: true, message: "请选择模板编号", trigger: "change" }],
  lockControlNo: [
    { required: true, message: "锁控板序号", trigger: "blur" }
  ],
  location: [
    { required: true, message: "位置信息必填", trigger: "blur" },
    { type: 'number', min: 0, message: '位置编号不能为负数', trigger: 'blur' }
  ],
  belongType: [
    { required: true, message: "请选择归属类型", trigger: "change" }
  ],
  mode: [
    { required: true, message: "请选择运行模式", trigger: "change" }
  ],
  balanceEnable: [
    { required: true, message: "请选择借呗支付状态", trigger: "change" }
  ]
});

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

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

const handleRandomName = () => {
  const randomIndex = Math.floor(Math.random() * cabinetNames.length);
  formData.cabinetName = cabinetNames[randomIndex];
};

const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
  label: item.name,
  value
}));
</script>

<template>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
    <el-form-item label="柜体名称" prop="cabinetName">
      <div class="flex items-center">
        <el-input v-model="formData.cabinetName" placeholder="请输入柜体名称" style="margin-right: 8px;" />
        <el-button type="default" @click="handleRandomName">随机</el-button>
      </div>
    </el-form-item>

    <!-- <el-form-item label="柜体类型" prop="cabinetType">
      <el-select v-model="formData.cabinetType" placeholder="请选择类型">
        <el-option label="主柜" :value="0" />
        <el-option label="副柜" :value="1" />
      </el-select>
    </el-form-item> -->

    <el-form-item label="模板编号" prop="templateNo">
      <el-select v-model="formData.templateNo" placeholder="请选择模板编号">
        <el-option v-for="option in templateOptions" :key="option.value" :label="option.label" :value="option.value" />
      </el-select>
    </el-form-item>

    <!-- <el-form-item label="商品模式" prop="belongType">
      <el-select v-model="formData.belongType" placeholder="请选择商品模式">
        <el-option label="借还模式" :value="0" />
        <el-option label="固资模式" :value="1" />
      </el-select>
    </el-form-item> -->

    <!-- <el-form-item label="运行模式" prop="mode">
      <el-select v-model="formData.mode" placeholder="请选择运行模式">
        <el-option label="支付模式" :value="0" />
        <el-option label="审批模式" :value="1" />
        <el-option label="借还模式" :value="2" />
        <el-option label="会员模式" :value="3" />
      </el-select>
    </el-form-item> -->

    <!-- <el-form-item label="借呗支付" prop="balanceEnable">
      <el-select v-model="formData.balanceEnable" placeholder="请选择借呗支付状态">
        <el-option label="正常使用" :value="1" />
        <el-option label="禁止使用" :value="0" />
      </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>