<script setup name="indexConfigApproveDetail">
import Accessory from '@/components/accessory/index.vue'

import { ref, onMounted, getCurrentInstance } from 'vue'
// import { detail } from '@/http/apis/performanceEvaluation/indicatorTemplate'
import { useRoute } from 'vue-router'
import { dictionary } from '@/http/apis/projectCollection/projectCollectionEnter'
import store from '@/store'
import { auditDetail, doAudit } from '@/http/apis/performanceEvaluation/performanceApprove'
import { templateTypeList } from '@/http/apis/performanceEvaluation/indicatorTemplate'

const { proxy } = getCurrentInstance(),
  { operationTypeOptions } = store.dictStore.globalDicts || {},
  dictionaryList = ref([]),
  // 审核信息
  submitLoading = ref(false),
  // 通过
  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
      }
    })
  },
  route = useRoute(),
  detailData = ref({}),
  data = ref({}),
  getDetail = async () => {
  // const res = await detail(route.query.id)
    const res = await auditDetail(route.query.id)
    detailData.value = {
      ...res.data
    // additionalIndexDetails: res.data?.additionalIndexDetails || []
    }
    data.value = res.data.data ? JSON.parse(res.data.data) : {}
  },
  templateTypeListData = ref(),
  getTemplateTypeList = async () => {
    const res = await templateTypeList()
    templateTypeListData.value = res.data
  }
