<script name="applicationMark" setup>
import { getCurrentInstance, h, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { detail, save } from '@/http/apis/performanceEvaluation/applicationEvaluate'

const route = useRoute(),
  router = useRouter(),
  { proxy } = getCurrentInstance(),
  column1 = [
    {
      type: 'index',
      label: '序号',
      width: 60
    },
    {
      label: '指标名称',
      key: 'indexName',
      prop: 'indexName',
      width: 120
    },
    {
      label: '单位',
      key: 'unit',
      prop: 'unit',
      width: 80,
      render: row => h('span', row.unit || '-')
    },
    {
      label: '指标定义',
      key: 'indexDef',
      prop: 'indexDef',
      render: row => h('span', row.indexDef || '-')
    },
    {
      label: '分值',
      key: 'indexScore',
      prop: 'indexScore',
      width: 80
    },
    {
      label: '得分',
      key: 'appraisalScore',
      slot: 'appraisalScore',
      width: 100
    }
  ],
  column2 = [
    {
      type: 'index',
      label: '序号',
      width: 60
    },
    {
      label: '指标名称',
      key: 'businessIndicatorName',
      prop: 'businessIndicatorName',
      width: 100
    },
    {
      label: '指标描述',
      key: 'businessIndicatorDescription',
      prop: 'businessIndicatorDescription',
      render: row => h('span', row.businessIndicatorDescription || '-')
    },
    {
      label: '设计依据',
      key: 'indexDesignBasis',
      prop: 'indexDesignBasis',
      render: row => h('span', row.indexDesignBasis || '-')
    },
    {
      label: '计算方法',
      key: 'indexCalculationMethod',
      prop: 'indexCalculationMethod',
      render: row => h('span', row.indexCalculationMethod || '-')
    },
    {
      label: '分值',
      key: 'score',
      prop: 'score',
      width: 80
    },
    {
      label: '得分',
      key: 'appraisalScore',
      slot: 'appraisalScore',
      width: 100
    }
  ],
  formData = ref({
    commonIndexDetails: [], auxIndexDetails: [], businessIndexDetails: []
  }),
  formRef = ref(),
  getTableData = async () => {
    const res = await detail(route.query.appId, route.query.appraisalId)
    formData.value = {
      ...res.data,
      commonIndexDetails: res.data.commonIndexDetails || [],
      auxIndexDetails: res.data.auxIndexDetails || [],
      businessIndexDetails: res.data.businessIndexDetails || []
    }
  },
  loading = ref(false),
  submit = async (formEl) => {
    if (!formEl) {
      return
    }
    await formEl.validate(async (valid, v) => {
      if (valid) {
        loading.value = true
        const appAppraisalInfoList = [...formData.value.commonIndexDetails, ...formData.value.auxIndexDetails, ...formData.value.businessIndexDetails].map(i => {
          return {
            indexId: i.id,
            score: i.appraisalScore,
            indexType: i.indexType
          }
        })
        const postData = {
          applicationId: route.query.appId,
          appraisalId: route.query.appraisalId,
          appAppraisalInfoList
        }
        await save(postData)
        proxy.$message.success('提交成功')
        router.go(-1)
      } else {
        console.log(formData.value)
        console.log(v)
      }
    })
  }
onMounted(() => {
  getTableData()
})
</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">{{ formData.applicationName }}</p>
            <div class="mt-8 search">
              <el-form label-suffix=":">
                <el-row :gutter="24">
                  <el-col :span="6">
                    <el-form-item label="建设单位">{{ formData.buildOrgName }}</el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="应用状态">{{ formData.applicationStatus }}</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>
      <template #header>应用指标</template>
      <el-form
        ref="formRef"
        :model="formData"
        scroll-to-error
      >
        <p class="mb-8">通用指标</p>
        <table-list
          :column="column1"
          :data="formData.commonIndexDetails"
          :pagination="false"
          class="mb-16"
        >
          <template #appraisalScore="{scope}">
            <el-form-item
              v-if="$route.name==='applicationMark'&&scope.$index>=0"
              :prop="`commonIndexDetails[${scope.$index}].appraisalScore`"
              :rules="[{required:true,message:'请输入'}]"
              style="margin-bottom: 0"
            >
              <el-input-number
                v-model="scope.row.appraisalScore"
                :min="0"
                :max="scope.row.indexScore"
                placeholder="请输入"
                :precision="2"
                :controls="false"
              />
            </el-form-item>
            <span v-else>{{ scope.row.appraisalScore }}</span>
          </template>
        </table-list>
        <p class="mb-8">辅助指标</p>
        <table-list
          :column="column1"
          :data="formData.auxIndexDetails"
          :pagination="false"
          class="mb-16"
        >
          <template #appraisalScore="{scope}">
            <el-form-item
              v-if="$route.name==='applicationMark'&&scope.$index>=0"
              style="margin-bottom: 0"
              :prop="`auxIndexDetails[${scope.$index}].appraisalScore`"
              :rules="[{required:true,message:'请输入'}]"
            >
              <el-input-number
                v-model="scope.row.appraisalScore"
                :min="0"
                :max="scope.row.indexScore"
                placeholder="请输入"
                :precision="2"
                :controls="false"
              />
            </el-form-item>
            <span v-else>{{ scope.row.appraisalScore }}</span>
          </template>
        </table-list>
        <p class="mb-8">业务指标</p>
        <table-list
          :column="column2"
          :data="formData.businessIndexDetails"
          :pagination="false"
        >
          <template #appraisalScore="{scope}">
            <el-form-item
              v-if="$route.name==='applicationMark'&&scope.$index>=0"
              style="margin-bottom: 0"
              :prop="`businessIndexDetails[${scope.$index}].appraisalScore`"
              :rules="[{required:true,message:'请输入'}]"
            >
              <el-input-number
                v-model="scope.row.appraisalScore"
                :min="0.000001"
                :max="scope.row.score"
                placeholder="请输入"
                :precision="2"
                :controls="false"
              />
            </el-form-item>
            <span v-else>{{ scope.row.appraisalScore }}</span>
          </template>
        </table-list>
      </el-form>
    </el-card>
    <div class="footer">
      <el-button
        type="primary"
        :loading="loading"
        @click="submit(formRef)"
      >
        提交
      </el-button>
      <el-button @click="$router.go(-1)">返回</el-button>
    </div>
  </div>
</template>
