<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="true"/>
          </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">
            <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="true" />
          </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="true" />
          </a-form-item>
        </a-col>
      </a-row>
      </template>
      <template v-for="risk in formModal.stProjectExecRisks">
      <a-row :gutter="24">
        <a-col >
          <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="true" />
          </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="true" />
          </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},}">
            <a-select placeholder="请选择" v-model:value="formModal.damageLevel" :disabled="isDetail">
              <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},}">
            <a-select placeholder="请选择" v-model:value="formModal.damageScore" :disabled="isDetail">
              <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-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 { list} from '../StProjectExecThree.api';
import { editTb} from '../StProjectExec.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,
  id:null
})
const rules: Record<string, Rule[]> = {
  damageLevel: [{ required: true, message: '请选择', trigger: 'blur' },],
  damageScore: [{ 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)
        }
        // 隐藏底部时禁用整个表单
       //setProps({ disabled: !data?.showFooter })
    });
    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 editTb(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>