<template>
<div class="jfBaseSize submitOrder" v-cloak v-bind:style="isShow.vh?'height:100vh':'height: 100%;'">
    <div>
        <div class="addressProduct">
            <div class="productList">
                <div class="productImg">
                    <img :src="dataProduct.Gift_ProductImg" />
                </div>
                <div class="productContent">
                    <p class="productName" v-html="dataProduct.Gift_Name"></p>
                    <p class="clearfix">
                        <span>
                            <span class="dangerIntegral" v-html="dataProduct.Gift_Score"></span>
                            <span>积分</span>
                        </span>
                        <span>数量：<span class="text-danger" v-html="JfCompScoreDetailObj.GiftCount"></span></span>
                    </p>
                </div>
            </div>
            <p class="productResult">
                合计
                <span>
                    <span class="dangerIntegral" v-html="dataProduct.Gift_Score&&JfCompScoreDetailObj.GiftCount?dataProduct.Gift_Score*JfCompScoreDetailObj.GiftCount:0"></span>
                    <span class="text-gray">积分</span>
                </span>
            </p>
        </div>
        <hr />
        <div class="addressWay">
            手机号
            <span class="text-gray">
                <input class="text-orange" type="text" placeholder="请输入手机号" v-model="phone" maxlength="11">
            </span>
        </div>
        <hr />
        <div class="addressWay">
            有效期
            <span class="text-gray" v-html="(dataProduct.Gift_ExpriseStart&&dataProduct.Gift_ExpriseEnd?dataProduct.Gift_ExpriseStart+'-'+dataProduct.Gift_ExpriseEnd:'')"></span>
        </div>
    </div>
    <div class="mint-popup exchangeSuccess" v-show="isShow.popup">
        <img class="successImg" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_shop/icon_exchangeSuccess.png">
        <h2 class="text-danger">恭喜你兑换成功！</h2>
        <p class="text-gray">我们将尽快发货，请注意手机保持畅通</p>
        <div>
            <mt-button class="text-danger" type="danger" v-on:click="changePage('19')">查看订单</mt-button>
            <mt-button type="danger" style="margin-left: 10%;" v-on:click="changePage('9')">继续兑换</mt-button>
        </div>
    </div>
    <div class="v-modal" style="z-index: 2008;" v-show="isShow.popup"></div>
    <mt-button class="btnSubmit" type="danger" size="large" v-on:click="popupShow()">提交订单</mt-button>
</div>
</template>

<script>
import { Toast } from 'mint-ui';
import { Indicator } from 'mint-ui';
import utils from "../assets/js/utils.js";
import JfapiHelper from "../assets/js/JfapiHelper.js";
export default {
 name: 'JfCompClassGift',
 props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
        tempLoginInfo:{},
        dataProduct:{},
        JfCompScoreDetailObj:{},
        orderId:'',
        isShow:{
            popup:false,
            address:false,
            vh:false,
        },
        phone:'',
    }
  },
  methods: {
    CompGetMallGiftShowInfo() {
        var that=this;
        //that.sup8.context.enterpriseno
        var url = "/integral/CompGetMallGiftShowInfo";
        var cbBeforeSend = function(){
            Indicator.open();
        };
        var cbComplete = function(){
            Indicator.close();
        };
        var dataParams = {
            Id:that.dataProduct.ID,
            CurrentEnterpriseNo: that.tempLoginInfo.EnterpriseNo,
            UserToken:that.tempLoginInfo.UserToken,
            LanguageType:that.tempLoginInfo.LanguageType,
        };
        var cbSuccess = function (res) {
            if(res.flag)
            {
                var responseData = [];
                try {
                    responseData = JSON.parse(res.data);
                } catch (e) {
                    responseData = res.data;
                }
                if(responseData){
                    if(responseData.Gift_Score){
                        responseData.Gift_Score=parseInt(responseData.Gift_Score);
                    }
                    if(responseData.Stock){
                        responseData.Stock=parseInt(responseData.Stock);
                    }
                    if(responseData.Detail){
                        responseData.Detail=decodeURIComponent(responseData.Detail);
                    }
                    if(responseData.Gift_ExpriseStart){
                        responseData.Gift_ExpriseStart= utils.formatDate("yyyy.MM.dd",responseData.Gift_ExpriseStart);
                    }
                    if(responseData.Gift_ExpriseEnd){
                        responseData.Gift_ExpriseEnd= utils.formatDate("yyyy.MM.dd",responseData.Gift_ExpriseEnd);
                    }
                    that.dataProduct=Object.assign({},that.dataProduct,responseData);
                }else{
                    Toast("未获取到商品信息，请刷新重试");
                }
            }else{
                Toast(res.msg);
            }
        };
        var cbError = function(jqXHR, textStatus, errorThrown){
            Toast(jqXHR.responseText);
        };
        JfapiHelper.CommonCallService(url,dataParams, cbSuccess,cbError,cbBeforeSend,cbComplete);
        
    },
    popupShow(isOk){
        var that=this;
        var phone=that.phone;
        if(!phone){
            Toast("请输入手机号");
            return;
        }else{
            if(!/^[1-9]{1}[0-9]{10}$/.test(phone)){
                Toast("手机号格式不正确");
                return;
            }
        }
        if(!that.dataProduct.Gift_Name||!that.dataProduct.ID){
            Toast("未获取到商品信息，请刷新重试");
            return;
        }
        var url = "/integral/CompSubmitOrder";
        var cbBeforeSend = function(){
            Indicator.open();
        };
        var cbComplete = function(){
            Indicator.close();
        };
        var dataParams = {
            CurrentEnterpriseNo: that.tempLoginInfo.EnterpriseNo,
            UserToken:that.tempLoginInfo.UserToken,
            LanguageType:that.tempLoginInfo.LanguageType,
            GiftId:that.dataProduct.ID,
            GiftCount:that.JfCompScoreDetailObj.GiftCount,
            ConsigneeName:'',
            ConsigneeMobile:'',
            ConsigneeAddress:'',
            ConsigneePostcode:'',
            MobileOrAccount:that.phone,
            type:2,
        };
        var cbSuccess = function (res) {
            if(res.flag)
            {
                that.$set(that,'orderId',res.data);
                that.$set(that.isShow,'popup',true);
            }else{
                Toast(res.msg);
            }
        };
        var cbError = function(jqXHR, textStatus, errorThrown){
            Toast(jqXHR.responseText);
        };
        JfapiHelper.CommonCallService(url,dataParams, cbSuccess,cbError,cbBeforeSend,cbComplete);
    },
    changePage(type){
        var that=this;
        if(type=='19'){
            sessionStorage.setItem("ExchangeOrderId",that.orderId);
        }
        that.$parent.changeSelectedPage(type);
    },
  },
  created(){
        var that=this;
        if(JfapiHelper.CheckLogin(this.$parent, that.sup8.context.enterpriseno)){
            var tempLoginInfo =  JSON.parse(localStorage.getItem("loginInfo"));
            that.tempLoginInfo=Object.assign({},that.tempLoginInfo,tempLoginInfo);
        }else{
            return;
        }
        var JfCompScoreDetailObj=JSON.parse(sessionStorage.getItem("JfCompScoreDetailObj"));
        if(JfCompScoreDetailObj&&JfCompScoreDetailObj.GiftId&&JfCompScoreDetailObj.GiftCount){
            that.$set(that.dataProduct,'ID',JfCompScoreDetailObj.GiftId);
            that.JfCompScoreDetailObj=Object.assign({},that.JfCompScoreDetailObj,JfCompScoreDetailObj);
            that.CompGetMallGiftShowInfo();
        }else{
            Toast('未获取到商品兑换信息，请刷新重试');
        }
  },
  mounted: function () {
        var that=this;
        var isDesign = location.pathname.indexOf('design');
        if (!(isDesign>-1)) {
            that.$set(that.isShow,'vh',true);
        }else{
            that.$set(that.isShow,'vh',false);
        }
  }
}
</script>

