<template>
  <div class="lock">
    <div class="login" v-if="login">
      <div class="btn" @click="clickRead" v-if="freeTimes>0">
        <img src="@/assets/lock.png" alt="">
        <span><i>免费</i>解锁全文</span>
      </div>
      <div class="btn" v-if="freeTimes<1" @click="toBuy">
        <img src="@/assets/lock.png" alt="">
        <span><i style="margin-right: 20px;">单篇付费￥{{prodPrice}}</i>解锁全文</span>
      </div>
      <div class="tops">
        <span class="sum" v-if="freeTimes>0">剩余体验次数<i>{{freeTimes}}</i>次</span>
        <span class="no-sum" v-if="freeTimes<1 && starLevel>2" @click="toBuy"><i class="cost-price">原价<em>{{orginPrice}}</em>元/篇</i><i class="discount-price">{{starLevel2[starLevel-1]}}星客户专享¥<em>{{prodPrice}}</em>/篇</i></span>
      </div>
    </div>
    <div class="no-login" v-if="!login">
      <div class="btn" @click="tologin">
        <img src="@/assets/lock.png" alt="">
        <span>登录手机号查看阅读权限</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Unlock',
  props: ['newsId', 'newsTitle'],
  data () {
    return {
      login: true,
      freeTimes: 3,
      starLevel: '',
      starLevel2: ['一','二','三','四','五'],
      orginPrice: '0',
      prodPrice: '0'
    }
  },
  computed: mapState({
    userInfo: 'userInfo',
    priceList: 'prodPrice',
    purchaseList: 'purchaseList',
  }),
  watch:{
    userInfo: function(newVal, oldVal){
      this.getProdPrice();
      if(this.userInfo.MOBILENO){
        this.getFreeNum();
      }      
    },
    priceList: function(newVal, oldVal){
      this.getProdPrice();
    }
  },
  methods: {
    toBuy () {
      if(typeof(sensorTrack) == 'function'){
        sensor_newsOperation('风口研报-资讯列表页', '风口研报', '单篇付费点击');
      }

      this.newsTitle = this.newsTitle.replace(/%/g, '%25');
      let _this = this
      setTimeout(()=>{
        window.location.href = 'http://www.treeid/chromeview##homepath##yht/fyapp/Purchase/fkyb/html/buy.html?id='+_this.newsId+'&title='+encodeURI(_this.newsTitle)
      }, 600)     
    },
    tologin () {
      window.location.href = "http://www.treeid/GTJACOMM_COMM=COMM_MOBILOGIN";
    },
    clickRead () {
      if(this.freeTimes > 0){
        this.setFreeNum()
        this.$emit('unlock')
        this.purchaseList.push(this.newsId)
        this.$store.commit("setPurchaseList", this.purchaseList)
      }
    },
    getProdPrice () {
      console.log("单篇权限判断:"+JSON.stringify(this.userInfo))
      if(this.userInfo.MOBILENO == '' || this.userInfo.MOBILENO == undefined){
        this.login = false;
        return;
      }else{
        this.login = true;
        this.starLevel = this.userInfo.USER_LEVEL
        for(let i=0; i<this.priceList.length; i++){
          let p = this.priceList[i]
          if(p.PRICE_TYPE == 11 && p.CUST_LEVEL == this.starLevel){
            this.orginPrice = p.price_refer
            this.prodPrice = p.PRICE
            return
          }
        }

        // if(this.userInfo.USER_CUSTID != '' && this.userInfo.USER_LEVEL == ''){
        //   let _this = this
        //   fql.uc['用户星级查询']({
        //     DEVICE_NO: '',
        //     SOURCE_TYPE: 'FY'
        //   },true).then(function(res){
        //     if(res.RNUM != '-1' && res.list.length>0){
        //       _this.starLevel = res.list[0].USER_LEVEL
        //       localStorage.setItem('starLevel', res.list[0].USER_LEVEL)
        //       for(let i=0; i<_this.priceList.length; i++){
        //         let p = _this.priceList[i]
        //         if(p.PRICE_TYPE == 11 && p.CUST_LEVEL == _this.starLevel){
        //           _this.orginPrice = p.price_refer
        //           _this.prodPrice = p.PRICE
        //           return
        //         }
        //       }              
        //     }
        //   })          
        // }else{
        //   let storageLevel = localStorage.getItem('starLevel')
        //   if(this.userInfo.USER_LEVEL != ''){
        //     this.starLevel = this.userInfo.USER_LEVEL
        //   }else if(storageLevel){
        //     this.starLevel = storageLevel
        //   }else{
        //     this.starLevel = '2'
        //   }
        //   for(let i=0; i<this.priceList.length; i++){
        //     let p = this.priceList[i]
        //     if(p.PRICE_TYPE == 11 && p.CUST_LEVEL == this.starLevel){
        //       this.orginPrice = p.price_refer
        //       this.prodPrice = p.PRICE
        //       return
        //     }
        //   }          
        // }
      }    
    },
    getFreeNum () {
      let _this = this
      fql.ucmobile['用户社交查询']({
        ACTION_TYPE: '00',
        BUSIN_TYPE: 'INFO',
        COMMUNITY_STATUS: '1',
        COMMUNITY_TYPE: '15',
        COMMUNITY_SIDE: '',
        OBJECT_TYPE: '10',
        TOTAL_FLAG: '1',
      }, false).then(function(res){
        if(res.RNUM != -1){
          let use = res.list.length
          _this.freeTimes -= use
        }
      })    
    },
    setFreeNum () {
      fql.ucmobile['用户社交管理']({
        ACTION_TYPE: '00',
        BUSIN_TYPE: 'INFO',
        COMMUNITY_TYPE: '15',
        OBJECT_TYPE: '10',
        TOPIC_CODE: this.newsId,
        RELATION_USER_CODE: ''
      }, false).then(function(){

      })      
    },   
  },
  mounted () {
    this.getProdPrice();
    if(this.userInfo.MOBILENO){
      this.getFreeNum();
    }      
  },
}
</script>

<style scope>
.lock .login, .no-login{
  height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 60px;
}
.lock .btn{
  font-size: 22px;
  color: #4A90E2;
  border: 1px solid #4A90E2;
  display: flex;
  align-items: center;
  padding: 5px 20px;
  border-radius: 2px;
  cursor: pointer;
}
.lock > div img {
  margin-right: 30px;
}
.lock .tops {
  margin-top: 15px;
}
.cost-price {
  text-decoration: line-through;
  color: #767C8A;
  margin-right: 10px;
}
.discount-price {
  color: #EB333B;
}
.no-sum{
  font-size: 14px;
}
.sum{
  font-size: 14px;
  color: #c2c4cd;
}
</style>