<template>
        <view class="im-share-modal">
            <view class="pop-box">
                <view class="pop-content">
                    <view class="title color-red">{{data.title}}</view>
                    <view class="tips c-font-small">{{data.tips}}</view>
                    <view class="share-btn c-font-medium" @tap="onBtnTap('shareBtn')">{{data.btnText}}</view>
                </view>
                 <c-icon name="close-circle" class="close-btn" font-size="40px" @tap="onBtnTap('close')"></c-icon>
            </view>
        </view>
</template>

<script>
/**
 * @file 分享弹层
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
import {navigate} from '../../utils/navigate';
import {request} from '../../utils/request';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import * as log from '../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 分享弹层数据
         */
        data: {
            type: Object,
            default: {
                closeType: 'normal'
            }
        }
    },
    created() {
        log.send({
            type: 'b',
            action: 'wz-share-modal-show'
        });
    },
    components: {
        CIcon
    },
    data() {
        return {};
    },
    methods: {
        onBtnTap(type) {
            log.send({
                type: 'b',
                action: 'wz-share-modal-btn',
                extra: {
                    type
                }
            });
            /**
             * 按钮点击
             */
            this.$emit('btnShareTap', type);
        }
    }
};
</script>

<style lang="less" scoped>
.im-share-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    .pop-box {
        position: relative;
    }
    .title {
        width: 100%;
        position: absolute;
        top: 15.92vw;
        text-align: center;
        font-size: 18px;
        color: #fb5d4e;
        font-weight: bold;
    }
    .tips {
        width: 100%;
        position: absolute;
        bottom: 41.46vw;
        color: #b33404;
        font-weight: bold;
        text-align: center;
    }
    .share-btn {
        position: absolute;
        bottom: 10vw;
        left: 0;
        right: 0;
        width: 200px;
        line-height: 11.11vw;
        margin: 0 auto;
        color: #d04400;
        font-weight: bold;
        text-align: center;
    }
    .close-btn {
        width: 100%;
        color: #fff;
        position: absolute;
        bottom: -16.9vw;
        text-align: center;
    }
    .pop-content {
        width: 75vw;
        height: 92.83vw;
        background: #fff;
        border-radius: 13px;
        background: #ffffff;
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
        background: url('https://med-fe.cdn.bcebos.com/wz/wz-coupon-modal-bj.png');
        background-size: 100% 100%;
    }
    .share-img-box {
        position: relative;
        .close-btn {
            bottom: -45px;
            left: 0;
        }
    }
    .share-img {
        width: 75vw;
    }
}
@media only screen and (max-width: 320px) {
    .no-pay-modal-wrap {
        .title {
            font-size: 15px;
            margin-top: -2px;
        }
    }
}
</style>
