<template>
  <div>
    <div class="article">
      <div class="article-top">
        <p class="title">{{news.TIT}}</p>
        <div class="detail-info">
          <span>来源：{{news.MED_NAME}}</span>
          <span>时间：{{news.PUB_DT}}</span>
          <span>阅读：{{readNum}}次</span>
          <span>点赞：{{admirNum}}</span>
        </div>
      </div>
      <relate-stock v-if="purchase" :stockList="news.stocks"></relate-stock>
      <div class="no-relate-stock" v-if="!purchase"><span>相关股票：</span>需解锁全文查看</div>
      <div class="content" v-if="error == false">
        <div style="margin-bottom: 30px;margin-top: 26px;">
          摘要：{{news.ABST}}
        </div>
        <div v-html="formatContent(news.content)"></div>
        <div v-if="disclaimerContent" style="font-size:12px;line-height:1.5;padding:20px 0;color: #4B4B4B;"><strong>{{disclaimerContent}}</strong></div>
        <unlock v-if="!purchase" :newsId="newsId" :newsTitle="news.TIT" @unlock="getContent"></unlock>
      </div>
      <div v-else>
        {{error}}
      </div>
      <relate-stock :plus="true" :stockList="news.stocks" v-if="purchase"></relate-stock>
      <relate-news :currentId="newsId"></relate-news>
      <Share :id="newsId" :title="news.TIT"></Share>
    </div>
    <column-intro :position="'bottom'"></column-intro>
  </div>
</template>

<script>
// @ is an alias to /src
import RelateStock from '@/components/article/RelateStock.vue'
import RelateNews from '@/components/article/RelateNews.vue'
import Unlock from '@/components/article/Unlock.vue'
import ColumnIntro from '@/components/home/ColumnIntro.vue'
import Share from '@/components/article/Share.vue'
import { mapState } from 'vuex'

