<template>
  <!-- 自定义表单 -->
  <BasicModal v-bind="$attrs"  @register="registerModal" title="机制建设详情" width="1200px" :showOkBtn="false" :showCancelBtn="false">

      <el-divider content-position="left">资料信息</el-divider>
      <BasicForm @register="registerProjectForm" />
      <el-divider content-position="left">上传期刊资料</el-divider>
      <el-form ref="importFormRef" >

          <el-form-item label="上传文件:">
              <el-upload class="upload-demo" ref="upload" action :http-request="httpRequest" :before-upload="beforeUpload"
                  :on-exceed="handleExceed" :limit="1" :on-remove="removeFile">
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <div slot="tip" class="el-upload__tip">文件大小且不超过500M</div>
              </el-upload>
          </el-form-item>

          <el-form-item>
              <el-button type="primary" @click="submitImportForm">上传</el-button>
              <el-button type="info" @click="dialogVisible">关闭窗口</el-button>
          </el-form-item>
      </el-form>
  </BasicModal>
</template>
<script lang="ts" name="addAndModify" setup>
import { ref, reactive, defineProps, watchEffect } from 'vue'
import { useForm, BasicForm } from '@/components/Form';
import { mechanismformSchemas } from './mechanism.data';
import { modifyInformationMaterial, addInformationMaterial, getInformationMaterialById } from './mechanism.api';
import { ElMessage } from 'element-plus'
import { useModalInner, BasicModal } from '@/components/Modal';
const [registerModal, { closeModal }] = useModalInner(init);


let fileList = reactive<Array<any>>([]);
let id = ref()
const emit = defineEmits(['close']);

async function init(data) {
  fileList.pop()
  if (data.id != null) {
      id.value = data.id
      let param: any = {
          id: data.id
      }
      let res = await getInformationMaterialById(param)
      console.log("结果是", res)
      setFieldsValue(res)
  }

}

//项目入库详情
const [registerProjectForm, { setFieldsValue: setFieldsValue, getFieldsValue, validate }] = useForm({
  //注册表单列
  schemas: mechanismformSchemas,
  showActionButtonGroup: false,
  //回车提交
  // autoSubmitOnEnter: true,
  // //不显示重置按钮
  // showResetButton: false,
  //自定义提交按钮文本和图标
  // submitButtonOptions: { text: '提交', preIcon: '' },
  //查询列占比 24代表一行 取值范围 0-24
  // actionColOptions: { span: 17 },
  labelCol: { style: { width: '120px' } },
  wrapperCol: { style: { width: 'auto' } },
});


// 覆盖默认的上传行为，可以自定义上传的实现，将上传的文件依次添加到fileList数组中,支持多个文件
function httpRequest(option) {
  fileList.push(option)
}
function removeFile(option) {
  for (let i = 0; i < fileList.length; i++) {
      if (fileList[i].file.name == option.name) {
          fileList.splice(i, 1)
      }
  }
  console.log(fileList, option)

}
// 上传前处理
function beforeUpload(file) {
  let fileSize = file.size
  const FIVE_M = 500 * 1024 * 1024;
  //大于5M，不允许上传
  if (fileSize > FIVE_M) {
      ElMessage.error("最大上传500M")
      return false
  }

  return true
}
// 文件数量过多时提醒
function handleExceed() {
  ElMessage.warning("最多只能上传一个文件")
}
//导入Excel病种信息数据
async function submitImportForm() {
  if (await validate()) {

      let data = await getFieldsValue()
      console.log("data", data)
      // 使用form表单的数据格式
      const params = new FormData()
      if (id.value != null) {
          //说明是修改
          if(fileList.length>0){
              params.append('file', fileList[0].file)
          }
          params.append("id", id.value)
          params.append("name", data.name)
          params.append("type", data.type)
          params.append("publishTime", data.publishTime)
         await modifyInformationMaterial(params)
      } else {
          if (fileList.length == 0) {
              ElMessage.warning("请上传文件")
              return;
          }
          params.append('file', fileList[0].file)
          params.append("name", data.name)
          params.append("type", data.type)
          params.append("publishTime", data.publishTime)
          await addInformationMaterial(params)
      }
      dialogVisible()
  }
}
function dialogVisible() {
  closeModal()
  emit("close")
}
</script>
<style></style>
