<template>
    <view>
        <modal-contianer
            :is-show="isShow"
            z-index="1001"
            background="rgba(0, 0, 0, 0.5)"
            @onModalCloas="onClose"
        >
            <view
                class="coupon-modal__content"
                :style="{'background-image': 'url(' + imgUrl + ')'}"
                @tap.stop
            >
                <view class="coupon-modal__content-box">
                    <view class="coupon-modal__content__title">{{ data.title }}</view>
                    <view v-if="data.price" class="coupon-modal__content__price">
                        <!-- eslint-disable max-len -->
                        <text class="coupon-modal__content__price__num c-gap-right-small">{{ data.price.amount }}</text><text class="coupon-modal__content__price__unit">{{ data.price.unit }}</text>
                        <!-- eslint-enable max-len -->
                    </view>
                    <view class="coupon-modal__content__desc c-font-14">{{ data.desc }}</view>
                    <view v-if="isShowCountDown" class="coupon-modal__content__count-down c-font-14 c-gap-top-small">
                        <text class="coupon-modal__content__count-down__time">{{ remainingTime[0] }}</text>
                        <text class="coupon-modal__content__count-down__colon">:</text>
                        <text class="coupon-modal__content__count-down__time">{{ remainingTime[1] }}</text>
                        <text class="coupon-modal__content__count-down__colon">:</text>
                        <text class="coupon-modal__content__count-down__time">{{ remainingTime[2] }}</text>
                        <text>失效</text>
                    </view>
                    <login-btn
                        :disabled="!!isLogin"
                        @onTapStart="onTapStart"
                        @onLoginSuccess="onLoginSuccess"
                        @onLoginFail="onLoginFail"
                        @onTapEndH5="onTapEndH5"
                    >
                        <view class="coupon-modal__content__btn" @tap="onCouponBtn">{{ data.btnText }}</view>
                    </login-btn>
                    <view
                        v-if="data.rules && data.rules.title"
                        class="coupon-modal__content__rules"
                        @tap.stop="popupChange(true)"
                    > {{ data.rules.title }} </view>
                </view>
                <view class="coupon-modal__content__close" @tap="onClose">
                    <c-icon name="close-circle" font-size="0.27rem"/>
                </view>
            </view>
        </modal-contianer>
        <rule-popup
            v-if="data.rules"
            z-index="1002"
            :title="data.rules && data.rules.title"
            :show="popupShow"
            :content="data.rules && data.rules.content"
            @close="popupChange(false)"
        />
        <!-- 图片预加载 -->
        <image
            :src="imgUrl"
            style="display: none;"
            @load="onImageLoad"
        />
    </view>
</template>