<style scoped>
img{border:0;}
img[src=""],img:not([src]){opacity:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
.text-gray{color:#b3b3b3;}
.text-danger{color:#c03546;}
.text-orange{color:#eb7741;}
.v-modal {z-index: 2008;position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: .5;background: #000;}
.dangerIntegral{color:#c03546;font-weight: 700;margin-right:0.2rem;}
hr{margin: 0;border: 0.19rem solid #e6e6e9;}
.submitOrder{width: 100%;height: 100vh;overflow: hidden;position: relative;background-color:#e6e6e9;}
.submitOrder >div:nth-of-type(1){height: 100%;overflow-x: auto;}
.addressProduct{padding: 0.8rem 3%;background-color: #fff;}
.addressProduct .productList{display: flex;min-height: 4.2rem;border-bottom: 0.01rem solid #f5f5f5;padding-bottom: 0.4rem;}
.addressProduct .productImg{width:5rem;position:relative;margin-right: 0.2rem;}
.addressProduct .productImg img{width:100%;height:5rem;margin-top: 6%;}
.addressProduct .productContent{flex:1;}
.addressProduct .productContent .productName{font-size: 1rem;margin-bottom:1rem;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;min-height: 2.4rem;}
.addressProduct .productContent .clearfix {color:#b3b3b3;vertical-align:bottom;height: 1.2rem;line-height: 1.2rem;margin-top: 1rem;}
.addressProduct .productContent .clearfix >span:nth-of-type(1){float:left;line-height: 20px;}
.addressProduct .productContent .clearfix >span:nth-of-type(2){float: right;}
.addressProduct .productResult{margin-top: 0.8rem;margin-bottom: 0;}
.addressProduct .productResult >span {float: right;}
.addressProduct .productResult >span .dangerIntegral+span{font-size: 0.78rem;}
.addressWay {padding: 0.8rem 3%;background-color: #fff;}
.addressWay:nth-last-of-type(1) {margin-bottom: 41px;}
.addressWay >span{float: right;}
.addressWay >span input[type=text]{border:0;outline:none;text-align: right;font-size: 0.925rem;}
.submitOrder .mint-button.btnSubmit{border-radius: 0;position: absolute;bottom: 0;background-color:#c03546;}
.mint-popup{z-index: 2011;position: absolute;width: 80%;}
.exchangeSuccess{border-radius: 0.6rem;padding: 1.2rem 2%;text-align: center;}
.exchangeSuccess .successImg{width:6rem;height: 6rem;margin:1.2rem auto;display: block;}
.exchangeSuccess p{font-size: 0.94rem;}
.exchangeSuccess div{margin-top:1.2rem; }
.exchangeSuccess div .mint-button{border-radius: 0;}
.exchangeSuccess div .text-danger{background: #fff;border:0.08rem solid #c03546;}
.exchangeSuccess div .text-danger+button{background: #c03546;color:#fff;border:0.08rem solid #c03546;}
</style>
