<template>
    <view class="m-modal">
        <view class="m-mask">
            <view
                @tap.stop
                class="modal-cont img-bg"
                :style="{
                    backgroundImage: 'url(' + background[modal.type] + ')',
                    height: modal.type === 'gain' && '89vw'
                }"
            >
                <view>
                    <template v-if="modal.type === 'gain'">
                        <!-- 标题 -->
                        <view v-if="modal.title" class="modal-cont-title">
                            <image :src="modalTitL" class="modal-tit-img" />
                                <text class="c-gap-left-small c-gap-right-small">{{modal.title}}</text>
                            <image :src="modalTitR" class="modal-tit-img" />
                        </view>
                        <view v-if="modal.text" class="modal-subtitle c-gap-top-small c-gap-bottom">{{modal.text}}</view>
                        <!-- 内容 -->
                        <view v-if="modal.card" class="modal-info-wrap">
                            <view class="modal-info img-bg" :style="{backgroundImage: 'url(' + quanbg + ')'}">
                                <image :src="modal.card.icon" class="modal-info-icon" />
                                <view class="c-gap-left-middle">
                                    <view>{{modal.card.title}}</view>
                                    <rich-text :nodes="modal.card.text"></rich-text>
                                </view>
                            </view>
                        </view>
                        <!-- 按钮 -->
                        <view v-if="modal.btnText" class="modal-btn img-bg" :style="{backgroundImage: 'url(' + btnbg + ')'}" @tap.stop="onTap('modal-btn')">
                            {{modal.btnText}}
                        </view>
                        <!-- 按钮下提示 -->
                        <view v-if="modal.tip" @tap.stop="onTap('modal-tip')" class="c-font-13 modal-tip">{{modal.tip}}</view>
                    </template>

                    <template v-else-if="modal.type === 'open'">
                        <!-- 拆按钮 -->
                        <view class="modal-open-btn" @tap.stop="onTap('open-modal')"></view>
                        <rich-text class="modal-open-text" :nodes="modal.openText"></rich-text>
                    </template>
                </view>
                <c-icon @tap.stop="onTap('modal-close')" class="modal-cont-close" name="close-circle" font-size="32px"/>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @author chenshuo04
 * @file 弹窗集合
 */
import Icon from '@baidu/med-ui/components/Icon/Icon';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        'c-icon': Icon
    },
    props: {
        modal: Object
    },
    data() {
        return {
            background: {
                open: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1451412979,1596052130&fm=179&app=35&f=PNG?w=1242&h=1074',
                gain: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2837900399,586903007&fm=179&app=35&f=PNG?w=1242&h=1104'
            },
            quanbg: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=120710172,2946866817&fm=179&app=35&f=PNG?w=634&h=273',
            btnbg: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2312208516,1367741739&fm=179&app=35&f=PNG?w=843&h=179',
            modalTitR: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1876108454,247247515&fm=179&app=35&f=PNG?w=57&h=11',
            modalTitL: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1031330832,4034139210&fm=179&app=35&f=PNG?w=57&h=11'
        }
    },
    methods: {
        onTap(type) {
            this.$emit('onModalTap', type);
        }
    }
};
</script>
<style lang="less" scoped>
.m-modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    .m-mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        z-index: 12;
    }
    .modal-cont {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-52%);
        width: 100vw;
        height: 87vw;
        text-align: center;
        &-close {
            position: absolute;
            bottom: -42px;
            left: 0;
            right: 0;
            color: #fff;
        }
        &-title {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            font-size: 17px;
            line-height: 27px;
            font-weight: 400;
            margin-top: 12vw;
            color: #5d4b46;
        }
    }
    .modal-open {
        &-btn {
            position: absolute;
            top: 15vw;
            width: 25vw;
            height: 25vw;
            margin-left: -12.5vw;
        }
        &-text {
            position: absolute;
            bottom: 20vw;
            width: 80vw;
            margin-left: -40vw;
            font-size: 30px;
            font-weight: bold;
            line-height: 40px;
            color: #ffeccd;
            text-align: center;
            text-shadow: 1px 1px 1px #e73f27;
        }
    }
    .modal-btn {
        position: absolute;
        width: 68vw;
        height: 14.4vw;
        left: 16vw;
        bottom: 54px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
        color: #993d2c;
        text-shadow: 0px 2px 2px rgba(249, 174, 73, 0.004);
        border-radius: 20px;
    }
    .modal-tip {
        width: 100%;
        text-decoration: underline;
        bottom: 25px;
        position: absolute !important;
        left: 0;
        right: 0;
        color: #fbccbd;
    }
    .modal-tit-img {
        width: 21px;
        height: 3px;
    }
    .modal-info {
        color: #f46a4c;
        width: 51vw;
        height: 22vw;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
        &-wrap {
            margin-top: 8vw;
            display: flex;
            justify-content: center;
        }
        &-icon {
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    }
}
.img-bg {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}
@media screen and (max-width: 380px)  {
    .m-modal .modal-info {
        font-size: 13px;
        padding: 0 15px;
        &-icon {
            width: 32px;
            height: 32px;
        }
    }
}
</style>