<template>
  <!-- 购买电子卡券支付完成 -->
  <div class="PayElectronCard">
    <div class="top">
      <div class="bgImg">
        <image
          src="https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/X87KGrY8GP.png"
          alt=""
        ></image>
      </div>
      <div class="info flex">
        <div class="infoTop flex">
          <van-icon name="checked" />
          <p class="success">购买成功</p>
        </div>
        <p class="infoBottom">向商家出示</p>
      </div>
    </div>
    <div class="goodsInfo" v-for="(item,index) in orderDetail.orderItems" :key="index">
      <div class="shopName">{{item.terminalProductGoodsOrgName}}</div>
      <div class="info flex">
        <div class="goodsImg">
          <image
            :src="item.specificationPictureUrl"
            alt=""
          ></image>
        </div>
        <div class="right">
          <p class="goodsName line-clamp2">{{item.productName}}</p>
          <p class="goodsSpa">{{item.specifications | spaToStr}}</p>
          <div class="bottom flex">
            <p class="goodsPrice">￥ <span>{{item.dealPrice | keepTwoNum}}</span></p>
            <p class="goodsNum">x <span>{{item.qty | keepIntNum}}</span></p>
          </div>
        </div>
      </div>
    </div>
    <div class="useCard">
      <div class="useTop">
        <p class="available">
          可使用 (<span>{{ available }}</span
          >张)
        </p>
        <p class="endTime">
          有效期至<span>{{ firstCard.effectiveDateEndStr }}</span>
        </p>
      </div>
      <div class="code">
        <div class="topText">向商家出示二维码或券号即可消费</div>
        <!-- <div class="PayElectronCardQrCode" id="PayElectronCardQrCode"></div> -->
        <div class="qrCode flex">
          <canvas
            class="canvas-code"
            canvas-id="PayElectronCardQrCode"
            :style="{ background: '#fff', width: '308rpx', height: '308rpx' }"
          />
        </div>
      </div>
      <div class="cardInfo">
        <div class="topText">券码信息</div>
        <div class="borderLine"></div>
        <div class="cardList">
          <div class="cardItem flex" v-for="(item, index) in cardList" :key="index">
            <div class="cardItemL flex">
              <div class="dot"></div>
              <div class="cardCode">{{item.redeemCodeCardNumber}}</div>
            </div>
            <p class="cardItemR">{{item.writeoffStatus | getWriteoffStatus}}</p>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 40px"></div>
    <div class="toDetail flex">
      <div class="btn flex" @click="toDetail">查看详情</div>
      <div class="btn flex" @click="toIndex">回首页</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import order from "@/api/order"
