<template>
    <view
        class="modal-toolcont img-background flex-center"
        :style="{
            backgroundImage: 'url(' + daka.background + ')',
        }"
        @tap.stop
    >
        <view>
            <view class="modal-toolcont-title">
                <text class="text-background" :style="{backgroundImage: ueConf.modelFontColor || ueConf.textfontColor}">{{ daka.title }}</text>
            </view>
            <view class="modal-toolcont-text c-font-normal">{{ daka.text }}</view>
            <view v-if="daka.card" class="modal-card c-gap-top-small">
                <view
                    class="img-background modal-card-img"
                    :style="{
                        backgroundImage: 'url(' + daka.card + ')',
                    }"
                >
                    {{ daka.cardText }}
                </view>
                <view v-if="daka.cardNum > 1" class="c-gap-left">X{{ daka.cardNum }}</view>
            </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(' + btn.btnBg + ')',
                    }"
                    @tap.stop="onClose(btn.type, true)"
                >
                    {{ btn.btnText }}
                </view>
            </view>
            <view
                class="c-font-13 modal-tip c-gap-top-small"
                @tap.stop="onTipTap(daka.tipAct)"
            >
                {{ daka.tip }}
            </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) {
            const extra = {
                cardId: this.daka.cardId,
                cardType: this.daka.cardType
            };
            /**
             * 弹层关闭
             */
            this.$emit('onClose', type, isBtn, extra);
        },
        onTipTap(type) {
            /**
             * 弹层点击
             */
            this.$emit('onTipTap', type);
        }
    }
};
</script>
<style lang="less" scoped>
.modal-toolcont {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    width: 71vw;
    height: 80vw;
    margin-left: 14.5vw;
    text-align: center;
    &-title {
        font-size: 24px;
        line-height: 34px;
        font-weight: bold;
        transform: matrix( 1,0,0,1,0,0);
    }
    &-text {
        color: rgba(0, 0, 0, 0.7);
        width: 70%;
        margin-left: 15%;
    }
    .modal-btns {
        width: 71vw;
        display: flex;
        justify-content: center;
        margin-top: .05rem;
    }
    .modal-btn {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 17px;
        width: 27.5vw;
        height: 9.5vw;
    }
    .modal-btn-big {
        width: 44vw;
        height: 11vw;
        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;
    }
    .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-tip {
        width: 100%;
        text-decoration: underline;
        color: rgba(0, 0, 0, 0.7);
    }
    .modal-card {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        color: rgb(255, 181, 75);
        &-img {
            width: 90px;
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            writing-mode: vertical-lr;
        }
    }
}
.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>
