<template>
  <div>
    <img src="/images/student_banner.png" style="width: 100%" />
    <div class="student-query" v-if="detail.id">
      <el-card shadow="hover">
        <template #header>个人信息</template>
        <div class="student-query-info">
          <img :src="detail.avatar || '/images/default.jpg'" class="avatar" />
          <el-descriptions :column="1">
            <el-descriptions-item label="学生姓名">{{ detail.username }}</el-descriptions-item>
            <el-descriptions-item label="证件类型">居民身份证</el-descriptions-item>
            <el-descriptions-item label="证件号码">{{ detail.id_num }}</el-descriptions-item>
            <el-descriptions-item label="准考证号">{{ detail.admission_num }}</el-descriptions-item>
            <el-descriptions-item label="所属院校">{{ detail.school_name }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <el-card shadow="hover">
        <template #header>我的成绩</template>
        <h2>考核证书：商务数据分析技术-智能数据分析与实战应用（初级）</h2>
        <dl>
          <dt>考核单位：</dt>
          <dd>清控紫荆（北京）教育科技股份有限公司</dd>
        </dl>
        <dl>
          <dt>考核通过条件：</dt>
          <dd>各科成绩合格</dd>
        </dl>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }">
          <el-table-column prop="title" label="科目名称"></el-table-column>
          <el-table-column prop="exam_method" label="考试方式" align="center"></el-table-column>
          <el-table-column prop="pass_score" label="合格分数" align="center"> </el-table-column>
          <el-table-column prop="score" label="考试成绩" align="center">
            <template #default="{ row }">
              <template v-if="row.score">
                <p>考试成绩：{{ row.score }}分</p>
                <p>考试结果：{{ row.result }}</p>
              </template>
              <template v-else>--</template>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="证书邮寄地址"></el-table-column>
        </el-table>
        <p class="tips" v-if="!isPass">
          您的此次考试未能通过。如有意向参加补考，点击下方按钮缴纳相应补考费用，缴费成功后请留意补考时间和相关要求。
        </p>
      </el-card>
    </div>
    <el-result title="暂无信息" icon="info" v-else></el-result>
  </div>
</template>

<script>
import datalist from '@/assets/data.js'
import * as api from '@/api/article'

export default {
  data() {
    return {
      detail: {},
      tableData: [],
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    },
    train() {
      return datalist.find((item) => item.id == this.id) || datalist[0]
    },
    isPass() {
      return this.detail.score >= 60
    },
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 获取报名信息
    async getDetail() {
      if (!this.train) return
      const res = await api.getFormDetail({ periods: this.train.id })
      const detail = res.data.detail
      this.detail = detail
      this.tableData = [
        {
          title: '商务数据分析技术-智能数据分析与实战应用（初级）',
          exam_method: '机考',
          pass_score: 60,
          score: detail.score,
          address: detail.address,
          result: detail.score >= 60 ? '合格' : '未通过',
        },
      ]
    },
  },
}
</script>

<style lang="scss">
.student-query {
  max-width: 1200px;
  margin: 0 auto;
  .el-card {
    margin: 20px 0;
  }
  h2 {
    padding-left: 10px;
    font-size: 18px;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 20px;
    border-left: 4px solid var(--main-color);
  }
  dl {
    line-height: 30px;
    + dl {
      margin-top: 20px;
    }
    display: flex;
    dt {
      color: #999;
    }
    dd {
      flex: 1;
      color: #000;
    }
  }
  .tips {
    display: none;
    margin: 10px 0;
    color: #f00;
  }
}
.student-query-info {
  display: flex;
  gap: 30px;
  .avatar {
    width: 160px;
  }
  .el-descriptions {
    flex: 1;
    margin-top: 10px;
  }
}
</style>
