<template>
<div class="jfBaseSize ScoreDetail" v-cloak v-bind:style="isShow.vh?'height:100vh':'height: 100%;'">
    <div>
        <div class="background-white top_img">
            <img :src="dataProduct.Gift_ProductImg" alt="">
        </div>
        <div class="background-white productInfo" >
            <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 v-html="dataProduct.Stock"></span></span>
            </p>
            <p class="validityPeriod">有效期：<span v-html="(dataProduct.Gift_ExpriseStart&&dataProduct.Gift_ExpriseEnd?dataProduct.Gift_ExpriseStart+'-'+dataProduct.Gift_ExpriseEnd:'')"></span></p>
        </div>
        <div class="background-white productDetail">
            <div class="productDetailHeader">
                产品详情
            </div>
            <div class="productDetailInfo" v-html="dataProduct.Detail">
                
            </div>
        </div>
    </div>
    <div class="v-modal" v-show="isShow.popup" v-on:click="popupShow(false)"></div>
    <div class="mint-popup mint-popup-bottom" v-show="isShow.popup">
        <div class="exchangeImg">
            <img :src="dataProduct.Gift_ProductImg"/>
        </div>
        <div class="exchangeIntegral">
            <p class="exchangeName" v-html="dataProduct.Gift_Name"></p>
            <p>
                <span class="text-gray"><span class="dangerIntegral" v-html="dataProduct.Gift_Score"></span><span >积分</span></span>
            </p>
            <!-- <p class="validityPeriod text-gray">有效期：<span v-html="(dataProduct.Gift_ExpriseStart&&dataProduct.Gift_ExpriseEnd?dataProduct.Gift_ExpriseStart+'-'+dataProduct.Gift_ExpriseEnd:'')"></span></p> -->
            <p class="clearfix text-gray">
                <span>库存：<span v-html="dataProduct.Stock"></span></span>
                <span>
                    <span>数量</span>
                    <span class="addLess lessCount" v-on:click="addLessOperation('-')">-</span>
                    <input class="text-danger" type="number" step="1" readonly="readonly" v-model="amount.count" min="1" v-on:blur="countOperation()">
                    <span class="addLess addCount" v-on:click="addLessOperation('+')">+</span>
                </span>
            </p>
        </div>
    </div>
    <mt-button type="danger" size="large" v-show="isShow.btn" v-on:click="popupShow(true)" >立即兑换</mt-button>
    <mt-button type="danger" size="large" v-show="!isShow.btn" v-on:click="submitOk()" >确认兑换</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:{},
        amount:{
            inventory:0,
            count:1,
            oldCount:1,
            opOk:true,
        },
        isShow:{
            popup:false,
            btn:true,
            btnOk:true,
            vh:false,
        },
    }
  },
  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);
                        that.$set(that.amount,'inventory',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;
        if(isOk){
            if(that.dataProduct.Stock<1){
                Toast('无库存,不能兑换');
                return;
            }
            that.$set(that.isShow,'btn',false);
        }else{
            that.$set(that.isShow,'btn',true);
        }
        that.$set(that.isShow,'popup',isOk);
    },
    submitOk(){
        var that=this;
        if(that.countOperation()){
        var url = "/integral/CompVerifyBeforeSubmitOrder";
        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.amount.count,
            ROW_VER:that.dataProduct.ROW_VER,
        };
		var cbSuccess = function (res) {
			if(res.flag)
            {
                sessionStorage.setItem('JfCompScoreDetailObj',JSON.stringify({
                    GiftId:that.dataProduct.ID,
                    GiftCount:that.amount.count,
                }));
                that.$parent.changeSelectedPage('18');
            }else{
                Toast(res.msg);
            }
		};
        var cbError = function(jqXHR, textStatus, errorThrown){
            Toast(jqXHR.responseText);
        };
        JfapiHelper.CommonCallService(url,dataParams, cbSuccess,cbError,cbBeforeSend,cbComplete);
        }
    },
    addLessOperation(opVal){
        var that=this;
        if(!that.amount.opOk){
            return;
        }
        var count=Number(that.amount.count);
        var inventory=Number(that.amount.inventory);
        that.$set(that.amount,'opOk',false);
        if(opVal=='-'){
            if(count-1>0){
                that.$set(that.amount,'oldCount',count);
                that.$set(that.amount,'count',count-1);
                that.$set(that.amount,'opOk',true);
            }else{
                Toast('宝贝不能再减少了');
                that.$set(that.amount,'opOk',true);
            }
        }else if(opVal=='+'){
            if(count<inventory){
                that.$set(that.amount,'oldCount',count);
                that.$set(that.amount,'count',count+1);
                that.$set(that.amount,'opOk',true);
            }else{
                Toast('宝贝不能兑换更多了');
                that.$set(that.amount,'opOk',true);
            }
        }

    },
    countOperation(){
        var that=this;
        that.$set(that.amount,'opOk',false);
        var count=Number(that.amount.count);
        var inventory=Number(that.amount.inventory);
        if(!/^[0-9]+$/.test(count)){
            Toast('请输入正确的宝贝数量');
            that.$set(that.amount,'count',that.amount.oldCount);
            that.$set(that.amount,'opOk',true);
            return false;
        }else if(count>0&&count<=inventory){
            that.$set(that.amount,'opOk',true);
            return true;
        }else{
            Toast('超出兑换的数量');
            that.$set(that.amount,'count',that.amount.oldCount);
            that.$set(that.amount,'opOk',true);
            return false;
        }
    },
  },
  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 JfCompClassGiftID=sessionStorage.getItem("JfCompClassGiftID");
        // JfCompClassGiftID="bf911d2d941f4474ae1134986f0ba859";
        if(JfCompClassGiftID){
            that.$set(that.dataProduct,'ID',JfCompClassGiftID);
            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;}
