<template>
    <view
        v-show="shouldShowMask"
        class="c-mask"
        @tap="handleClose"
    >
        <view 
            class="ticket-mask__wrapper" 
            :style="{
                backgroundImage: 'url(' + bgUrl + ')',
                width: maskWidth,
                height: maskHeight,
                padding: maskPadding,
            }"  
            @tap.stop.prevent
        > 
            <view 
                v-if="headline" 
                class="ticket-mask__wrapper__title" 
                :style="{
                    fontWeight: maskTitleFontWeight,
                    color: maskTitleColor,
                }"
                :class="maskTitleFontClass"
            >{{ headline }}</view>
            <view v-if="ticket && ticket.title" class="ticket-mask__wrapper__ticket">
                <repurchase-ticket
                    v-if="!(goodsList && goodsList.length)" 
                    :text-color="'#FD503E'"
                    :countdown-bg-color="'#fff'"
                    :btn-area-width="'1rem'"
                    :data="ticket"
                    :price-width="'0.8rem'"
                    :price-font-size="'0.37rem'" 
                    :ticket-width="'2.68rem'"
                    :ticket-height="'0.75rem'"
                    :price-margin-right="ticket.lifetime && ticket.lifetime.text ? '0.27rem' : '0.067rem'"
                    :title-font-class="'c-font-big-less'"
                    :lifetime-font-class="'c-font-medium-less'"
                    :log="log"
                    @handleClose="handleClose"
                />

                <repurchase-ticket
                    v-if="goodsList && goodsList.length"
                    :text-color="'#fff'"
                    :countdown-bg-color="'#FD503E'"
                    :btn-area-width="'19.3vw'"
                    :btn-text-padding="'0.12rem'"
                    :data="ticket"
                    :price-width="'16.1vw'"
                    :price-font-size="'0.3rem'"
                    :ticket-width="'78.9vw'"
                    :ticket-height="'18.1vw'" 
                    :price-margin-right="'0.67vw'"
                    :title-font-class="'c-font-big-less'"
                    :lifetime-font-class="'c-font-normal'"
                    :log="log"
                    @handleClose="handleClose"
                />
            </view> 
            <view
                v-if="goodsList && goodsList.length" 
                class="ticket-mask__wrapper__content"
            >
                <view v-if="hint" class="ticket-mask__wrapper__content__title">
                    <view 
                        :style="{backgroundImage: 'url(' + hint.right_line_url + ')'}"
                        class="ticket-mask__wrapper__content__title__line"
                    /> 
                    <view class="ticket-mask__wrapper__content__title__text c-font-normal">{{ hint.text }}</view>
                    <view 
                        :style="{backgroundImage: 'url(' + hint.left_line_url + ')'}"
                        class="ticket-mask__wrapper__content__title__line"
                    /> 
                </view>
                <scroll-view
                    :scroll-x="true"
                    :scroll-y="false"
                    class="ticket-mask__wrapper__content__scroll"
                >
                    <view  
                        v-for="good in goodsList"
                        :key="good.drugId" 
                        class="ticket-mask__wrapper__content__scroll__item"
                    >
                        <repurchase-sku-card 
                            :data="good"
                            :page="log.page"
                        />
                    </view>
                </scroll-view>
            </view>
            <view
                v-if="button && button.text"
                class="ticket-mask__wrapper__button"
                @tap="onButtonTap(button.verifyUrl)"
            > 
                {{ button.text }}
            </view>

            <view class="c-mask__close">
                <c-icon
                    class="c-mask__close__icon"
                    font-size="28px"
                    name="close-circle"
                    @tap="handleClose"
                />
            </view>
        </view>
    </view>
</template>

<script>
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import RepurchaseTicket from './RepurchaseTicket';
import RepurchaseSkuCard from './RepurchaseSkuCard';
import {ubcSend} from '@utils/log';
import {request} from '@utils/request';
import * as Conf from '@utils/conf';

/**
 * @file 复购弹层mask
 * @author fujinghua
 * @categories 业务组件
 * @tags [component]
 */

