<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="isDetail" />
          </a-form-item>
        </a-col>
      </a-row>
      <template v-for="item in formModal.stProjectExecPros">
      <a-row :gutter="24">
          <a-col>
           <a-form-item label="问题项" name="stProjectExecPros.problemTitle">
            <div style="width: 100%;">
              <a-row>
                <a-col :span="21">
                  <a-hidden v-model:value="item.id" :disabled="isDetail" />
                  <a-hidden v-model:value="item.projectExecId" :disabled="isDetail" />
                  <a-input v-model:value="item.problemTitle" :disabled="isDetail" :rules="[{ required: true, message: '请选择问题项!' }]" />
                </a-col>
                <a-col :span="3">
                  <a-button type="primary" :disabled="isDetail" @click="deleteProblem(item)">移除</a-button>
                </a-col>
              </a-row>
            </div> 
          </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="isDetail" :rules="[{ required: true, message: '请选择问题描述!' }]"  />
          </a-form-item>
        </a-col>
      </a-row>
      </template>
      <a-row :gutter="24" v-if="!isDetail">
        <a-col :span="3"/>
        <a-col :span="21" >
            <a-button type="primary" style="width: 100%" @click="handlerPlanSelect">添加问题</a-button>
        </a-col>
        <a-form-item/>
      </a-row>  
      <template v-for="risk in formModal.stProjectExecRisks">
        <a-row :gutter="24">
          <a-col>
          <a-form-item label="事件分类" name="stProjectExecRisks.riskTitle">
            <div style="width: 100%;">
              <a-row>
                <a-col :span="21">
                  <a-hidden v-model:value="risk.id" :disabled="isDetail" />
                  <a-hidden v-model:value="risk.projectExecId" :disabled="isDetail" />
                  <a-input v-model:value="risk.riskTitle" :disabled="isDetail" :rules="[{ required: true, message: '请选择事件分类!' }]"  />
                </a-col>
                  <a-col :span="3"><a-button type="primary" :disabled="isDetail" @click="deleteRisks(risk)">移除</a-button></a-col>
              </a-row>
            </div> 
          </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="isDetail" :rules="[{ required: true, message: '请选择风险事件!' }]"  />
          </a-form-item>
        </a-col>
      </a-row>
      </template>
      <a-row :gutter="24" v-if="!isDetail">
        <a-col :span="3"/>
        <a-col :span="21" >
             <a-button type="primary" style="width: 100%" @click="handlerRiskSelect">添加风险事件</a-button>
        </a-col>
      </a-row>  
    </a-form>
    </template>
  </BasicModal>  
  <PlanSelectModal @register="registerModalPlan" @success="handleSuccess" />
  <RiskSelectModal @register="registerModalRisk" @success="handleSuccess" />
</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,deletePro, deleteRisk,list,editTemp} from '../StProjectExecTwo.api';
import PlanSelectModal from './PlanSelectModal.vue';
import RiskSelectModal from './RiskSelectModal.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';
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)
const [registerModalPlan, {openModal:openModalPlan}] = useModal();
const [registerModalRisk, {openModal:openModalRisk}] = useModal();


const formRef = ref<FormInstance>();
const formModal = ref({
  caName: null,
  checkCountent: null,
  checkDoc: null,
  execContent: null,
  problemTitle: null,
  problemContent: null,
  riskTitle: null,
  riskContent: null,
  id:null
})

function goToFile(fileUploadPath){
  if(fileUploadPath){
    downloadFile(fileUploadPath);
  }else{
    message.warning("无附件");
  }
}

const rules: Record<string, Rule[]> = {
  execContent: [{ required: true, message: '请选择', trigger: 'blur' },],
  problemTitle: [{ required: true, message: '请选择', trigger: 'blur' },],
  problemContent: [{ required: true, message: '请选择', trigger: 'blur' },],
  riskTitle: [{ required: true, message: '请选择', trigger: 'blur' },],
  riskContent: [{ required: true, message: '请选择', trigger: 'blur' },],
}
    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);
    //表单赋值
    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)) {
            formModal.value = Object.assign(formModal.value,data.record)
            
            console.log(formModal)
        }
        // 隐藏底部时禁用整个表单
       //setProps({ disabled: !data?.showFooter })
    });
    async function deleteProblem(item){
       await deletePro(Object.assign({id:item.id}));
       handleSuccess();
    }
    async function deleteRisks(risk){
       await deleteRisk(Object.assign({id:risk.id}));
       handleSuccess();
    }
    function handlerPlanSelect(){
      handleSave();
      openModalPlan(true, {
       record:{id:formModal.value.id},
       isUpdate: false,
       showFooter: true,
     })
    }
    function handlerRiskSelect(){
      handleSave();
      openModalRisk(true, {
       record:{id:formModal.value.id},
       isUpdate: false,
       showFooter: true,
     })
    }
    async function handleSuccess(){
      let values = Object.assign({id:formModal.value.id});
      const formData = await list(values);
      console.log(formData);
      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(isDetail) ? '问题检查' : '查看检查'));
    //表单提交事件
    async function handleSubmit(v) {
        try {
            let values = await formRef.value.validate();
            setModalProps({confirmLoading: true});
            values = Object.assign(values,formModal.value)
            //提交表单
            await saveOrUpdate(values, isUpdate.value);
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success');
        } finally {
            setModalProps({confirmLoading: false});
        }
    }
    async function handleSave() {
            let values = await formRef.value.validate();
            values = Object.assign(values,formModal.value)
            //提交表单
            await editTemp(values);
    }
</script>

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

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>