<!-- 
    TODO 审批人员添加/编辑
 -->
<template>
  <SysDialog
    class="approval-user"
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    v-bind="getBindValue"
    :title="dialog.title"
    @onClose="onclose"
    @onConfirm="onconfirm"
  >
    <template #content>
      <div class="pt-12">
        <el-form
          inline
          ref="approvalUserFormRef"
          :model="approvalUserForm"
          :rules="approvalUserState.rules"
          label-width="80px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item prop="approvalType" label="审批类型">
                <BaseSelect
                  v-model:modelValue="approvalUserForm.approvalType"
                  :filterable="false"
                  :clearable="true"
                  :options="approvalTypeList"
                  placeholder="请选择审批类型"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="approvalUserId" label="审批人">
                <BaseSelect
                  v-model:modelValue="approvalUserForm.approvalUserId"
                  :options="sysUserList"
                  :clearable="true"
                  placeholder="请选择用户"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="orderNumber"
                label="序号"
                :style="setFormItemWidth"
              >
                <el-input
                  v-model="approvalUserForm.orderNumber"
                  placeholder="请输入序号"
                  type="number"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { ApprovalUserAddParams } from "@/api/approvalUser/approvalUserModel";
import type { ListIitem } from "@/api/base/BaseDataModel";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { useEleFormValidate } from "@/hooks/useEleFormValidate";
import { ref, reactive, computed, unref } from "vue";

const props = defineProps<{
  /**
   * 审批类型
   */
  approvalTypeList: ListIitem[],
  /**
   * 审批人列表
   */
   sysUserList: ListIitem[]
}>()
const emit = defineEmits(['onConfirmSave'])
// 弹框一些配置
const getBindValue = reactive({
  top: "13vh",
  title: "添加审批人员",
  width: 660,
  height: 0,
});
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
const approvalUserState = reactive({
  rules: {
    approvalType: [
      { required: true, message: "请选择审批类型", trigger: "change" },
    ],
    approvalUserId: [
      { required: true, message: "请选择用户", trigger: "change" },
    ],
    orderNumber: [
      { required: true, message: "请输入正确序号", trigger: "blur" }
    ],
  },
});
const approvalUserFormRef = ref();
// 参数
const approvalUserForm = reactive<ApprovalUserAddParams>({
  id: undefined,
  orderNumber: undefined,
  approvalType: undefined,
  approvalTypeName: undefined,
  approvalUserId: undefined,
  approvalUserName: undefined,
});
// col宽度百分比
const setFormItemWidth = computed(() => {
  return { width: `calc(100% - 32px)` };
});
const approvalTypeList = computed(() => props.approvalTypeList)
const sysUserList = computed(() => props.sysUserList)

const { formValidate, resetForm } = useEleFormValidate();
const onclose = () => {
  approvalUserForm.id = undefined
  resetForm(unref(approvalUserFormRef));
  onClose();
};
const initData = (data) => {
  if(!data) return
  Object.keys(approvalUserForm).forEach((key) => {
    approvalUserForm[key] = data[key]
  })
  const approvalUserId = Number(approvalUserForm.approvalUserId)
  if(approvalUserId) approvalUserForm.approvalUserId = approvalUserId
}
const show = (data) => {
  data ? dialog.title = '编辑审批人员' : dialog.title = '添加审批人员'
  initData(data)
  onShow();
};
const onconfirm = async () => {
  const isFormValidate = await formValidate(unref(approvalUserFormRef));
  if (!isFormValidate) return;
  setLoading(true)
  // 审批类型名称
  const approvalTypeObj = unref(approvalTypeList).find(item => item.value === approvalUserForm.approvalType)
  if(approvalTypeObj) approvalUserForm.approvalTypeName = approvalTypeObj.label
  // 审批人
  const approvalUserIdObj = unref(sysUserList).find(item => item.value === approvalUserForm.approvalUserId)
  if(approvalUserIdObj) approvalUserForm.approvalUserName = approvalUserIdObj.label
  emit("onConfirmSave", approvalUserForm, onclose, setLoading)
};
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>