import QRCode from "@/utils/weapp-qrcode.js";
export default {
  name: "PayElectronCard",
  props:{
    orderDetail:{
      type: Object,
      default:{},
    }
  },
  data() {
    return {
      cardList:[],
      firstCard:{},
      available:0,//可用
      routeQuery: {},
      qrCodeImg: "",
    };
  },
  filters:{
    // 过滤规格
    spaToStr(val){
      let newVal=JSON.parse(val);
      if(Object.keys(newVal).length>0){
        let val=[];
        for(let i in newVal){
          val.push(newVal[i]);
        }
        return val?val.join(","):"";
      }
      return ""
    },
    getWriteoffStatus(val){
      let list=['未购买','未核销','已核销','退款中','已退款'];
      return list[val];
    }
  },
  components: {},
  computed: {},
  created() {},
  mounted() {},
  onLoad(options){
    console.log(options,'--PayElectronCard--onLoad')
    this.routeQuery = options;
    this.init();
  },
  methods: {
    init() {
      this.getList();
    },
    getList(){
      order.getElectronicCardRedeemCode(this.routeQuery.orderSn).then(res1 => {
        let res = res1.data;
        if(res.code==200 && res.data && res.data.length>0){
          this.cardList=res.data;
          this.cardList.forEach((item,index)=>{
            item.effectiveDateEndStr=item.effectiveDateEnd.replace(/-/g,'/').split(" ")[0];
            // 核销状态（0：未购买；1：未核销；2：已核销；3：退款中；4：已退款）
            if(item.writeoffStatus==1){
              this.available++;
            }
          })
          this.firstCard=this.cardList[0];
          this.qrcode();
        }
      })
    },
    toDetail(){
      let url = `/pages/index/main?from=home&backpath=${encodeURIComponent(`/order/orderDetail?orderSn=${this.routeQuery.orderSn}&isReplace=true`)}}`
      wx.redirectTo({
        url,
      });
    },
    toIndex(){
      wx.reLaunch({
        url: "/pages/home/main",
      });
    },
    qrcode() {
      let _this = this;
      const systemInfo = wx.getSystemInfoSync();
      const width = (154 * systemInfo.windowWidth) / 375;
      const height = width;
      new QRCode("PayElectronCardQrCode", {
        width,
        height,
        text: `${process.env.GUIDE_URL}/login?codeNumber=${this.firstCard.redeemCodeCardNumber}&mixid=${this.$store.state.mixid}`, // 二维码地址
        colorDark: "#000",
        colorLight: "#fff",
        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
        callback: (res) => {
          console.log(res.path, "---res.path");
          _this.qrCodeImg = res.path;
          // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.block {
  width: calc(100vw - 20px);
  margin: 10px;
  padding: 12px;
  background: #fff;
  border-radius: 6px;
}
.cardDot {
  content: "";
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f5f5f5;
}
.PayElectronCard {
  width: 100vw;
  height: calc(100vh - 49px);
  overflow-y: auto;
  background: #f3f3f3;
  position: fixed;
  top: 0;
  .top {
    position: relative;
    height: 98px;
    color: #fff;
    padding-top: 40px;
    overflow: hidden;
    .bgImg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      image {
        width: 100%;
      }
    }
    .info {
      position: relative;
      z-index: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      .infoTop {
        align-items: center;
        font-size: 16px;
        .success {
          font-weight: bold;
          margin-left: 4px;
        }
      }
      .infoBottom {
        margin-top: 10px;
      }
    }
  }
  .goodsInfo {
    box-sizing: border-box;
    @extend .block;
    .shopName {
      font-size: 14px;
      color: #333;
      font-weight: bold;
    }
    .info {
      margin-top: 10px;
      .goodsImg {
        width: 90px;
        height: 90px;
        background: #f5f5f5;
        overflow: hidden;
        border-radius: 4px;
        flex-shrink: 0;
        image {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      .right {
        flex: 1;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .goodsName {
          font-size: 14px;
          color: #333;
        }
        .goodsSpa {
          font-size: 12px;
          color: #999;
        }
        .bottom {
          align-items: center;
          justify-content: space-between;
          margin-top: 4px;
          .goodsPrice {
            font-size: 14px;
            color: var(--main-color);
          }
          .goodsNum {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
  .useCard {
    @extend .block;
    padding: 0;
    .useTop {
      padding: 12px;
      background: #fafafa;
      .available {
        font-size: 14px;
        color: #333;
      }
      .endTime {
        font-size: 12px;
        margin-top: 4px;
        color: #999;
      }
    }
    .code {
      padding: 12px;
      flex-direction: column;
      align-items: center;
      .topText {
        text-align: center;
        color: #999;
      }
      .qrCode{
        margin: 28px auto 0;
        width: 308rpx;
        height: 308rpx;
        border: 1px solid #F3F3F3;
        padding: 16px;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .cardInfo {
    position: relative;
    &::before {
      @extend .cardDot;
      left: -7px;
    }
    &::after {
      @extend .cardDot;
      right: -7px;
    }
    padding: 12px;
    .topText {
      font-size: 14px;
      color: #333;
      padding-bottom: 6px;
    }
    .borderLine {
      width: calc(100vw - 70px);
      margin: 0 auto;
      border-bottom: 1px dashed #979797;
    }
    .cardList {
      .cardItem {
        padding: 8px 0;
        justify-content: space-between;
        align-items: center;
        .cardItemL {
          align-items: center;
          .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #333;
          }
          .cardCode {
            margin-left: 4px;
            font-size: 12px;
            color: #333;
          }
        }
        .cardItemR {
          font-size: 12px;
          color: #333;
        }
      }
    }
  }
  .toDetail {
    position: fixed;
    bottom: 0;
    background: #f5f5f5;
    width: 100%;
    height: 50px;
    justify-content: space-around;
    align-items: center;
    .btn {
      width: 46%;
      height: 36px;
      border-radius: 36px;
      background: var(--main-color);
      color: #fff;
      font-size: 14px;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>