<template>
    <view
        v-if="isShow && isShowCountDown"
        class="fixed-coupon scaleIn"
        :style="{
            backgroundImage: layoutStyle === '3'
                ? 'url(https://med-fe.cdn.bcebos.com/gy/coupon_modal/chinese-medicine-mask.png)'
                : 'url(https://med-fe.cdn.bcebos.com/zhgy/fix-bg-625.png)',
        }"
    >
        <view
            class="fixed-coupon__price"
            :style="{
                margin: layoutStyle === '3'
                    ? '13px 0'
                    : '8px 0',
            }"
        >
            <text class="fixed-coupon__price__unit">{{ price.unit }}</text>
            <text class="fixed-coupon__price__amount">{{ price.amount }}</text>
        </view>
        <view v-if="expireDate && remainingTime" class="fixed-coupon__time">
            <view class="fixed-coupon__time__clock">{{ remainingTime.join(":") }}</view>
            <view class="fixed-coupon__time__text">{{ expireText }}</view>
        </view>
    </view>
</template>
<script>
/**
 * @file 优惠券右侧悬浮弹窗
 * @author xueyanhui
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    props: {
        isShow: {
            type: Boolean,
            default: false
        },
        /**
         *  优惠券价格 unit amount
         */
        price: {
            type: Object,
            default: () => {}
        },
        expireDate: {
            type: Number,
            default: 0
        },
        expireText: {
            type: String,
            default: '后失效'
        },
        layoutStyle: {
            type: String,
            default: '2'
        }
    },
    data() {
        return {
            // 优惠券倒计时,只需要展示分，秒
            remainingTime: ['00', '00', '00'],
            timer: null,
            isShowCountDown: true
        };
    },
    mounted() {
        this.startCountDown();
    },
    methods: {
        // 开始倒计时
        startCountDown() {
            if (!this.expireDate) {
                return;
            }
            clearTimeout(this.timer);
            this.timer = null;
            if (this.expireDate - Date.now() >= 0 && !this.timer) {
                this.isShowCountDown = true;
            } else {
                this.isShowCountDown = false;
                this.$emit('showText');
                return;
            }
            this.countDown();
            this.timer = setInterval(() => {
                this.countDown();
            }, 1000);
        },
        // 倒计时计算器
        countDown() {
            const nowDate = Date.now();
            const diffDate = (this.expireDate - nowDate) / 1000;
            if (diffDate < 0) {
                clearTimeout(this.timer);
                this.isShowCountDown = false;
                this.$emit('showText');
                this.timer = null;
                return;
            }
            const hour = Math.floor(diffDate / (60 * 60));
            const minute = Math.floor(diffDate / 60) - hour * 60;
            const second = Math.floor(diffDate) - hour * 60 * 60 - minute * 60;
            this.remainingTime = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second
                .toString()
                .padStart(2, '0')}`.split(':');
        }
    },
    destroyed() {
        clearTimeout(this.timer);
        this.timer = null;
    }
};
</script>
<style lang="less" scoped>
.fixed-coupon {
    position: fixed;
    right: 0;
    top: 50%;
    width: 74px;
    height: 80px;
    background-size: 100% 100%;
    margin-top: -50px;
    color: #e75842;
    text-align: center;

    &__price {
        &__amount {
            font-size: 32px;
        }
    }

    &__time {
        color: #ffecac;
        font-size: 14px;
        line-height: 14px;
        position: absolute;
        bottom: 5px;
        left: 0;
        width: 100%;
        text-align: center;

        &__clock {
            margin-bottom: 3px;
        }

        &__text {
            letter-spacing: 3px;
        }
    }
}

.scaleIn {
    animation: breathScale 1s infinite;
    /* Safari and Chrome */
    -webkit-animation-name: breathScale; /* 动画名称 */
    -webkit-animation-duration: 1s; /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
}

@keyframes breathScale {
    0% {
        transform: scale(0.95);
    } /* 动画开始时的不透明度 */
    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.95);
    } /* 动画结束时的不透明度 */
}

@-webkit-keyframes breathScale {
    0% {
        transform: scale(0.95);
    } /* 动画开始时的不透明度 */
    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.95);
    } /* 动画结束时的不透明度 */
}
</style>