export default {
  name: 'Article',
  components: {
    RelateStock,
    RelateNews,
    Unlock,
    ColumnIntro,
    Share
  },  
  data() {
    return {
      purchase: JSON.parse(this.$route.query.purchase),
      newsId: this.$route.query.id,
      readNum: '0',
      admirNum: '0',
      news: '',
      error: false,
      newsList: [],
      disclaimerContent: '',
      defaultDisclaimerContent: '免责声明:市场有风险，投资需谨慎。本平台资讯相关内容、数据来源于公开信息或第三方，可能因网络、系统、硬件、软件等各种原因存在延迟、遗漏或错误，国泰君安证券股份有限公司对其真实性、准确性、完整性和及时性不作任何保证。本资讯内容中如涉及具体股票名称、代码或技术图形等，仅供知识介绍或操作演示使用。本资讯内容仅供参考，不构成对所述证券买卖的意见，不应作为投资决策的唯一参考因素，投资者需自主作出投资决策并独立承担投资风险。在任何情况下，国泰君安证券股份有限公司不对任何机构/个人因使用本资讯内容所导致的任何损失负任何责任。',
      disclaimerID: ''
    }
  },
  computed: mapState({
    purchaseColumn: 'purchaseColumn',
  }),
  watch: {
    '$route' (to, from) {
      this.news = ''
      this.error = false
      this.newsId = this.$route.query.id
      this.purchase = JSON.parse(this.$route.query.purchase)
      this.getDetail()
      document.body.scrollTop = document.documentElement.scrollTop = 0
    },
    'purchaseColumn': function(newVal, oldVal){
      this.purchase = this.$store.getters.purchaseColumn;
      if(this.purchase) {
        this.getDetail();
      }
    }
  },
  mounted() {
    console.log(this.$route.query.id)
    this.getDetail();
    this.setReadNum();
    this.getAdmirNum();
    if(typeof(sensorTrack) == 'function'){
      sensor_newsView('风口研报-资讯详情页', '风口研报');
    }    
  },
  methods: {
    getDisclaimer() {
      let _this = this;
      $.ajax({
        url: 'https://apicdn.app.gtja.com/baishitong/ZXZX/Declare/demo.json',
        type: 'get',
        success: (res) => {
          if(res && _this.disclaimerID) {
            this.disclaimerContent = res[_this.disclaimerID];
          } else {
            this.disclaimerContent = this.defaultDisclaimerContent;
          }
        },
        error: (res) => {
          this.disclaimerContent = this.defaultDisclaimerContent;
        }
      })
    },
    getContent () {
      let _this = this
      $.ajax({
        url: 'https://apicdn.app.gtja.com/baishitong'+_this.news.JSON_URL,
        // url: 'https://apicdn.app.gtja.com/baishitong/ZXDB/202008/226273/JSON/56EF69B50D66F93BC4AFB186F80E65BF.json',
        // url: 'http://114.141.165.129/baishitong'+_this.news.JSON_URL,
        type: 'get',
        success: (res) => {
          _this.$set(_this.news, 'content', res.content);
          _this.$set(_this.news, 'stocks', res.stocks);
          _this.purchase = true;
          _this.getDisclaimer();
        },
        error: (res) => {
          _this.error = res
        }
      })
    },
    getDetail() {
      let _this = this
      fql.h5ucm['资讯详情查询']({
        data: JSON.stringify({
          TERMINAL_SOURCE: '03',
          ID: _this.newsId,
        })
  		}, false).then(function(res){
        if(res.RNUM == '1'){
          let result = JSON.parse(res.list[0].rts_data)
          if(result.code == '0'){
            if(result.data.CALL_STATUS == false){
              _this.error = result.data.CALL_ERROR_INFO
              return;
            }
            _this.news = result.data.FUNCTION_RESULT_LIST[0];
            _this.disclaimerID = _this.news.DISCLAIMER_ID;
            _this.news.PUB_DT = (_this.news.PUB_DT).substring(0, 19)
            if(_this.purchase){
              _this.getContent()              
            }
            _this.getReadNum();
          }else{
            _this.error = res.msg
          }
        }else{
          _this.error = res.list[0]
        }
  		})
    },
    handleReadNum (num) {
      let n = Number(num)
      let minute = this.news.PUB_DT.substr(14,2)
      if(n <= 2000){
        n = 500+(this.newsId%1000)+Math.ceil(n*Math.log(minute+3))
      }else{
        n = 11000+(this.newsId%1000)+Math.ceil(n*(Math.log(minute+10))/(Math.log(10)))
      }
      return n;
    },
    getReadNum () {
      let _this = this
      fql.ucmobile['用户行为统计查询']({
        BUSI_TYPE: 'INFO',
        ACTION_TARGET_ID: this.newsId,
        ACTION_TARGET_TYPE: '226273',
        ACTION_TYPE: 'READ',
      }, false).then(function(res){
        if(res.RNUM == '1'){
          _this.readNum = _this.handleReadNum(res.list[0].ACTION_COUNT)
        }
      })
    },
    setReadNum () {
      fql.ucmobile['用户行为统计增加']({
        BUSI_TYPE: 'INFO',
        ACTION_TARGET_ID: this.newsId,
        ACTION_TARGET_TYPE: '226273',
        ACTION_TYPE: 'READ',
      }, false)
    },
    getAdmirNum () {
      let _this = this;
      fql.ucmobile['用户社交数据统计']({
        BUSIN_TYPE: 'INFO',
        COMMUNITY_TYPE: '2',
        OBJECT_TYPE: '10',
        TOPIC_CODE: this.newsId,
        RELATION_USER_CODE: ''
      }, false).then(function(res){
        if(res.RNUM == '1'){
          let n = res.list[0].SUM;
          let minute = _this.news.PUB_DT.substr(14,2)
          _this.admirNum = _this.newsId % 1000 + Math.ceil((n+1) * Math.log(minute+3))
        }
      });
    },
    formatContent(value) {
      if(!value) return ''
      let arr = value.split('<a');
      for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        var regSZ = RegExp(/href="@min=SZ/);
        var regSH = RegExp(/href="@min=SH/);
        var regMZSM = RegExp(/id="disclaimer"/);
        if (item.match(regSZ)) {
          let SZStr = item.replace('@min=SZ', 'http://www.treeid/breed_0#');
          if(SZStr.match(regMZSM)) {
            SZStr = SZStr.split('id="disclaimer"')[0];
          }
          arr[i] = '<a' + SZStr;
        } else if (item.match(regSH)) {
          let SHStr = item.replace('@min=SH', 'http://www.treeid/breed_1#');
          if(SHStr.match(regMZSM)) {
            SHStr = SHStr.split('id="disclaimer"')[0];
          }
          arr[i] = '<a' + SHStr;
        } else {
          if (item.length && i !== 0) {
            let str = item.replace('</a>', '</span>');
            arr[i] = '<span' + str;
          }
        }
      }
      return arr.join('');
    }
  }
}
</script>
<style scope>
.article {
  padding: 0px 30px;
  padding-top: 30px;
  height: calc(100vh - 102px);
  color: #C2C4CD;
  overflow: auto;
  background: #15171E;
}
.article-top {
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.article-top .title {
  font-size: 22px;
  color: #EAEBF0;
  line-height: 26px;
  margin-bottom: 20px;
}
.article-top .detail-info {
  font-size: 16px;
  margin-bottom: 10px;
  line-height: 26px;
}
.article-top .detail-info span {
  margin-right: 40px;
}
.content {
  position: relative;
  font-size: 16px;
  margin-bottom: 30px;
}
.lock{
  position: relative;
  top: -50px;
  background-image: linear-gradient(180deg, rgba(21,23,30,0.00) 0%, #15171E 30%);  
}
.no-relate-stock{
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  color: #767c8a;
}
.no-relate-stock span{
  color: #c2c4cd;
}
</style>
