<template>
    <div class="preview-container">
        <div class="preview_top flex-between">
            <b class="preview-title">实时预览</b>
            <div class="toggle-container">
                <div class="toggle-button" v-if="showPc" :class="{ active: activeView === 'desktop' }"
                    @click="switchView('desktop')">
                    电脑端
                </div>
                <div class="toggle-button" v-if="showMobile" :class="{ active: activeView === 'mobile' }"
                    @click="switchView('mobile')">
                    手机端
                </div>
            </div>
        </div>

        <div class="content-container">
            <!-- 电脑端内容 -->
            <div v-show="activeView === 'desktop'" class="desktop-view">
                <slot name="desktop"></slot>
            </div>

            <!-- 手机端内容 -->
            <div v-show="activeView === 'mobile'" class="mobile-view">
                <slot name="mobile"></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DevicePreview',
    props:{
        showMobile:{
            type:Boolean,
            default:true
        },
        showPc:{
            type:Boolean,
            default:true
        },
    },
    data() {
        return {
            activeView: 'desktop' // 默认显示电脑端
        }
    },
    methods: {
        switchView(view) {
            this.activeView = view;
        }
    }
}
</script>

<style scoped>
.preview-container {
    max-width: 800px;
    min-width: 300px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 4px;
    background: #FAFAFA;
}
.preview_top{
    margin-bottom: 20px;
}

.preview-title {
    text-align: center;
    color: #1E2226;
}

.toggle-container {
    display: flex;
    height: 26px;
    justify-content: center;
    align-items: center;
    padding: 3px 6px;
    border-radius: 4px;
    background: #F2F3F5;
}

.toggle-button {
    padding: 1px 12px;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s ease; 
}

.toggle-button.active {
    color: #006AFF;
    background: #FFFFFF;
}

.toggle-button.active:after {
    /* content: '';
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1890ff; */
}

.content-container {
    /* min-height: 300px;
    padding: 20px;
    border: 2px solid #ffd700;
    border-radius: 4px;
    background-color: #fff; */
}

.desktop-view,
.mobile-view {
    width: 100%;
}
</style>