<template>
  <div>
    <el-dialog title="考前说明" :visible.sync="dialogVisible" width="49%">
      <div style="padding: 0 15px">
        <span class="top-title">{{ dialogData.fileName }}</span>
        <div class="center-cont">
          <div class="item-cont">
            <div style="width: 50px; height: 50px">
              <el-image :src="url1" fit="contain"></el-image>
            </div>
            <div class="item-title">
              <span class="top-title">{{ dialogData.totalScore || 0 }}分</span>
              <span>试卷总分</span>
            </div>
          </div>
          <div class="item-cont">
            <div style="width: 50px; height: 50px">
              <el-image :src="url2" fit="contain"></el-image>
            </div>
            <div class="item-title">
              <span class="top-title">{{ dialogData.passScore || 0 }}分</span>
              <span>及格分数</span>
            </div>
          </div>
          <div class="item-cont">
            <div style="width: 50px; height: 50px">
              <el-image :src="url3" fit="contain"></el-image>
            </div>
            <div class="item-title">
              <span class="top-title">{{ dialogData.examTime || 0 }}分钟</span>
              <span>考试时间</span>
            </div>
          </div>
        </div>

        <div style="margin-top: 30px">
          <span>考前说明：</span>
          <div class="bottom-cont">{{ dialogData.statement }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="goExam">进入考试</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogData: {
        fileName: '', // 试卷名称
        totalScore: 0, // 总分
        passScore: 0, // 及格分数
        examTime: 0, // 考试时长
        statement: '', // 考前说明
      },
      url1: require('@/assets/images/dsaa.png'),
      url2: require('@/assets/images/100.jpg'),
      url3: require('@/assets/images/time.png'),
    }
  },
  methods: {
    openDialog(params) {
      console.log('🚀 ~ openDialog ~ 弹框数据:', params)
      this.dialogData = params
      this.dialogVisible = true
    },
    goExam() {
      this.dialogVisible = false
      this.$router.push({ path: '/educTrainLearn/examTask/examination', query: { ...this.dialogData } })
    },
  },
}
</script>

<style lang="scss" scoped>
.top-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 20px;
}
.center-cont {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  .item-cont {
    padding: 28px;
    display: flex;
    align-items: center;
    background-color: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    .item-title {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
.bottom-cont {
  margin-top: 10px;
  min-height: 100px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
}
</style>
