<template>
    <view 
        v-if="data"
        class="ticket__wrapper" 
        :style="{
            backgroundImage: 'url(' + data.bgUrl + ')',
            width: ticketWidth,
            height: ticketHeight,
            color: textColor,
        }"
    > 
        <view v-if="data.tag" class="ticket__wrapper__tag">{{ data.tag }}</view>
            
        <view 
            v-if="data.price" 
            class="ticket__wrapper__price"
            :style="{
                width: priceWidth,
                fontSize: priceFontSize,
                marginRight: priceMarginRight, 
            }"
        >
            <text class="c-font-17 ticket__wrapper__price__sigma">¥</text>
            <text class="ticket__wrapper__price__value">{{ data.price / 100 }}</text>
        </view>
        <view class="ticket__wrapper__content">
            <view 
                v-if="data.title" 
                class="ticket__wrapper__content__type"
                :class="titleFontClass"
            >{{ data.title }}</view>
            <view 
                v-if="data.lifetime && data.lifetime.text" 
                :class="[
                    'ticket__wrapper__content__text',
                    lifetimeFontClass,
                ]"
            >
                {{ data.lifetime.text }} 
            </view>
            <view 
                v-if="data.lifetime && data.lifetime.countdown" 
                class="ticket__wrapper__content__countdown"
            >
                <view class="ticket__wrapper__content__countdown__value c-font-small">
                    <view 
                        :style="{backgroundColor: countdownBgColor}" 
                        class="ticket__wrapper__content__countdown__value__num"
                    >{{ countdown.hour }}</view> 
                    <view class="ticket__wrapper__content__countdown__value__colon">:</view>
                    <view 
                        :style="{backgroundColor: countdownBgColor}" 
                        class="ticket__wrapper__content__countdown__value__num"
                    >{{ countdown.min }}</view>
                    <view class="ticket__wrapper__content__countdown__value__colon">:</view>
                    <view 
                        :style="{backgroundColor: countdownBgColor}" 
                        class="ticket__wrapper__content__countdown__value__num"
                    >{{ countdown.sec }}</view>
                </view>
                <view class="c-font-normal">{{ data.lifetime.countdown.suffix }} </view>
            </view>
        </view>
        <view 
            v-if="data.op" 
            :style="{width: btnAreaWidth}" 
            class="ticket__wrapper__operation c-font-13"
        >
            <view 
                v-if="data.op.text && noVerifyTap"  
                :style="{padding: '0 ' + btnTextPadding}" 
                class="ticket__wrapper__operation__btn"
                @tap="onVerifyTap(data.op.verifyUrl)"
            >
                {{ opText }}
            </view>
            <view 
                v-else-if="data.op.jumpText && data.op.jumpUrl"
                class="ticket__wrapper__operation__btn ticket__wrapper__operation__jumpBtn" 
                :style="{padding: '0 ' + btnTextPadding}"
                @tap="onJumpTap(data.op.jumpUrl)"
            >
                {{ data.op.jumpText }}
            </view>
            <view 
                v-else-if="data.op.takenText"  
                class="ticket__wrapper__operation__btn"
                style="opacity: 0.5"
                :style="{padding: '0 ' + btnTextPadding}"
            >
                {{ data.op.takenText }}
            </view>

            <view 
                v-if="!(data.op && data.op.text && noVerifyTap) && isReferFromPaysucc && data.sealUrl"
                :style="{
                    backgroundImage: 'url(' + data.sealUrl + ')',
                }"
                class="ticket__wrapper__operation__seal"
            />
                
            
        </view>
    </view>
</template>

<script>
/**
 * @file 复购优惠券
 * @author fujinghua
 * @categories 业务组件
 * @tags [component]
 */
import {navigate} from '@utils/navigate';
import {ubcSend} from '@utils/log';
import {request} from '@utils/request';
import * as Conf from '@utils/conf';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

