<template>
  <div class="add-supply-sub-form">
    <div class="sub-form-title">
      <img class="delete-supply" src="@/assets/icons/delete.png" alt="" @click="emits('closeSubForm')" />
    </div>
    <el-form ref="subFormRef" :model="subFormData" label-width="auto" class="add-supply-sub-form">
      <el-form-item
        label="需求部门："
        prop="deptId"
        :rules="[{ required: true, message: '请选择需求部门', trigger: 'change' }]"
      >
        <el-cascader
          ref="cascaderRef"
          popper-class="cascader-popper--custom"
          v-model="subFormData.deptId"
          :options="deptTree"
          :props="cascaderProp"
          :show-all-levels="false"
          placeholder="请选择需求部门"
          filterable
          @change="handleChangeDept"
        />
      </el-form-item>
      <el-form-item
        label="数量："
        prop="quantity"
        :rules="[
          { required: true, message: '请输入数量', trigger: 'blur' },
          { validator: validateFormNumber, trigger: 'blur' },
        ]"
      >
        <el-input
          v-model.number="subFormData.quantity"
          placeholder="请输入数量"
          type="number"
          min="1"
          @change="emits('updateSubForm', subFormData)"
        />
      </el-form-item>
      <el-form-item label="尺寸明细：" prop="sizeDetail">
        <el-input
          v-model="subFormData.sizeDetail"
          placeholder="请输入尺寸明细"
          @change="emits('updateSubForm', subFormData)"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
  import { ElForm, ElMessage } from 'element-plus';
  import { ref } from 'vue';
  import type { AddSupplyRequestSubForm } from '@/types/emergency-supplier';
  import type { DeptTree } from '@/types/dept/type';

  const props = defineProps<{
    initData: AddSupplyRequestSubForm;
    deptTree: DeptTree[];
    deptSelected: number[];
  }>();

  const emits = defineEmits<{
    (e: 'closeSubForm'): void;
    (e: 'updateSubForm', data: AddSupplyRequestSubForm): void;
  }>();

  const cascaderRef = ref();
  const cascaderProp = {
    checkStrictly: true,
    expandTrigger: 'hover',
    value: 'id',
    label: 'deptName',
    emitPath: false,
  };
  const handleChangeDept = () => {
    const deptInfo = cascaderRef.value?.getCheckedNodes();
    if (!deptInfo || !deptInfo[0]) return;

    const deptId = deptInfo[0].value;
    subFormRef.value?.clearValidate();
    if (props.deptSelected.some((item) => item === deptId)) {
      ElMessage.warning('需求部门不能重复');
      cascaderRef.value.cascaderPanelRef.clearCheckedNodes();
    } else {
      emits('updateSubForm', subFormData.value);
      subFormData.value.deptName = deptInfo[0].label;
    }
  };

  const subFormRef = ref<InstanceType<typeof ElForm>>();
  const subFormData = ref<AddSupplyRequestSubForm>(props.initData);

  const subFormValidate = async () => {
    return new Promise((resolve) => {
      subFormRef.value?.validate((valid) => {
        resolve(valid);
      });
    });
  };

  const validateFormNumber = (rule: any, value: number, callback: any) => {
    if (!Number.isInteger(value)) return callback(new Error('请输入正整数'));
    if (value <= 0) {
      callback(new Error('请输入正整数'));
    } else {
      callback();
    }
  };

  defineExpose({
    subFormValidate,
  });
</script>

<style scoped>
  .add-supply-sub-form {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: #f0f2f5;
  }
  .sub-form-title {
    text-align: end;
    padding: 0 10px;
  }
  .delete-supply {
    cursor: pointer;
    width: 16px;
  }

  .el-form {
    display: flex;
    flex-direction: column;
    width: auto;
    height: 100%;
    gap: 16px;
  }
  .el-form-item {
    margin-bottom: 0;
  }

  :deep(.el-form-item__label) {
    padding: 0;
  }
  :deep(.el-cascader) {
    width: 100%;
  }
</style>
