<script setup name="planDetail">

import { getCurrentInstance, h, onMounted, reactive, ref } from 'vue'
import { detail, groupDetail } from '@/http/apis/performanceEvaluation/evaluationPlan'
import { useRoute } from 'vue-router'
import { auditDetail, doAudit } from '@/http/apis/performanceEvaluation/performanceApprove'
import store from '@/store'
import { templateTypeList } from '@/http/apis/performanceEvaluation/indicatorTemplate'

const { operationTypeOptions, projectTypeOptions } = store.dictStore.globalDicts || {},
  { proxy } = getCurrentInstance(),
  route = useRoute(),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName',
      minWidth: '200',
      showOverflowTooltip: true
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: 80
    },
    {
      label: '项目金额',
      key: 'declareAmount',
      prop: 'declareAmount'
    },
    {
      label: '申报单位',
      key: 'buildOrgName',
      prop: 'buildOrgName'
    },
    {
      label: '项目类型',
      key: 'projectType',
      prop: 'projectType',
      render: row => h('span', projectTypeOptions[row.projectType] || '-'),
      width: 80
    },
    {
      label: '模板类型',
      key: 'templateType',
      prop: 'templateType',
      render: row => h('span', templateTypeListData.value?.find(i => i.id === row.templateType)?.name || '-')
    },
    // {
    //   label: '是否评价',
    //   key: 'isAppraisal',
    //   prop: 'isAppraisal',
    //   render: row => h('span', row.isAppraisal ? '是' : '否'),
    //   width: 80
    // },
    {
      label: '是否复评',
      key: 'isReAppraisal',
      prop: 'isReAppraisal',
      render: row => h('span', row.isReAppraisal ? '是' : '否'),
      width: 80
    }
  ]),
  column1 = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '应用名称',
      key: 'relatedExistsApplication',
      prop: 'relatedExistsApplication',
      minWidth: 150,
      render: row => h('span', row.relatedExistsApplication || row.applicationName),
      showOverflowTooltip: true
    },
    {
      label: '申报单位',
      key: 'buildOrgName',
      prop: 'buildOrgName'
    },
    {
      label: '应用类型',
      key: 'applicationType',
      prop: 'applicationType'
    },
    {
      label: '应用领域',
      key: 'bizDomain',
      prop: 'bizDomain'
    },
    {
      label: '发布端',
      key: 'publishSide',
      prop: 'publishSide'
    }
  ]),
  column2 = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '分组名称',
      key: 'name',
      prop: 'name',
      render: row => h('span', row.name)
    },
    {
      label: '复评人员',
      key: 'reAppraisalUsers',
      prop: 'reAppraisalUsers',
      render: row => h('span', row.reAppraisalUsers.map(i => i.username).join('、'))
    },
    {
      label: '核查人员',
      key: 'verificationUsers',
      prop: 'verificationUsers',
      render: row => h('span', row.verificationUsers.map(i => i.username).join('、'))
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn'
    },
    {
      label: '操作',
      slot: 'action',
      fixed: 'right'
    }
  ]),
  column3 = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName'
    },
    {
      label: '项目类型',
      key: 'projectTypeName',
      prop: 'projectTypeName'
    },
    {
      label: '申报金额（万元）',
      key: 'declareAmount',
      prop: 'declareAmount',
      width: '140'
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear'
    }
  ]),
  tableListRef = ref(),
  tableListRef1 = ref(),
  formData = ref({}),
  fromRef = ref(),
  auditInfo = ref({}),
  getDetail = async () => {
    if (route.name === 'planApproveDetail' || route.query.auditId) {
      const res = await auditDetail(route.name === 'planApproveDetail' ? route.query.id : route.query.auditId)
      auditInfo.value = {
        ...res.data
      }
      formData.value = {
        ...res.data?.appraisalDetail,
        target: res.data?.appraisalDetail.target.split(',')
      }
    } else {
      const res = await detail(route.query.id)
      auditInfo.value = {
        ...res.data.auditInfo
      }
      formData.value = {
        ...res.data,
        target: res.data.target.split(',')
      }
    }
  },
  targetOptions = {
    1: '项目',
    2: '应用'
  },
  dialogVisible = ref(false),
  groupData = ref({}),
  showGroupDetail = async (data) => {
    if (data?.id) {
      const res = await groupDetail(data.id)
      groupData.value = {
        ...res.data,
        reAppraisalUsers: res.data.reAppraisalUsers.map(i => {
          return {
            ...i,
            name: i.username,
            phoneNo: i.mobile,
            orgName: i.empPosUnitName
          }
        }),
        verificationUsers: res.data.verificationUsers.map(i => {
          return {
            ...i,
            name: i.username,
            phoneNo: i.mobile,
            orgName: i.empPosUnitName
          }
        })
      }
    }
    dialogVisible.value = true
  },
  // 审核信息
  // 通过
  pass = () => {
    proxy.$messageBox
      .confirm('是否确认审核通过?', '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await doAudit({
          id: route.query.id * 1,
          auditStatus: 2
        })
        proxy.$message.success('提交成功！')
        getDetail()
      })
  },
  // 驳回
  auditDialogVisible = ref(false),
  auditFormData = ref(),
  auditFormRef = ref(),
  refuse = () => {
    auditDialogVisible.value = true
    auditFormData.value = {
      auditMessage: ''
    }
  },
  submit = async (formEl) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
      if (valid) {
        await doAudit({
          id: route.query.id * 1,
          auditStatus: 3,
          ...auditFormData.value
        })
        proxy.$message.success('提交成功！')
        getDetail()
        auditDialogVisible.value = false
      }
    })
  },
  templateTypeListData = ref(),
  getTemplateTypeList = async () => {
    const res = await templateTypeList()
    templateTypeListData.value = res.data
  }
