<template>
  <view class="web-view-container">
    <web-view 
      :src="webUrl" 
      @load="onWebLoad" 
      @error="onWebError"
      @message="onWebMessage"
    ></web-view>
  </view>
</template>

<script>
const modal = uni.requireNativePlugin('modal');
const SpeechTTS = uni.requireNativePlugin('MT-TTS-Speech');
export default {
  data() {
    return {
      webUrl: 'http://192.168.0.12:8800/w/vue_view/',
    };
  },
  onLoad() {
    this.speak_init();
  },
  onUnload() {
    SpeechTTS.destroy();
  },
  methods: {
    speak_init() {
      SpeechTTS.init((callback) => {
        SpeechTTS.setEngine("com.google.android.tts");
        SpeechTTS.setPitch(50);
        SpeechTTS.setSpeed(65);
      });
      SpeechTTS.onDone((res) => {
        console.log("语音播报结束:", res);
      });
    },
    
    onWebLoad(e) {
      console.log('网页加载完成:', e.detail.url);
    },
    
    onWebError(e) {
      console.error('网页加载失败:', e);
      uni.showToast({
        title: '网页加载失败，请检查地址', 
        icon: 'none', 
        duration: 2000
      });
    },
    
    onWebMessage(e) {
      console.log('收到网页消息1:', e.detail);
      if (e.detail && e.detail.data) {
        const msgData = e.detail.data[0]
        SpeechTTS.speak({
          text: msgData.text,
        });
        modal.toast({
          message: msgData.text,
          duration: 6,
        });
      }
    }
  }
};
</script>

<style scoped>
.web-view-container {
  width: 100vw;
  height: 100vh;
  margin: 0 !important; /* 新增：清除容器外边距 */
  padding: 0 !important; /* 新增：清除容器内边距 */
}
uni-web-view, web-view {
  width: 100%;
  height: 100%;
  margin: 0 !important; /* 新增：清除web-view自身占位 */
  padding: 0 !important;
}
</style>