<template>
    <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
        <!--<BasicForm @register="registerForm"/>-->
        <a-form
            ref="formRef"
            :model="selectData"
            :labelCol="{xs: {span: 24},sm: {span: 3},}"
            :wrapperCol="{xs: {span: 24},sm: {span: 21},}"
            :rules="rules"
        >
            <a-row :gutter="24">
                <a-col :lg="12">
                <a-form-item label="所属部门" name="depId" :labelCol="{xs: {span: 24},sm: {span: 6},}" :wrapperCol="{xs: {span: 24},sm: {span: 18},}">
                    <JSelectDept placeholder="请选择" v-model:value="selectData.depId" :multiple="false" @change="depCodeChange"></JSelectDept>
                </a-form-item>
                </a-col>
                <a-col :lg="12">
                <a-form-item label="人员" name="userNo" :labelCol="{xs: {span: 24},sm: {span: 6},}" :wrapperCol="{xs: {span: 24},sm: {span: 18},}">
                    <JSearchSelectDuty v-model:value="selectData.userNo" dict="listDuty" :dep-code="selectData.depId ||'nodepCode'"  @click="jSearchSelectDutyClick"/>
                </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <a-col :lg="12">
                <a-form-item label="项目角色" name="projectRole" :labelCol="{xs: {span: 24},sm: {span: 6},}" :wrapperCol="{xs: {span: 24},sm: {span: 18},}">
                    <JSearchSelect v-model:value="selectData.projectRole" dict="projectrole"/>
                </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </BasicModal>
  </template>
  
  <script lang="ts" setup>
  import { message } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
import { computed, ref, unref } from 'vue';
import { addPerpetrate } from '../../StProjectConfig.api';
import { JSearchSelect, JSearchSelectDuty, JSelectDept } from '/@/components/Form';
import { BasicModal, useModalInner } from '/@/components/Modal';

      const formRef = ref(null)
      // Emits声明
      const emit = defineEmits(['register','success']);
      const isUpdate = ref(true);
      const selectData = ref({
        projectCreId: '',
        depId: '',
        userNo: '',
        projectRole: ''
      })
      const rules: Record<string, Rule[]> = {
        depId: [{ required: true, message: '请选择所属部门', trigger: 'blur' },],
        userNo: [{ required: true, message: '请选择人员', trigger: 'blur' },],
        projectRole: [{ required: true, message: '请选择项目角色', trigger: 'blur' },],
      }
      //表单配置
      // const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
      //     //labelWidth: 150,
      //     schemas: formSchema,
      //     showActionButtonGroup: false,
      //     baseColProps: {span: 24}
      // });
      //表单赋值
      const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
          //重置表单
          //await resetFields();
          setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
          isUpdate.value = !!data?.isUpdate;
          selectData.value.projectCreId = data.record.projectCreId
          selectData.value.depId = ''
          selectData.value.userNo = ''
          selectData.value.projectRole = ''
          if (unref(isUpdate)) {
              //表单赋值
              // await setFieldsValue({
              //     ...data.record,
              // });
          }
          // 隐藏底部时禁用整个表单
         //setProps({ disabled: !data?.showFooter })
      });
      //设置标题
      const title = computed(() => (!unref(isUpdate) ? '添加人员' : '编辑'));
      const depCodeRecord = ref('')
      function depCodeChange(data){
        if(!data || data.length==0){
            selectData.value.depId = ''
        }
        if(selectData.value.depId!=depCodeRecord.value){
            depCodeRecord.value = data[0]
            selectData.value.userNo = ''
        }
    }
      function jSearchSelectDutyClick(){
        if(!selectData.value.depId){
            selectData.value.userNo = ''
            message.warning("请先选择所属部门")
            return
        }
    }
      //表单提交事件
      async function handleSubmit(v) {
          try {
            let values = await formRef.value?.validate();
              setModalProps({confirmLoading: true});
              values = Object.assign(values,selectData.value)
              //提交表单
              await addPerpetrate(values);
              //关闭弹窗
              closeModal();
              //刷新列表
              emit('success');
          } finally {
              setModalProps({confirmLoading: false});
          }
      }
  </script>
  
  <style lang="less" scoped>
      /** 时间和数字输入框样式 */
    :deep(.ant-input-number){
          width: 100%
      }
  
      :deep(.ant-calendar-picker){
          width: 100%
      }
  </style>