<template>
  <div class="main">
    <div class="contents">
      <div v-for="item of zlist.voucher" v-show="isShow" :key="item.coupon_id" >
        <div class="content">
          <div class="content-imgs">
            <img class="imgs-img" :src="zcache.defaultImgUrl" alt />
          </div>
          <div class="content-infos">
            <div class="infos-mains">
              <div class="mains">
                <div class="main-usedPercent">活动ID：{{item.action_id}}</div>
                <div class="main-money">{{item.coupon_title}}</div>
              </div>
              <div class="buttons">
                <button class="button-send" @click="handlePush(item.coupon_link)">推送</button>
              </div>
            </div>
            <div class="infos-tips">
              <div class="tip-shareMan">优惠券ID：{{item.coupon_id}}</div>
              <!-- <div class="tip-commision">佣金：¥ {{item.commision}}</div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="no"  v-show="!isShow">暂无优惠券可发放...</div>
    </div>
  </div>
</template>

<script>
// import { ApiTestCfPost, ApiTestEaPost } from "@/api/test/main"
import { ApiEaPost, ApiEaActiveList } from "@/api/test/test"
import { configWx, getUserInfo } from "@/utils/aCommon"
// import * as APISidebarEA from "@/api/sidebar/ea"
import { getVoucherList, getVoucherWxUrl, judgeMemberId} from "@/api/sidebar/ea"
import { getUserInfoByUserId } from "@/api/sidebar/voucher"
import Vue from "vue"
import { Field } from "vant"
const zlog = console.log.bind(console)

Vue.use(Field)

export default {
  name: "discountIndex",
  data() {
    return {
      zcache: {
        storeId: 1,
        userId: "",
        unionId: "",
        userInfo: "",
        defaultImgUrl: "/mainSale/2.png",
        now: {
          activeId: "",
          voucherId: "",
        }
      },
      zlist: {
        voucher: [],
        voucherUrl: ""
      },
      test: {
        list: {
          main: [
            {
              imgUrl: "/mainSale/test-city.png",
              usedPercent: "10",
              money: "100",
              shareMan: "Alice",
              commision: "11"
            },
            {
              imgUrl: "/mainSale/test-city.png",
              usedPercent: "20",
              money: "200",
              shareMan: "Bob",
              commision: "22"
            }
          ]
        }
      },
      dis: {},
      isShow: true
    };
  },
  created() {
    if(this.$route.params.userId) {
      this.zcache.userId = this.$route.params.userId;
    }else {
      this.zcache.userId = sessionStorage.getItem("userId")
    }    
    this.zReadyGetUserFromId();
    this.getAgentAuth();
  },
  
  methods: {
    // 获取店铺数据
    zReadyGetUserFromId() {
      let postData = {
        userName: this.zcache.userId
        // userName: 'ShanDian'
      }
      getUserInfoByUserId(postData)
        .then(res => {
          if(res.data.length == 0) {
            alert('您当前没有绑定店铺')
            this.isShow = false
          }else {  
            // this.memberIdJudge('BH01','181') 
            let list = []
            res.data.forEach(item => {       
             let obj = this.getVoucherList(item.oyStallCode) 
             list.push(obj)
            })                           
            let promiseAll = Promise.all([ ...list]).then(res => {
              res.forEach(item => {
                if(item.length>0) {
                  console.log(item,'item');                  
                  this.zlist.voucher.push(...item)
                }
              })
              if(this.zlist.voucher.length>0) {
                this.isShow = true
              }else {
                this.isShow = false
              }              
            })              
          }         
        })
        .catch(err => {})
    },
     getVoucherList(mdid) {
       const postData = {
         appCode: "0696",    // j接口编码
         mdid: mdid 
       }
       return new Promise(function(resolve, reject) {
         getVoucherList(postData).then(res => {     
           if(res.errCode == 0) {
             if(res.result.coupons.length != 0) {
               resolve(res.result.coupons)
             }else {
               resolve(res.result)
             }      
           }else {
             resolve('')
           }       
       })
       .catch(err => {
         reject(err)
       })
      })   
     },
    // 推送链接
    handlePush(link) {
      wx.invoke(
        "sendChatMessage",
        {
          msgtype: "news", //消息类型，必填
           news: {
            link: `http://oysales.oywanhao.com/qrCode?Url=${link}`, //H5消息页面url 必填
            title: "领取优惠券", //H5消息标题
            desc: '', //H5消息摘要
            imgUrl: '' //H5消息封面图片URL
          }
        },
        function(res) {
          if (res.err_msg == "sendChatMessage:ok") {
          } else if (res.err_msg != "sendChatMessage:ok") {
          }
        }
      )
    },
    ///
    // memberIdJudge(oyStallMemberId,oyStallCode) {
    //   const postData = {
    //     appCode: "0728",    // j接口编码
    //     wxmpcode: oyStallMemberId,
    //     crmcode: oyStallCode
    //   }
    //   judgeMemberId(postData).then(res => {     
    //     if(res.errCode == 0) {
    //       console.log(res,'res')          
    //     }else {
    //       console.log(res,'?')         
    //     }       
    //   })
    //   .catch(err => {
    //     console.log(err)         
    //    })
         
    // },
  }
};
</script>

