<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
      <!--<BasicForm @register="registerForm"/>-->
      <template #default>
      <a-form
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      :labelCol="{xs: {span: 24},sm: {span: 3},}"
      :wrapperCol="{xs: {span: 24},sm: {span: 21},}"
      :model="formModal"
      :rules="rules"
    >
      <a-row :gutter="24">
        <a-col>
          <a-form-item label="控制活动" name="caName">
            <a-input v-model:value="formModal.caName" :disabled="true" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col>
          <a-form-item label="检查内容" name="checkCountent">
            <a-textarea v-model:value="formModal.checkCountent" :disabled="true" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col>
          <a-form-item label="检查依据" name="">
            <template v-for="item in formModal.stComplianeInfos">
            <JEllipsisFormat :isLink="true"  :value="item.fileName" :length="60" @click="goToFile(item.fileUploadPath)"/>
            </template>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col>
          <a-form-item label="现状描述" name="execContent" >
            <a-textarea v-model:value="formModal.execContent" :disabled="!editFlag"/>
          </a-form-item>
        </a-col>
      </a-row>
      <template v-for="item in formModal.stProjectExecPros" >
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="问题项" name="stProjectExecPros.problemTitle"  >
            <a-hidden v-model:value="item.id" :disabled="true" />
            <a-hidden v-model:value="item.projectExecId" :disabled="true" />
            <a-input v-model:value="item.problemTitle" :disabled="!editFlag" />
          </a-form-item>
        </a-col>

      </a-row>
      <a-row :gutter="24">
        <a-col>
          <a-form-item label="问题描述" name="stProjectExecPros.problemContent" >
            <a-textarea v-model:value="item.problemContent" :disabled="!editFlag" />
          </a-form-item>
        </a-col>
      </a-row>
      </template>
      <template v-for="risk in formModal.stProjectExecRisks">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="事件分类" name="stProjectExecRisks.riskTitle">
            <a-hidden v-model:value="risk.id" :disabled="true" />
            <a-hidden v-model:value="risk.projectExecId" :disabled="true" />
            <a-input v-model:value="risk.riskTitle" :disabled="!editFlag" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col>
          <a-form-item label="风险事件" name="stProjectExecRisks.riskContent" >
            <a-textarea v-model:value="risk.riskContent" :disabled="!editFlag" />
          </a-form-item>
        </a-col>
      </a-row>
      </template>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="风险等级" name="damageLevel"
          :labelCol="{xs: {span: 24},sm: {span: 6},}"
           :wrapperCol="{xs: {span: 24},sm: {span: 18},}"    
           :rules="[{ required: editFlag, message: '请选择风险等级!' }]" >
            <a-select placeholder="请选择" v-model:value="formModal.damageLevel" :disabled="!editFlag">
              <a-select-option value="低">低</a-select-option>
              <a-select-option value="中">中</a-select-option>
              <a-select-option value="高">高</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="风险评分" name="damageScore" 
          :labelCol="{xs: {span: 24},sm: {span: 6},}"
           :wrapperCol="{xs: {span: 24},sm: {span: 18},}"          
          :rules="[{ required: editFlag, message: '请选择风险评分!' }]" >
            <a-select placeholder="请选择" v-model:value="formModal.damageScore" :disabled="!editFlag">
              <a-select-option value="1">1</a-select-option>
              <a-select-option value="2">2</a-select-option>
              <a-select-option value="3">3</a-select-option>
              <a-select-option value="4">4</a-select-option>
              <a-select-option value="5">5</a-select-option>
              <a-select-option value="6">6</a-select-option>
              <a-select-option value="7">7</a-select-option>
              <a-select-option value="8">8</a-select-option>
              <a-select-option value="9">9</a-select-option>
              <a-select-option value="10">10</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
     <a-row :gutter="24">
        <a-col>
        <a-form-item label="是否属实" name="trueStatus" :rules="[{ required: adviceFlag, message: '请选择是否属实!' }]" >
            <a-select placeholder="请选择" v-model:value="formModal.trueStatus" :disabled="editFlag||isDetail">
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="0">否</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col>
      <a-form-item label="补充说明" name="execContentDes">
            <a-textarea v-model:value="formModal.execContentDes" :disabled="editFlag||isDetail" />
          </a-form-item>
        </a-col>
      </a-row>
           <a-row :gutter="24">
        <a-col>
          <a-form-item label="补充材料" name="fileUploadPathDes" >
              <JUpload v-model:value="formModal.fileUploadPathDes" :disabled="editFlag||isDetail" :buttonVisible="!isDetail"  desText="支持扩展名: .rar .zip .doc .docx .pdf .jpg..." />
          </a-form-item>
        </a-col>
      </a-row>
    </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,list} from '../StProjectExecFour.api';
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';
import {defHttp} from '/@/utils/http/axios';
import JEllipsisFormat from './JEllipsisFormat.vue';
import { downloadFile } from '/@/utils/common/renderUtils';
const dayjs = inject('$dayjs')
const isDetail = ref(false)
function goToFile(fileUploadPath){
  if(fileUploadPath){
    downloadFile(fileUploadPath);
  }else{
    message.warning("无附件");
  }
}

const formRef = ref<FormInstance>();
const formModal = ref({
  caName: null,
  checkCountent: null,
  checkDoc: null,
  execContent: null,
  problemTitle: null,
  problemContent: null,
  damageLevel: null,
  damageScore: null,
  confirmDepCode: null,
  confirmUser: null,
  trueStatus: null,
  execContentDes: null,
  fileUploadPathDes: null,
  id:null
})
const rules: Record<string, Rule[]> = {
  confirmDepCode: [{ required: true, message: '请选择', trigger: 'blur' },],
  confirmUser: [{ required: true, message: '请选择', trigger: 'blur' },],
}
    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);
    const confirmFlag = ref(false);
    const adviceFlag = ref(false);
    const editFlag = ref(false);
    function confirmDepCodeChange(data){
      if(!data || data.length==0){
        formModal.value.confirmDepCode = ''
      }
      if(formModal.value.confirmDepCode!=confirmDepCodeRecord.value){
        confirmDepCodeRecord.value = data[0]
        formModal.value.approveUser = ''
      }
    }
    function jSearchSelectDutyClick(v){
      if(v == 'confirmDepCode' && !formModal.value.confirmDepCode){
        formModal.value.confirmDepCode = ''
        message.warning("请先选择确认部门")
        return
      }
    }
    const confirmDepCodeRecord = ref('')
    //表单赋值
    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;
        confirmFlag.value=data?.confirmFlag;
        adviceFlag.value=data?.adviceFlag;
        editFlag.value=data?.editFlag;
        confirmDepCodeRecord.value = data.record.confirmDepCode;
        initFormModal("1");
        formModal.value = Object.assign(formModal.value,data.record);
        if(adviceFlag.value){
                formModal.value.trueStatus=null;
          }
    });
    async function handleSuccess(){
      let values = Object.assign({id:formModal.value.id});
      const formData = await list(values);
      const data = {...formData.records}
      formModal.value=data[0];
    }
    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(confirmFlag) ? '选择确认人':(unref(editFlag) ?'修改实施发现':(unref(adviceFlag) ?'实施确认' : '查看详情'))));
    //表单提交事件
    async function handleSubmit(v) {
        try {
            let values = await formRef.value.validate();
            setModalProps({confirmLoading: true});
            if(editFlag.value){
                formModal.value.trueStatus=2;
            }
            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%
	}
</style>