<template>
    <view class="overlay" v-show="show">
        <view class="main" :style="{'width':width+'rpx'}">
            <view class="top" >
                <view class="title">{{title}}</view>
                <view class="content">{{content}}</view>
            </view>
            <view class="bottom">
                <view class="close" @click="close">取消</view>
                <view class="submit" @click="ok">确定</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            show: {
                type:Boolean,
                default() {
                    return false
                }
            },
            width: {
                type:Number,
                default() {
                    return 614
                }
            },
            title: {
                type:String,
                default() {
                    return '标题'
                }
            },
            content: {
                type: String,
                default() {
                    return '内容'
                }
            },
        },
        data() {
            return {
            }
        },
        methods: {
            close() {
                this.$emit('close')
            },
            ok() {
                this.$emit('ok')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .overlay {
        background-color: #0000003d;
        height: 100vh;
        width: 100%;
        z-index: 999;

        .main {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: white;

            .top {
                padding: 60rpx 100rpx 0rpx 98rpx;

                .title {
                    text-align: center;
                    font-size: 32rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                }

                .content {
                    margin-top: 38.77rpx;
                    margin-bottom: 55rpx;
                    text-align: center;
                    font-size: 32rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #666666;
                    line-height: 44rpx;
                }
            }

            .bottom {
                display: flex;
                border-top: 2rpx solid #ECECEC;

                .close {
                    text-align: center;
                    width: 100%;
                    height: 106rpx;
                    line-height: 106rpx;
                    font-size: 32rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #666666;
                    border-right: 2px solid #ECECEC;
                }

                .submit { 
                    text-align: center;
                    width: 100%;
                    height: 106rpx;
                    line-height: 106rpx;
                    font-size: 32rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
            }
        }


    }
</style>