<template>
  <el-dialog
    v-model="show" :close-on-click-modal="true" align-center title="查看考试信息"
    width="80%" @close="close"
  >
    <el-collapse v-model="activeNames" v-loading="loading" @change="handleChange">
      <el-collapse-item name="1" title="考级基本信息">
        <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 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 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="170" prop="memName" />
          <el-table-column align="center" label="原有级别" min-width="80" prop="levelOld">
            <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 align="center" label="考试级别" min-width="80" prop="levelNew">
            <template #default="scope">
              {{ szToHz(scope.row.levelNew) }}级
            </template>
          </el-table-column>
          <el-table-column v-if="userStore.showPrice" align="center" label="金额" min-width="80" prop="examFee">
            <template #default="scope">
              {{ (scope.row.examFee * 1).toFixed(2) }}
            </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="selectForm.pageSize"
          v-model:page="selectForm.pageNum"
          :total="total"
          @pagination="getList"
        />
      </el-collapse-item>
      <el-collapse-item v-if="recordList.length>0" name="3" title="审核信息">
        <el-table :data="recordList" border>
          <el-table-column align="center" label="序号" type="index" width="55" />
          <el-table-column align="center" label="审核协会" min-width="120" prop="auditDeptName" />
          <el-table-column align="center" label="审核时间" min-width="170" prop="auditTime" />
          <el-table-column align="center" label="审核状态" min-width="100" 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==0">审核未通过</text>
                <text v-if="scope.row.auditResult==1">审核通过</text>
              </span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" align="center" label="备注" min-width="140" prop="auditMsg" />
        </el-table>
      
      </el-collapse-item>
    </el-collapse>
  </el-dialog>
</template>

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

const { proxy } = getCurrentInstance()
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', '2', '3', '4'],
  tablePersonInfo: {},
  recordList: [],
  total: 0,
  selectForm: {
    pageNum: 1,
    pageSize: 10
  }
})
const addressForm = ref({})
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', '3', '4']
  infoList.value = []
  recordList.value = []
  
  if (params.hasApproval) {
    form.value = row
    examId = row.examId
    recordId = row.recordId
  } else {
    examId = row
    recordId = null
    loading.value = true
    getInfo(examId).then(res => {
      loading.value = false
      form.value = res.data
      addressForm.value = res.data.postAddress ?? {}
    })
  }
  
  handleChange(activeNames)
  
  getLogsFn(examId)
}

async function getLogsFn(examId) {
  const res = await getLogs(examId, 1)
  recordList.value = res.data || []
  console.log(res)
}

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
}

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


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>