<template>
  <el-dialog
    v-model="show" :close-on-click-modal="true" align-center title="查看考试信息"
    width="80%"
    @close="close"
  >
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="1" title="考段基本信息">
        <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 || form.examLocation }}</el-descriptions-item>
          <el-descriptions-item label="总金额">{{ (form.totalAmount * 1).toFixed(2) }}</el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item name="4" title="邮寄地址">
        <el-descriptions border>
          <el-descriptions-item 0 label="姓名">
            {{ addressForm.name }}
          </el-descriptions-item>
          <el-descriptions-item label="联系方式">
            {{ addressForm.phone }}
          </el-descriptions-item>
          <el-descriptions-item label="收件地址">
            {{ addressForm.address }}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item name="2" title="考生信息">
        <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>
        <el-button size="small" style="margin: 10px 0" type="warning" @click="exportFn">导出</el-button>
        <br>
        <el-table v-loading="loading" :data="infoList" border>
          <el-table-column align="center" label="序号" type="index" width="55" />
          <el-table-column align="center" label="姓名" min-width="100" prop="realName" />
          <el-table-column align="center" label="证件类型" min-width="90" prop="idcTypeStr" />
          <el-table-column align="center" label="证件号码" min-width="170" prop="idcCode" />
          <el-table-column align="center" label="所属单位（单位会员）" min-width="160" prop="memName" />
          <el-table-column align="center" label="原有段位" min-width="80" prop="levelOld">
            <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 align="center" label="考试段位" min-width="80" prop="levelNew">
            <template #default="scope">
              {{ szToHz(scope.row.levelNew) }}段/品
            </template>
          </el-table-column>
          <el-table-column align="center" label="金额" min-width="80" prop="examFee">
            <!--            <template #default="scope">-->
            <!--              {{ '1' == scope.row.isPass ? scope.row.examFee : '' }}-->
            <!--            </template>-->
          </el-table-column>
          <el-table-column align="center" label="是否通过" min-width="80" prop="isPass">
            <template #default="scope">
              {{ '1' == scope.row.isPass ? '是' : '否' }}
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.pageNum"
          :total="total"
          @pagination="getList()"
        />
      
      </el-collapse-item>
      
      <el-collapse-item
        v-if="recordList.length>0 " name="3"
        title="审核信息"
      >
        <div v-if="type==2||type==4">
          <span>考段审核</span>
          <el-table :data="recordList" border>
            <el-table-column align="center" label="序号" type="index" width="55" />
            <el-table-column align="center" label="审核协会" prop="auditDeptName" />
            <el-table-column align="center" label="审核时间" prop="auditTime" />
            <el-table-column align="center" label="审核状态" prop="auditStatusStr">
              <template #default="scope">
                <span
                  :class="{
                    'text-success':scope.row.auditResult=='1',
                    'text-danger':scope.row.auditResult=='0',
                  }"
                >
                  <text v-if="scope.row.auditResult==9">审核中</text>
                  <text v-if="scope.row.auditResult==1">审核通过</text>
                  <text v-if="scope.row.auditResult==0">审核未通过</text>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="备注" prop="reason" />
          </el-table>
        </div>
        
        <div v-if="type==3||type==5">
          <span>成绩审核</span>
          <el-table :data="recordList" border>
            <el-table-column align="center" label="序号" type="index" width="55" />
            <el-table-column align="center" label="审核协会" prop="auditDeptName" />
            <el-table-column align="center" label="审核时间" prop="auditTime" />
            <el-table-column align="center" label="审核状态" prop="auditStatusStr">
              <template #default="scope">
                <span
                  :class="{
                    'text-success':scope.row.auditResult=='1',
                    'text-danger':scope.row.auditResult=='0',
                  }"
                >
                  <text v-if="scope.row.auditResult==9">审核中</text>
                  <text v-if="scope.row.auditResult==1">审核通过</text>
                  <text v-if="scope.row.auditResult==0">审核未通过</text>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="备注" prop="auditMsg" />
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, toRefs, reactive, computed, ref } from 'vue'
import { getApprovalRecord, getExamPersonNum, getInfo, getLogs } from '@/api/exam/info'
import _ from 'lodash'
import { studentList } from '@/api/exam/person'
import { szToHz } from '@/utils/ruoyi'

const { proxy } = getCurrentInstance()
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)

const props = defineProps({
  type: {
    type: String,
    default: '1'
  }
})
const addressForm = ref({})
const type = computed(() => props.type)
console.log(type.value)
let examId = null
let recordId = null

function open(params, approval) {
  show.value = true
  activeNames.value = ['1', '2', '4']
  infoList.value = []
  recordList.value = []
  
  if (approval) {
    examId = params.examId
    recordId = params.recordId
    form.value = params
  } else {
    examId = params
    recordId = null
    
    getInfo(examId).then(res => {
      form.value = res.data
      addressForm.value = res.data.postAddress ?? {}
    })
  }
  console.log(type.value)
  
  handleChange(activeNames)
  getLogsFn(examId)
}

async function getLogsFn(examId) {
  const res = await getLogs(examId, type.value)
  recordList.value = res.data
}

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
}

function exportFn() {
  proxy.download('/exam/person/export/studentList', {
    ...queryParams.value
  }, `考生信息_${new Date().getTime()}.xlsx`)
}

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>