<template>
  <!-- 自定义表单 -->
  <fieldChangeDetail :fieldChangeGroupid="fieldChangeGroupid" :isEdit="resButton.isEdit" ref="fieldChangeDetailRef" />
  <el-divider content-position="left" v-if="resButton.isEdit">重新上传项目资料</el-divider>
  <div v-if="resButton.isEdit" style="display: flex; justify-content: center; align-items: center; height: 100px;">
    <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">文件大小且不超过5M</div>
    </el-upload>
  </div>
  <ApprovalDetails :processInstanceId="processInstanceId" />
  <ApprovalFromPage :showApprovalForm="showApprovalForm" :buttons="resButton.buttons" ref="ApprovalFromPageRef"
    @submit="handleSubmit" @exit="exit" />
</template>
<script lang="ts" name="fieldChangeApproval" setup>
import { onMounted, ref, reactive } from 'vue'
import { approvePlanFile, getActionParam } from '../myWork/inComplete/inComplete.api';
import { ElMessage } from 'element-plus'
import { getFieldchangeByGroupid, approvalFieldchange } from '../projectLib/projectInfo/projectInfo.api'

import fieldChangeDetail from "../ProcessApprovalSubPage/component/fieldChangeDetail.vue"
import ApprovalDetails from "../ProcessApprovalSubPage/component/ApprovalDetails.vue";
import ApprovalFromPage from "../ProcessApprovalSubPage/component/ApprovalFromPage.vue"
let dataTo = defineProps(["record"])
const emit = defineEmits(['close']);
let fieldChangeDetailRef = ref()
let fieldChangeGroupid = dataTo.record.projectId as string
let processInstanceId = dataTo.record.processInstanceId
let taskid = dataTo.record.taskId as string
let fieldValue = ref()
let showApprovalForm = ref()
let ApprovalFromPageRef = ref()
let resButton = reactive({
  showApprovalForm: false,
  isEdit: false,
  buttons: []
})
let fileList = reactive<Array<any>>([]);
onMounted(async () => {
  resButton = await getActionParam({ processInstanceId: processInstanceId, taskId: taskid, procesType: dataTo.record.procesType })
  showApprovalForm.value = resButton.showApprovalForm
  let res = await getFieldchangeByGroupid({ fieldChangeGroupid: fieldChangeGroupid })
  fieldValue.value = res

})

function removeFile(option) {
  for (let i = 0; i < fileList.length; i++) {
    if (fileList[i].file.name == option.name) {
      fileList.splice(i, 1)
    }
  }
}
function httpRequest(option) {
  fileList.push(option)

}

// 上传前处理
async function beforeUpload(file) {
  let fileSize = file.size
  const FIVE_M = 5 * 1024 * 1024;
  //大于5M，不允许上传
  if (fileSize > FIVE_M) {
    ElMessage.error("最大上传5M")
    return false
  }
  return true
}
// 文件数量过多时提醒
function handleExceed() {
  ElMessage.warning("最多只能上传一个文件")
}




async function handleSubmit() {
  let approvalform = await ApprovalFromPageRef.value.getFieldsValueApprovalForm();
  let data = fieldChangeDetailRef.value.getnewFieldsValue()
  const params = new FormData()
  params.append("flag", approvalform.flag)
  params.append("fieldChangeGroupid", fieldChangeGroupid)
  params.append("comment", approvalform.comment)
  params.append("taskId", taskid)
  params.append("isEdit", resButton.isEdit == true ? "1" : "0")
  Object.keys(data).forEach(key => {
    params.append(key, data[key])
  })
  if (fileList.length > 0) {
    fileList.forEach((x) => {
      params.append("file", x.file)
    });
  }
  console.log("param", params, "approvalform", approvalform)
  if (await ApprovalFromPageRef.value.validateApprovalForm() && await fieldChangeDetailRef.value.validate()) {

    let res = await approvalFieldchange(params)
    console.log("提交成功！", res)
    emit("close")


  }
}
async function exit() {
  emit("close")

}
</script>
<style></style>