<template>
  <li class="course-list-item">
    <div class="course-list-item-pic" @click="handleClick">
      <img :src="data.src" v-if="data.src" />
      <div class="no-img" v-else><i class="el-icon-self-13"></i></div>
    </div>
    <div class="course-list-item-main">
      <div class="title" @click="handleClick">{{ data.title }}</div>
      <div class="tags">
        <template v-for="(item1, index) in data.arrTab">
          <span v-bind:key="index">{{ item1 }}</span>
        </template>
      </div>
      <div class="time">
        {{ data.status }}<em>{{ data.time }}</em>
      </div>
      <div class="progress">
        {{ $t('pages.learn.course.progress') }}
        <el-progress :percentage="data.progress" color="#b49441"></el-progress>
      </div>
    </div>
    <div class="course-list-item-aside">
      <p>{{ data.myStatus }}</p>
      <el-button type="primary" size="small" round @click="handleClick">
        {{ $t('pages.learn.course.showCourse') }}
      </el-button>
    </div>
  </li>
</template>

<script>
export default {
  name: 'CourseListItem',
  props: {
    data: { type: Object, required: true },
    showProgress: { type: Boolean, default: true }
  },
  data() {
    return {}
  },
  methods: {
    handleClick() {
      this.$router.push({ path: `/app/learn/course-detail/${this.data.sid}/${this.data.id}` })
    }
  }
}
</script>

<style lang="scss">
.course-list-item {
  display: flex;
  padding: 0.2rem 0;
  list-style: none;
}
.course-list-item + .course-list-item {
  border-top: 1px solid #dcdcdc;
}
.course-list-item-pic {
  position: relative;
  flex: 0 0 1.8rem;
  width: 1.8rem;
  height: 1rem;
  cursor: pointer;

  .no-img {
    width: 100%;
    height: 1rem;
    text-align: center;
    line-height: 1.1rem;
    border: 1px solid #e2e2e2;

    i {
      font-size: 0.4rem;
      color: #e2e2e2;
    }
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.course-list-item-main {
  flex: 1;
  position: relative;
  padding-left: 0.2rem;
  overflow: hidden;

  .title {
    line-height: 1.5;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .tags {
    margin: 0.05rem 0;
    font-size: 0.14rem;

    span {
      padding: 0 0.1rem;
      margin: 0;
      border-right: 1px solid #313131;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        border: none;
      }
    }
  }

  .time {
    font-size: 0.12rem;

    em {
      font-style: normal;
      color: #898989;
    }
  }

  .progress {
    margin-top: 0.05rem;
    font-size: 14px;

    .el-progress {
      width: 50%;
      display: inline-block;
      vertical-align: text-bottom;
    }
  }
}
.course-list-item-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  p {
    padding: 0 0.1rem;
    font-size: 0.14rem;
    text-align: right;
  }
}
</style>
