<template>
  <div v-if="harvest.length > 0" class="course-harvest-wrapper">
    <CommonTitle title="学习收获"></CommonTitle>
    <ul class="list-wrapper">
      <li class="item" v-for="(item, index) in harvest" :key="index">
        <span class="name">{{ item.name }}</span>
        <span class="btn" @click="onClick(item)">查看</span>
      </li>
    </ul>
  </div>
</template>
<script>
import CommonTitle from "@/components/course/common-title";
import { ImagePreview } from 'vant';

export default {
  components: {
    CommonTitle
  },
  props: {
    harvest: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    onClick(item) {
      ImagePreview([item.url])
    }
  },
}
</script>

<style lang="less" scoped>
.course-harvest-wrapper {
  .list-wrapper {
    .item {
      display: flex;
      justify-content: space-between;
      height: 65px;
      line-height: 65px;
      margin: 0 15px;
      align-items: center;
      border-bottom: 1px solid #E7E8E9;
      .name {
        font-size: 15px;
        font-weight: 700;
        color: #333333;
      }
      .btn {
        display: inline-block;
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        font-weight: 700;
        padding: 0 18px;
        color: #449284;
        border-radius: 15px;
        border:1px solid rgba(68, 146, 132, 0.45);
      }
    }
  }
}
</style>