onMounted(() => {
  getTemplateTypeList()
  getDetail()
})
</script>

<template>
  <div class="footerPage">
    <el-card header="审核信息" class="mb-16 search" shadow="never">
      <el-form
        label-position="right"
        label-width=""
        label-suffix=":"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="配置人员">
              {{ auditInfo.createBy||'-' }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核状态">
              <span :class="`${auditInfo.auditStatus===1?'text-warning':auditInfo.auditStatus===2?'text-success':'text-danger'}`">{{ auditInfo.auditStatusName||'-' }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="auditInfo.auditStatus!==1&&auditInfo.auditMessage" :span="24">
            <el-form-item label="驳回原因">
              {{ auditInfo.auditMessage||'-' }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核操作">
              {{ operationTypeOptions[auditInfo.operationType]||'-' }}
            </el-form-item>
          </el-col>
          <el-col v-if="auditInfo.auditStatus!==1" :span="12">
            <el-form-item label="审核人员">
              {{ auditInfo.auditBy||'-' }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提交审核时间">
              {{ auditInfo.createOn||'-' }}
            </el-form-item>
          </el-col>
          <el-col v-if="auditInfo.auditStatus!==1" :span="12">
            <el-form-item label="审核时间">
              {{ auditInfo.auditOn||'-' }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card header="评价计划信息" shadow="never">
      <el-form
        ref="fromRef"
        :model="formData"
        label-position="right"
        label-width=""
        label-suffix=":"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="计划名称" prop="name">
              {{ formData.name }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="自评时间">
              项目终验后{{ formData.startSelfDays }}天后开始自评，{{ formData.completeSelfDays }}天内完成自评
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="评价对象">
              {{ formData.target?.map(i=>targetOptions[i]).join('、') }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.projects" :gutter="24">
          <el-col :span="24">
            <el-form-item label="预算年度">
              <span v-if="formData.projectYear.split">
                {{ formData.projectYear.split(',')?.[0] }}
                ~
                {{ formData.projectYear.split(',')?.[formData.projectYear.split(',').length-1] }}
              </span>
              <span v-else>-</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目金额（范围）">
              {{ formData.startAmount }}万元&nbsp;&le;&nbsp;项目金额&nbsp;&lt;&nbsp;{{ formData.endAmount }}万元
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目复评占比">
              {{ formData.reAppraisalRate }}%
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="最终评分公式">
              {{ formData.selfAppraisalScoreRate }}%自评分+{{ formData.reAppraisalScoreRate }}%复评分
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="评价项目" prop="projects">
              <table-list
                ref="tableListRef"
                :column="column"
                :pagination="false"
                :data="formData.projects"
                :empty-temp="false"
                class="flex-1"
              >
                <template #projectName="{scope}">
                  <a @click="$router.push({name:'scoreDetail',query:{projectId:scope.row.projectId,projectCode:scope.row.projectCode,appraisalId:route.query.id}})">{{ scope.row.projectName }}</a>
                </template>
              </table-list>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.applications" :gutter="24">
          <el-col :span="24">
            <el-form-item label="评价应用" prop="applications">
              <table-list
                ref="tableListRef1"
                :column="column1"
                :pagination="false"
                :data="formData.applications"
                :empty-temp="false"
                class="flex-1"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              {{ formData.remark||'-' }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.groups" :gutter="24">
          <el-col :span="24">
            <el-form-item label="项目分组" prop="groups">
              <table-list
                ref="tableListRef2"
                :column="column2"
                :pagination="false"
                :data="formData.groups"
                :empty-temp="false"
                class="flex-1"
              >
                <template #action="{scope}">
                  <a @click="showGroupDetail(scope.row)">详情</a>
                </template>
              </table-list>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div v-if="$route.name==='planApproveDetail'&&auditInfo.auditStatus===1" class="footer">
      <el-button @click="$router.go(-1)"> 返回 </el-button>
      <el-button
        type="primary"
        @click="pass"
      > 审核通过 </el-button>
      <el-button
        type="danger"
        @click="refuse"
      > 驳回 </el-button>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="分组详情"
    width="59%"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-position="right"
      label-width=""
      label-suffix=":"
    >
      <el-row :gutter="4">
        <el-col :span="12">
          <el-form-item label="分组名称" prop="name">
            <span>{{ groupData.name }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="4">
        <el-col :span="24">
          <el-form-item label="评价项目" prop="projects">
            <table-list
              ref="tableListRef"
              :column="column3"
              :pagination="false"
              :data="groupData.projects"
              class="w-full"
              :empty-temp="false"
            />
            <div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="4">
        <el-col :span="24">
          <el-form-item label="复评人员" prop="reAppraisalUsers">
            <template v-if="groupData.reAppraisalUsers?.length">
              <el-tag v-for="(item,index) in groupData.reAppraisalUsers" :key="index" class="mr-4 mb-8">{{ item.username }} | {{ item.empPosUnitName }} | {{ item.mobile }}</el-tag>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="4">
        <el-col :span="12">
          <el-form-item label="核查人员" prop="verificationUsers">
            <template v-if="groupData.verificationUsers?.length">
              <el-tag v-for="(item,index) in groupData.verificationUsers" :key="index" class="mr-4 mb-8">{{ item.username }} | {{ item.empPosUnitName }} | {{ item.mobile }}</el-tag>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="核查组长">
            <el-tag :key="index">{{ groupData.verifyLeader.username }} | {{ groupData.verifyLeader.empPosUnitName }} | {{ groupData.verifyLeader.mobile }}</el-tag>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
  <el-dialog
    v-model="auditDialogVisible"
    title="驳回"
    @close="auditDialogVisible = false"
  >
    <el-form ref="auditFormRef" :model="auditFormData">
      <el-form-item label="驳回原因" prop="auditMessage" :rules="[{required:true,message:'请输入'}]">
        <el-input v-model="auditFormData.auditMessage" type="textarea" placeholder="请输入驳回原因" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="flex justify-center">
        <el-button
          type="primary"
          @click="submit(auditFormRef)"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
