<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 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 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="160" />
          <el-table-column label="原有段位" align="center" prop="levelOld" min-width="80">
            <template #default="scope">
              <span v-if="scope.row.levelOld && '0' != 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 label="金额" align="center" prop="examFee" min-width="80">
            <!--            <template #default="scope">-->
            <!--              {{ '1' == scope.row.isPass ? scope.row.examFee : '' }}-->
            <!--            </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="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="getList()"
        />

      </el-collapse-item>
      <el-collapse-item v-if="recordList.levelSteps?.length>0 || recordList.rankSteps?.length>0" title="审核信息" name="3">
        <span v-if="recordList.rankSteps?.length>0">考段审核</span>
        <el-table :data="recordList.levelSteps" border>
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="审核协会" align="center" prop="deptName" />
          <el-table-column label="审核时间" align="center" prop="handleDate" />
          <el-table-column label="审核状态" align="center" prop="auditStatusStr">
            <template #default="scope">
              <span :class="{'text-danger':scope.row.auditStatus=='2'}">{{ scope.row.auditStatusStr }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="reason" />
        </el-table>
        <div v-if="recordList.rankSteps?.length>0">
          <span>成绩审核</span>
          <el-table :data="recordList.rankSteps" border>
            <el-table-column type="index" width="55" align="center" label="序号" />
            <el-table-column label="审核协会" align="center" prop="deptName" />
            <el-table-column label="审核时间" align="center" prop="handleDate" />
            <el-table-column label="审核状态" align="center" prop="auditStatusStr">
              <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" />
          </el-table>
        </div>
      </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'


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


let examId = null
let recordId = null

function open(params, approval) {
  show.value = true
  activeNames.value = ['1', '2']
  infoList.value = []
  recordList.value = {}
  if (approval) {
    examId = params.examId
    recordId = params.recordId
    form.value = params
  } else {
    examId = params
    recordId = null

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

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

  handleChange(activeNames)
}

function getTablePersonInfo() {
  const levelArr = []
  let total = 0
  getExamPersonNum(examId, recordId, '2').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) {
      queryParams.value.examId = examId
      queryParams.value.recordId = recordId
      getList()
    }
  }
}

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

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

defineExpose({
  open,
  close: () => {
    show.value = false
  }
})

</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;
}
</style>