<template>
    <view class="hpv-modal">
        <view class="hpv-modal-mask">
            <view
                v-if="modal.type === 'normal'"
                @tap.stop
                class="modal-cont img-background"
                :style="{backgroundImage: 'url(https://medactivity.cdn.bcebos.com/hpv%2Fmodal-bg.png)'}"
            >
                <view class="hpv-modal-cont">
                    <view class="hpv-modal-title c-gap-bottom-small">{{modal.title}}</view>
                    <view class="hpv-modal-text">
                        <rich-text :nodes="modal.text"></rich-text>
                    </view>
                    <view class="hpv-modal-money">
                        <text class="price">{{modal.price}}</text>
                        <text class="yuan">元</text>
                    </view>
                </view>
                <view  @tap.stop="onClose(true)" v-if="modal.button" class="hpv-modal-btn c-gap-top-large">
                    <view class="hpv-modal-btn-cont">{{modal.button.text}}</view>
                </view>
                <c-icon @tap.stop="onClose(false)" class="modal-cont-close" name="close-circle" font-size="32px"/>
            </view>
            <view
                v-else-if="modal.type === 'info'"
                class="modal-cont img-background hpv-modal-info"
                :style="{backgroundImage: 'url(https://medactivity.cdn.bcebos.com/hpv%2Ftext-modal.png)'}"
            >
                <view class="hpv-modal-cont hpv-modal-info-cont">
                    <view class="hpv-modal-info-title">{{modal.title}}</view>
                    <view v-if="modal.price" class="hpv-modal-money c-gap-top">
                        <text class="price">{{modal.price}}</text>
                        <text class="yuan">元</text>
                    </view>
                </view>
                <view @tap.stop="onClose(true)" class="hpv-modal-info-btn"></view>
            </view>
            <view
                v-else-if="modal.type === 'rule'"
                class="modal-cont img-background hpv-modal-rule"
                :style="{backgroundImage: 'url(https://medactivity.cdn.bcebos.com/hpv%2F%E8%A7%84%E5%88%991.png)', transform: 'translateY(-50%)'}"
            >
                <view class="hpv-modal-rule-cont">
                    <view class="hpv-modal-rule-top">
                        <view><text class="cl-bold">活动时间：</text><text>{{rule.time}}</text></view>
                        <view><text class="cl-bold">如何参与：</text><text>{{rule.how}}</text></view>
                    </view>
                    <view class="hpv-modal-rule-list">
                        <view v-for="(item, index) in rule.list" :key="index" class="hpv-modal-rule-i">
                            <text class="hpv-modal-rule-num">{{index + 1}}</text>
                            <text>{{item}}</text>
                        </view>
                    </view>
                </view>
                <view @tap.stop="onClose(true)" class="hpv-modal-rule-feedback"></view>
                <c-icon @tap.stop="onClose(false)" class="modal-cont-close" name="close-circle" font-size="32px"/>
            </view>
            <view
                v-else-if="modal.type === 'cash'"
                class="modal-cont img-background hpv-modal-cash"
                :style="{backgroundImage: 'url(https://medactivity.cdn.bcebos.com/hpv%2Fordermodal1.png)', transform: 'translateY(-50%)'}"
            >
                <view class="hpv-modal-cash-cont">
                    <view class="hpv-modal-cash-title">{{modal.title}}</view>
                    <view class="hpv-modal-cash-money">
                        <text>{{modal.amount}}</text>
                        <text class="c-font-15 c-gap-left">元</text>
                    </view>
                </view>
                <view class="hpv-modal-cash-bottom">
                    <view @tap.stop="onClose(true)" class="hpv-modal-cash-btn">立即提现</view>
                    <view class="hpv-modal-cash-text c-font-small c-gap-top-small">{{modal.text}}</view>
                </view>
                <c-icon @tap.stop="onClose(false)" class="modal-cont-close" name="close-circle" font-size="32px"/>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @author chenshuo04
 * @file 弹窗集合
 * @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,
            required: true
        },
        // 类型
        rule: {
            type: Object
        }
    },
    methods: {
        onClose(isBtn) {
            /**
             * 关闭弹窗
             *
             * @event onClose
             * @property {boolean} isBtn 是否点击按钮
             * @property {object} modal 当前弹窗数据
             */
            this.$emit('onClose', isBtn, this.modal);
        }
    }
};
</script>
<style lang="less" scoped>
.hpv-modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 922;
    .modal-cont {
        display: flex;
        justify-content: center;
        position: relative;
        top: 50%;
        transform: translateY(-65%);
        width: 100vw;
        height: 83.3vw;
        text-align: center;
        &-close {
            position: absolute;
            bottom: -64px;
            left: 0;
            right: 0;
            color: #fff;
        }
    }
    .hpv-modal-mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .8);
        z-index: 12;
    }
    .hpv-modal-btn {
        position: absolute;
        bottom: 10vw;
        background: #fdcd5c;
        display: inline-block;
        border-radius: 20px;
        padding: 2px;
        &-cont {
            padding: 5px 20px;
            border-radius: 18px;
            color: #c75e00;
            background-color: rgb(255, 219, 109);
            box-shadow: inset 0px 0px 1px 0.5px rgba(255, 171, 0, 0.75);
            font-size: 18px;
            font-weight: 600;
        }
    }
    .hpv-modal-cont {
        position: absolute;
        top: 19vw;
        left: 50%;
        transform: translateX(-50%);
        width: 40%;
    }
    .hpv-modal-cash {
        height: 84vw;
        &-cont {
            position: absolute;
            top: 12vw;
        }
        &-title {
            color: #702121;
            font-weight: bold;
        }
        &-bottom {
            position: absolute;
            bottom: 3vw;
            left: 12vw;
            right: 12vw;
        }
        &-money {
            padding-top: 18vw;
            font-size: 60px;
            color: #FF5959;
            font-family: DINCondensed-Bold;
        }
        &-btn {
            background-image: linear-gradient(180deg, #FFDB99 0%, #FFDB6D 100%);
            border-radius: 22px;
            height: 38px;
            line-height: 38px;
            width: 80%;
            color: #C36109;
            font-weight: bold;
            margin: auto;
        }
        &-text {
            color: #fff;
            width:  80%;
            margin: auto;
            margin-top: 5px;
        }
    }
    .hpv-modal-rule {
        height: 119vw;
        &-cont {
            position: absolute;
            top: 12vw;
            bottom: 16vw;
            left: 6vw;
            right: 6vw;
            text-align: left;
            padding: 0 15px;
            font-size: 11px;
            line-height: 21px;
            color: #c40e05;
            overflow-y: scroll;
        }
        &-top {
            background: #fff;
            border-radius: 5px;
            padding: 10px 10px 15px 10px;
            text-align: justify;
        }
        &-list {
            background: #fff;
            border-radius: 5px;
            padding: 10px 10px 15px 10px;
            text-align: justify;
            margin-top: 10px;
        }
        &-num {
            display: inline-block;
            color: #e64f17;
            border: 1px solid #e64f17;
            background: #ffd258;
            border-radius: 10px;
            width: 13px;
            height: 13px;
            text-align: center;
            line-height: 13px;
            margin-right: 5px;
        }
        &-feedback {
            position: absolute;
            left: 20vw;
            right: 20vw;
            bottom: 3vw;
            height: 10vw;
        }
    }

    .hpv-modal-info {
        &-cont {
            width: 60%;
        }
        &-title {
            font-size: 20px;
            line-height: 30px;
            color:#9a5925;
            font-weight: 400;
        }
        .price {
            font-size: 60px;
            line-height: 60px;
        }
        &-btn {
            position: absolute;
            top: 60vw;
            width: 120px;
            height: 42px;
        }
    }
    &-title {
        font-size: 26px;
        line-height: 26px;
        color:#ff3c5e;
        font-weight: 600;
    }
    &-text {
        font-size: 15px;
        font-weight: 900;
        color: #9a5925;
        display: inline-block;
    }
    &-money {
        color:#ff3c5e;
        font-weight: 600;
        .price {
            font-size: 40px;
            font-family: DIN Alternate;
            line-height: 40px;
        }
        .yuan {
            font-size: 21px;
            color: #9a5925;
        }
    }
}
.img-background {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}
.cl-bold {
    font-weight: bold;
}
</style>