<template>
  <div class="content">
    <el-image class="top-img" :src="src" fit="contain"></el-image>
    <div class="title">{{ cardData.title }}</div>
    <div class="title2" v-if="isLibrary">题库名称: {{ cardData.questionName }}</div>
    <div>发布人: {{ cardData.publisher }}</div>
    <div v-if="isLearn">总时长: {{ cardData.totalDuration || 0 }}分钟</div>
    <div v-if="isLearn || isExam">{{ cardData.timeRange }}</div>
    <div v-if="isExam">
      <span>得分: {{ cardData.score || '暂无' }}</span>
      <span style="margin-left: 20px">
        <el-tag type="success" v-if="cardData.finish && Number(this.dataObj.score) > Number(this.dataObj.passScore)">
          及格
        </el-tag>
        <el-tag type="danger" v-if="cardData.finish && Number(this.dataObj.score) < Number(this.dataObj.passScore)">
          不及格
        </el-tag>
      </span>
      <span v-if="cardData.score && cardData.score > 0" style="margin-left: 50px">{{ cardData.isPass }}</span>
    </div>
    <div v-if="isLibrary">题目数: {{ cardData.questionNum }}</div>
    <el-divider></el-divider>
    <!-- 学习任务 -->
    <div class="bt-wrapper" v-if="isLearn">
      <div class="bt-item">
        <el-progress :percentage="Number(cardData.progress)" :stroke-width="10" :show-text="false"></el-progress>
        <div style="margin-top: 5px">学习进度: {{ cardData.progress }}%</div>
      </div>
      <div>
        <el-tag type="success" v-if="cardData.finish">已完成</el-tag>
        <el-tag type="info" v-else-if="cardData.unFinish">未完成</el-tag>
        <el-tag type="danger" v-else-if="cardData.overdue">逾期</el-tag>
      </div>
    </div>
    <!-- 考试 -->
    <div class="btn" v-if="isExam">
      <div style="margin-right: 10px">
        <el-tag type="success" v-if="cardData.finish">已考</el-tag>
        <el-tag type="info" v-else-if="cardData.unFinish">待考</el-tag>
        <el-tag type="danger" v-else>缺考</el-tag>
      </div>
      <el-button type="primary" size="mini" v-if="cardData.unFinish" @click="openExam">开始考试</el-button>
      <el-button type="primary" size="mini" v-if="cardData.finish" @click="goExamDetail">考试数据</el-button>
    </div>

    <!-- 考试弹窗 -->
    <BeforeExamDialog ref="beforeExamDialog" />
  </div>
</template>

<script>
import BeforeExamDialog from '@/views/educTrainLearn/components/BeforeExamDialog'

export default {
  props: {
    dataObj: {
      type: Object,
      default: () => {},
    },
    isLearn: {
      type: Boolean,
      default: false,
    },
    isExam: {
      type: Boolean,
      default: false,
    },
    isLibrary: {
      type: Boolean,
      default: false,
    },
  },
  components: { BeforeExamDialog },
  data() {
    return {
      src: require('@/assets/images/tushu.png'),
      cardData: {
        title: '', // 标题
        publisher: '', // 发布人
        totalDuration: '', // 总时长
        score: 0, // 得分
        isPass: 0, // 是否及格
        questionName: '', // 题库名称
        questionNum: '', // 题目数
        timeRange: '', // 时间范围
        progress: 0, // 进度
        isExam: 2, // 0: 缺考 1: 已考试 2: 待考
      },
      userUuid: this.$store.state.user.thisIds.uuid,
    }
  },
  created() {
    // console.log('🚀 ~ cardModule ~ created ~ this.userUuid', this.userUuid)
    if (this.isLearn) {
      this.cardData = {
        ...this.dataObj,
        id: this.dataObj.id,
        userId: this.$store.state.user.id,
        title: this.dataObj.name,
        publisher: this.dataObj.userName,
        totalDuration: this.dataObj.duration,
        progress: Number(this.dataObj.learningProgress),
        timeRange: this.dataObj.learningDate,
      }
    } else if (this.isExam) {
      this.cardData = {
        ...this.dataObj,
        title: this.dataObj.name,
        publisher: this.dataObj.createUserName,
        timeRange: this.dataObj.time,
      }
    } else if (this.isLibrary) {
      console.log('🚀 ~ 自主练习-obj', this.dataObj)
      this.cardData = {
        ...this.dataObj,
        questionName: this.dataObj.name,
        publisher: this.dataObj.createUserName,
      }
    }
  },
  methods: {
    openExam() {
      // dataObj.time: "2024-11-07 00:00:00 ~ 2024-11-09 00:00:00" 当前时间不在范围内 不可考试
      const timeArr = this.dataObj.time.split(' ~ ')
      const startTime = new Date(timeArr[0]).getTime()
      const endTime = new Date(timeArr[1]).getTime()
      const nowTime = new Date().getTime()
      if (nowTime < startTime || nowTime > endTime) {
        this.$message.error('不在考试时间范围内')
        return
      }
      this.$refs.beforeExamDialog.openDialog(this.dataObj)
    },
    goExamDetail() {
      this.$router.push({
        path: '/educTrainLearn/examTask/examDetails',
        query: { ...this.dataObj, userId: this.$store.state.user.id },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  /* margin: 20px auto; */
  padding: 20px;
  word-break: break-all;
  word-wrap: break-word;
  width: 100%;
  min-height: 230px;
  background: linear-gradient(110deg, #edf8fb 0%, #e1f5ff 100%);
  box-shadow: 0px 6px 12px 8px rgba(217, 229, 235, 0.19);
  border-radius: 10px;
  position: relative;
  line-height: 1.6;

  .top-img {
    width: 89.6px;
    height: 66.4px;
    position: absolute;
    top: 10px;
    left: calc(100% - 99.6px);
  }

  .title {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin: 15px 0;
  }
  .title2 {
    font-size: 17px;
    font-weight: 700;
    color: #333;
  }
  .bt-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    .bt-item {
      width: 50%;
    }
  }
  .btn {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
