<template>
  <div class="course-covers-wrapper">
    <div class="tips" v-html="coverTips"></div>
    <div v-if="isShowBtn" class="course-button-group">
      <CourseButton v-if="!isSingle" type="plain" @btnClick="btnClick(1)" :btnText="leftBtnText"></CourseButton>
      <CourseButton @btnClick="btnClick(2)" :btnText="rightBtnText"></CourseButton>
    </div>
  </div>
</template>
<script>
import CourseButton from "@/components/course/course-button";
export default {
  components: {
    CourseButton
  },
  props: {
    coverTips: {
      type: String,
      default: "上次观看至7分钟，正在续播"
    },
    isShowBtn: {
      type: Boolean,
      default: true
    },
    isSingle: {
      type: Boolean,
      default: false
    },
    leftBtnText: {
      type: String,
      default: "学习下一节"
    },
    rightBtnText: {
      type: String,
      default: "去云鹊医App"
    }
  },
  data() {
    return {};
  },
  methods: {
    btnClick(index) {
      this.$emit("btnClick", index);
    }
  }
};
</script>
<style  lang="less" scoped>
.course-covers-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-content: center;
  .tips {
    display: inline-block;
    margin-bottom: 15px;
    color: #fff;
    text-align: center;
    font-size: 15px;
  }
  .course-button-group {
    display: flex;
    align-items: center;
    justify-content:center;
  }
}
</style>
