<template>
  <div class="share_wrap">
    <div class="fover">
      <div v-if="supportFlag" @click="supportHandle('true')">
        <img src="@/assets/like_red.png" alt />
        <span style="color: #F24950;">已赞</span>
      </div>
      <div v-else @click="supportHandle()">
        <img src="@/assets/like_gray.png" alt />
        <span>点赞</span>
      </div>
    </div>
    <div class="share_type weixin">
      <img
        src="@/assets/wechat.png"
        @mouseover="showShareWeixin"
        @mouseout="hideShareWeixin"
      />
      <div v-show="showWeiChat" class="qrcode-box">
        <p>分享到微信和朋友圈</p>
        <div id="qrcode" ref="qrcode_box"></div>
        <p>打开微信，点击底部的“发现”，使用“扫一扫”即可将网页分享至朋友圈</p>
      </div>
    </div>
    <div class="share_type">
      <img
        src="@/assets/friends.png"
        @mouseover="showShareWeixin"
        @mouseout="hideShareWeixin"
        
      />
    </div>
    <div class="share_type" @click="shareQQ">
      <img src="@/assets/qq.png" title="分享到qq" alt="qq" />
    </div>
    <div class="share_type" @click="shareSinaWeiBo" title="分享到微博" alt="微博">
      <img src="@/assets/weibo.png" alt />
    </div>
  </div>
</template>

<script>
import shareModel from "@/utils/shareModel.js";

export default {
  props: {
    id: '',
    title: ''
  },
  data() {
    return {
      supportFlag: false,
      showWeiChat: false,
      baseUrl: "分享页地址",
    };
  },
  mounted() {
    this.getSupportData();
  },
  methods: {
    getSupportData() {
      // 查询用户是否点赞过该篇资讯
      fql.ucmobile['用户社交查询']({
        ACTION_TYPE: '00',
        BUSIN_TYPE: 'INFO',
        COMMUNITY_STATUS: '1',
        COMMUNITY_TYPE: '2',
        COMMUNITY_SIDE: '',
        OBJECT_TYPE: '10',
        TOTAL_FLAG: '1',
        TOPIC_CODE_LIST: this.id
      }, false).then((res) => {
        if(res.RNUM != -1 && res.list.length > 0){
          this.supportFlag = true;
        }
      })
    },
    supportHandle(cancel=false) {
      // 点赞&&取消点赞
      if(!this.$store.getters.userInfo.MOBILENO) {
        window.location.href = "http://www.treeid/GTJACOMM_COMM=COMM_MOBILOGIN";
        return;
      }
      fql.ucmobile['用户社交管理']({
        ACTION_TYPE: cancel ? '02': '00', // 00:点赞，02:取消点赞
        BUSIN_TYPE: 'INFO',
        RELATION_USER_CODE: '',
        COMMUNITY_TYPE: '2',
        COMMUNITY_SIDE: '',
        OBJECT_TYPE: '10',
        TOPIC_CODE: this.id,
      }, false).then((res) => {
        if(res.RNUM != -1){
          this.supportFlag = !this.supportFlag;
          cancel ? this.$parent.admirNum-- : this.$parent.admirNum++
        }
      })
    },
    handelParams() {
      // 生成分享页所需字段内容
      let str = 'http://wangzhisheng.cn/gj/index.html?tit='
      return str;
    },
    shareQQ() {
      let params = this.handelParams();
      let pic = 'http://dl.app.gtja.com/public/fyevent/sharePage/fy.png'; // 图片地址
      shareModel.shareQQ({
        title: this.title,
        url: params + encodeURIComponent(this.title.slice(0,15)),
        // desc: this.title,
        pic
      });
    },
    showShareWeixin() {
      this.showWeiChat = true;
      this.makeCode();
    },
    hideShareWeixin() {
      this.showWeiChat = false;
    },
    shareSinaWeiBo() {
      let params = this.handelParams();
      let pic = 'http://dl.app.gtja.com/public/fyevent/sharePage/fy.png'; // 图片地址
      shareModel.shareSinaWeiBo({
        title: this.title.slice(0,25) + '...',
        url: params + encodeURIComponent(this.title.slice(0,12)),
        pic
      });
    },
    makeCode() {
      this.$refs.qrcode_box.innerHTML = "";
      let params = this.handelParams();
      new QRCode("qrcode", {
        width: 90,
        height: 90,
        correctLevel: 3, // 防止内容过长溢出报错
        text: params + encodeURIComponent(this.title.slice(0,15)), // 链接内容过多长度容易溢出二维码密度过大导致扫不出来内容
        render: 'canvas'
      });
    },
  },
};
</script>
<style scoped>
.share_wrap {
  width: 68px;
  height: 238px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top: 170px;
  /* right: calc((100vw - 1200px) / 3); */
  right: calc(((100vw - 1200px) / 2) - 80px);
  background: #2E333D;
  border-radius: 4px 0 0 4px;
  z-index: 11;
}
@media screen and (max-width: 1360px){
  .share_wrap {
    right: 0;
  }
}
.fover {
  padding: 10px;
  cursor: pointer;
  text-align: center;
  border-bottom: 1px solid #3D424B;
  margin: 10px;
}
.fover div{
  height: 30px;
  line-height: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fover img {
  margin: 0 8px 0 10px;
}
.share_type {
  margin-bottom: 8px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 6px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.weixin {
  position: relative;
}
#qrcode {
  padding: 2px 0;
}
.qrcode-box {
  background-color: #fff;
  position: absolute;
  width: 180px;
  height: 180px;
  left: -195px;
  top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000;
  padding: 5px;
}
</style>