<template>
    <view class="brand-operate-modal">
        <view class="modal-mask">
            <view
                v-if="type === 3"
                @tap.stop
                class="modal-cont"
            >
                <view :style="{width: '100%'}">
                    <view class="modal-cont-close-cont">
                        <c-icon @tap.stop="onModal('close')" class="modal-cont-close" name="close-circle" font-size="21px"/>
                    </view>
                    <view class="modal-cont-title">
                        <view>抱歉！您未获得免单机会</view>
                    </view>
                    <image
                        :src="'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3624658997,3905435942&fm=179&app=35&f=PNG?w=431&h=490'"
                        mode="widthFix"
                        :style="{
                            width: '45%'
                        }"
                        lazy-load
                    />
                    <view class="c-font-normal c-color-normal modal-cont-text">相信您的好运在后面，祝您检测呈阴性，身体健康哦</view>
                    <view class="c-gap-top-ll btn-wrap">
                        <view  @tap.stop="onModal('btn-pay')" class="btn-cont c-font-17">{{btnType === 1 ? '知道了，继续预约' : '立即支付'}}</view>
                    </view>
                </view>
            </view>
            <view
                v-if="type === 2"
                @tap.stop
                class="modal-cont"
            >
                <view :style="{width: '100%'}">
                    <view class="modal-cont-close-cont">
                        <c-icon @tap.stop="onModal('close-share')" class="modal-cont-close" name="close-circle" font-size="21px"/>
                    </view>
                    <view class="modal-cont-title" :style="{color: '#FE5744'}">
                        <view>恭喜你</view>
                        <view>获得免费检测机会！</view>
                    </view>
                    <view class="c-font-13 c-color-333 c-padding-h">本次检测费用由百度健康为您提供</view>
                    <image
                        :src="imgList[groupType]"
                        mode="widthFix"
                        class="c-gap-top-ll"
                        :style="{
                            width: '90%'
                        }"
                        lazy-load
                    />
                    <view class="c-gap-top-ll btn-wrap">
                        <view  @tap.stop="onModal('btn-share')" class="btn-cont c-font-17">去分享</view>
                    </view>
                </view>
            </view>
            <view
                v-else-if="type === 1"
                @tap.stop
                class="modal-cont modal-cont-img img-bg "
                :style="{
                    backgroundImage: 'url(' + 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2357884416,1425419561&fm=179&app=35&f=PNG?w=1187&h=1350' + ')'
                }"
            >
                <view>
                    <view class="c-font-20 modal-cont-red-tit c-font-wb">
                        <view>恭喜您获得一次抽奖机会</view>
                        <view>打开红包抽免单机会</view>
                    </view>
                    <view class="modal-cont-click" @tap.stop="onModal('open-red')"></view>
                    <c-icon @tap.stop="onModal('close-red')" class="modal-cont-close-bottom" name="close-circle" font-size="32px"/>
                </view>
            </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: {
        type: {
            type: Number,
            default: 2
        },
        btnType: {
            type: Number,
            default: 1
        },
        groupType: {
            type: String,
            default: 'aits'
        }
    },
    data() {
        return {
            imgList: {
                aits: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4173888576,3113934079&fm=179&app=35&f=PNG?w=965&h=310&s=BEACFE06D7344C2342FB7B6C0300D078',
                dian: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1733500269,587532482&fm=179&app=35&f=PNG?w=965&h=310&s=3889FF14D7344C2302E21B7C03001078',
                jinyu: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=313676819,3117872205&fm=179&app=35&f=PNG?w=965&h=310&s=BC8EEF16D7344C2342E27B6C0300A078'
            }
        };
    },
    methods: {
        onModal(action) {
            this.$emit('onModal', action);
        },
        onTipTap(type, extra) {
            this.$emit('onTipTap', type, extra);
        }
    }
};
</script>
<style lang="less" scoped>
.brand-operate-modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
    .modal-mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        z-index: 11;
    }
    .modal-cont {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-52%);
        width: 80vw;
        height: 94vw;
        margin-left: 10vw;
        text-align: center;
        background: #fff;
        border-radius: 10px;
        &-img {
            background: transparent;
            height: 91vw;
        }
        &-close {
            padding: 10px 15px;
            &-cont {
                color: #999;
                width: 100%;
                text-align: right;
                height:42px;
                line-height:42px;
            }
            &-bottom {
                position: absolute;
                bottom: -15px;
                left: 0;
                right: 0;
                color: #fff;
            }
        }
        &-tip {
            width: 100%;
            text-decoration: underline;
            color: #fff;
            bottom: 25px;
            position: absolute !important;
            left: 0;
            right: 0;
        }
        &-title {
            position: relative;
            font-size: 18px;
            line-height:28px;
            font-weight: bold;
            color: #333;
        }
        &-red-tit {
            color: #ffe9bf;
            margin-top: 15vw;
        }
        &-click {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        &-text {
            padding: 0 .3rem;
            text-align: center;
        }
    }
    .btn-wrap {
        position: absolute;
        bottom: 20px;
        text-align: center;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .btn-cont {
        width: calc(100% - 20px);
        height: 44px;
        color: #FFFFFF;
        text-shadow: 0 2px 4px #638AFF;
        line-height: 44px;
        border-radius: 30px;
        background: linear-gradient(180deg, #8AA7FF 0%, #465DFF 100%);
    }
    .img-bg {
        background-size: 100% auto;
        background-position: 0 0;
        background-repeat: no-repeat;
        position: relative;
    }
}
</style>
