<template>
  <div>
    <a-row>
      <a-col class="title-info">
        <span class="label">课程名称：</span>
        <span class="value">{{ data.projectName }}</span>
      </a-col>
      <a-col class="title-info">
        <span class="label">课时统计：</span>
        <span class="value">
          {{ data.totalHours }}课时（{{ data.learnedHours }}/{{ data.totalHours }}）
        </span>
      </a-col>
      <a-col class="title-info">
        <span class="label">培训方式：</span>
        <span class="value">{{ data.trainWay | trainWayText }}</span>
      </a-col>
      <a-col class="title-info">
        <span class="label">开始时间：</span>
        <span class="value">{{ data.startDate }}</span>
      </a-col>
      <a-col class="title-info">
        <span class="label">学习状态：</span>
        <span class="value">{{ data.status }}</span>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {}
  },
  filters: {
    trainWayText: function (value) {
      let result = ''
      switch (value) {
        case '1':
          result = '培训'
          break
        case '2':
          result = '考试'
          break
        case '3':
          result = '培训练习'
          break
        case '4':
          result = '培训练习考试'
          break
        default:
          break
      }
      return result
    }
  }
}
</script>

<style lang="less" scoped>
.title-info {
  font-size: 16px;
  font-weight: bold;
  line-height: 2;
  color: #333;
}
</style>