<script>
import LoginBtn from '@components/common/login-btn';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import ModalContianer from '../common/ModalContainer';
import RulePopup from '@components/act/cps/RulePopup';
import {toLoginPage} from '@utils/login';
/**
 * @file 新人优惠券弹窗
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    components: {
        LoginBtn,
        ModalContianer,
        CIcon,
        RulePopup
    },
    options: {
        addGlobalClass: true
    },
    data() {
        return {
            // 是否显示
            isShow: false,
            popupShow: false,
            // 图片地址
            imgUrl: 'https://med-fe.cdn.bcebos.com/gy/new-user-modal.png',
            // 是否显示最后的图
            isShowFinalImg: false,
            remainingTime: ['00', '00', '00'],
            timer: null,
            isShowCountDown: false,
        };
    },
    props: {
        /**
         * 是否登陆
         */
        isLogin: {
            type: Number,
            default: () => {
                return 0;
            }
        },
        /**
         * 弹窗数据
         */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    created() {
        this.startCountDown();
    },
    pageLifetimes: {
        show() {
            this.startCountDown();
        },
        hide() {
            clearTimeout(this.timer);
            this.timer = null;
        }
    },
    destroyed() {
        clearTimeout(this.timer);
        this.timer = null;
    },
    methods: {
        popupChange(flag) {
            this.popupShow = flag;
        },
        countDown() {
            const nowDate = Date.now();
            const diffDate = (this.data.cancelDate - 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;
            /* eslint-disable max-len */
            this.remainingTime = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`.split(':');
            /* eslint-enable max-len */
        },
        startCountDown() {
            clearTimeout(this.timer);
            this.timer = null;
            if (this.data && this.data.cancelDate - Date.now() >= 0 && !this.timer) {
                this.isShowCountDown = true;
            } else {
                this.isShowCountDown = false;
                return;
            }
            this.countDown();
            this.timer = setInterval(() => {
                this.countDown();
            }, 1000);
        },
        onClose() {
            this.isShow = false;
        },
        onCouponBtn() {
            this.isShow = false;
        },
        onLoginSuccess() {
            this.isShow = false;
            this.$emit('updateFirstLoginStatus', 1);
            /**
             * 刷新数据
             */
        },
        onTapStart() {
            if (!this.isLogin && process.env.MARS_ENV === 'swan') {
                /**
                 * 刷新数据
                 */
                this.$emit('updateFirstLoginStatus', 1);
            }
        },
        onLoginFail() {
            /**
             * 刷新数据
             */
            this.$emit('updateFirstLoginStatus', 0);
        },
        onTapEndH5() {
            if (!this.isLogin && process.env.MARS_ENV !== 'swan') {
                // 未登录
                toLoginPage({
                    href: window.location.href + '&firstLogin=1'
                });
            }
        },
        onImageLoad() {
            // 图片请求成功后，显示对话框。防止文字透明度动画提前
            this.isShow = true;
        },
    }
};
</script>
<style lang="less" scoped>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.coupon-modal {
    &__content {
        width: 100%;
        height: 86.79vw;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        animation: fadeIn .5s;
        animation-fill-mode: forwards;

        &__title {
            color: #e75842;
            font-size: 0.2rem;
            font-weight: bold;
        }

        &__price {
            margin-top: 0.1rem;
            height: 0.57rem;

            &__num {
                font-size: 0.7rem;
                height: 0.57rem;
                line-height: 0.57rem;
                font-weight: bold;
                color: #e75842;
                font-family: PingFangSC-Medium;
            }

            &__unit {
                color: #e75842;
                font-weight: bold;
                font-size: 0.2rem;
            }
        }

        &__desc {
            color: #e75842;
            font-size: 0.14rem;
            margin-top: .06rem;
            font-weight: bold;
        }

        &__date {
            color: #7e3022;
        }

        &__count-down {
            margin-top: 0.11rem;
            color: #e75842;
            font-size: 0.14rem;

            &__time {
                display: inline-block;
                background-color: #e75842;
                color: #fff;
                padding: 0 .04rem;
                border-radius: 0.05rem;
            }

            :last-child {
                margin-left: .04rem;
            }

            &__colon {
                margin: 0 .02rem;
            }
        }

        &__btn {
            margin: 0 auto;
            width: 1.83rem;
            height: 0.43rem;
            line-height: 0.43rem;
            margin-top: .4rem;
            color: #e0513b;
            font-size: 0.20rem;
            text-align: center;
            background-image: linear-gradient(180deg, #fef6e8 14%, #e9a445 100%);
            box-shadow: 0 0.05rem 0.15rem 0 rgba(188, 31, 17, 0.46);
            border-radius: 0.22rem;
            font-weight: bold;
        }

        &__close {
            position: absolute;
            bottom: -0.37rem;
            left: 50%;
            transform: translateX(-50%);
            width: 0.27rem;
            height: 0.27rem;
            color: #fff;
            font-weight: normal;
        }

        &__rules {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -24px;
            color: white;
            font-size: 14px;
            line-height: 14px;
            text-decoration: underline;
        }
    }

    &__content-box {
        // width: 100%;
        width: 2.71rem;
        position: absolute;
        bottom: 0.6rem;
        left: 50%;
        margin-left: -1.31rem;
        opacity: 1;
    }
}
</style>
