<template>
  <div class="all">
    <back title="已学课程"></back>
    <div class="kecheng">
      <div class="kechenginfo" @click="goCourseDetail(item.id)" v-for="(item, index) in course" :key="index">
        <img :src="item.thumbnail" alt="" />
        <div class="kechenginfoR">
          <p class="kechenginfoR_bt">{{ item.name }}</p>
          <p class="kechenginfoR_xbt">{{ item.description }}</p>
          <span class="kechenginfoR_end" v-if="item.is_end == 1">已学完</span>
          <div class="kechenginfoR_bot">
            <div class="kechenginfoR_botL">
              <img src="../../../static/img/yanjing.png" alt="" class="yanjing" />{{
                item.page_view
              }}人
            </div>
            <div class="kechenginfoR_botR">进入课程</div>
          </div>
        </div>
      </div>
    </div>
    <common-footer></common-footer>
  </div>
</template>

<script>
import Back from "../common/Back";
import CommonFooter from "../common/CommonFooter";
import { getStore } from "@/utils/storage";
import { Toast } from "mint-ui";
export default {
  name: "courseAll",
  components: { Back, CommonFooter },
  data() {
    return {
      course: [],
    };
  },
  created() { },
  mounted() {
    this.getPageData();
  },
  methods: {
    goCourseDetail(id) {
      this.$router.push({ path: "/courseDetail?id=" + id });
    },
    getPageData() {
      this.getData("/Home/getCourseList", { token: getStore("token"), type: 2 }).then(
        (data) => {
          if (data.code == 1) {
            this.course = data.data;
            for (let index = 0; index < this.course.length; index++) {
              this.course[index].thumbnail = this.course[index].thumbnail.replace(
                "http://img",
                "https://imgs"
              );
            }
          } else {
            Toast(data.msg);
          }
        },
        (err) => { }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.kecheng {
  padding: 5.5rem 0;
  width: 90%;
  margin: auto;

  .kecheng_biaoti {
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .kecheng_biaotiL {
    font-size: 1.56rem;
    font-family: MicrosoftYaHei;
    font-weight: bold;
  }

  .kecheng_biaotiR {
    font-size: 1.25rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #c5c5c5;

    .fr {
      width: 1rem;
      height: 1rem;
    }
  }

  .kechenginfo {
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #cccccc;

    >img {
      width: 11rem;
      height: 15rem;
      object-fit: cover;
    }
  }

  .kechenginfoR {
    width: 56%;
    height: 15rem;
    text-align: left;
    position: relative;
  }

  .kechenginfoR_bt {
    display: block;
    width: 100%;
    font-size: 1.67rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kechenginfoR_xbt {
    display: block;
    width: 100%;
    font-size: 1.25rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #5e5e5e;
    margin: 1rem 0;
    word-wrap: break-word;
    text-overflow: ellipsis;
    height: 7rem;
  }

  .kechenginfoR_end {
    font-size: 1rem;
    color: #0083ff;
  }

  .kechenginfoR_bot {
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  .kechenginfoR_botL {
    color: #cccccc;
    font-size: 1.25rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .yanjing {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
  }

  .kechenginfoR_botR {
    width: 8rem;
    height: 3rem;
    background: #f2f2f2;
    border-radius: 2rem;
    text-align: center;
    line-height: 3rem;
    color: #d4a458;
    font-size: 1.25rem;
  }
}
</style>
