<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-if="orderList.length < 1" class="unStart">
      <img :src="mok4" alt="">
      <p>还没有订单哦~</p>
      <div @click="goIndex">去逛逛吧</div>
    </div>
    <div class="listBox">
      <div v-for="(data,index) in orderList"  class="list">
        <div class="head" >
          <div @click="goDetail(index)" class="bg-img" v-if="data.goods_desc" :style="{backgroundImage: `url(${data.goods_desc.img[0].url})`}">
          </div>
          <div class="content">
            <img @click="goDetail(index)" class="status" v-if="data.status!=0" :src="data | orderType" alt="">
            <div @click="goDetail(index)" class="title">{{data.goods_name}}</div>
            <div @click="goDetail(index)" v-if="data.goods_desc" class="desc">{{data.goods_desc.desc}}</div>
            <div @click="goDetail(index)" class="time">付款时间：{{data.pay_at}}</div>
            <div class="bottom"><span class="payMoney">实付：{{data.money/100}}元</span><span class="share" v-if="data.buy_type === 2 && data.status !== 4" @click="shareOrder(data)">
            我要分享&nbsp;<img :src="shareUrl"/>
             </span>
             <!-- <div class="pay" v-if="data.status==0">去付款</div> -->
            </div>
          </div>
        </div>
        <!-- <div class="footer">
          <span :class="{red:data.status === 1}">{{}}</span>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
  import {getOrderListApi,getwechatParam} from "../service/api";
  import {ORDERTYPE} from "../util/wordbook";
  import {order} from "../util/imgUrl.js"
  import shareUrl from '../assets/share.png'
  import mok4 from '../assets/orderless.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,
        mok4:mok4,
        shopId:'',
        orderImg:order
      }
    },
    filters:{
      orderType(value){
        if(value.buy_type === 2){
          if(value.status == 1){
            return order.orderStatus2
          }else if(value.status == 4){
            return order.orderStatus3
          }
        }else if(value.buy_type === 1 && value.status == 1){
          return order.orderStatus1
        }else if(value.status == 2){
          return order.orderStatus4
        }
        // return ORDERTYPE[value]
      },
      // orderType(value){
      //   return ORDERTYPE[value]
      // }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      goDetail(index){
        if(this.orderList[index].buy_type==1){
            this.$router.push({
            name: 'buySuccess',
            query:{
              out_trade_no:this.orderList[index].out_trade_no
            }
          });
        }else{
          this.$router.push({
            name: 'success',
            query:{
              out_trade_no:this.orderList[index].out_trade_no
            }
          });
        }
      },
      goIndex(){
        this.$router.push({
          name: "index"
         });
      },
      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";
 .child-view{background: white;}
 .unStart{
    text-align: center;
    img{width:300*@toVw; }
    p{line-height: 22px;font-size: 16px;color: #666666;}
    div{width:250*@toVw;height: 40*@toVw;line-height:40*@toVw;background: #40A9FF;color: white;border-radius: 20*@toVw;margin-top: 72*@toVw }
  }
 .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;
 }
 .listBox{padding: 15*@toVw;}
  .list{
    box-shadow:1px 3*@toVw 8*@toVw 0px rgba(0,0,0,0.1);
    border-radius:15*@toVw;
    overflow: hidden;
    .bg-img{
      width: 108*@toVw;
      height:108*@toVw ;
      margin-right: 15 * @toVw;
      margin-left: 0 * @toVw;
      background-size:100% 100%;
    }
    .head{
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      align-items: center;
      line-height: 1.6em;
      position: relative;
      flex-flow: row nowrap;
      // margin-right: 10px;
      .content{
        font-size: 12* @toVw;
        color: #999;
        margin-left: 0;
        position: relative;
        .title{
          width: 160* @toVw;margin-left: 0; overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          color: #666;
          font-size: 15* @toVw;
        }
        .desc{width: 160* @toVw;margin-left: 0; overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap}
        .status{position: absolute;width:60* @toVw ;right: 0;}
        .bottom{display: flex;display: -webkit-flex;justify-content: space-between;
        width: 226*@toVw;
         .share{
           margin-right: 10 *@toVw;
            img{
              width: 13 *@toVw;
              display: inline-block;
              margin-right: 3 * @toVw;
              vertical-align: text-bottom;
            }
          }
          .payMoney{margin-left: 0;}
          .pay{width: 70* @toVw;height: 28* @toVw;border:1px solid rgba(244,99,99,1);color:rgba(244,99,99,1); 
          text-align: center;line-height: 28* @toVw;border-radius: 14* @toVw; }
        }
      }
    }
    .footer{
      display: flex;
      display: -webkit-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;
      }
      
      .red{
        color: #f06a33;
      }
    }
 }
</style>