export default {
    name: 'RepurchseTicketMask',
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        RepurchaseTicket,
        RepurchaseSkuCard,
        CIcon
    },
    props: {
        isShowMask: {
            type: Boolean,
            default: true,
        },
        log: {
            type: Object,
            default: ()=>({
                page: '',
                value: '',
                ext: {

                }
            })
        },
        maskInitUrl: {
            type: String,
            default: ''
        },
        verifyUrl: {
            type: String,
            default: '',
        }
    },
    data(){
        return {
            shouldShowMask: false,
            headline: '',
            bgUrl: '',
            ticket: {},
            hint: {},
            goodsList: [],
            button: {},
            maskWidth: '3rem',
            maskHeight: '3.93rem',
            maskPadding:'1.74rem 0.16rem 0',
            maskTitleFontWeight: 'bold',
            maskTitleColor: '#fff',
            maskTitleFontClass: 'c-font-big-less'
        };
    },
    mounted(){
        this.getFirstview();
    },
    methods: {
        getFirstview(){
            // 同时判断是否展示复购激励弹层数据 
            if (this.checkIsShowMask()){ 
                this.getMaskData()
                    .then(res=>{
                        const {
                            headline,
                            bgUrl,
                            ticket,
                            hint,
                            goodsList,
                            button
                        } = res.data;
                        // 没有背景则直接return 说明rd没有传数据不展示弹层
                        if (!bgUrl) return;

                        // 处理goodsList的价格问题
                        goodsList && goodsList.forEach(good=>{
                            if (good.discount && good.price){
                                let tmp = good.discount;
                                good.discount = good.price;
                                good.price = tmp;
                            }
                        });    
                        // 变更页面的宽高
                        if (goodsList && goodsList.length){
                            this.siwtchWithGoodsList();
                        }
                        Object.assign(this, {
                            headline,
                            ticket,
                            bgUrl,
                            hint,
                            goodsList,
                            button,
                            shouldShowMask: this.isShowMask && true,
                        });
                        // 发送log
                        ubcSend(Object.assign({
                            type: 'view'
                        }, this.log));

                    }).catch(err=>{
                        // console.log(err);
                    });
            }
        },
        siwtchWithGoodsList(){
            this.maskWidth='91.78vw';
            this.maskHeight='148vw';
            this.maskPadding='45vw 2.25vw 2.1vw 2.4vw'; 
            this.maskTitleFontClass='c-font-normal';
            this.maskTitleColor='#FD503E';
            this.maskTitleFontWeight = 'normal';
        },
        handleClose(){
            this.shouldShowMask = false;
        },
        onButtonTap(url){
            if (!url) return ;

            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'
                });
                // 关闭mask
                this.shouldShowMask = false;
            }).catch(err=>{
                // console.log(err);
                
                this.$api.hideLoading();
                this.$api.showToast({
                    title: '领取失败，请重试',
                    icon: 'none'
                });
            });  
            
        },
     
        checkIsShowMask(){
            const storedTime = this.$api.getStorageSync('maskLoadingTime');
            const daystamp = 60  * 60 * 24;
            const curstamp = (new Date().getTime()) / 1000;
            const todayMidnight = new Date();
            todayMidnight.setHours(0, 0, 0, 0);
            if (!storedTime){
                this.$api.setStorageSync('maskLoadingTime', todayMidnight.getTime() / 1000);
                return true;
            }
            
            if (storedTime + daystamp < curstamp){
                this.$api.setStorageSync('maskLoadingTime', todayMidnight.getTime() / 1000);
                return true;
            }
            return false;
           
        },
        getMaskData(){
            return new Promise((resolve, reject)=>{
                request({
                    url: Conf.apiHost + this.maskInitUrl, 
                    method: 'GET',
                    data: {},
                    isNeedLogin: false,
                    isFirstScreen: false,
                }).then(res=>{
                    resolve(res);
                }).catch(err=>{
                    reject(err);
                });
            });
        },
    },
};
</script>

<style scoped lang="less">
    .c-mask{
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 800;

        &__close{
            position: absolute;
            bottom: -15vw;
            left: 50%;
            transform: translateX(-50%);
            &__icon {
                color: #fff;
            }
        }
    }

    .ticket-mask__wrapper{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 15vw;
        margin: auto;
        box-sizing: border-box;
        display:flex;
        justify-content: center;
        align-content: flex-start;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        flex-wrap: wrap;

        &__title{
            width: 100%;
            font-weight: normal;
            text-align: center;
        }

        &__ticket{
             margin-top: 3.62vw;
             display: flex;
             justify-content: center;
        }

        &__content{
             width: 100%;
            &__title{
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 3.8vw 0 2.5vw;
                &__line{
                    width: 0.5rem;
                    height: 0.02rem;
                    background-size: 100% 100%;
                    margin: 0 0.06rem;
                }

                &__text{
                    color: #FD503E;
                }
            }   

            &__scroll{
                height: 60vw;
                white-space: nowrap;
                box-sizing: border-box;
                width: 100%;
                overflow-x: scroll;

                &__item{
                    margin-right: 0.08rem;
                    width: 28.3vw;
                    height: 60vw;
                    display: inline-block;

                    &:last-child{
                        margin: 0;
                        padding-right: 0.16rem;
                    }

                    &:first-child{
                        padding-left: 0.16rem;
                    }

                }
            }
        } 

        &__button{
             margin-top: 0.3rem;
             height: 0.36rem;
             padding: 0 0.47rem;
             color: white;
             line-height: 0.36rem;
             font-size: 0.16rem;
             background-image: linear-gradient(180deg, #FEF6E8 14%, #E9A445 100%);
             box-shadow: 0 0.05rem 0.17rem 0 rgba(188,31,17,0.46);
             border-radius: 0.258rem;
             color: #E75842;
             font-weight: bold;
             text-align: center;
        }
    }
</style>
