<template>
  <el-dialog title="设备清单表单" v-model="visible" width="400px" height="500px" append-to-body draggable>
    <div class="form-container">
      <el-form ref="formDetailRef" v-loading="loading" class="master-container" :model="form" :rules="rules"
        label-width="80px">
        <el-form-item label="设备类别" prop="equipmentCategoryId">
          <el-select-v2 v-model="form.equipmentCategoryId" filterable :options="parentCategories" placeholder="设备类别"
            style="width: 220px" />
        </el-form-item>
        <el-form-item label="设备编码" prop="equipmentCode">
          <el-input v-model.trim="form.equipmentCode" placeholder="请输入设备编码" />
        </el-form-item>
        <el-form-item label="设备名称" prop="equipmentName">
          <el-input v-model.trim="form.equipmentName" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="使用部门" prop="usageDeptAlias">
          <el-input v-model.trim="form.usageDeptAlias" :disabled="true" placeholder="请选择使用部门">
            <template #append>
              <el-button icon="Search" @click="handleSelectDeptSingle" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="归属部门" prop="belongingDeptAlias">
          <el-input v-model.trim="form.belongingDeptAlias" :disabled="true" placeholder="请选择归属部门">
            <template #append>
              <el-button icon="Search" @click="handleSelectBelongingDeptSingle" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="设备状态" prop="equipmentStatusCode">
          <el-select v-model="form.equipmentStatusCode" placeholder="请选择设备状态">
            <el-option v-for="dict in equipment_status" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="虚拟设备" prop="isVirtualEquipment">
          <el-select v-model="form.isVirtualEquipment" placeholder="请选择是否是虚拟设备" :disabled="!editStatus">
            <el-option v-for="dict in yes_no" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model.trim="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" icon="Check" @click="handleSave">确 定</el-button>
      <el-button icon="Close" @click="handleCancel">取 消</el-button>
    </template>

    <select-dept-dialog ref="selectDeptRef" @handleSelectDept="handleSelectDept"
      @handleSelectBelongingDept="handleSelectBelongingDept" />
  </el-dialog>
</template>
<script setup>
import { getDetails, saveDetails, listCategories } from '@/api/business/equipment'
import selectDeptDialog from '@/components/Dialog/Department'
const emit = defineEmits(['handleSaveSuccess'])
const { proxy } = getCurrentInstance()
/** 字典数组区 */
const { equipment_status } = proxy.useDict("equipment_status");
const { yes_no } = proxy.useDict("yes_no");
const parentCategories = ref([])
/** 表单抽屉 页变量 */
const loading = ref(false)
const visible = ref(false)
const editStatus = ref(true)
const equipmentCodeIds = ref([])
const data = reactive({
  form: {},
  rules: {
    equipmentCategoryId: [{ required: true, message: '设备编码不能为空', trigger: 'blur' }],
    equipmentCode: [
      { required: true, message: '设备编码不能为空', trigger: 'blur' },
      {
        message: '设备编码不能包含 , % / 这种特殊字符', trigger: 'blur', validator: equipmentCodeValidator
      }],
    equipmentName: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
    usageDeptAlias: [{ required: true, message: '使用部门不能为空', trigger: 'change' }],
    belongingDeptAlias: [{ required: true, message: '归属部门不能为空', trigger: 'change' }],
  }
})
const { form, rules } = toRefs(data)
/***********************  方法区  ****************************/
/** 打开抽屉 */
const open = (data) => {
  reset()
  visible.value = true
  editStatus.value = true
  equipmentCodeIds.value = data.equipmentCode
  form.value.equipmentCategoryId = data.equipmentCategoryId
  if (data.id) {
    editStatus.value = false
    getDetails(data.id).then((res) => {
      form.value = res.data

    })
  }
  getCategoryList()
}

function equipmentCodeValidator(rule, value) {
  // console.log(rule)
  const reg = /^[^%,/]+$/
  return reg.test(value)
}

function getCategoryList() {
  listCategories({}).then(res => {
    if (res.code == 200) {
      console.log(res)
      parentCategories.value = res.data
    }
  })
}
/** 取消按钮 */
const handleCancel = () => {
  visible.value = false
  reset()
}

/** 表单重置 */
const reset = () => {
  form.value = {
    id: null,
    equipmentId: 0,
    equipmentCode: '',
    usageDeptId: 0,
    usageDeptCode: '',
    usageDeptAlias: '',
    equipmentStatusId: 0,
    equipmentStatusCode: 'NA',
    remark: '',
    isVirtualEquipment: '0'
  }
  proxy.resetForm('formDetailRef')
}

/** 提交按钮 */
const handleSave = () => {
  console.log(form.value)
  proxy.$refs['formDetailRef'].validate((valid) => {
    if (valid) {
      if (equipmentCodeIds.value.some((id) => id === form.value.equipmentCode)) {
        proxy.$modal.msgError('设备编码已存在')
      } else {
        saveDetails(form.value).then((res) => {
          proxy.$modal.msgSuccess('修改成功')
          emit('handleSaveSuccess')
          visible.value = false
        })
      }
    }
  })
}
//使用部门
const handleSelectDeptSingle = () => {
  proxy.$refs['selectDeptRef'].open(true)
}
//归属部门
const handleSelectBelongingDeptSingle = () => {
  proxy.$refs['selectDeptRef'].open(false)
}

/** 选择使用部门回调 */
const handleSelectDept = (data) => {
  form.value.usageDeptId = data.deptId
  form.value.usageDeptCode = data.deptCode
  form.value.usageDeptAlias = data.deptName
}
/** 选择归属部门回调 */
const handleSelectBelongingDept = (data) => {
  form.value.belongingDeptId = data.deptId
  form.value.belongingDeptCode = data.deptCode
  form.value.belongingDeptAlias = data.deptName
}

/** 暴露给父组件的方法 */
defineExpose({
  open
})
</script>
