<script setup name="reformCheckHandle">
import { ref, onMounted, nextTick } from 'vue'
import MarkScore
  from '@/pages/performanceEvaluation/reformCheck/reformCheckProjectList/reformCheckHandle/components/markScore.vue'
import { detail } from '@/http/apis/performanceEvaluation/projectReform'
import { projectDetail } from '@/http/apis/projectStoreManage/projectStore'
import Accessory from '@/components/accessory/index.vue'
import { useRoute } from 'vue-router'
import { changFilesParam } from '@/utils/uploadAction'
import SureScore
  from '@/pages/performanceEvaluation/reformCheck/reformCheckProjectList/reformCheckHandle/components/sureScore.vue'
import { submit } from '@/http/apis/performanceEvaluation/reformCheck'
import store from '@/store'
const stepActive = ref(0),
  { statusOptions } = store.dictStore.globalDicts || {},
  route = useRoute(),
  formData1 = ref({}),
  formRef1 = ref(),
  formRef2 = ref(),
  loading = ref(false),
  appraisalInfoList = ref([]),
  next = () => {
    if (stepActive.value === 0) {
      formRef1.value.validate(valid => {
        if (valid) {
          stepActive.value++
        }
      })
    } else if (stepActive.value === 1) {
      formRef2.value.formRef.validate(async valid => {
        if (valid) {
          const templateDetailsData = getLastChild(formRef2.value.form.templateDetails, [])
          const additionalIndexDetailsData = getLastChild(formRef2.value.form.additionalIndexDetails, [])
          appraisalInfoList.value = [...templateDetailsData, ...additionalIndexDetailsData]
          await nextTick()
          stepActive.value++
        }
      })
    } else if (stepActive.value === 2) {
      submitResult()
    } else {
      stepActive.value++
    }
  },
  submitResult = async () => {
    loading.value = true
    const postData = {
      appraisalId: route.query.appraisalId * 1,
      appraisalProjectId: route.query.projectId * 1,
      appraisalProjectCode: route.query.projectCode,
      ...formData1.value,
      appraisalInfoList: appraisalInfoList.value
    }
    try {
      await submit(postData)
      stepActive.value++
      loading.value = false
    } catch (e) {
      loading.value = false
    }
  },
  // 用于回调的函数
  getLastChild = (data, list) => {
    const filedName = 'selfAppraisalScoreInfo4'
    data.forEach((item) => {
      if (item.children && item.children.length > 0) {
        getLastChild(item.children, list)
      } else {
        list.push({
          projectTemplateDetailId: item.templateId,
          score: item[filedName].appraisalScore,
          appraisalBasis: item[filedName].appraisalBasis,
          appraisalBasisAppendix: item[filedName].appraisalBasisAppendix?.length && JSON.stringify(changFilesParam(item[filedName].appraisalBasisAppendix)) || undefined
        })
      }
    })
    return list
  },
  rectifyDetailData = ref({}),
  getRectifyDetail = async () => {
    const res = await detail(route.query.appraisalId, route.query.projectCode)
    rectifyDetailData.value = res.data
  },
  projectDetailData = ref({}),
  getProjectDetail = async () => {
    const res = await projectDetail(route.query.projectId)
    projectDetailData.value = res.data
  }
onMounted(() => {
  getProjectDetail()
  getRectifyDetail()
})
</script>

<template>
  <div class="footerPage">
    <el-card class="mb-16">
      <div class="card-header">
        <div class="flex justify-between items-center">
          <div class="flex-1">
            <p class="font-bold">{{ projectDetailData.projectName }}</p>
            <div class="mt-8 search">
              <el-form label-suffix=":">
                <el-row :gutter="24">
                  <el-col :span="6">
                    <el-form-item label="申报单位">{{ projectDetailData.buildOrgName }}</el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="项目状态">{{ statusOptions[projectDetailData.status]?.name||'-' }}</el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="批复金额">{{ projectDetailData.approvalAmount }}万元</el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="预算年度">{{ projectDetailData.projectYear }}</el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
          <el-button v-if="$route.name==='applicationMarkDetail'" type="primary" icon="Download">下载分析报告</el-button>
        </div>
      </div>
    </el-card>
    <el-card class="mb-16">
      <el-steps :active="stepActive">
        <el-step title="审核整改情况" />
        <el-step title="核查打分" />
        <el-step title="确认打分" />
        <el-step title="完成" />
      </el-steps>
    </el-card>
    <el-card v-show="stepActive===0">
      <template #header>审核整改情况</template>
      <el-descriptions
        title="整改意见"
        :column="2"
        border
        class="mb-16"
      >
        <el-descriptions-item span="2" label="整改意见">{{ rectifyDetailData?.rectifyOpinion }}</el-descriptions-item>
        <el-descriptions-item label="提交人">{{ rectifyDetailData.rectifyResSubEmployee?.username }}</el-descriptions-item>
        <el-descriptions-item label="提交时间">{{ rectifyDetailData?.rectifyResSubTime }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        title="整改情况"
        :column="2"
        border
        class="mb-16"
      >
        <el-descriptions-item span="2" label="整改结果说明">{{ rectifyDetailData?.rectifyResult }}</el-descriptions-item>
        <el-descriptions-item label="相关材料" span="2">
          <p v-for="(file,fileIndex) in rectifyDetailData.rectifyResultAppendix&&JSON.parse(rectifyDetailData.rectifyResultAppendix)" :key="fileIndex" class="mb-4">
            <accessory :file-name="file.originalFileName" :file-id="file.id" />
          </p>
        </el-descriptions-item>
        <el-descriptions-item label="提交人">{{ rectifyDetailData?.rectifySubmitEmployee?.username }}</el-descriptions-item>
        <el-descriptions-item label="提交时间">{{ rectifyDetailData?.rectifySubmitTime }}</el-descriptions-item>
      </el-descriptions>
      <p class="font-bold mb-16">审核</p>
      <el-form
        ref="formRef1"
        :model="formData1"
        label-suffix=":"
        label-width="100"
      >
        <el-form-item label="审核结果" prop="rectifyAuditResult" :rules="[{required:true,message:'请选择'}]">
          <el-radio-group v-model="formData1.rectifyAuditResult">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input
            v-model="formData1.rectifyAuditOpinion"
            type="textarea"
            show-word-limit
            :maxlength="500"
            placeholder="请填写"
          />
        </el-form-item>
      </el-form>
    </el-card>
    <mark-score v-show="stepActive===1" ref="formRef2" />
    <sure-score v-if="stepActive===2" :appraisal-info-list="appraisalInfoList" />
    <el-card v-show="stepActive===3">
      <el-result
        icon="success"
        title="核查完成"
      >
        <template #extra>
          <el-button @click="$router.go(-1)">返回列表</el-button>
        </template>
      </el-result>
    </el-card>
    <div class="footer">
      <el-button
        v-if="stepActive>0&&stepActive<3"
        type="primary"
        plain
        :loading="loading"
        @click="stepActive--"
      >上一步</el-button>
      <el-button
        v-if="stepActive <3"
        type="primary"
        :loading="loading"
        @click="next"
      >下一步</el-button>
      <el-button @click="$router.go(-1)">返回</el-button>
    </div>
  </div>
</template>
