<template>
  <div class="h5-root">
    <header class="h5-header">
      <h1>欢迎来到 H5 页面（示例）</h1>
      <p class="hint">此页面为移动端样式示例，仅在移动视口下呈现最佳体验</p>
    </header>

    <main class="h5-body">
      <div class="card">
        <p class="lead">这是一个简单的移动端页面示例。</p>
        <ul>
          <li>独立路由：/h5</li>
          <li>演示子页面：/h5/demo</li>
          {{ logStr }}
        </ul>
        <div id="ww_login" class="w-[200px] h-[200px] border"></div>
        <el-button type="primary" size="large"><router-link to="/h5/demo">前往 H5 Demo</router-link></el-button>
      </div>
    </main>

    <!-- 桌面提示，仅在较宽屏幕下显示 -->
    <div class="desktop-warning">请用手机或缩小浏览器窗口预览移动端效果</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
// import * as ww from '@wecom/jssdk'

const logStr = ref('')

onMounted(() => {
  // alert(ww.SDK_VERSION)
  // 初始化登录组件
  // try {
  //   const wwLogin = ww.createWWLoginPanel({
  //     el: '#ww_login',
  //     params: {
  //       login_type: ww.WWLoginType.corpApp,
  //       appid: 'ww600785d3771483d9',
  //       agentid: '1000002',
  //       redirect_uri: 'http://192.168.2.65:8888/#/h5/demo',
  //       state: 'loginState',
  //       redirect_type: ww.WWLoginRedirectType.callback,
  //     },
  //     onCheckWeComLogin({ isWeComLogin }) {
  //       alert(isWeComLogin)
  //       console.log(isWeComLogin)
  //       logStr.value = String(isWeComLogin)
  //     },
  //     onLoginSuccess({ code }) {
  //       alert(code)
  //       console.log({ code })
  //       logStr.value = code
  //     },
  //     onLoginFail(err) {
  //       alert(JSON.stringify(err))
  //       console.log(err)
  //       logStr.value = JSON.stringify(err)
  //     },
  //   })
  // } catch (e) {
  //   logStr.value = JSON.stringify(e)
  // }
})
</script>

<style scoped>
.h5-root{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,#f6f7fb);padding:16px;box-sizing:border-box}
.h5-header{margin-top:24px;text-align:center}
.h5-header h1{font-size:20px;margin:0 0 6px}
.h5-header .hint{color:#888;margin:0;font-size:12px}
.h5-body{flex:1;display:flex;align-items:center;justify-content:center}
.card{width:100%;max-width:440px;background:#fff;border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.06);}
.lead{font-size:14px;margin-bottom:8px}
.btn{display:inline-block;margin-top:12px;padding:8px 14px;background:#1f7ef3;color:#fff;border-radius:8px;text-decoration:none}

/* 桌面提示，仅在宽屏下可见 */
.desktop-warning{display:none;position:fixed;left:0;right:0;bottom:20px;margin:auto;max-width:720px;background:#fff5cc;color:#6a4500;border-radius:8px;padding:12px;text-align:center;box-shadow:0 8px 24px rgba(30,30,30,.1)}

@media (min-width:900px){
  .h5-body{padding:64px}
  .desktop-warning{display:block}
}

</style>
