<template>
    <div class="details" v-if="show">
        <div class="pop">
            <div class="kuang">
                    <div class="img" :style="{'background-image': 'url('+jsonData.prizePicture+')'}"></div>
            </div>
            
            <div class="cardName">{{this.jsonData.cardName}}</div> 
            <div class="kaName">
                <span>卡号:</span>
                <div class="number">
                    <div class="test">{{this.jsonData.cardNumber}}</div>
                </div>
            </div>

            <div class="kaName1" v-if="this.jsonData.cardType == 1">
                <span>卡密:</span>
                <div class="number">
                    <div class="test">{{this.jsonData.cardPassword}}</div>
                </div>
            </div>

            <div class="instructions">
                <div class="span">礼品卡说明:</div>
                <div class="span">1、有效期：
                    <span v-if="validNoEndTime == 0">{{activityDate2}}</span>
                    <span v-if="validNoEndTime == 1">永久有效</span>
                    </div>
                
                <div class="span">2、{{this.jsonData.cardDesc}}</div>
            </div>

            <div class="closeBtn" @click=closeBtn></div>
        </div>
    </div>
</template>

<script>
import dateUtil from "../../../util/dateUtil.js";
export default {
    data(){
        return{
            jsonData:{},
            imgUrl:'',
            start:'',
            end:'',
            activityDate2:'',
            validNoEndTime:0
        }
    },

    created(){
        console.log('jinlailelelel',this.jsonData);
        this.imgUrl = 'https://img10.360buyimg.com/n1/' + this.jsonData.prizePicture;
        this.validNoEndTime = this.jsonData.validNoEndTime
        this.activityDate2 =
          dateUtil.dateChangeYYYY(
            new Date(this.jsonData.startTime),
            1
          ) +
          "至" +
          dateUtil.dateChangeYYYY(
            new Date(this.jsonData.endTime),
            1
          );

        // var data = dateUtil.dateChangeYYYY(this.jsonData.startTime, 1);
        // this.start = data.year + "/" + data.month + "/" + data.day + ' ' + data.hours; ;

        //  var data1 = dateUtil.dateChangeYYYY(this.jsonData.endTime, 1);
        // this.end = data1.year + "/" + data1.month + "/" + data1.day ;
    },
    mounted(){
        
    },
    methods:{
        closeBtn(){
            this.submit();
        }
    }
    
}
</script>

<style lang="scss" scoped="scoped">
.details{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    top: 0;
    z-index: 200;

    .pop{
        width: 6rem;
        height: 8.24rem;
        background-image: url(////img10.360buyimg.com/imgzone/jfs/t1/183338/23/18385/79738/61109180E22c23a60/43dc79760af42b09.png);
        background-size: 100%;
        position: absolute;
        top: calc(50% - 8.35rem / 2);
        left: calc(50% - 3rem);

        .kuang{
            width: 4.6rem;
            height: 1.6rem;
            // background: #ff5f00;
            position: absolute;
            left: calc(50% - 2.3rem);
            top: 1.9rem;
            display: flex;
            justify-content: center;
            align-items: center;

                .img{
                    width: 4.6rem;
                    height: 1.6rem;
                    background-size: 100%;
                }
        }

       

        .cardName{
            color: #e2231a;
            width: 100%;
            text-align: center;
            font-weight: bolder;
            margin-top: 3.7rem;
            font-size: .36rem;
        }

        .kaName{
            width: 4.6rem;
            height: .48rem;
            position: absolute;
            left: calc(50% - 2.3rem); 
            top: 4.3rem;

            span{
                font-size: .3rem;
                display: block;
                line-height: .48rem;
                color: #ff9900;
            }

            .number{
                height: 100%;
                width: 3.8rem;
                background: #ffdb6e;
                position: absolute;
                right: 0;
                top: 0;
               

                .test{
                    width: 100%;
                    height: 100%;
                    font-size: .3rem;
                    line-height: .48rem;
                    padding-left: .2rem;
                    color: #ff5f00;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
        .kaName1{
            width: 4.6rem;
            height: .48rem;
            position: absolute;
            left: calc(50% - 2.3rem); 
            top: 5rem;

            span{
                font-size: .3rem;
                display: block;
                line-height: .48rem;
                color: #ff9900;
            }

            .number{
                height: 100%;
                width: 3.8rem;
                background: #ffdb6e;
                position: absolute;
                right: 0;
                top: 0;
               

                .test{
                    width: 100%;
                    height: 100%;
                    font-size: .3rem;
                    line-height: .48rem;
                    padding-left: .2rem;
                    color: #ff5f00;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }

        .instructions{
            width: 4.6rem;
            position: absolute;
            left: calc(50% - 2.3rem);
            height: 2rem;
            top: 5.8rem;
            overflow-y: scroll;
            .span{
                font-size: .2rem;
                color: #a3a3a3;
                margin-top: .1rem;
            }

            .span:nth-of-type(3){
                // display: -webkit-box;    
                // -webkit-box-orient: vertical;    
                // -webkit-line-clamp: 2;    
                // overflow: hidden;
            }
        }

        .closeBtn{
            position: absolute;
    width: .6rem;
    height: .6rem;
    top: 0.65rem;
    right: 0.1rem;
        }
    }
}
</style>