<template>
  <div>
    <div class="share-good-head" v-if="userDetail" :style="{backgroundImage:`url('${shareGoodsBg}')`}">
      <img class="head" :src="userDetail.user_info.avatar">
      <div class="title" :style="{backgroundImage:`url('${title_share_goods}')`}" >
        {{userDetail.user_info.nickname}}
      </div>
      <div class="day">
        {{userDetail.total_day}}
        <span>
          Days
        </span>
      </div>
      <div class="iknow" @click="toBuy">

      </div>
    </div>
    <div class="good-content" v-if="goodsDetail">
      <div class="content" v-html="goodsDetail.desc.detail">
      </div>
      <div class="btn-block" ref="btn_block">
        <div class="btn" @click="toBuy">
          快去报名
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import shareGoodsBg from '../../assets/newLesson/shareGoodsBg.png'
  import title_share_goods from '../../assets/newLesson/title-share-goods.png'
  import {getOtherUserWatchApi,getShareGoodsApi,getGoodsDetailApi} from "../../service/api";
  export default {
    name: "shareGoods",
    data(){
      return {
        shareGoodsBg:shareGoodsBg,
        title_share_goods:title_share_goods,
        userDetail:null,
        shopId:null,
        goodsDetail:null
      }
    },
    methods:{
      initPage(){
        getOtherUserWatchApi(this.$route.query.userID).then(res=>{
          res.user_info.avatar = res.user_info.avatar.replace('http://','https://');
          this.userDetail = res
        });
        getShareGoodsApi().then(res=>{
          this.shopId = res[0].value;
          getGoodsDetailApi(this.shopId).then(res=>{
            res.desc = JSON.parse(res.desc)
            this.goodsDetail = res
          })
        })
      },
      toBuy(){
        window.location.href = `${process.env.API_URL}#/buy?shopId=${this.shopId}&invite_code=CC-UDK-${this.$route.query.userID}`
      }
    },
    mounted(){
      this.initPage();
      window.onscroll= ()=>{
        //变量t是滚动条滚动时，距离顶部的距离
        let t = document.documentElement.scrollTop||document.body.scrollTop;
        if(t>500){
          this.$refs.btn_block.style.opacity = 1
        }else{
          this.$refs.btn_block.style.opacity = 0
        }
      }
    }
  }
</script>

<style scoped lang="less">
 @import "../../util/public";
  .share-good-head{
    width: 100%;
    height: 584*@toVw;
    margin-top: -64*@toVw;
    background-size: 100% 100%;
    position: relative;
    .iknow{
      position: absolute;
      top: 460*@toVw;
      width: 200*@toVw;
      height: 44*@toVw;
      left: 87*@toVw;
    }
    .head{
      position: absolute;
      width: 70*@toVw;
      height: 70*@toVw;
      top: 155*@toVw;
      left: 153*@toVw;
      border-radius: 100*@toVw;
    }
    .title{
      position: absolute;
      width: 225*@toVw;
      height: 54*@toVw;
      background-size: 100% 100%;
      top: 215*@toVw;
      left: 75*@toVw;
      text-align: center;
      color: white;
      font-size: 20*@toVw;
      line-height: 48*@toVw;
    }
    .day{
      position: absolute;
      top: 320*@toVw;
      width: 100%;
      text-align: center;
      color: #069777;
      font-size:48*@toVw;
      font-family:PingFang-SC-Bold;
      font-weight:bold;
      span{
        font-size:20*@toVw;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(6,151,119,1);
      }
    }
  }
  .good-content{
    background: #00E0AE;
    padding: 0 20*@toVw 80*@toVw 20*@toVw;
    .content{
      background: white;
      border-radius: 8*@toVw;
      padding: 10*@toVw;
    };
  }
  .btn-block{
    padding:8*@toVw;
    position: fixed;
    left: 0;
    width: 100%;
    background: white;
    opacity: 0;
    transition: all 0.5s;
    bottom: 0;
    .btn{
      width: 287*@toVw;
      height: 44*@toVw;
      margin: auto;
      background: #FF785D;
      border-radius: 100*@toVw;
      color: white;
      line-height: 44*@toVw;
      text-align: center;
      font-size:16px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
    }
  }
</style>
<style>
  img{
    max-width: 100% !important;
  }
</style>
