<template>
  <div>
    <van-popup class="refer-share" position="top" v-model="showShare"><img :src="shareTipsUrl"></van-popup>
    <div class="tips" v-if="orderList.length < 1">
      暂无订单
    </div>
    <div v-for="data in orderList" class="list">
      <div class="head">
        <div class="bg-img" v-if="data.goods_desc" :style="{backgroundImage: `url(${data.goods_desc.img[0].url})`}">
        </div>
        <div class="content">
          <div class="title">{{data.goods_name}}</div>
          <div v-if="data.goods_desc" class="desc">{{data.goods_desc.desc}}</div>
          <div class="time">付款时间：{{data.pay_at}}</div>
        </div>
      </div>
      <div class="footer">
        <span class="payMoney">实付：{{data.money/100}}元</span>
        <span class="share" v-if="data.buy_type === 2 && data.status !== 4" @click="shareOrder(data)">
          <img :src="shareUrl"/>点击分享
        </span>
        <span :class="{red:data.status === 1}">{{data.status | orderType}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {getOrderListApi,getwechatParam} from "../service/api";
  import {ORDERTYPE} from "../util/wordbook";
  import shareUrl from '../assets/share.png'
  import { Toast } from 'vant';
  import shareTipsUrl from '../assets/Bitmap@2x.png'
  export default {
    name: "order",
    data(){
      return {
        orderList:[],
        showShare:false,
        shareTipsUrl:shareTipsUrl,
        shareUrl:shareUrl,
      }
    },
    filters:{
      orderType(value){
        return ORDERTYPE[value]
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      initPage(){
        getwechatParam({
          api_list:'onMenuShareAppMessage,onMenuShareTimeline',
          url:window.location.href.split('#')[0]
        }).then(res=>{
          wx.config({
            debug: false,
            appId: res.appId,
            timestamp: parseInt(res.timestamp),
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: res.jsApiList
          });
        });
        getOrderListApi({status:1}).then(res=>{
          res.list.forEach(i=>{
            if(i.goods_desc){
              i.goods_desc= JSON.parse(i.goods_desc)
            }
          });
          this.orderList = res.list
        })
      },
      shareOrder(data){
        this.$sa.track('buttonClick',{
          tabTitle:'订单',
          moduleTitle:'订单',
          buttonType:'分享',
          buttonName:'团购分享'
        });
        this.showShare = true;
        let invite_code;
        if(!data.invite_id || data.invite_id == '') {
          invite_code = 'CC-USER-' + data.user_id;
        }else if(data.invite_type === 'TEACHER'){
            invite_code = `CC-USER-${data.user_id}`;
        }else{
          invite_code = `CC-${data.invite_type}-${data.user_id}`;
        }
        let shareData = JSON.parse(data.share_desc);
        let that =this;
        let shareUrl = `${process.env.BUY_URL}shopId=${data.goods_id}&groupId=${data.order_group_id}&invite_code=${invite_code}'`;
        wx.onMenuShareAppMessage({
          title: shareData.title, // 分享标题
          desc: shareData.content,// 分享描述
          link: shareUrl, // 分享链接
          imgUrl:  shareData.img[0]?shareData.img[0].url :  'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
          success: function() {
            Toast('分享成功');
            that.showShare = false
          },
        });
        wx.onMenuShareTimeline({
          title: shareData.title, // 分享标题
          desc: shareData.content,// 分享描述
          link: shareUrl, // 分享链接
          imgUrl: shareData.img[0]?shareData.img[0].url :  'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
          success: function() {
            Toast('分享成功');
            that.showShare = false
          },
        });
      }
    }
  }
</script>

<style scoped lang="less">
 @import "../util/public";
 .refer-share {
   width: 100%;overflow-y:visible;
 }
 .refer-share img {
   position: absolute;
   width: 80%;
   right: 0;
   z-index: 2002;
 }
 .tips{
   padding: 20 * @toVw;
   font-size: 24px;
   text-align: center;
   color: #888888;
 }
  .list{
    .bg-img{
      width: 160*@toVw;
      margin-right: 5 * @toVw;
      height: 80*@toVw;
      background-size:100% 100%;
    }
    .head{
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 1.4em;
      position: relative;
      flex-flow: row nowrap;
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 12px;
      padding: 12px;
      border: 1px solid #ccc;
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
      .content{
        font-size: 3.2vw;
        color: #999;
        .title{
          font-size: 3.73333vw;
          color: #666;
        }
      }
    }
    .footer{
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      margin-left: 10px;
      margin-right: 10px;
      padding: 6px 12px;
      color: #999;
      font-size: 12 * @toVw;
      border: 1px solid #ccc;
      border-top: none;
      border-bottom-left-radius: 9px;
      border-bottom-right-radius: 9px;
      box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.1);
      span{
        margin: 0;
        line-height: 20 * @toVw;
      }
      .share{

        img{
          width: 16 *@toVw;
          display: inline-block;
          margin-right: 3 * @toVw;
          vertical-align: text-bottom;
        }
      }
      .red{
        color: #f06a33;
      }
    }
 }
</style>