export default {
    name: 'RepurchaseTicket',
    config: {
        component: true 
    },
    data(){
        return { 
            countdown: {
                min: 0,
                hour: 0,
                sec: 0
            },
            noVerifyTap: true,
        };
    },
    props: {
        data: {
            type: Object,
            default: ()=>({}),
        },
        priceWidth: {
            type: String, 
            default: '0.8rem'
        },
        priceFontSize: {
            type: String, 
            default: 'c-font-sigma'
        },
        ticketWidth: {
            type: String,
            default: '2.68rem'
        },
        ticketHeight: {
            type: String,
            default: '0.75rem'
        },
        priceMarginRight: {
            type: String,
            default: '0.12rem'
        },
        titleFontClass: {
            type: String,
            default: 'c-font-big-less'
        },
        lifetimeFontClass: {
            type: String,
            default: 'c-font-medium-less'
        },
        textColor: {
            type: String,
            default: '#FD503E'
        },
        countdownBgColor: {
            type: String,
            default: '#fff'
        },
        btnAreaWidth: {
            type: String,
            default: '0.88rem'
        },
        btnTextPadding: {
            type: String,
            default: '0.1rem'
        },
        log: {
            type: Object,
            default: ()=>({
                page: '',
                value: '',
                ext: {

                }
            })
        },
        // 是否从支付成功页面来
        isReferFromPaysucc: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        opText(){
            // 防止判空报错
            if (!this.data.op) return ;

            if (!this.isReferFromPaysucc){
                return this.data.op.text;
            }

            const sys = getSystemInfo();           
            return sys.screenWidth  >= 414 ? '立即' +  this.data.op.text : this.data.op.text;
        }
    },
    mounted(){
        this.startCountdown();
        if (this.isReferFromPaysucc){
            // 来自支付成功页面，则发送log
            ubcSend(Object.assign({
                type: 'view'
            }, this.log));
        }

    },
    beforeDestory(){
        this.clearCountdown();
    },
    methods: {
        onVerifyTap(url){
            this.$api.showLoading({
                title: '领取中'
            });
            request({
                url: Conf.apiHost + url,
                isFirstScreen: false,
                isNeedLogin: true
            }).then(res=>{
                const {sendStatus} = res.data;
                
                if (sendStatus === 0){
                    return Promise.reject(); // 领取失败
                }

                // log
                ubcSend(Object.assign({
                    type: 'clk'
                }, this.log));

                this.$api.hideLoading();
                this.$api.showToast({
                    title: '领取成功',
                    icon: 'none'
                });

                // 修改文案
                this.noVerifyTap = false;
            }).catch(err=>{
                // console.log(err);
                
                this.$api.hideLoading();
                this.$api.showToast({
                    title: '领取失败，请重试',
                    icon: 'none'
                });
            });  
             
        },
        onJumpTap(url){
            if (!url) return ;

            navigate({
                url,
                log: Object.assign({
                    type: 'clk'
                }, this.log)
            });
        },
        startCountdown(){
            const {lifetime} = this.data || {};
            // 非倒计时，为文本提示
            if (!lifetime || !lifetime.countdown) return ;
            const target = lifetime.countdown.timestamp;
            const startCount = ()=>{
                const restTimestamp = target  -  Math.floor(new Date().getTime() / 1000) ;
                // 优惠券过期了
                if (restTimestamp <= 0){
                    clearInterval(this.countdownTimer);
                    this.countdown = {
                        hour: '00',
                        min: '00',
                        sec: '00'
                    };
                    this.$emit('handleClose');
                    return; 
                }     

                this.countdown = this.convertTimestamp(restTimestamp);
                return startCount;
            };

            this.countdownTimer = setInterval(startCount(), 1000);
        },
        clearCountdown(){
            clearInterval(this.countdownTimer);
        },
        convertTimestamp(timestamp){
            const hour = this.addZero(parseInt(timestamp  /  (60 * 60)));
            const min = this.addZero(parseInt(timestamp % ( 60 * 60 ) /  60));
            const sec = this.addZero(parseInt(timestamp % 60));
            return {
                hour,
                min,
                sec
            };
        },
        addZero(num){
            return num < 10 ? '0' + num : '' + num;
        }
    },
};
</script>

<style scoped lang="less">
        
        .ticket__wrapper{
            position: relative;
            display: flex;
            justify-content: space-between;
            background-size: 100% 100%;
            background-repeat: no-repeat; 

            &__tag{
                 position: absolute;
                 left: 0;
                 top: 0;
                 font-weight: bold;
                 background: rgba(253,80,62,0.10);
                 padding: 1.2vw 4.1vw;
                 line-height: 1;
                 font-size: 0.12rem;
                 border-radius: 0.09rem 0 0.06rem  0;   
                 color: #FD503E;
            }

            &__price{
                flex: none;
                height: 100%;
                text-align: center;
                font-weight: bold;
                display:flex;
                justify-content: center;
                align-items: center;
                flex-wrap: nowrap;

                &__sigma{
                    margin-top: 1.6vw;
                    font-weight: bold;
                }

            }

            &__content{
                flex-grow : 1;
                height: 100%;
                display: flex; 
                flex-wrap: wrap;
                align-content: center;


                &__type{
                    font-weight: bold;
                    width: 100%;
                }
                &__text{
                    width: 100%;
                }

                &__countdown{
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    line-height: 1;
                    align-items: center;

                    &__value{
                        margin-right: 1.4vw;
                        display: flex;
                        justify-content: flex-start;    
                        align-items: center;
                        flex-wrap: nowrap;
                        margin-left: 0.02rem;
                        margin-top: 0.01rem;
                        
                        &__num{
                            padding: 0 0.02rem;
                            border-radius: 0.03rem;
                        } 
                    }
                }
            }

            &__operation{
                flex: none;
                height: 100%;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                position: relative;
                overflow: hidden;

                &__btn{
                    height: 0.28rem;
                    position: relative;
                    z-index: 1;
                    background-color: #FD503E;
                    color: white;
                    font-weight: bold;
                    border-radius: 0.14rem;
                     line-height: 0.28rem;
                    text-align: center;
                }

                &__jumpBtn{
                    box-sizing: border-box;
                    border: 1px solid #FD503E;
                    color: #FD503E;
                    line-height: 0.265rem;
                    background-color: #fff;
                }

                &__seal{
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 0.55rem;
                    height: 0.55rem;
                    z-index: 0;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }

            }
        }

</style>
