<template>
  <div class="page">
    <!-- <div class="tip">{{tip}}</div> -->
    <section class="today-news">
      <div class="title">今日早报</div>
      <a class="home nocolor" @click="showToday">
        <div class="f-shadow">
          <div class="bar">
            <div class="pic" :style="{'background-image': 'url(' + src + ')'}" ></div>
          </div>
          <div class="tip1">{{getText(title, 68)}}</div>
          <div class="tip2"><div class="nums">1</div>{{subTitle1}}</div>
          <div class="tip2"><div class="nums">2</div>{{subTitle2}}</div>
          <div class="go-more"></div>
        </div>
      </a>
    </section>

    <section class="activity home">
      <div class="title">精彩活动</div>
      <div class="f-shadow">
        <div class="activity__wrap duiui-flex duiui-flex--spacebetween">
          <div class="activity-process duiui-flex duiui-flex--spacebetween">
            <div class="activity__item "  v-for="item1 in activitLyist.activity_inprogress" :key="item1.id">
                <div @click="goActivitySetting(item1)">
                  <div class="title__block">
                    <span class="f-title"> 正在进行</span>
                  </div>
                  <div class="activity__img">
                    <img :src="item1.mainImgUrl" alt="">
                  </div>
                  <div class="b-title">{{item1.title}}</div>
                </div>
            </div>          
          </div>
          <!-- <div class="activity-soon duiui-flex duiui-flex--spacebetween">
            <div class="activity__item " v-for="item2 in activitLyist.activity_soon" :key="item2.id">
                <div @click="goActivitySetting(item2)">
                  <div class="title__block">
                    <span class="f-title"> 即将开始</span>
                  </div>              
                  <div class="activity__img">
                    <img :src="item2.mainImgUrl" alt="">
                  </div>
                  <div class="b-title">{{item2.title}}</div>
                </div>
            </div>          
          </div> -->
        </div>
      </div>
    </section>


    <section class="container article-container">
      <div class="header duiui-flex duiui-flex--spacebetween">
        <!-- <h3>热门文章</h3> -->
        <div class="title no-bottom">
          热门文章
          <a @click="goArticlList" class="see-more__link" hover-class="none"><span class="more">查看更多</span></a>
        </div>
        
      </div>  
      <div class="article__list">
        <div v-for="item in list" class="content__wrap duiui-flex" :key="item.id">
          <div class="content-avator">
            <div class="main-img" :style="{'background-image': 'url(' + item.mainImgUrl + ')'}"></div>
          </div>         
          <div class="content-info duiui-flex__item" @click="goArticleDetail(item.id)">
            <p class="content-info__title">{{item.title}}</p>
            <div class="share-info duiui-flex">
              <div class="read-times">阅读{{item.readNum}}</div>
              <span class="dui-tag dui-tag--solid">同行分享{{item.sharedNum}}次</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { get, post } from "@js/request";
import { getUrlParameter, isWeChatApplet, formatUrl, getEllipsisText } from "@js/tooler";
import { shareConfig, updateLink } from "@js/share";

const SCID = getUrlParameter('scid');
const API = {
  getInitDaily: '/kjy/mp/content/getInitDaily',
  getScId: '/kjy/mp/seller/getScId',
  getarticleList: '/kjy/mp/content/list',
  activityList: '/kjy/mp/content/activityList'
}
const inMiniprogram = getUrlParameter("mini") == 1;
export default {
  data() {
    return {
      tip: "home",
      title: '',
      list: [],
      scid: 0,
      src: "//yun.dui88.com/h5-mami/webgame/kejiji/img/null.png",
      title: "",
      subTitle1: "",
      subTitle2: "",
      activitLyist: []
    };
  },
  methods: {
    getText(str, size){
      return getEllipsisText(str, size);
    },
    async showToday() {
      // this.$router.push("/today");
      console.log("inMiniprogram = " + inMiniprogram);
      let res = await get(API.getScId, {contentId: this.scid, showCard: 0});
      if (res.success) {
        let id = res.data;
        if(inMiniprogram){
          // wx.miniProgram.postMessage({
          //   data: JSON.stringify({
          //     title: this.title,
          //     src: this.src
          //   })
          // })
          let url = formatUrl('/pages/news/news_today/main', {
            scid: id,
            n: Math.random(),
            title: this.title,
            src: this.src
          })

          wx.miniProgram.navigateTo({
            url: url
          })
        }
        else{
          window.location.href = './daily?scid=' + id + '&n=' + Math.random()
        }
      }
      else{
        alert('请求数据出错');
      }
    },
    async initData(){
      shareConfig({
        link: location.origin + location.pathname + location.search,
        title: "内容库",
        desc: '来自客集集的分享',
        img: 'https://yun.dui88.com/h5/miniprogram/kejiji/icons.png',
        debug: false
      })

      if(inMiniprogram){
        this.tip = "在小程序中";
      }
      else{
        this.tip = "在普通浏览器中";
      }
      // this.tip = window.navigator.userAgent.toLowerCase();
      let res = await get(API.getInitDaily, {});
      if (res.success) {
        let obj = res.data;
        this.scid = obj.id;
        this.src = obj.mainImgUrl;
        this.title = getEllipsisText(obj.title, 72);
        console.log(obj.contentHead);
        if(obj.contentHead){
          let contentHead = JSON.parse(obj.contentHead);
          console.log(contentHead.subTitle1);
          this.subTitle1 = contentHead.subTitle1;
          this.subTitle2 = contentHead.subTitle2;
        }
      } else {
        if (res.code == '100010') {
          this.getH5Authorize()
        } else if (res.code == '100020') {
          
        }
      }
    },
    async getArticleList(type) {
      let res = await get(API.getarticleList, {pageNo: 1, pageSize: 5});
      if (res.success) {
        if (type) {
          this.list = this.list.concat(res.data);
        } else {
          this.list = res.data;
        }
      } else {

      }
    },
    async getActivityList() {
      let res = await get(API.activityList, {pageNo:1, pageSize:3});
      if (res.success) {
        let activity_inprogress = res.data.filter(it => it.status == 2);
        let activity_soon = res.data.filter(it => it.status == 1);
        this.activitLyist = {activity_inprogress, activity_soon}
      }
    },
    async goArticleDetail(id) {
      console.log(id);
      let params = {
        contentId: id
      };
      let res = await get(API.getScId, params);
      if (res.success) {
        let id = res.data;
        let url = formatUrl('/pages/article/main', {
          scid: id
        });
        wx.miniProgram.navigateTo({
          url: url
        });
      }
    },
    async goActivitySetting(item) {
      let obj = JSON.parse(item.text);
      let params = {
        contentId: item.id
      };
      let res = await get(API.getScId, params);
      if (res.success) {
        let id = res.data;

        let url = formatUrl('/pages/activity/link/main', {
          scid: id,
          img: obj.previewImageUrl,
          url: encodeURIComponent(obj.activity_url),
          lottery: obj.lottery
        });
        wx.miniProgram.navigateTo({
          url: url
        });
      }
    },
    goArticlList() {
      let url = '/pages/content/articleList/main';
      wx.miniProgram.navigateTo({
        url: url
      });
    },
    getH5Authorize(){
      let url = '/kjy/authorize/wxh5base?uri=/kjy/mp/content?mini=1';
      window.location.href = url;
    },
    jump(item){
      console.log(item);
    }
  },
  created() {
    this.initData();
    this.getArticleList();
    this.getActivityList();
  }
};
</script>
<style lang="less" scoped>
@import '../flex.less';
@import './home.less';
</style>