<style scoped>

/* #mask{
  width: 100%;
  opacity: 0.6;
  background-color: black;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 998;
}
.mask_img{
  width: 316px;
  height: 200px;
  z-index: 999;
  position: fixed;
  right: 0px;
} */
.no {
  font-size: 20px;
  margin-top: 40px;
  text-align: center;
}
.main {
  background-color: white;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: start;
}

.tops {
  border: 2px solid lightblue;
  width: 100%;
  height: 100px;
}

.contents {
  /* border: 2px solid lightpink; */
  width: 100%;
  height: 100%;
  padding: 16px;
  padding-bottom: 40px;
}

.content {
  border: 0px solid orange;
  height: 100px;
  width: 100%;
  padding: 4px 0px;
  margin-bottom: 16px;

  border-radius: 4px;
  box-shadow: 0px 2px 4px 0px rgb(187, 187, 187);

  display: flex;
  flex-direction: row;
  justify-content: start;
}

.content-imgs {
  /* border: 1px solid pink; */
  width: 20%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

.imgs-img {
  width: 50px;
  height: 50px;
  margin-top: 10px;
  border-radius: 50%;
  object-fit: cover;
}

.content-infos {
  /* border: 1px solid orange; */
  width: 80%;
  height: 100%;
}

.infos-mains {
  height: 70%;
  width: 100%;
  /* border: 1px solid green; */

  display: flex;
  flex-direction: row;
  justify-content: start;
}

.mains {
  /* border: 1px solid red; */
  width: 70%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.main-usedPercent {
  font-size: 14px;
  color: grey;
}

.main-money {
  /* border: 1px solid lightgreen; */
  /* font-size: 24px; */
  font-size: 20px;
}

.buttons {
  /* border: 1px solid darkorange; */
  /* background-color: bisque; */
  width: 30%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button-send {
  border: 0px solid blue;
  height: 40px;
  width: 60px;
  border-radius: 4px;
  background-color: rgba(68, 93, 251, 1);
  color: white;

  font-size: 16px;
}

.infos-tips {
  height: 30%;
  width: 100%;
  /* border: 1px solid red; */
  border-top: 1px dashed gray;
  padding-top: 6px;

  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.tip-shareMan {
  /* border: 1px solid orange; */
  width: 70%;
  height: 100%;

  font-size: 14px;
  line-height: 16px;
  color: rgb(150, 150, 150);
}

.tip-commision {
  /* border: 1px solid green; */
  width: 30%;
  height: 100%;

  font-size: 14px;
  line-height: 16px;
  color: rgb(150, 150, 150);
}

.menus {
  border-top: 1px solid rgb(194, 194, 194);

  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  background-color: white;

  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.menu {
  /* border: 1px solid red; */
  height: 50px;
  /* width: 120px; */
  width: 50%;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: black;
}

.activeMenu {
  color: lightcoral;
}

.zListActive {
  /*border: 1px solid limegreen;*/
  width: 100%;
  height: auto;
  margin-bottom: 16px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.zListActive > .inputs {
  /*border: 1px solid dodgerblue;*/
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.zListActive > .inputs > .input {
  /*border-bottom: 2px solid red;*/
  border-color: dodgerblue;
  border-radius: 4px;
  width: 70%;
  height: 40px;
  font-size: 16px;
}

.zListActive > .inputs > .button {
  border: 1px solid dodgerblue;
  border-radius: 4px;
  width: 40%;
  height: 40px;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
}

.zListActive > .lists {
  /*border: 1px solid red;*/
  width: 100%;
  height: auto;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.zListActive > .lists > .item {
  border: 1px solid red;
  width: 100%;
  height: 100px;
  margin-bottom: 16px;
  padding: 4px 4px;

  border-radius: 4px;
  box-shadow: 0px 2px 4px 0px rgb(187, 187, 187);

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  font-size: 14px;
}

.zListActive > .lists > .voucherUrl {
  border: 1px solid orange;
  width: 100%;
  height: 100px;
  margin-bottom: 16px;
  padding: 4px 4px;

  border-radius: 4px;
  box-shadow: 0px 2px 4px 0px rgb(187, 187, 187);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 14px;
  /* text-wrap: none; */
}
</style>
