<template>
  <div>
    <div class="column-intro" v-if="position == 'right'">
      <div class="column-icon"><img src="@/assets/fkyb.png" alt=""></div>
      <div class="column-name">风口研报</div>
      <!-- <div class="column-unlock">222人解锁</div> -->
      <div class="column-introduce">
        面对海量研报和调研纪要无从下手？《风口研报》替您精选市场最有含金量的研报、调研信息，以交易视角，追踪研报和调研细节中的“超预期”、“拐点”、“事件催化”和“价值洼地”。
        <a @click="introduceHandle">更多栏目介绍></a>
      </div>
      <div class="column-line"></div>
      <div class="column-notice">
      	【订阅需知】<br />
      	<span>1.本栏目订阅价格以实际订单页面所示价格为准；</span><br />
      	<span>2.本栏目资讯产品为虚拟内容，订阅成功无法退款，请您理解。</span>
      </div>
      <div class="column-state">
      	<div class="nologin" v-if="starLevel == '1'" @click="toLogin">
      		登录手机号查看阅读权限
      	</div>
      	<div class="login" v-else>
          <div v-if="!purchaseColumn">
            <span v-if="orginPrice==prodPrice" class="prod-price">¥{{prodPrice}}/月</span>
            <span class="orgin-price" v-if="orginPrice!=prodPrice">原价¥{{orginPrice}}/月</span> <span class="star-price" v-if="orginPrice!=prodPrice">{{starLevel2[starLevel-1]}}星专享¥{{prodPrice}}/月</span>
            <br />
            <span class="buy-column" @click="toBuy">解锁栏目</span>
          </div>
        	<div v-else>
            <span class="buy-status">已解锁&nbsp;&nbsp;{{purchaseColumn}}到期</span><br/>
            <span class="buy-column renew" @click="toBuy">续期</span>
          </div>	
      	</div>
      </div>
      <div class="column-line"></div>
      <div class="news-purchased" @click="toPurchased">我的付费订单>></div>
    </div>
    <div class="market-ad" v-if="position == 'bottom' && calcAuth()">
      <div class="ad-img"><img src="@/assets/fkyb2.png" alt=""></div>
      <div class="name">风口研报</div>
      <div class="intro">提前挖掘“超预期”，捕捉下一个市场“风口”</div>
      <div class="unlock-button" @click="toBuy">解锁栏目</div>
      <div class="column-price">
        <span class="orgin" v-if="orginPrice!=prodPrice">原价￥{{orginPrice}}/月</span>
        <span class="star-price" v-if="orginPrice!=prodPrice">{{starLevel2[starLevel-1]}}星专享￥{{prodPrice}}/月</span>
        <span v-if="orginPrice==prodPrice" class="prod-price">¥{{prodPrice}}/月</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ColumnIntro',
  props: ['position'],
  data () {
  	return {
  		starLevel: '1',
  		starLevel2: ['一','二','三','四','五'],
  		orginPrice: 0,
      prodPrice: 0,
  	}
  },
  computed: {
    ...mapState({
      userInfo: 'userInfo',
      purchaseColumn: 'purchaseColumn',
      priceList: 'prodPrice',
    }),
  },
  watch:{
  	userInfo: function(newVal, oldVal){
      this.getProdPrice();
      if(this.position == 'bottom'){
        this.calcAuth();
      }
  	},
  	priceList: function(newVal, oldVal){
  		this.getProdPrice();
  	},
    purchaseColumn: function(){
      this.getProdPrice();
      if(this.position == 'bottom'){
        this.calcAuth();
      }
    }
  },
  methods: {
    toBuy () {    
      if(typeof(sensorTrack) == 'function'){
        let pageName = this.position=='right'?'风口研报-资讯列表页':'风口研报-资讯详情页'
        sensor_newsOperation(pageName, '风口研报', '解锁栏目点击');
      }
      setTimeout(()=>{
        window.location.href = 'http://www.treeid/chromeview##homepath##yht/fyapp/Purchase/fkyb/html/buy.html'
      }, 500)      
    },
  	getProdPrice () {
  		// console.log("2222222222:"+JSON.stringify(this.priceList)) 
      if(this.userInfo.USER_LEVEL){
        this.starLevel = this.userInfo.USER_LEVEL
      }      
      for(let i=0; i<this.priceList.length; i++){
        let p = this.priceList[i]
        if(p.PRICE_TYPE == 1 && p.SERVICE_TERM == 30 && p.CUST_LEVEL == this.starLevel){
          this.orginPrice = p.price_refer
          this.prodPrice = p.PRICE
          return
        }
      }
    },
    introduceHandle() {
      // 打开更多栏目介绍弹窗
      window.location.href = "http://www.treeid/dlghttps://apicdn.app.gtja.com/public/fyevent/fkybIntro/index.html?tdxmyietitle=风口研报&tdxmyiewidth=800&tdxmyieheight=725"
    },
  	toLogin () {
  		window.location.href = "http://www.treeid/GTJACOMM_COMM=COMM_MOBILOGIN";
  	},
  	toPurchased () {
      if(typeof(sensorTrack) == 'function'){
        sensor_newsOperation('风口研报-资讯列表页', '风口研报', '我的付费订单点击');
      }      
      this.$router.push("purchased")
    },
    calcAuth() {
      console.log(this.userInfo.FTIME, 'time')
      // 计算距离到期还剩多少天
      let days = 0;
      if(this.purchaseColumn) {
        let nowDate = this.userInfo.FTIME;
        let endDate = this.purchaseColumn;
        days = new Date(endDate) - new Date(nowDate);
        days = days / (1000 * 60 * 60 * 24);
      }
      if(!this.userInfo.MOBILENO || !this.purchaseColumn || days <= 7) {
        return true
      }
      return false
    }
  },
  mounted () {
    this.getProdPrice();
  },
}
</script>

