<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
    <!--<BasicForm @register="registerForm"/>-->
    <template #default>
      <a-form
        ref="formRef"
        class="jeecg-basic-form"
        :label-col="{ xs: { span: 24 }, sm: { span: 3 } }"
        :wrapper-col="{ xs: { span: 24 }, sm: { span: 21 } }"
        :model="formModal"
        :rules="isDetail ? [] : rules"
      >
        <a-row>
          <a-col>
            <a-form-item label="立项类型" name="creType">
              <a-radio-group
                v-model:value="formModal.creType"
                :disabled="isDetail"
                :options="[
                  { label: '计划内', value: '1' },
                  { label: '计划外', value: '0' },
                ]"
                @change="creTypeChange"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="formModal.creType == '1'">
          <a-col>
            <a-form-item label="计划名称" name="planCode">
              <div style="width: 100%">
                <a-row>
                  <a-col :span="21">
                    <a-input type="hidden" v-model:value="formModal.planCode" readonly />
                    <a-input v-model:value="formModal.projectName" readonly :disabled="isDetail" />
                  </a-col>
                  <a-col :span="3"><a-button type="primary" :disabled="isDetail" @click="handlerPlanSelect">选择</a-button></a-col>
                </a-row>
              </div>
              <!--<PlanSelect v-model:value="formModal.planCode" />-->
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="12">
            <a-form-item
              label="项目名称"
              name="projectName"
              :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
              :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
            >
              <a-input v-model:value="formModal.projectName" :disabled="formModal.creType == '1' || isDetail" />
            </a-form-item>
          </a-col>
          <a-col :lg="12">
            <a-form-item
              label="项目类型"
              name="projectType"
              :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
              :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
            >
              <JSearchSelect
                placeholder="请选择"
                v-model:value="formModal.projectType"
                :disabled="formModal.creType == '1' || isDetail"
                dict="projecttype"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="12">
            <a-form-item
              label="执行部门"
              name="execDepCode"
              :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
              :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
            >
              <JSelectDept
                v-if="formModal.creType == '1' || isDetail"
                placeholder="请选择"
                v-model:value="formModal.execDepCode"
                disabled="true"
                :multiple="false"
              />
              <JSelectDept v-else placeholder="请选择" v-model:value="formModal.execDepCode" :multiple="false" @change="execDepCodeChange" />
            </a-form-item>
          </a-col>
          <a-col :lg="12">
            <a-form-item
              label="负责人"
              name="headCode"
              :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
              :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
            >
              <JSearchSelectDuty
                v-if="isDetail"
                v-model:value="formModal.headName"
                dict="listDuty"
                :disabled="isDetail"
                @click="jSearchSelectDutyClick('headCode')"
              />
              <JSearchSelectDuty
                v-else-if="formModal.creType == '1'"
                v-model:value="formModal.headName"
                dict="listDuty"
                :disabled="formModal.creType == '1'"
                @click="jSearchSelectDutyClick('headCode')"
              />
              <JSearchSelectDuty
                v-else
                v-model:value="formModal.headCode"
                dict="listDuty"
                :dep-code="formModal.execDepCode || 'nodepCode'"
                :disabled="formModal.creType == '1' || isDetail"
                @click="jSearchSelectDutyClick('headCode')"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="12">
            <a-form-item
              label="预计开始日期"
              name="planStartDate"
              :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
              :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
            >
              <!-- <a-input v-model:value="formModal.planStartDate" /> -->
              <a-date-picker v-model:value="formModal.planStartDate" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" :disabled="isDetail" />
            </a-form-item>
          </a-col>
          <a-col :lg="12">
            <a-form-item
              label="预计结束日期"
              name="planEndDate"
              :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
              :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
            >
              <!-- <a-input v-model:value="formModal.planEndDate" /> -->
              <a-date-picker v-model:value="formModal.planEndDate" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" :disabled="isDetail" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="12">
            <a-form-item
              label="审核部门"
              name="approveDepCode"
              :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
              :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
            >
              <JSelectDept v-if="isDetail" placeholder="请选择" v-model:value="formModal.approveDepCode" disabled="true" :multiple="false" />
              <JSelectDept v-else placeholder="请选择" v-model:value="formModal.approveDepCode" :multiple="false" @change="approveDepCodeChange" />
            </a-form-item>
          </a-col>
          <a-col :lg="12">
            <a-form-item
              label="审核人"
              name="approveUser"
              :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
              :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
            >
              <JSearchSelectDuty
                v-model:value="formModal.approveUser"
                dict="listDuty"
                :dep-code="formModal.approveDepCode || 'nodepCode'"
                :disabled="isDetail"
                @click="jSearchSelectDutyClick('approveDepCode')"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-item label="项目描述" name="projectDesc">
              <a-textarea v-model:value="formModal.projectDesc" :disabled="isDetail" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-item label="项目目的" name="projectAim">
              <a-textarea v-model:value="formModal.projectAim" :disabled="isDetail" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-item label="立项报告">
              <JUpload
                v-model:value="formModal.fileUploadPath"
                :disabled="isDetail"
                :buttonVisible="!isDetail"
                :maxCount="1"
                desText="支持扩展名: .rar .zip .doc .docx .pdf .jpg..."
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="formModal.approveFlag != '0' && isDetail">
          <a-col>
            <a-form-item label="审核标志">
              <a-radio-group
                v-model:value="formModal.approveFlag"
                :disabled="isDetail"
                :options="[
                  { label: '通过', value: '1' },
                  { label: '驳回', value: '2' },
                ]"
                @change="creTypeChange"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="formModal.approveFlag != '0' && isDetail">
          <a-col>
            <a-form-item label="审核信息">
              <a-textarea v-model:value="formModal.approveDes" :disabled="isDetail" />
            </a-form-item>
          </a-col>
        </a-row>
        <PlanSelectModal @register="registerModalPlan" @success="handleSuccess" />
      </a-form>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { message, type FormInstance } from 'ant-design-vue';
  import type { Rule } from 'ant-design-vue/es/form';
  import { computed, inject, ref, unref } from 'vue';
  import { saveOrUpdate } from '../StProjectCre.api';
  import PlanSelectModal from './PlanSelectModal.vue';
  import { JSearchSelect, JSearchSelectDuty, JSelectDept } from '/@/components/Form';
  import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
  const dayjs = inject('$dayjs');
  const isDetail = ref(false);
  const [registerModalPlan, { openModal: openModalPlan }] = useModal();

  const formRef = ref<FormInstance>();
  const formModal = ref({
    creType: '1',
    planCode: null,
    projectName: null,
    projectType: null,
    execDepCode: null,
    headCode: null,
    planStartDate: null,
    planEndDate: null,
    approveDepCode: null,
    approveUser: null,
    projectDesc: null,
    projectAim: null,
    fileUploadPath: null,
    approveFlag: '0',
    approveDes: null,
    id: null,
  });
  const rules: Record<string, Rule[]> = {
    creType: [{ required: true, message: '请选择立项类型', trigger: 'blur' }],
    planCode: [{ required: true, message: '请选择计划名称', trigger: 'blur' }],
    projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
    projectType: [{ required: true, message: '请输入项目类型', trigger: 'blur' }],
    execDepCode: [{ required: true, message: '请选择执行部门', trigger: 'blur' }],
    headCode: [{ required: true, message: '请选择负责人', trigger: 'blur' }],
    planStartDate: [{ required: true, message: '请选择预计开始日期', trigger: 'blur' }],
    planEndDate: [{ required: true, message: '请选择预计结束日期', trigger: 'blur' }],
    approveDepCode: [{ required: true, message: '请选择审核部门', trigger: 'blur' }],
    approveUser: [{ required: true, message: '请选择审核人', trigger: 'blur' }],
    projectDesc: [{ required: true, message: '请输入项目描述', trigger: 'blur' }],
    projectAim: [{ required: true, message: '请输入项目目的', trigger: 'blur' }],
  };
  // Emits声明
  const emit = defineEmits(['register', 'success']);
  const isUpdate = ref(true);
  const approveDepCodeRecord = ref('');
  const execDepCodeRecord = ref('');
  //表单配置
  // 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;
    isDetail.value = !data?.showFooter;
    initFormModal('1');
    if (unref(isUpdate)) {
      //表单赋值
      // await setFieldsValue({
      //     ...data.record,
      // });
      formModal.value = Object.assign(formModal.value, data.record);
      approveDepCodeRecord.value = data.record.approveDepCode;
      execDepCodeRecord.value = data.record.execDepCode;
    }
    // 隐藏底部时禁用整个表单
    //setProps({ disabled: !data?.showFooter })
  });
  function handlerPlanSelect() {
    openModalPlan(true, {
      isUpdate: false,
      showFooter: true,
    });
  }

  function execDepCodeChange(data) {
    if (!data || data.length == 0) {
      formModal.value.execDepCode = '';
      return;
    }
    if (execDepCodeRecord.value != formModal.value.execDepCode) {
      execDepCodeRecord.value = data[0];
      formModal.value.headCode = '';
    }
  }
  function jSearchSelectDutyClick(v) {
    if (v == 'headCode' && !formModal.value.execDepCode) {
      formModal.value.headCode = '';
      message.warning('请先选择执行部门');
      return;
    }
    if (v == 'approveDepCode' && !formModal.value.approveDepCode) {
      formModal.value.approveUser = '';
      message.warning('请先选择审核部门');
      return;
    }
  }

  function approveDepCodeChange(data) {
    if (!data || data.length == 0) {
      formModal.value.approveDepCode = '';
    }
    if (formModal.value.approveDepCode != approveDepCodeRecord.value) {
      approveDepCodeRecord.value = data[0];
      formModal.value.approveUser = '';
    }
  }
  function handleSuccess(data) {
    for (let k in formModal.value) {
      if (data.value[k]) {
        formModal.value[k] = data.value[k];
      }
    }
  }
  function initFormModal(creType) {
    for (let k in formModal.value) {
      formModal.value[k] = null;
    }
    formModal.value['creType'] = creType;
    formModal.value['approveFlag'] = '0';
  }
  function creTypeChange(e) {
    if (e.target.value == '0') {
      initFormModal(e.target.value);
    }
  }
  //设置标题
  const title = computed(() => (!unref(isUpdate) ? '新建立项' : unref(isDetail) ? '详情' : '修改立项'));
  //表单提交事件
  async function handleSubmit(v) {
    try {
      let values = await formRef.value.validate();
      if (dayjs(formModal.value.planStartDate).isAfter(dayjs(formModal.value.planEndDate))) {
        message.warning('计划开始日期不能大于计划结束日期');
        return;
      }
      setModalProps({ confirmLoading: true });
      // 新建立项
      formModal.value.approveFlag = '0';
      values = Object.assign(values, formModal.value);
      //提交表单
      await saveOrUpdate(values, isUpdate.value);
      //关闭弹窗
      closeModal();
      //刷新列表
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>

<style lang="less" scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
  .jeecg-basic-form .ant-form-item-label > label {
    font-size: 13px;
    color: black;
  }
</style>
