<template>
    <view class="bridge-container">
        <!-- 桥接状态指示器 -->
        <view class="status-indicator" :class="{ connected: isConnected }">
            <text class="status-text">{{ isConnected ? '已连接' : '未连接' }}</text>
        </view>

        <!-- 调试信息 -->
        <view v-if="showDebug" class="debug-panel">
            <text class="debug-title">调试信息</text>
            <text class="debug-item">当前URL: {{ currentUrl }}</text>
            <text class="debug-item">连接状态: {{ isConnected ? '已连接' : '未连接' }}</text>
            <text class="debug-item">消息计数: {{ messageCount }}</text>
        </view>
    </view>
</template>

<script>
import config from '../config.js';

export default {
    name: 'WebViewBridge',
    props: {
        showDebug: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isConnected: false,
            currentUrl: '',
            messageCount: 0
        }
    },
    mounted() {
        this.initBridge();
    },
    methods: {
        initBridge() {
            this.currentUrl = config.webConfig.mainUrl;
            this.checkConnection();
        },

        checkConnection() {
            // 检查桥接连接状态
            if (window.uniAppBridge) {
                this.isConnected = true;
            } else {
                this.isConnected = false;
            }
        },

        // 发送消息到网页
        sendMessage(type, data) {
            if (this.isConnected) {
                this.messageCount++;
                window.uniAppBridge.postMessage(type, data);
            }
        },

        // 获取用户信息
        getUserInfo() {
            this.sendMessage('getUserInfo', {});
        },

        // 获取设备信息
        getDeviceInfo() {
            this.sendMessage('getDeviceInfo', {});
        }
    }
}
</script>

<style scoped>
.bridge-container {
    padding: 10px;
}

.status-indicator {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 15px;
    background-color: #ff6b6b;
    transition: background-color 0.3s;
}

.status-indicator.connected {
    background-color: #51cf66;
}

.status-text {
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.debug-panel {
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

.debug-title {
    font-weight: bold;
    font-size: 14px;
    color: #495057;
    margin-bottom: 5px;
    display: block;
}

.debug-item {
    font-size: 12px;
    color: #6c757d;
    display: block;
    margin-bottom: 3px;
}
</style>