<template>
    <view
        class="modal-tipcont img-background flex-center"
        :style="{
            backgroundImage: 'url(' + daka.background + ')',
        }"
        @tap.stop
    >
        <view>
            <view class="modal-tipcont-title">
                <text class="text-background" :style="{backgroundImage: ueConf.modelFontColor || ueConf.textfontColor}">{{ daka.title }}</text>
            </view>
            <view class="modal-tipcont-text c-font-normal">{{ daka.text }}</view>
            <view class="modal-btns">
                <view
                    v-for="(btn, index) in daka.btn"
                    :key="index"
                    class="modal-btn img-background"
                    :class="{
                        'modal-btn-big': daka.btn.length === 1,
                        'c-gap-left': index,
                    }"
                    :style="{
                        backgroundImage: 'url(' + (daka.btn.length === 1 ? 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2899928046,3134828627&fm=179&app=35&f=PNG?w=549&h=134&s=33BD7726492B47245457D27C0300907B' : btn.btnBg) + ')',
                    }"
                    @tap.stop="onClose(btn.type, true)"
                >
                    {{ btn.btnText }}
                </view>
            </view>
        </view>
        <c-icon
            class="modal-close"
            :style="{bottom: '-82px'}"
            name="close-circle"
            font-size="32px"
            @tap.stop="onClose('close')"
        />
    </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
        }
    },
    methods: {
        onClose(type, isBtn) {

            /**
            * 关闭事件
            */
            this.$emit('onClose', type, isBtn);
        },
        sharePage() {

            /**
            * 分享事件
            */
            this.$emit('sharePage');
        }
    }
};
</script>
<style lang="less" scoped>
.modal-tipcont {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    width: 71.5vw;
    height: 61vw;
    margin-left: 14.5vw;
    text-align: center;
    &-title {
        font-size: 24px;
        line-height: 34px;
        font-weight: bold;
        position: relative;
    }
    &-text {
        color: rgba(0, 0, 0, 0.7);
        width: 70%;
        margin-left: 15%;
        margin-top: 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-btns {
    width: 71vw;
    display: flex;
    justify-content: center;
    margin-top: .25rem;
}
.modal-btn {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    width: 27.5vw;
    height: 9.5vw;
    border-radius: 25px;
}
.modal-btn-big {
    width: 44vw;
    height: 10.78vw;
    font-size: 20px;
    text-shadow: 0 2px 2px #f9ae49;
    box-shadow: 0px 4px 11px 0px rgba(246, 233, 159, 0.57);
    border-radius: 25px;
}
.modal-close {
    position: absolute;
    bottom: -42px;
    left: 0;
    right: 0;
    color: #fff;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.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;
}
</style>
