<template>
    <view
        v-if="isShow"
        :class="boxClassName"
        @tap.stop
    >
        <view :class="ownStyle ? '' : 'triangle'" :style="{right: triangleRight / 100 + 'rem'}"/>
        <text v-if="data.beforeText">{{ data.beforeText }}, </text>
        <text :class="ownStyle ? '' : 'coupon-count-down__time'">
            <text :style="ownStyle">{{ hour }}</text>
            <text>:</text>
            <text :style="ownStyle">{{ minute }}</text>
            <text>:</text>
            <text :style="ownStyle">{{ second }}</text>
        </text>
        <text v-if="data.lastText">{{ data.lastText }}</text>
    </view>
</template>
<script>
/**
 * @file 优惠券倒计时
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    data() {
        return {
            hour: '',
            minute: '',
            second: '',
            timer: null,
            isShow: false
        };
    },
    computed: {
        boxClassName() {
            if (this.ownStyle) {
                return '';
            }
            if (this.extendClass) {
                return `coupon-count-down c-color c-font-normal ${this.extendClass}`;
            }
            return 'coupon-count-down c-color c-font-normal';
        }
    },
    created() {
        this.startCountDown();
    },
    props: {
        /**
         * 数据
         */
        data: {
            type: Object,
            default: () => ({})
        },
        /**
         * triangleRight
         */
        triangleRight: {
            type: Number,
            default: 64.06
        },
        /**
         * 自定义样式
         */
        ownStyle: {
            type: Object
        },
        /**
         * 添加的类名
         */
        extendClass: {
            type: String,
            default: ''
        }
    },
    pageLifetimes: {
        show() {
            this.startCountDown();
        },
        hide() {
            clearTimeout(this.timer);
            this.timer = null;
        }
    },
    destroyed() {
        clearTimeout(this.timer);
        this.timer = null;
    },
    methods: {
        countDown() {
            const nowDate = Date.now();
            const diffDate = (this.data.cancelDate - nowDate) / 1000;
            if (diffDate < 0) {
                this.clearCountDown();
                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.hour = hour.toString().padStart(2, '0');
            this.minute = minute.toString().padStart(2, '0');
            this.second = second.toString().padStart(2, '0');
        },
        startCountDown() {
            clearTimeout(this.timer);
            this.timer = null;
            if (this.data && this.data.cancelDate - Date.now() >= 0 && !this.timer) {
                this.isShow = true;
            } else {
                this.isShow = false;
                return;
            }
            this.countDown();
            this.timer = setInterval(() => {
                this.countDown();
            }, 1000);
        },
        clearCountDown() {
            this.isShow = false;
            clearTimeout(this.timer);
            this.timer = null;
            /**
             * 数据更新
             */
            this.$emit('updateData');
        }
    },
    watch: {
        data() {
            this.startCountDown();
        }
    }
};
</script>
<style lang="less" scoped>
@keyframes breathe{
    0%{ top: -40px; }
    25%{ top: -37px; }
    50%{ top: -40px; }
    75%{ top: -37px; }
    100%{ top: -40px; }
}
.coupon-count-down {
    position: absolute;
    top: -41px;
    right: 0;
    z-index: 30;
    // border: 0.5px solid #e0e0e0;
    color: #fff;
    white-space: nowrap;
    padding: 4px 10px 4px 32px;
    border-radius: 5px;
    background-color: rgba(31,31,31,.8);
    background-image: url('https://med-fe.cdn.bcebos.com/gy/drug_count_down_icon.png');
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 24px 24px;
    &.show-animation {
        animation: breathe 2s infinite;
    }
    .triangle {
        position: absolute;
        right: .6406rem;
        bottom: -.08rem;
        width: 0.1066rem;
        height: 0.08rem;
        background: url(https://med-fe.cdn.bcebos.com/gy/_triangle.png) no-repeat;
        background-size: cover;
        // &::after, &::before {
        //     content: "";
        //     position: absolute;
        //     width: 0;
        //     height: 0;
        //     border: 4px solid transparent;
        //     border-top-color: rgba(31, 31, 31, 0.7);
        //     margin-left: -4px;
        //     bottom: -8px;
        // }
        // &::after {
        //     border-top-color: rgba(31, 31, 31, 0.4);
        //     bottom: -8px;
        // }
    }
    &__time {
        color: #ff6600;
    }
}
</style>