<style scoped>
	.column-intro{
		width: 344px;
		padding: 0px 24px;
		color: #c2c4cd;
		text-align: center;
		box-sizing: border-box;
	}
	.column-icon{
		margin-top: 63px;
	}
	.column-name{
    font-size: 24px;
    margin-top: 20px;
    color: #eaebf0;		
	}
	.column-unlock{
		font-size: 14px;
    margin-top: 10px;
    color: #767c8a;		
	}
	.column-introduce{
		font-size: 16px;
    text-align: left;
    margin-top: 15px;
    text-indent: 2em;
	}
  .column-introduce a {
    color: #4a90e2;
    cursor:pointer;
    margin-left: 10px;
  }
	.column-line{
		border-top: 2px solid rgba(255,255,255,0.15);
    margin-top: 15px;
	}
	.column-notice{
    margin-top: 20px;
    text-align: left;
	}
	.column-notice span{
		margin-top: 20px;
		display: inline-block;
	}
	.column-state .nologin{
    width: 284px;
    height: 32px;
    margin-top: 30px;
    background-color: #4a90e2;
    line-height: 32px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 30px;
    border-radius: 2px;
	}
	.news-purchased{
		margin-top: 30px;
    color: #4a90e2;
    font-size: 16px;
    cursor: pointer;
	}
	.login{
		margin-top: 30px;
	}
	.orgin-price{
		font-size: 14px;
    color: #767C8A;
    text-align: center;
    line-height: 16px;
    text-decoration: line-through;
    margin-right: 10px;		
	}
	.star-price{
		font-size: 18px;
    color: #EB333B;
    text-align: center;
    line-height: 16px;		
	}
	.buy-column{
    width: 284px;
    height: 32px;
    background-color: #4a90e2;
    border-radius: 2px;
    display: inline-block;
    font-size: 16px;
    color: #fff;
    line-height: 32px;
    margin: 15px 0px;
    cursor: pointer;
	}
  .buy-status{
    font-size: 18px;
  }
  .renew{
    border: 1px solid #4a90e2;
    color: #4a90e2;
    background-color: #15171e;   
  }
.market-ad {
  height: 70px;
  padding: 0px 30px;
  background: #21242e;
  position: relative;
}
.name{
  position: absolute;
  left: 102px;
  top: 9px;
  color: #eaebf0;
  font-size: 22px;
}
.intro{
  color: #c2c4cd;
  font-size: 16px;
  position: absolute;
  left: 102px;
  bottom: 10px;  
}
.unlock-button{
  /*width: 110px;*/
  height: 34px;
  line-height: 34px;
  color: #fff;
  font-size: 20px;
  background: rgb(74,144,226);
  text-align: center;
  border-radius: 2px;
  position: absolute;
  right: 30px;
  top: 18px;
  cursor: pointer;
  padding: 0px 5px;
}
.column-price{
  position: absolute;
  right: 180px;
  top: 25px;  
}
.orgin{
  color: #767c8a;
  font-size: 14px;
  margin-right: 15px;
  text-decoration: line-through;  
}
.star-price{
  color: #eb333b;
  font-size: 18px;  
}
.ad-img{
  position: absolute;
  top: 9px;
}
.prod-price{
  font-size: 18px;
  color: #fff;
}
</style>
