<template>
    <view class="act-modal">
        <view class="act-modal-mask" @tap.stop="onClose">
            <view
                v-if="custom"
                class="modal-cont"
                @tap.stop
            >
                <slot></slot>
            </view>
            <view
                v-else-if="modal.type === 'cy-toast'"
                class="modal-cont cy-toast"
            >
                {{ modal.text }}
            </view>
            <view
                v-else-if="modal.type === 'cy-modal'"
                class="modal-cont cy-modal"
            >
                <view class="cy-modal-wrap">
                    <view class="cy-modal-title c-font-15">{{ modal.title }}</view>
                    <view class="cy-modal-text c-font-normal">{{ modal.text }}</view>
                    <view class="cy-modal-btns">
                        <view
                            v-for="(btn, btnIndex) in modal.btns"
                            :key="btnIndex"
                            class="cy-modal-btn"
                            :style="{
                                color: btn.color,
                                background: btn.background,
                            }"
                            @tap.stop="onClose(btn)"
                        >
                            {{ btn.text }}
                        </view>
                    </view>
                </view>
            </view>
            
        </view>
    </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: {
        /* 弹窗 */
        modal: {
            type: Object,
            default: () => {}
        },
        /* 自定义 */
        custom: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        onClose(data, isBtn) {
            /* 关闭 */
            this.$emit('onClose', data, isBtn);
        }
    }
};
</script>
<style lang="less" scoped>
.act-modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 922;
    .act-modal-mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        z-index: 12;
    }
    .modal-cont {
        display: flex;
        justify-content: center;
        position: relative;
        top: 50%;
        transform: translateY(-65%);
        text-align: center;
        &-close {
            position: absolute;
            bottom: -64px;
            left: 0;
            right: 0;
            color: #fff;
        }
    }
    .cy-toast {
        left: 50%;
        background: linear-gradient(180deg, #FFF6EC 0%, #FFE5C1 63%, #FFF6EC 100%);
        border: 2px solid #FFD2A7;
        border-radius: 8px;
        min-width: 60vw;
        max-width: 90vw;
        transform: translateX(-50%);
        color: #666;
        text-align: center;
        padding: 15px 20px;
        box-sizing: border-box;
    }
    .cy-modal {
        background: linear-gradient(180deg, #FFF6EC 0%, #FFE5C1 63%, #FFF6EC 100%);
        border: 2px solid #FFD2A7;
        border-radius: 8px;
        width: 90vw;
        margin-left: 5vw;
        color: #666;
        text-align: center;
        padding: 15px 10px;
        box-sizing: border-box;
        &-title {
            color: #000000;
        }
        &-text {
            color: #666;
            opacity: 0.9;
        }
        &-btns { 
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 15px;
        }
        &-btn {
            font-size: 13px;
            height: 28px;
            line-height: 28px;
            border-radius: 15px;
            padding: 0 10px;
            &:last-child {
                margin-left: 15px;
            }
        }
    }
}
.img-background {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}
.cl-bold {
    font-weight: bold;
}
</style>