.background-white{background-color: #fff;}
.ScoreDetail{width: 100%;height: 100vh;overflow: hidden;position: relative;background-color:#e6e6e9;}
.ScoreDetail >div:nth-of-type(1){height: 100%;overflow-x: auto;}
.v-modal {position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: .5;background: #000;}
.ScoreDetail .top_img,.ScoreDetail .productInfo{border-bottom: 0.38rem solid #e6e6e9;}
.ScoreDetail >div:nth-last-of-type(1){border-bottom-width:0; }
.top_img{width: 100%;height: 44%;}
.top_img img{width: 100%;height: 100%;}
.productInfo{padding: 0.16rem 3%;}
.productInfo .productName{margin:0.6rem 0;font-size: 1rem;}
/* .productInfo p:nth-of-type(2){color:#eb7741;font-size:0.9rem;} */
.productInfo p.clearfix{color:#b3b3b3;line-height: 20px;}
.productInfo p.clearfix >span:nth-of-type(1){float:left;}
.dangerIntegral{color:#c03546;font-weight: 700;margin-right:0.2rem;}
/* .productInfo p:nth-last-of-type(1) >span:nth-of-type(1) span:nth-last-of-type(1){font-size:14px;} */
.productInfo p.clearfix > span:nth-of-type(2) {float: right;}
.productInfo .validityPeriod{margin:0;border-top:0.01rem solid #f5f5f5;height:2rem;line-height:2rem;font-size: 0.875rem;}
.productDetailHeader{padding:1rem 3% 1rem;border-bottom:0.01rem solid #f5f5f5;font-size: 1rem;font-weight: 600;}
.productDetailInfo{margin-bottom: 41px;}
.ScoreDetail .mint-button{border-radius: 0;position: absolute;bottom: 0;background-color:#c03546;}
.mint-popup{position: absolute;bottom:41px;width: 100%;display:flex;padding:0 0 0.8rem;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}
input[type="number"]{-moz-appearance: textfield;}
.exchangeImg{flex:0.28;position:relative;}
.exchangeImg img{width:5.2rem;height:5.2rem;position:absolute;top:-1.6rem;left:50%;margin-left:-2.6rem; }
.exchangeIntegral{flex:0.72;position:relative;height:100%;padding:0.2rem 2% 0.2rem;}
.exchangeName{margin:0.6rem 0;font-size: 1rem;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow:hidden;height: 2.76rem;}
.exchangeIntegral p.clearfix{vertical-align:bottom;line-height: 1.4rem;}
.exchangeIntegral p.clearfix >span:nth-of-type(1){float: left;}
.exchangeIntegral p.clearfix >span:nth-of-type(2){float:right;width:7rem;}
.exchangeIntegral p.clearfix >span:nth-of-type(2) span{float: left;width: 0.6rem;border:0.01rem solid #b3b3b3; }
.exchangeIntegral p.clearfix >span:nth-of-type(2) span:nth-of-type(1){border-width:0;width: 2rem;}
.exchangeIntegral p.clearfix >span:nth-of-type(2) span.lessCount{border-right-width:0px;padding:0 0.1rem 0 0.4rem; }
.exchangeIntegral p.clearfix >span:nth-of-type(2) span.addCount{border-left-width:0px; padding:0 0.3rem 0 0.3rem;}
.exchangeIntegral p.clearfix span input{width:1.4rem;text-align: center; padding: 0rem 0.2rem 0 0.2rem;float: left;border:0.01rem solid #b3b3b3;line-height: 1.4rem;border-radius: 0;margin: 0;}
</style>
