<template>
  <el-dialog
    v-model="show" title="查看考试信息" :close-on-click-modal="true" width="80%"
    align-center @close="close"
  >
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="考级基本信息" name="1">
        <el-descriptions border>
          <el-descriptions-item 0 label="考级名称">
            {{ form.name }}
          </el-descriptions-item>
          <el-descriptions-item label="申请日期">
            {{ parseTime(form.applyTime, '{y}-{m}-{d}') }}
          </el-descriptions-item>
          <el-descriptions-item label="申请单位">
            {{ form.memberName }}
          </el-descriptions-item>
          <el-descriptions-item label="考官">
            {{ form.examinerNames?.split('，').join('/') }}
          </el-descriptions-item>
          <el-descriptions-item label="考试开始时间">
            {{ parseTime(form.startTime,'{y}-{m}-{d} {h}:{i}') }}
          </el-descriptions-item>
          <el-descriptions-item label="考试结束时间">
            {{ parseTime(form.endTime, '{y}-{m}-{d} {h}:{i}') }}
          </el-descriptions-item>
          <el-descriptions-item label="考级地点">
            {{ form.address }}
          </el-descriptions-item>
          <el-descriptions-item v-if="userStore.showPrice" label="总金额">
            {{ (form.totalAmount*1).toFixed(2) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="考生信息" name="2">
        <div class="vipData">
          <div>人数合计： <span>{{ tablePersonInfo.total }}</span>人</div>
          <div v-for="l in tablePersonInfo.levelArr" :key="l.level">{{ szToHz(l.level) }}级：  <span>{{ l.num }} </span>人</div>
        </div>
        <br>
        <el-table v-loading="loading" border :data="infoList">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="姓名" align="center" prop="realName" min-width="100" />
          <el-table-column label="证件类型" align="center" prop="idcTypeStr" min-width="90" />
          <el-table-column label="证件号码" align="center" prop="idcCode" min-width="170" />
          <el-table-column label="所属单位（团体会员）" align="center" prop="memName" min-width="170" />
          <el-table-column label="原有级别" align="center" prop="levelOld" min-width="80">
            <template #default="scope">
              <span v-if="scope.row.levelOld">
                {{ szToHz(scope.row.levelOld) }}级
              </span>
              <span v-else>十级</span>
            </template>
          </el-table-column>
          <el-table-column label="考试级别" align="center" prop="levelNew" min-width="80">
            <template #default="scope">
              {{ szToHz(scope.row.levelNew) }}级
            </template>
          </el-table-column>
          <el-table-column v-if="userStore.showPrice" label="金额" align="center" prop="examFee" min-width="80">
            <template #default="scope">
              {{ (scope.row.examFee * 1).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="是否通过" align="center" prop="isPass" min-width="80">
            <template #default="scope">
              {{ '1' == scope.row.isPass ? '是' : '否' }}
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          v-model:page="selectForm.pageNum"
          v-model:limit="selectForm.pageSize"
          :total="total"
          @pagination="getList"
        />
      </el-collapse-item>
      <el-collapse-item v-if="recordList.length>0" title="审核信息" name="3">
        <el-table :data="recordList" border>
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="审核协会" align="center" prop="deptName" min-width="120" />
          <el-table-column label="审核时间" align="center" prop="handleDate" min-width="170" />
          <el-table-column label="审核状态" align="center" prop="auditStatusStr" min-width="100">
            <template #default="scope">
              <span
                :class="{
                  'text-success':scope.row.auditStatus=='1',
                  'text-danger':scope.row.auditStatus=='2',
                  'text-warning':scope.row.auditStatus=='3'
                }"
              >{{ scope.row.auditStatusStr }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="reason" min-width="140" :show-overflow-tooltip="true" />
        </el-table>

      </el-collapse-item>
    </el-collapse>
  </el-dialog>
</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { toRefs } from 'vue'
import { getApprovalRecord, getExamPersonNum, getInfo } from '@/api/exam/info'
import _ from 'lodash'
import { studentList } from '@/api/exam/person'
import { szToHz } from '@/utils/ruoyi'
import useUserStore from '@/store/modules/user'


const userStore = useUserStore()
const data = reactive({
  show: false,
  loading: false,
  form: {},
  infoList: [],
  activeNames: '1',
  tablePersonInfo: {},
  recordList: [],
  total: 0,
  selectForm: {
    pageNum: 1,
    pageSize: 10
  }
})
const { show, form, infoList, loading, tablePersonInfo, activeNames, recordList, total, selectForm } = toRefs(data)

let examId = null
let recordId = null

function open(row, params) {
  params = params || {}

  show.value = true
  activeNames.value = ['1', '2']
  infoList.value = []
  recordList.value = []

  if (params.hasApproval) {
    form.value = row
    examId = row.examId
    recordId = row.recordId
  } else {
    examId = row
    recordId = null

    getInfo(examId).then(res => {
      const data = res.data
      form.value = data
    })
  }

  getApprovalRecord(examId).then((res) => {
    recordList.value = res.data.levelSteps
  })

  handleChange(activeNames)
}

function getTablePersonInfo() {
  const levelArr = []
  let total = 0
  getExamPersonNum(examId, recordId, '1').then(res => {
    _.each(res.data, (val, key) => {
      if (val > 0) {
        levelArr.push({
          level: key,
          num: val
        })
        total += val
      }
    })

    tablePersonInfo.value = {
      total: total,
      levelArr: _.sortBy(levelArr, (l) => {
        return l.level
      })
    }
  })
}

function handleChange(val) {
  if (_.indexOf(val, '2') && infoList.value.length == 0) {
    loading.value = true
    if (examId) {
      selectForm.value.examId = examId
      selectForm.value.recordId = recordId
      getList()
    }
  }
}

function getList() {
  loading.value = true
  studentList(selectForm.value).then(response => {
    infoList.value = response.rows
    total.value = response.total
    loading.value = false
  }).then(getTablePersonInfo)
}

function close() {
  show.value = false
  total.vaue = 0
  selectForm.value.pageSize = 10
  selectForm.value.pageNum = 1
}

defineExpose({
  open,
  close
})


</script>

<style scoped>
.col-4{
  padding: 10px;
  border:1px solid #ebeef5;
  font-size: 14px;
  text-align: center;
}
.first{
  font-weight: 600;
  background-color: #f8f8f9;
}
.flex{
  display: flex;
}
.flex-1{
  flex:1;
  padding: 10px;
  font-size: 16px;
  background-color: #f8f8f9;
  border:1px solid #ebeef5;
}
.flex-1>span{
  font-weight: 600;
  margin-left: 10px;
  margin-right: 10px;
}

.card{
  background-color: #f5fbfe;
}
.col-4{
  font-size: 14px;
  text-align: center;
  border: 1px solid #ebeef5;
  padding: 10px 0;
  color: #909399;
  word-break:break-all;

}
.first{
  font-weight: 500;
  color: #000;
  font-size: 15px;

}

.tableBox td{
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  border-color:#ebeef5  ;
  padding: 5px 0;

}
.tableBox th{
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  background-color: #f5f7fa ;
  border-color:#ebeef5  ;
  padding: 5px 0;
}
</style>