<template>
    <view
        class="modal-cont img-background"
        :style="{
            backgroundImage: 'url(' + background[type] + ')',
        }"
        @tap.stop
    >
        <view>
            <view v-if="daka.title" class="modal-cont-title">
                <text class="text-background" :style="{backgroundImage: ueConf.modelFontColor || ueConf.textfontColor}">{{ daka.title }}</text>
            </view>
            <view v-if="daka.text" class="modal-subtitle c-gap-top-small c-gap-bottom">{{ daka.text }}</view>
            <view class="modal-info-wrap">
                <view
                    class="modal-info img-background"
                    :style="{
                        backgroundImage: 'url(' + daka.img + ')',
                        height: daka.title === '打卡失败' && type === 'sleep' ? '27.5vw' : '26vw',
                    }"
                >
                    <view v-if="daka.totalCount" class="modal-money">
                        <text class="modal-money-num text-background" :style="{backgroundImage: ueConf.textfontColor}">{{ (daka.totalCount || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</text>
                        <text class="modal-money-unit" :style="{backgroundImage: ueConf.textfontColor}">元</text>
                    </view>
                </view>
            </view>
            <view v-if="daka.subtext" class="modal-subtext">{{ daka.subtext }}</view>
            <!-- 分享 -->
            <view v-if="daka.shareList" class="modal-share">
                <view class="c-font-17 modal-share-title c-gap-bottom-large">
                    <text>——</text>
                    <text class="c-gap-left c-gap-right">炫耀一下</text>
                    <text>——</text>
                </view>
                <view
                    class="modal-cont-share"
                >
                    <image
                        v-for="(itm, index) in daka.shareList"
                        :key="index"
                        lazy-load
                        :src="itm.icon"
                        class="modal-cont-share-img"
                        @tap.stop="onTipTap('share', itm.type)"
                    />
                </view>
                <!-- 分享阴影 -->
                <image :src="shareShadow[type]" class="modal-cont-share-img-shadow"/>
            </view>
            <!-- 按钮 -->
            <template v-else>
                <view
                    class="modal-btn img-background"
                    :style="{
                        backgroundImage: 'url(' + daka.btnBg + ')',
                        boxShadow: btnShadow[type],
                    }"
                    @tap.stop="onClose(daka.type, true)"
                >
                    {{ daka.btnText }}
                </view>
                <view
                    class="c-font-13 modal-cont-tip"
                    @tap.stop="onTipTap(daka.tipAct)"
                >
                    {{ daka.tip }}
                </view>
            </template>
        </view>
        <c-icon
            class="modal-cont-close"
            name="close-circle"
            font-size="32px"
            @tap.stop="onClose(daka.tipAct || daka.type)"
        />
    </view>
</template>

<script>
/**
 * @file 打卡基础弹窗
 * @author chenshuo04
 * @categories 打卡内容组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon
    },
    props: {

        /**
        * 弹窗对象
        */
        daka: {
            type: Object,
            required: true
        },

        /**
        * UE配置
        */
        ueConf: {
            type: Object,
            required: true
        },

        /**
        * 类型
        */
        type: {
            type: String,
            default: 'morning'
        }
    },
    data() {
        return {
            background: {
                morning: 'https://medactivity.cdn.bcebos.com/morning/daka-modal-bj.png',
                sleep: 'https://medactivity.cdn.bcebos.com/sleep/modal-normal-bj.png',
                center: 'https://medactivity.cdn.bcebos.com/center/center_tip_exchange.png'
            },
            shareShadow: {
                morning: 'https://medactivity.cdn.bcebos.com/morning/share-shadow.png',
                sleep: 'https://medactivity.cdn.bcebos.com/sleep/modal-shadow-bj.png'
            },
            btnShadow: {
                sleep: '0px 5px 12px 0px rgba(118, 133, 213)',
                morning: '0px 3px 5px 0px rgba(126, 196, 160)'
            }
        };
    },
    methods: {
        onClose(type, isBtn) {
            /**
            * 关闭事件
            */
            this.$emit('onClose', type, isBtn, this.daka);
        },
        onTipTap(type, extra) {
            /**
            * 按钮点击
            */
            this.$emit('onTipTap', type, extra);
        }
    }
};
</script>
<style lang="less" scoped>
.img-background {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}
.text-background {
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-clip: text;
}
.modal-money {
    position: absolute !important;
    left: 0;
    right: 0;
    &-num {
        font-size: .55rem;
        line-height: .55rem;
    }
    &-unit {
        position:relative;
        top:-5px;
        font-size: 16px;
        margin-left: 3px;
        padding: 3px;
        border-radius: 50px;
        color: #fff;
        
    }
}
.modal-cont {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-52%);
    width: 75vw;
    height: 87vw;
    margin-left: 12.5vw;
    text-align: center;
    &-close {
        position: absolute;
        bottom: -74px;
        left: 0;
        right: 0;
        color: #fff;
    }
    &-tip {
        width: 100%;
        text-decoration: underline;
        color: #fff;
        bottom: 25px;
        position: absolute !important;
        left: 0;
        right: 0;
    }
    &-title {
        position: relative;
        font-size: 24px;
        line-height:34px;
        font-weight: bold;
        margin-top: .15rem;
    }
}
.modal-btn {
    position: absolute;
    width: 62vw;
    height: 11vw;
    left: 6.5vw;
    bottom:54px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    text-shadow: 0px 2px 2px rgba(249, 174, 73);
    box-shadow: 0px 5px 12px 0px rgba(153, 210, 236, 0.23);
    border-radius: 20px;
}
.modal-subtitle {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
}
.modal-info {
    width: 56vw;
    height: 26vw;
    display: flex;
    justify-content: center;
    align-items: center;
    &-wrap {
        display: flex;
        justify-content: center;
    }
}
.modal-subtext {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.7);
}
.modal-share {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
}
.modal-share-title {
    color: #fff;
}
.modal-cont-share {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    z-index: 10;
    &-img {
        width: 48px;
        height: 48px;
        &-shadow {
            width: 100%;
            height: 14.57vw;
            position: absolute;
            left: 0;
            bottom: -20px;
        }
    }
}
</style>
