<style scoped>
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
.text-gray{color:#717171;}
.text-orange{color:#eb7741;}
.text-danger{color:#c03546;}
.dangerIntegral{color:#c03546;font-weight: 700;margin-right:0.2rem;}
hr{margin: 0;border:0;height:0.5rem;}
.OrderInfo{width: 100%;height: 100%;height:100vh;overflow: hidden;position: relative;background: #F3F6FF;}
.productInfo{padding: 0.8rem 3%;background-color: #fff;}
.productInfo .productList{display: flex;}
.productInfo .productImg{width:3.5rem;margin-right: 0.6rem;position:relative;}
.productInfo .productImg img{width:100%;height: 3.5rem;}
.productInfo .productContent{flex:1;}
.productInfo .productContent .productName{font-weight:600;min-height:2.1875rem;margin-top:0;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display:-webkit-box;}
.productInfo .productContent .clearfix {color:#717171;vertical-align:bottom;height: 1.2rem;line-height: 1.2rem;margin:0;}
.productInfo .productContent .clearfix >span{float: right;}
.productInfo .productResult{margin-top: 0.8rem;margin-bottom: 0;}
.productInfo .productResult >span {float: right;}
.productPanel{background-color: #fff;padding: 0 3%;}
.productWay {padding: 1rem 0;border-bottom: 0.01rem solid #f5f5f5;display:flex;line-height: 1;}
.productWay .titleInfo{margin-right: 0.6rem}
.productWay .titleInfo span{width:3.75rem;display: inline-block;text-align:justify;text-justify:distribute-all-lines;/*ie6-8*/text-align-last:justify;/* ie9*/-moz-text-align-last:justify;/*ff*/-webkit-text-align-last:justify;/*chrome 20+*/}
.productWay .resultInfo{-webkit-box-flex: 1;flex: 1;}
.productWay .resultInfo input[type=text]{border:0;outline:none;width: 100%;height: 100%;}
.productWay .resultInfo textarea{border:0;outline:none;width: 100%;resize: none;font: 400 13.3333px Arial;}
.productWay span.resultInfo{margin-left: 0.6rem;}
.allWidth{padding:0.4rem 0;}
.allWidth >span{width: 100%;}
.scanningCode{margin: 3.4rem auto;}
.scanningHint{width: 18rem;margin: 0 auto;}
.scanningCode img{display: block;width: 10rem;height: 10rem;margin: 0 auto;background: #fff;padding: 0.4rem;}
.scanningCode p{text-align: center;color:#eb7741;}
.qrCode{display: block; width: 10rem;  height: 10rem;   margin: 0 auto;  background: #fff;    padding: 0.4rem;}
</style>
<template>
<div class="jfBaseSize OrderInfo" v-cloak v-bind:style="isShow.vh?'height:100vh':'height: 100%;'">
  <div class="productInfo">
      <div class="productList">
          <div class="productImg">
              <img v-bind:src="ModelInfo.GiftImg"/>
          </div>
          <div class="productContent">
              <p class="productName">{{ModelInfo.GiftName}}</p>
              <p class="clearfix">
                  <span>数量：<span>{{ModelInfo.Amount}}</span></span>
              </p>
          </div>
      </div>
  </div>
  <hr />
  <div class="productPanel">
    <div class="productWay">
        有效期
        <span class="resultInfo text-gray" style="text-align:right;">
           {{ModelInfo.Gift_ExpriseStart}}-{{ModelInfo.Gift_ExpriseEnd}}
        </span>
    </div>
  </div>
  <div class="scanningCode">
    <div id="qrCode" ref="qrCodeDiv" class="qrCode"></div>
    <p>核销码<span>{{ModelInfo.VerificationCode}}</span></p>
  </div>
  <div class="scanningHint text-gray">
    <p>使用提醒：</p>
    <p>请截图保存核销码，并于<span>{{ModelInfo.Gift_ExpriseEnd}}</span>前进行兑换</p>
  </div>

  <ReturnHome ref="returnhome"></ReturnHome>
</div>
</template>

<script>
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import { debug } from 'util';
	import ReturnHome from "@/components/channel/temp001/ReturnHome";
import { Indicator } from 'mint-ui';
import QRCode from 'qrcodejs2';
export default {
  name: "Key_WriteOffExchange",
  components: {ReturnHome},
  provide(){       
     return{           
        goPage:this.goPage       
     }   
  },
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      isShow:{
        popup:false,
        vh:false,
      },ModelInfo:{
        GiftName:"",
        GiftImg:"",
        Amount:"",
        ROW_VER:"",
        VerificationCode:"",
        Gift_ExpriseStart:"",
        Gift_ExpriseEnd:""
      }
    };
  },
  methods: {
      GetExchangeInfo(){
         var that = this;
        var eno = that.sup8.context.enterpriseno;
        var url = "/channel/GetMyGiftInfo";
        var dataParams = {
            ID:localStorage.getItem("Ex_Id"),
            ActivityNo:localStorage.getItem("Ex_ActivityNo"),
            UserToken:channelHelper.GetUserToken(),
            EnterpriseNo: eno,
            LanguageType:channelHelper.GetLanguageType()
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          Indicator.close();
            if (res.flag){
               that.ModelInfo=res.data;
            }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
      },
      bindQRCode: function () {
        var that=this;
        new QRCode(this.$refs.qrCodeDiv, {
          text:that.ModelInfo.VerificationCode,
          width: "150",
          height: "150",
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        })
      }
  },
  watch: {
    
  },
  created: function() {
      var that=this;
      that.GetExchangeInfo();
  },
  mounted: function() {
    var isDesign = location.pathname.indexOf('design');
    if (!(isDesign>-1)) {
        this.$set(this.isShow,'vh',true);
    }else{
        this.$set(this.isShow,'vh',false);
    }
    this.$nextTick(function () {
    this.bindQRCode();
    })
  }
};
</script>