onMounted(async () => {
  dictionaryList.value = (await dictionary({ type: 'PROJECT_TYPE' })).data
  getTemplateTypeList()
  getDetail()
})
</script>
<template>
  <div class="footerPage indexConfigApproveDetail">
    <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="配置人员">
              {{ detailData.createBy||'-' }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核状态">
              <span :class="`${detailData.auditStatus===1?'text-warning':detailData.auditStatus===2?'text-success':'text-danger'}`">{{ detailData.auditStatusName||'-' }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="detailData.auditStatus!==1&&detailData.auditMessage" :span="12">
            <el-form-item label="驳回原因">
              {{ detailData.auditMessage||'-' }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核操作">
              {{ operationTypeOptions[detailData.operationType]||'-' }}
            </el-form-item>
          </el-col>
          <el-col v-if="detailData.auditStatus!==1" :span="12">
            <el-form-item label="审核人员">
              {{ detailData.auditBy||'-' }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提交审核时间">
              {{ detailData.createOn||'-' }}
            </el-form-item>
          </el-col>
          <el-col v-if="detailData.auditStatus!==1" :span="12">
            <el-form-item label="审核时间">
              {{ detailData.auditOn||'-' }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card header="基本信息" shadow="never" class="mb-16 search">
      <el-form
        :model="detailData"
        label-position="right"
        label-width=""
        label-suffix=":"
      >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="模板名称">
              {{ data.name }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="false" label="项目类型">
              {{ dictionaryList?.filter(i => i.type === 'PROJECT_TYPE')?.find(i=>i.value===data.projectType)?.label||'-' }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="预算年度">
              {{ data.projectYear }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指标模板类型">
              {{ templateTypeListData?.find(i=>i.id===data.templateType)?.name ||'-' }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card header="评价指标信息" shadow="never">
      <el-form
        ref="formRef1"
        label-suffix="："
        :model="data"
      >
        <div v-for="(one,index) in data.templateDetails" :key="index">
          <div class="module-box">
            <el-row class="mb-16" :gutter="16">
              <el-col :span="12">
                <el-form-item
                  label="一级指标"
                >
                  {{ data.templateDetails[index].name }}
                </el-form-item>
              </el-col>
            </el-row>
            <div v-for="(two,key) in one.children" :key="key" class="ml-8 pl-16 sub-item">
              <el-row class="mb-16" :gutter="16">
                <el-col :span="12">
                  <el-form-item
                    label="二级指标"
                  >
                    {{ data[`templateDetails`][index].children[key].name }}
                  </el-form-item>
                </el-col>
              </el-row>
              <div v-for="(three,i) in two.children" :key="i" class="pl-24 mb-16">
                <el-row :gutter="16">
                  <el-col :span="12">
                    <el-form-item
                      label="三级指标"
                    >
                      {{ data[`templateDetails`][index].children[key].children[i].name
                      }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="指标分值"
                    >
                      {{ data[`templateDetails`][index].children[key].children[i].indexScore }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :span="12">
                    <el-form-item
                      label="指标细则"
                    >
                      {{ data[`templateDetails`][index].children[key].children[i].indexDetail }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="评分细则"
                    >
                      {{ data[`templateDetails`][index].children[key].children[i].gradeDetail }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <div class="flex items-center">
                      <el-form-item
                        label="是否上传佐证材料"
                      >
                        {{ data[`templateDetails`][index].children[key].children[i].isUploadSupportFile&&JSON.parse(data[`templateDetails`][index].children[key].children[i].isUploadSupportFile)?'是':'否' }}
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col v-if="false&&data[`templateDetails`][index].children[key].children[i].isUploadSupportFile&&JSON.parse(data[`templateDetails`][index].children[key].children[i].isUploadSupportFile)" :span="12">
                    <el-form-item
                      label="佐证材料附件"
                      class="ml-4"
                    >
                      <accessory
                        v-for="(single , order) in data[`templateDetails`][index].children[key].children[i].supportFile&&JSON.parse(data[`templateDetails`][index].children[key].children[i].supportFile)"
                        :key="order"
                        :file-name="single.originalFileName"
                        :file-id="single.id"
                        :is-down-load="true"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="佐证材料"
                    >
                      {{ data[`templateDetails`][index].children[key].children[i].supportMaterial }}
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <el-collapse v-if="data.additionalIndexDetails?.length">
          <el-collapse-item>
            <template #title>
              <div class="collapse-title">附加指标</div>
            </template>
            <div v-for="(one,index) in data.additionalIndexDetails" :key="index">
              <div class="module-box">
                <el-row class="mb-16" :gutter="16">
                  <el-col :span="12">
                    <el-form-item
                      label="一级指标"
                    >
                      {{ data.additionalIndexDetails[index].name }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <div v-for="(two,key) in one.children" :key="key" class="ml-8 pl-16 sub-item">
                  <el-row class="mb-16" :gutter="16">
                    <el-col :span="12">
                      <el-form-item
                        label="二级指标"
                      >
                        {{ data[`additionalIndexDetails`][index].children[key].name }}
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <div v-for="(three,i) in two.children" :key="i" class="pl-24 mb-16">
                    <el-row :gutter="16">
                      <el-col :span="12">
                        <el-form-item
                          label="三级指标"
                        >
                          {{ data.additionalIndexDetails[index].children[key].children[i].name }}
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item
                          label="指标分值"
                        >
                          {{ data[`additionalIndexDetails`][index].children[key].children[i].indexScore }}
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="16">
                      <el-col :span="12">
                        <el-form-item label="指标细则">
                          {{ data[`additionalIndexDetails`][index].children[key].children[i].indexDetail }}
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item
                          label="评分细则"
                        >
                          {{ data[`additionalIndexDetails`][index].children[key].children[i].gradeDetail }}
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <div class="flex items-center">
                          <el-form-item
                            label="是否上传佐证材料"
                          >
                            {{ data[`additionalIndexDetails`][index].children[key].children[i].isUploadSupportFile&&JSON.parse(data[`additionalIndexDetails`][index].children[key].children[i].isUploadSupportFile)?'是':'否' }}
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col v-if="false&&data[`additionalIndexDetails`][index].children[key].children[i].isUploadSupportFile&&JSON.parse(data[`additionalIndexDetails`][index].children[key].children[i].isUploadSupportFile)" :span="12">
                        <el-form-item
                          label="佐证材料附件"
                        >
                          <accessory
                            v-for="(single , order) in data[`additionalIndexDetails`][index].children[key].children[i].supportFile&&JSON.parse(data[`additionalIndexDetails`][index].children[key].children[i].supportFile)"
                            :key="order"
                            :file-name="single.originalFileName"
                            :file-id="single.id"
                            :is-down-load="true"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item
                          label="佐证材料"
                        >
                          {{ data[`additionalIndexDetails`][index].children[key].children[i].supportMaterial }}
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </el-card>
    <div v-if="detailData?.auditStatus===1&&$route.name!=='templateDetail'" class="footer">
      <el-button @click="$router.go(-1)"> 返回 </el-button>
      <el-button
        type="primary"
        :loading="submitLoading"
        @click="pass"
      > 审核通过 </el-button>
      <el-button
        type="danger"
        @click="refuse"
      > 驳回 </el-button>
    </div>
  </div>
  <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>
<style lang="less">
.indexConfigApproveDetail{
  .module-box{
    background: #f5f8fa;
    border-radius: 4px;
    padding: 16px 24px;
    margin-bottom: 16px;
    .el-form-item{
      margin-bottom: 0;
    }
    .sub-item{
      border-left: 4px solid rgba(9, 103, 253, 0.2);
    }
    .add-icon{
      background: rgba(9, 103, 253, 0.06);
      border-radius: 4px;
      font-size: 14px;
      color: #0967fd;
      width: 22px;
      height: 22px;
      line-height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      &.del{
        color: #f5222d;
        background: rgba(245, 34, 45, 0.06);
      }
    }
  }
}
</style>
