<template>
  <div>
    <img :src="star_btn" class="img_btn" @click="showPop" v-if="starNum != 3">
    <mt-popup
      v-model="popupVisible" style="background: transparent">
      <div class="pop-block">
        <img :src="starNum == 0 ? star1 : starNum == 3 ? star3 : star2 " class="star-all"/>
        <div class="list">
          1.完成今日学习
          <div class="star-content">
            <img :src="starNum == 0 ? star_default : star_active">
            <img :src="starNum < 2 ? star_default : star_active">
          </div>
        </div>
        <div class="list">
          2.分享学习记录
          <div class="star-content">
            <img :src="starNum == 3 ? star_active : star_default">
          </div>
        </div>
        <div class="btn-block">
          <div class="btn" @click="showShare">
            <span v-if="starNum < 2">继续看课</span>
            <span  v-if="starNum == 2">分享赚星星</span>
            <span v-if="starNum == 3">关闭</span>
          </div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import star_btn from '../../assets/star/star_btn.png'
  import star1 from '../../assets/star/star1.png'
  import star2 from '../../assets/star/star2.png'
  import star3 from '../../assets/star/star3.png'
  import star_default from '../../assets/star/star_default.png'
  import star_active from '../../assets/star/star_active.png'
  export default {
    name: "star",
    data(){
      return {
        star_btn:star_btn,
        star1:star1,
        star2:star2,
        star3:star3,
        popupVisible:false,
        star_default:star_default,
        star_active:star_active,
        starNum:0
      }
    },
    methods:{
      showPop(){
        this.popupVisible = true;
        this.starNum = JSON.parse(localStorage.getItem('lessonDetail')).star_num
      },
      showShare(){
        this.popupVisible = false;
        if(this.starNum == 2){
          this.$emit('showShare')
        }
      }
    },
    watch:{
      'popupVisible'(value){
        this.$emit('changeShow',value)
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .img_btn{
    position: fixed;
    bottom: 20*@toVw;
    right: 20*@toVw;
    width: 50*@toVw;
  }
  .pop-block{
    background: white;
    border-radius: 8*@toVw;
    width: 230*@toVw;
    padding:50*@toVw 10*@toVw 10*@toVw 10*@toVw;
    position: relative;
    height: 142*@toVw;
    .star-all{
      width: 154*@toVw;
      position: absolute;
      top: -40*@toVw;
      left: 57*@toVw;
    }
    .list{
      font-size:14*@toVw;
      text-align: left;
      padding: 7*@toVw 20*@toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(0,0,0,1);
      .star-content{
        float: right;
        width: 50*@toVw;
        text-align: right;
        img{
          width: 17*@toVw;
          margin-left: -14*@toVw;
        }
      }
    }
    .btn-block{
      margin-top: 30*@toVw;
      .btn{
        width:203 *@toVw;
        height:33 *@toVw;
        background:rgba(64,169,255,1);
        border-radius:17 *@toVw;
        color: white;
        line-height: 33*@toVw;
        text-align: center;
        font-size:14px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
      }
    }
  }

  @media screen and (orientation: landscape) {
    .img_btn{
      display: none;
    }
  }

</style>
