<template>
  <view class="login-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-content">
        <text class="navbar-title">登录</text>
      </view>
    </view>
    
    <!-- 登录内容 -->
    <view class="login-content">
      <!-- Logo区域 -->
      <view class="logo-section">
        <image src="/static/images/logo.png" class="logo" />
        <text class="app-name">保险服务</text>
        <text class="app-desc">专业的保险服务平台</text>
      </view>
      
      <!-- 微信登录按钮 -->
      <view class="login-section">
        <button 
          class="wx-login-btn"
          :disabled="isLogging"
          @tap="handleWxLogin"
        >
          <image src="/static/images/wechat-icon.png" class="wx-icon" />
          <text class="btn-text">{{ isLogging ? '登录中...' : '微信登录' }}</text>
        </button>
        
        <!-- 登录说明 -->
        <view class="login-tips">
          <text class="tip-text">登录即表示同意</text>
          <text class="link-text" @tap="showPrivacyPolicy">《隐私政策》</text>
          <text class="tip-text">和</text>
          <text class="link-text" @tap="showUserAgreement">《用户协议》</text>
        </view>
      </view>
    </view>
    
    <!-- 底部信息 -->
    <view class="footer">
      <text class="footer-text">安全可靠 · 专业服务</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useAppStore } from '@/stores/app'

// 状态管理
const userStore = useUserStore()
const appStore = useAppStore()

// 响应式数据
const isLogging = ref(false)
const statusBarHeight = ref(0)

// 生命周期
onMounted(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
  
  // 检查是否已登录
  if (userStore.isAuthenticated) {
    redirectToHome()
  }
})

/**
 * 微信登录处理
 * 动态调用保险端后端微信认证接口
 */
async function handleWxLogin() {
  if (isLogging.value) return
  
  isLogging.value = true
  
  try {
    console.log('开始微信登录...')
    
    // 显示登录提示
    uni.showLoading({
      title: '登录中...',
      mask: true
    })
    
    // 调用store中的微信登录方法（动态调用保险端后端）
    const result = await userStore.wxLogin()
    
    console.log('微信登录成功:', result)
    
    // 登录成功提示
    uni.showToast({
      title: '登录成功',
      icon: 'success',
      duration: 1500
    })
    
    // 延迟跳转，让用户看到成功提示
    setTimeout(() => {
      redirectToHome()
    }, 1500)
    
  } catch (error) {
    console.error('微信登录失败:', error)
    
    // 处理不同类型的错误
    let errorMsg = '登录失败，请稍后重试'
    
    if (error.message) {
      if (error.message.includes('用户拒绝')) {
        errorMsg = '需要您的授权才能登录'
      } else if (error.message.includes('网络')) {
        errorMsg = '网络连接失败，请检查网络设置'
      } else {
        errorMsg = error.message
      }
    }
    
    uni.showModal({
      title: '登录失败',
      content: errorMsg,
      showCancel: false,
      confirmText: '我知道了'
    })
    
    // 记录错误到应用store
    appStore.addError({
      type: 'login_error',
      message: errorMsg,
      detail: error
    })
    
  } finally {
    isLogging.value = false
    uni.hideLoading()
  }
}

/**
 * 跳转到首页
 */
function redirectToHome() {
  // 使用 reLaunch 重新启动到首页，清除页面栈
  uni.reLaunch({
    url: '/pages/index/index'
  })
}

/**
 * 显示隐私政策
 */
function showPrivacyPolicy() {
  uni.showModal({
    title: '隐私政策',
    content: '我们重视您的隐私，详细的隐私政策请访问官网查看。',
    showCancel: false
  })
}

/**
 * 显示用户协议
 */
function showUserAgreement() {
  uni.showModal({
    title: '用户协议',
    content: '请仔细阅读用户协议条款，详细协议请访问官网查看。',
    showCancel: false
  })
}
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
}

/* 自定义导航栏 */
.custom-navbar {
  position: relative;
  
  .navbar-content {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    .navbar-title {
      font-size: $font-size-lg;
      font-weight: bold;
      color: white;
    }
  }
}

/* 登录内容 */
.login-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60rpx 60rpx 120rpx;
}

/* Logo区域 */
.logo-section {
  text-align: center;
  margin-bottom: 120rpx;
  
  .logo {
    width: 160rpx;
    height: 160rpx;
    border-radius: 32rpx;
    margin-bottom: 40rpx;
  }
  
  .app-name {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: white;
    margin-bottom: 20rpx;
  }
  
  .app-desc {
    font-size: $font-size-md;
    color: rgba(255, 255, 255, 0.8);
  }
}

/* 登录区域 */
.login-section {
  .wx-login-btn {
    width: 100%;
    height: 88rpx;
    background: white;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: $shadow-normal;
    border: none;
    margin-bottom: 40rpx;
    
    &:active {
      transform: scale(0.98);
      transition: transform 0.1s;
    }
    
    &:disabled {
      opacity: 0.6;
    }
    
    .wx-icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 20rpx;
    }
    
    .btn-text {
      font-size: $font-size-lg;
      color: $text-primary;
      font-weight: bold;
    }
  }
  
  .login-tips {
    text-align: center;
    
    .tip-text {
      font-size: $font-size-xs;
      color: rgba(255, 255, 255, 0.7);
    }
    
    .link-text {
      font-size: $font-size-xs;
      color: white;
      text-decoration: underline;
    }
  }
}

/* 底部信息 */
.footer {
  text-align: center;
  padding: 40rpx;
  
  .footer-text {
    font-size: $font-size-sm;
    color: rgba(255, 255, 255, 0.6);
  }
}
</style>