<template>
    <view
        v-if="isShowModal"
        :class="[__layoutStyle, coupons && coupons.length === 1 ? __layoutStyle + '__1' : '']"
        class="coupon-modal"
        @touchstart.stop="stopTouch"
        @touchmove.stop="stopTouch"
    >
        <view :class="[__layoutStyle === 'layout-style2' ? 'scaleIn' : '']">
            <view class="coupon-modal__wrap">
                <image
                    v-if="__layoutStyle === 'layout-style2'"
                    class="coupon-modal__wrap__animation"
                    :style="{height: 0.8 * 0.6 * 70 + 'vw'}"
                    src="https://med-fe.cdn.bcebos.com/zhgy/single.gif"
                />
                <view class="coupon-modal__wrap__cont">
                    <view v-if="title" class="coupon-modal__wrap__cont__tit c-gap-bottom">{{ title }}</view>
                    <view v-if="subTitle" class="coupon-modal__wrap__cont__subtit">{{ subTitle }}</view>
                    <view v-if="coupons && coupons.length" class="coupon-modal__wrap__cont__coupons">
                        <view class="coupon-modal__wrap__cont__coupons__wrap">
                            <view
                                v-for="(coupon, index) in coupons"
                                :key="index"
                                class="coupon-modal__wrap__cont__coupons__item"
                            >
                                <view class="coupon-modal__wrap__cont__coupons__item__price">
                                    <text class="coupon-modal__wrap__cont__coupons__item__price__unit">{{
                                        coupon.price.unit
                                    }}</text>
                                    <text class="coupon-modal__wrap__cont__coupons__item__price__amount">{{
                                        coupon.price.amount
                                    }}</text>
                                </view>
                                <view class="coupon-modal__wrap__cont__coupons__item__name c-gap-inner-left">
                                    <view>{{ coupon.name }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="coupon-modal__wrap__btm">
                    <view v-if="expireDate && isShowCountDown" class="coupon-modal__wrap__btm__count-down c-gap-bottom">
                        <view class="coupon-modal__wrap__btm__count-down__text c-gap-right-middle">{{
                            expireText
                        }}</view>
                        <view class="coupon-modal__wrap__btm__count-down__cont">
                            <text v-if="showHour" class="coupon-modal__wrap__btm__count-down__cont__time">{{
                                remainingTime[0]
                            }}</text>
                            <text v-if="showHour" class="coupon-modal__wrap__btm__count-down__cont__colon">:</text>
                            <text class="coupon-modal__wrap__btm__count-down__cont__time">{{ remainingTime[1] }}</text>
                            <text class="coupon-modal__wrap__btm__count-down__cont__colon">:</text>
                            <text class="coupon-modal__wrap__btm__count-down__cont__time">{{ remainingTime[2] }}</text>
                            <text v-if="expireTextAfter" class="coupon-modal__wrap__btm__count-down__text c-gap-left">{{
                                expireTextAfter
                            }}</text>
                        </view>
                    </view>
                    <login-btn
                        v-if="button"
                        :disabled="!__login.needLogin || __login.isLogin"
                        @onLoginSuccess="onLoginSuccess"
                        @onLoginFail="onLoginFail"
                        @onTapEndH5="onTapEndH5"
                    >
                        <view class="coupon-modal__wrap__btm__btn" @tap.stop="onCouponBtnTap">
                            <view class="coupon-modal__wrap__btm__btn__inner">{{ button.text }}</view>
                        </view>
                    </login-btn>
                </view>
                <view class="m-icon m-icon-coupon-close coupon-modal__wrap__close" @tap.stop="onCloseModal"/>
            </view>
        </view>
    </view>
</template>

<script>
import LoginBtn from '@components/common/login-btn';
import {toLoginPage} from '@utils/login';
/**
 * @file 优惠券统一弹窗
 * @author wangying51
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    components: {
        LoginBtn
    },
    options: {
        addGlobalClass: true
    },
    data() {
        return {
            // 优惠券弹窗是否展示
            isShowModal: false,
            // 弹窗缓存
            storage: null,
            // 弹窗缓存是否过期
            isStorageExpired: false,
            // 倒计时是否展示
            isShowCountDown: false,
            // 优惠券倒计时
            remainingTime: ['00', '00', '00']
        };
    },
    props: {
        /**
         * login 参数对象
         */
        login: {
            type: Object,
            default: () => ({})
        },
        /**
         * 是否展示弹窗
         */
        isShow: {
            type: Boolean,
            default: false
        },
        /**
         * 是否开启弹窗缓存时间
         */
        modalStorage: {
            type: Object,
            default: () => ({
                name: '', // 缓存字段名称
                st: 0 // 存入storage的当前时间
            })
        },
        /**
         * 弹窗标题
         */
        title: {
            type: String,
            default: ''
        },
        /**
         * 弹窗子标题
         */
        subTitle: {
            type: String,
            default: ''
        },
        /**
         * 优惠券数据
         */
        coupons: {
            type: Array,
            default: () => []
        },
        /**
         * 过期文案before
         */
        expireText: {
            type: String,
            default: '距本场结束'
        },
        /**
         * 过期文案after
         */
        expireTextAfter: {
            type: String,
            default: ''
        },
        /**
         * 优惠券过期时间-时间戳ms
         */
        expireDate: {
            type: Number,
            default: 0
        },
        /**
         * 优惠券过期时间-是否展示时
         */
        showHour: {
            type: Boolean,
            default: true
        },
        /**
         * 弹窗按钮
         */
        button: {
            type: Object,
            default: () => ({
                text: '立即领取'
            })
        },
        /**
         * 优惠券弹窗风格  3.中医优惠券
         */
        layoutStyle: {
            type: String,
            default: '1'
        }
    },
    computed: {
        __login() {
            const defaultLogin = {
                needLogin: true, // 是否需要登录
                isLogin: false, // 是否已登录
                successToH5: process.env.MARS_ENV === 'h5' ? window.location.href : '' // 跳转成功H5链接
            };
            return Object.assign({}, defaultLogin, this.login);
        },
        __layoutStyle() {
            let className = '';
            switch (this.layoutStyle) {
                case '1':
                    className = 'layout-style1';
                    break;
                case '2':
                    className = 'layout-style2';
                    break;
                case '3':
                    className = 'layout-style3';
                    break;
                default:
                    break;
            }
            return className;
        }
    },
    watch: {
        modalStorage: {
            immediate: true,
            handler(val) {
                this.$set(this, 'storage', val);
                this.setCouponStorage();
            }
        },
        isShow: {
            immediate: true,
            handler(val) {
                this.showModal();
            }
        },
        layoutStyle: {
            immediate: true,
            handler(val) {
                this.$set(this, 'layoutStyle', val);
            }
        }
    },
    created() {
        // 1. 倒计时计算
        this.startCountDown();
        // 2. 设置弹窗缓存
        this.setCouponStorage();
        // 3. 控制弹窗展示
        this.showModal();
    },
    pageLifetimes: {
        show() {},
        hide() {}
    },
    destroyed() {
        clearTimeout(this.timer);
        this.timer = null;
    },
    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;
                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.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(':');
        },
        // 设置弹窗缓存标识
        setCouponStorage() {
            let __modalStorage = this.storage;
            if (!__modalStorage || !__modalStorage.name) {
                return;
            }
            const modalStorage = this.$api.getStorageSync(__modalStorage.name) || {};

            if (!modalStorage.st || __modalStorage.st - modalStorage.st >= 0) {
                this.isStorageExpired = false;
                this.$api.setStorage({
                    key: __modalStorage.name,
                    data: __modalStorage.st ? {st: __modalStorage.st} : null
                });
            } else {
                this.isStorageExpired = true;
                // 强制清空缓存
                if (!__modalStorage.st) {
                    this.$api.setStorage({
                        key: __modalStorage.name,
                        data: null
                    });
                }
            }
        },
        // 展示弹窗
        showModal() {
            this.isShowModal = this.isShow && !this.isStorageExpired;
        },
        onCloseModal() {
            if (this.__layoutStyle === 'layout-style2' || this.__layoutStyle === 'layout-style3') {
                this.onCouponBtnTap();
            } else {
                this.isShowModal = false;
            }
        },
        onLoginSuccess() {
            this.showModal();
            /**
             * 登录结束标志，控制页面刷新
             */
            this.$emit('updateFirstLoginStatus', 1);
        },
        onLoginFail() {
            /**
             * 登录结束标志，控制页面刷新
             */
            this.$emit('updateFirstLoginStatus', 0);
        },
        onTapEndH5() {
            if (!this.__login.isLogin && process.env.MARS_ENV === 'h5') {
                // 未登录
                toLoginPage({
                    href: this.__login.successToH5
                });
            }
        },
        stopTouch(e) {
            return false;
        },
        onCouponBtnTap() {
            this.isShowModal = false;
            this.$emit('onCouponBtnTap');
        }
    }
};
</script>
<style lang="less" scoped>
.img-bg {
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.coupon-modal {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;

    &__wrap {
        .img-bg;
        position: relative;
        z-index: 101;
        width: 70vw;
        height: 105.46vw;
        top: 45vh;
        left: 50vw;
        transform: translate(-50%, -50%);
        background-position: 0 bottom;
    }
}

.layout-style1 {
    .coupon-modal {
        &__wrap {
            background-image: url(https://medactivity.cdn.bcebos.com/coupons/coupon-bg__layout1__l.png);

            &__cont {
                text-align: center;
                position: absolute;
                z-index: 103;
                left: 0;
                right: 0;
                top: 17.5vw;
                color: #e75842;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                line-height: 14px;

                &__tit {
                    font-size: 14px;
                    line-height: 14px;
                }

                &__subtit {
                    font-family: PingFangSC-Medium;
                    font-size: 20px;
                    line-height: 20px;
                }

                &__coupons {
                    margin-top: 15px;
                    min-height: 40vw;
                    display: flex;
                    align-items: center;

                    &__wrap {
                        margin: 0 auto;
                    }

                    &__item {
                        .img-bg;
                        width: 49.6vw;
                        height: 11.82vw;
                        margin: 0 auto;
                        background-image: url(https://medactivity.cdn.bcebos.com/coupons/coupon__layout1.png);
                        color: #fff;
                        display: flex;
                        align-items: center;

                        &:not(:last-child) {
                            margin-bottom: 10px;
                        }

                        &__price {
                            width: 19.28vw;

                            &__unit {
                                font-family: PingFangSC;
                                vertical-align: middle;
                                position: relative;
                                top: -5px;
                            }

                            &__amount {
                                font-family: PingFangSC-Medium;
                                font-size: 27px;
                                vertical-align: middle;
                            }
                        }

                        &__name {
                            box-sizing: border-box;
                            width: 30.17vw;
                            text-align: left;
                        }
                    }
                }
            }

            &__btm {
                text-align: center;
                position: absolute;
                z-index: 103;
                left: 0;
                right: 0;
                bottom: 0;
                height: 28vw;
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                line-height: 14px;

                &__count-down {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    &__text {
                        color: #fff;
                    }

                    &__cont {
                        &__time {
                            color: #e75842;
                            background-color: #fff;
                            width: 20px;
                            height: 23px;
                            line-height: 23px;
                            border-radius: 3px;
                            display: inline-block;
                        }

                        &__colon {
                            color: #fff;
                            margin: 0 2px;
                        }
                    }
                }

                &__btn {
                    width: 100%;

                    &__inner {
                        width: 61%;
                        height: 43px;
                        margin: 0 auto;
                        border-radius: 43px;
                        color: #e75842;
                        font-family: PingFangSC-Medium;
                        font-size: 20px;
                        line-height: 43px;
                        background-image: linear-gradient(180deg, #fef6e8 14%, #e9a445 100%);
                        box-shadow: 0 5px 15px 0 rgba(188, 31, 17, 0.75);
                    }
                }
            }

            &__close {
                position: absolute;
                left: 38%;
                right: 38%;
                bottom: -60px;
                text-align: center;
                color: #fff;
                font-size: 30px;
                line-height: 30px;
                padding: 10px;
            }
        }
    }

    &.layout-style1__1 {
        .coupon-modal {
            &__wrap {
                height: 87vw;
                background-image: url(https://medactivity.cdn.bcebos.com/coupons/coupon-bg__layout1__s.png);

                &__cont {
                    &__coupons {
                        min-height: 22vw;
                    }
                }
            }
        }
    }
}

.layout-style2 {
    .coupon-modal {
        &__wrap {
            background-image: url(https://med-fe.cdn.bcebos.com/zhgy/bg-no.png);

            &__animation {
                width: 80%;
                position: relative;
                left: 9%;
                top: 5%;
            }

            &__cont {
                text-align: center;
                position: absolute;
                z-index: 103;
                left: 0;
                right: 0;
                top: 31.5vw;
                color: #e75842;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                line-height: 14px;

                &__tit {
                    font-size: 8vw;
                    line-height: 8vw;
                    color: #fde7c5;
                    text-shadow: 0 5px 8px rgba(214, 30, 30, 0.5);
                    font-family: FZZZHONGJW--GB1-0;
                    margin-bottom: 3.5vw;
                    font-weight: 500;
                }

                &__subtit {
                    font-family: PingFangSC-Medium;
                    font-size: 4.205vw;
                    color: #e75842;
                    text-align: center;
                    width: 42.76vw;
                    height: 6.23vw;
                    line-height: 6.23vw;
                    border-radius: 3.115vw;
                    background-image: linear-gradient(180deg, #fef6e8 0%, #f8c76c 100%);
                    box-shadow: 0 16px 46px 0 rgba(215, 62, 48, 0.2);
                    margin: 0 auto;
                }

                &__coupons {
                    margin-top: 3.5vw;
                    display: flex;
                    align-items: center;

                    &__wrap {
                        margin: 0 auto;
                    }

                    &__item {
                        width: 60.75vw;
                        height: 35.36vw;
                        margin: 0 auto;
                        background-image: url(https://med-fe.cdn.bcebos.com/zhgy/coupon.png);
                        color: #fff;
                        display: flex;
                        // align-items: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        margin-bottom: 30px;

                        &:not(:last-child) {
                            margin-bottom: 10px;
                        }

                        &__price {
                            width: 27.49vw;
                            height: 20.24vw;
                            color: #e75842;
                            margin-right: 7px;
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;

                            &__unit {
                                font-family: PingFangSC;
                                vertical-align: middle;
                                font-size: 21px;
                                margin-top: 35px;
                            }

                            &__amount {
                                font-family: PingFangSC-Semibold;
                                font-size: 70px;
                                vertical-align: middle;
                            }
                        }

                        &__name {
                            box-sizing: border-box;
                            width: 21.73vw;
                            height: 6.24vw;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: #fff2c7;
                            font-size: 14px;
                            background-image: linear-gradient(165deg, #f96d58 0%, #ea4934 100%);
                            border-radius: 15px 15px 15px 0;
                            margin-top: 17px;
                            padding-left: 0;
                        }
                    }
                }
            }

            &__btm {
                text-align: center;
                position: absolute;
                z-index: 103;
                left: 0;
                right: 0;
                bottom: 8px;
                height: 32vw;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                font-family: PingFangSC-Regular;
                font-size: 20px;

                &__count-down {
                    &__text {
                        color: #e75842;
                        font-size: 14px;
                    }

                    &__cont {
                        &__time {
                            background-color: #e75842;
                            color: #fff;
                            width: 20px;
                            height: 20px;
                            line-height: 20px;
                            border-radius: 3px;
                            display: inline-block;
                            font-size: 14px;
                        }

                        &__colon {
                            color: #e75842;
                            margin: 0 2px;
                        }
                    }
                }

                &__btn {
                    width: 100%;

                    &__inner {
                        width: 60.75vw;
                        height: 10.05vw;
                        margin: 0 auto;
                        border-radius: 43px;
                        color: #e75842;
                        font-family: PingFangSC-Medium;
                        font-size: 4.67vw;
                        line-height: 10.05vw;
                        background-image: linear-gradient(180deg, #fef6e8 14%, #e9a445 100%);
                        box-shadow: 0 5px 15px 0 rgba(188, 31, 17, 0.75);
                    }
                }
            }

            &__close {
                position: absolute;
                left: 38%;
                right: 38%;
                bottom: -60px;
                text-align: center;
                color: #fff;
                font-size: 30px;
                line-height: 30px;
                padding: 10px;
            }
        }
    }

    &.layout-style1__1 {
        .coupon-modal {
            &__wrap {
                height: 87vw;
                background-image: url(https://med-fe.cdn.bcebos.com/zhgy/bg.png);

                &__cont {
                    &__coupons {
                        min-height: 22vw;
                    }
                }
            }
        }
    }
}

.layout-style3 {
    .coupon-modal {
        &__wrap {
            background-image: url(https://med-fe.cdn.bcebos.com/gy/coupon_modal/chinese-medicine-bg.png);

            &__cont {
                text-align: center;
                position: absolute;
                z-index: 103;
                left: 0;
                right: 0;
                top: 31.5vw;
                color: #e75842;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                line-height: 14px;

                &__tit {
                    font-size: 8vw;
                    line-height: 8vw;
                    color: #b48217;
                    margin-bottom: 1.3vw;
                    font-weight: 500;
                }

                &__subtit {
                    font-size: 4.205vw;
                    color: #b48217;
                    text-align: center;
                    width: 42.76vw;
                    height: 6.23vw;
                    line-height: 6.23vw;
                    margin: 0 auto;
                }

                &__coupons {
                    margin-top: 3.5vw;
                    display: flex;
                    align-items: center;

                    &__wrap {
                        margin: 0 auto;
                    }

                    &__item {
                        width: 60.75vw;
                        height: 35.36vw;
                        margin: 0 auto;
                        background-image: url(https://med-fe.cdn.bcebos.com/gy/coupon_modal/chinese-medicine-coupon.png);
                        color: #fff;
                        display: flex;
                        // align-items: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        margin-bottom: 30px;

                        &:not(:last-child) {
                            margin-bottom: 10px;
                        }

                        &__price {
                            width: 27.49vw;
                            height: 20.24vw;
                            color: #ffeac1;
                            margin: 5px 7px 0 2.5vw;
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;

                            &__unit {
                                font-family: PingFangSC;
                                vertical-align: middle;
                                font-size: 21px;
                                margin-top: 35px;
                            }

                            &__amount {
                                font-family: PingFangSC-Semibold;
                                font-size: 70px;
                                vertical-align: middle;
                            }
                        }

                        &__name {
                            box-sizing: border-box;
                            width: 21.73vw;
                            height: 6.24vw;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: #fff2c7;
                            font-size: 14px;
                            border: 1px solid #ffedd6;
                            border-radius: 15px 15px 15px 0;
                            margin-top: 19px;
                            padding-left: 0;
                        }
                    }
                }
            }

            &__btm {
                text-align: center;
                position: absolute;
                z-index: 103;
                left: 0;
                right: 0;
                bottom: 15px;
                height: 32vw;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                font-family: PingFangSC-Regular;
                font-size: 20px;

                &__count-down {
                    &__text {
                        color: #ffeac1;
                        font-size: 14px;
                    }

                    &__cont {
                        &__time {
                            background-color: #da381f;
                            color: #fff;
                            width: 20px;
                            height: 20px;
                            line-height: 20px;
                            border-radius: 3px;
                            display: inline-block;
                            font-size: 14px;
                        }

                        &__colon {
                            color: #ffeac1;
                            margin: 0 2px;
                        }
                    }
                }

                &__btn {
                    width: 100%;

                    &__inner {
                        width: 60.75vw;
                        height: 10.05vw;
                        margin: 0 auto;
                        border-radius: 43px;
                        color: #e75842;
                        font-family: PingFangSC-Medium;
                        font-size: 4.67vw;
                        line-height: 10.05vw;
                        background-image: url(https://med-fe.cdn.bcebos.com/gy/coupon_modal/chinese-medicine-btn.png);
                        background-position: 0 0;
                        background-size: 100% 100%;
                    }
                }
            }

            &__close {
                position: absolute;
                left: 38%;
                right: 38%;
                bottom: -60px;
                text-align: center;
                color: #fff;
                font-size: 30px;
                line-height: 30px;
                padding: 10px;
            }
        }
    }

    &.layout-style1__1 {
        .coupon-modal {
            &__wrap {
                height: 87vw;
                background-image: url(https://med-fe.cdn.bcebos.com/zhgy/bg.png);

                &__cont {
                    &__coupons {
                        min-height: 22vw;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 350px) {
    .layout-style1 {
        .coupon-modal {
            &__wrap {
                &__cont {
                    &__coupons {
                        margin-top: 10px;

                        &__item {
                            transform: scale(0.99);

                            &:not(:last-child) {
                                margin-bottom: 8px;
                            }
                        }
                    }
                }

                &__btm {
                    transform: scale(0.8);
                }
            }
        }
    }
}

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

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

@keyframes breath {
    0% {
        opacity: 0;
        transform: scale(0.7);
    } /* 动画开始时的不透明度 */
    36% {
        opacity: 1;
        transform: scale(1.08);
    }

    60% {
        transform: scale(0.96);
    } /* 动画50% 时的不透明度 */
    83% {
        transform: scale(1.02);
    }

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

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

    90% {
        transform: scale(0.8);
    } /* 动画50% 时的不透明度 */
    100% {
        // opacity: 0.1;
        transform: scale(1);
    } /* 动画结束时的不透明度 */
}
</style>
