<template>
  <div class="sale-buy" v-if="salePop.show">
    <div :style="{backgroundImage:`url(${saleUrl})`}" class="sale-block" v-for="data in goodsList" @click="chooseSale(data);buttonClick('优惠券','选择优惠券')">
      <div class="money"><span class="price-icon">￥</span>{{data.money/100}}</div>
      <div class="tips">不可重复使用</div>
      <div class="btn" >立即使用</div>
    </div>
    <div class="noLesson" v-if="noSale">
      <img :src="errorUrl"/>
      <br>
      暂无优惠券
    </div>

    <div @click="cleanSale();buttonClick('优惠券','取消选择')" class="cleanBtn">取消</div>
  </div>
</template>

<script>
  import {getCouponListApi} from "../../service/api";
  import saleUrl from '../../assets/shop/saleblock.png'
  import errorUrl from '../../assets/error.png'
  export default {
    name: "sale",
    props:[
      "salePop"
    ],
    data(){
      return {
        saleUrl:saleUrl,
        noSale:false,
        errorUrl:errorUrl,
        goodsList:[]
      }
    },
    mounted(){
      getCouponListApi(this.salePop.id).then(res=>{
        this.goodsList = res;
        this.noSale = !!res.length<1
      })
    },
    methods:{
      chooseSale(data){
        this.$emit('chooseSale',data);
        this.salePop.show = false
      },
      buttonClick(buttonType,buttonName){
        this.$sa.track('buttonClick',{
          tabTitle:'商品',
          moduleTitle:'购买页',
          buttonType:buttonType,
          buttonName:buttonName
        });
      },
      cleanSale(){
        this.$emit('chooseSale',0);
        this.salePop.show = false;
      }
    },
    watch:{
      'salePop.show'(value){
        if(value === true && this.salePop.id){
          this.goodsList = [];
          getCouponListApi(this.salePop.id).then(res=>{
            this.goodsList = res;
              this.noSale = !!res.length<1
          })
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .noLesson{
    text-align: center;
    img{
      width: 50%;
      margin: 20*@toVw 0;
    }
    font-size: 18*@toVw;
    color: #666666;
  }
  .sale-buy{
    position: fixed;
    top: 0;
    bottom: 0;
    padding: 10 * @toVw;
    left: 0;
    right: 0;
    z-index: 2;
    background: #eee;
    .sale-block{
      width: 342 * @toVw;
      height: 129 * @toVw;
      background-size: 100% 100%;
      color: white;
      margin-bottom: 15 * @toVw;
      position: relative;
      .money{
        .price-icon{
          font-size: 30 * @toVw;
        }
        height:67 * @toVw;
        font-size:48 * @toVw;
        font-family:PingFang-SC-Bold;
        color:rgba(255,255,255,1);
        line-height:67* @toVw;
        position: absolute;
        top: 20 * @toVw;
        right: 179* @toVw;
      }
      .tips{
        width:100* @toVw;
        height:22* @toVw;
        font-size:16* @toVw;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:22* @toVw;
        position: absolute;
        top: 33 * @toVw;
        right: 15 * @toVw;
      }
      .btn{
        width: 106 * @toVw;
        height: 32 * @toVw;
        border-radius: 1000* @toVw;
        background: white;
        color: #F24364;
        text-align: center;
        line-height: 32 * @toVw;
        position: absolute;
        top: 72 * @toVw;
        right: 16 * @toVw;
      }
    }
    .cleanBtn{
      position: absolute;
      text-align: center;
      width: 350 * @toVw;
      height: 40 * @toVw;
      line-height: 40 * @toVw;
      background: white;
      border-radius: 4px;
      bottom: 20 * @toVw;
      color: #666666;
    }
  }

</style>
