<template>
  <view class="page">
    <view class="header">
      <view class="title">WV测试（WebView）</view>
      <button size="mini" type="primary" @click="sendSavedText">发送文本</button>
    </view>
    <view class="status">
      当前存储：<text class="value">{{ savedText || '暂无' }}</text>
    </view>
    <web-view
      class="webview"
      :src="h5Url"
      id="wv-webview"
      @message="handleH5Message"
    ></web-view>
  </view>
</template>

<script>
import { STORAGE_KEYS } from '@/common/env';
import { ensureAppConfig, getWebviewBaseUrl } from '@/common/app-config';

const STORAGE_KEY = 'demo_saved_text';

export default {
  data() {
    return {
      h5Url: '',
      savedText: '',
      baseUrl: ''
    };
  },
  async onShow() {
    const token = uni.getStorageSync(STORAGE_KEYS.TOKEN);
    if (!token) {
      uni.navigateTo({ url: '/pages/login/login' });
      return;
    }
    try {
      await ensureAppConfig();
    } catch (e) {
      return;
    }
    this.savedText = uni.getStorageSync(STORAGE_KEY) || '';
    this.initH5Url();
  },
  methods: {
    initH5Url() {
      const baseUrl = getWebviewBaseUrl();
      if (!baseUrl) {
        uni.showModal({
          title: '提示',
          content: '配置获取失败，请退出小程序重新打开。',
          showCancel: false
        });
        return;
      }
      this.baseUrl = baseUrl;
      this.refreshH5Url();
    },
    handleH5Message(e) {
      const detail = e.detail || {};
      const payload = Array.isArray(detail.data) ? detail.data[0] : detail.data;
      if (!payload) return;

      console.log('H5消息：', payload.type);
    },
    refreshH5Url() {
      if (!this.baseUrl) return;
      const text = encodeURIComponent(this.savedText || '');
      const sep = this.baseUrl.includes('?') ? '&' : '?';
	  // this.baseUrl = `https://zsb.yitisheng.vip`;
      this.h5Url = `${this.baseUrl}`+`${sep}text=${text}&t=${Date.now()}`;
    },
    sendSavedText() {
      this.savedText = uni.getStorageSync(STORAGE_KEY) || '';
      this.refreshH5Url();
    }
  }
};
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f6f7fb;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 32rpx 0;
}

.title {
  font-size: 30rpx;
  font-weight: 600;
}

.status {
  padding: 8rpx 32rpx 16rpx;
  font-size: 24rpx;
  color: #5b6777;
}

.value {
  color: #1f2d3d;
}

.webview {
  flex: 1;
}
</style>
