<template>
  <ai-detail>
    <template slot="title">
      <ai-title title="考试详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
      </ai-title>
    </template>
    <template slot="content">
      <ai-card title="基本信息">
        <template #content>
          <ai-wrapper
            label-width="120px">
            <ai-info-item label="微信昵称" :value="info.nickName"></ai-info-item>
            <ai-info-item label="手机号" :value="info.phone"></ai-info-item>
            <ai-info-item label="姓名" :value="info.realName"></ai-info-item>
            <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
            <ai-info-item label="地区" :value="info.areaName"></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card title="考试记录">
        <template #right>
          <el-button type="primary" v-if="!info.haveCertificate" @click="audit">审核发证</el-button>
        </template>
        <template #content>
          <ai-wrapper
            style="width: 100%"
            label-width="56px">
            <ai-info-item label="考试名称" :value="info.examinationName"></ai-info-item>
            <ai-info-item label="考试类型" :value="dict.getLabel('qjExaminationType', info.examinationType)"></ai-info-item>
            <ai-info-item label="考试场数" :value="info.examinationCount"></ai-info-item>
            <ai-info-item label="通过考试" :value="info.passCount"></ai-info-item>
            <ai-info-item label="是否发证" :value="info.haveCertificate ? '是' : '否'"></ai-info-item>
          </ai-wrapper>
          <ai-table
            :tableData="tableData"
            :col-configs="colConfigs"
            :total="total"
            style="margin-top: 6px;"
            :current.sync="search.current"
            :size.sync="search.size"
            @getList="getList">
          </ai-table>
        </template>
      </ai-card>
      <ai-card title="操作信息" v-if="info.haveCertificate">
        <template #content>
          <ai-wrapper
            style="width: 100%"
            label-width="80px">
            <ai-info-item label="发证审核人" :value="info.certificationUserName"></ai-info-item>
            <ai-info-item label="时间" :value="info.certificationTime"></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: 'Detail',

    props: {
      instance: Function,
      dict: Object,
      params: Object
    },

    data () {
      return {
        info: {},
        search: {
          current: 1,
          size: 10,
          title: ''
        },
        total: 0,
        tableData: [],
        colConfigs: [
          { prop: 'bizName',  label: '考试名称', align: 'left' },
          { prop: 'allSubjectNumber',  label: '题目数', align: 'center' },
          { prop: 'startTime',  label: '开始考试时间', align: 'center' },
          { prop: 'score',  label: '得分', align: 'center' },
          { prop: 'status',  label: '是否通过', align: 'center', format: v => v === '0' ? '否' : '是' }
        ]
      }
    },

    created () {
      this.getInfo()
      this.dict.load('qjLearnStatus').then(() => {
        this.getList()
      })
    },

    methods: {
      getInfo () {
        this.instance.post(`/app/appexaminationinfo/learningInfo?bizId=${this.params.id}&openId=${this.params.openId}`).then(res => {
          if (res.code === 0) {
            this.info = res.data
          }
        })
      },

      audit () {
        this.$confirm('发证审核通过后，将向居民颁发知法明理证书', '审核发证', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          closeOnClickModal: false,
          cancelButtonText: '取消'
        }).then(() => {
          this.instance.post(`/app/appcertificateinfo/auditCertificate?certificateId=${this.info.certificateId}&openId=${this.params.openId}`).then(res => {
            if (res.code == 0) {
              this.getInfo()
              this.$message.success('审核通过')
            }
          })
        }).catch((e) => {
        })
      },

      getList () {
        this.instance.post(`/app/appwechatuserqujinglearnrecord/list`, null, {
          params: {
            ...this.search2,
            bizType: 1,
            openId: this.params.openId,
            bizId: this.params.id
          }
        }).then(res => {
          if (res.code == 0) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },

      cancel (isRefresh) {
        this.$emit('change', {
          type: 'List',
          isRefresh: !!isRefresh
        })
      }
    }
  }
</script>

<style scoped lang="scss">
</style>
