<template>
  <view class="login-page">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 头部区域 -->
    <view class="header">
      <view class="back-btn" @click="handleBack" v-if="showBack">
        <text class="back-icon">‹</text>
      </view>
      <view class="header-title">登录</view>
    </view>

    <!-- 登录内容区 -->
    <view class="login-content">
      <!-- Logo区域 -->
      <!-- <view class="logo-section">
        <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      </view> -->

      <!-- 登录表单 -->
      <view class="login-form">
        <!-- 手机号输入 -->
        <view class="form-item">
          <view class="input-wrapper">
            <text class="input-label">手机号</text>
            <input
              class="input-field"
              type="number"
              v-model="formData.mobile"
              placeholder="请输入手机号"
              maxlength="11"
            />
          </view>
        </view>

        <!-- 密码输入 -->
        <view class="form-item">
          <view class="input-wrapper">
            <text class="input-label">密码</text>
            <input
              class="input-field"
              :type="showPassword ? 'text' : 'password'"
              v-model="formData.password"
              placeholder="请输入密码"
            />
            <view class="password-toggle" @click="togglePassword">
              <text class="toggle-icon">{{ showPassword ? '👁️' : '👁️‍🗨️' }}</text>
            </view>
          </view>
        </view>

        <!-- 登录按钮 -->
        <button
          class="login-btn"
          :class="{ disabled: !canLogin }"
          :disabled="!canLogin || loading"
          @click="handleLogin"
        >
          {{ loading ? '登录中...' : '登录' }}
        </button>

        <!-- 分割线 -->
        <view class="divider">
          <view class="divider-line"></view>
          <text class="divider-text">或</text>
          <view class="divider-line"></view>
        </view>

        <!-- 小程序一键授权登录 -->
        <!-- #ifdef MP-WEIXIN -->
        <button
          class="wechat-login-btn"
          open-type="getPhoneNumber"
          @getphonenumber="handleGetPhoneNumber"
          :disabled="loading"
        >
          <text>一键授权手机号快速登录</text>
        </button>
        <!-- #endif -->

        <!-- #ifndef MP-WEIXIN -->
        <view class="wechat-login-tip">
          <text>小程序一键授权登录仅支持微信小程序环境</text>
        </view>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import { login, loginByPhone } from '@/api/auth.js'
import { getUserInfo } from '@/api/profile.js'

export default {
  data() {
    return {
      statusBarHeight: 0,
      showBack: false,
      loading: false,
      showPassword: false,
      formData: {
        mobile: '',
        password: ''
      }
    }
  },
  computed: {
    // 判断是否可以登录
    canLogin() {
      return (
        this.formData.mobile.length === 11 &&
        this.formData.password.length > 0
      )
    }
  },
  onLoad(options) {
    // 检查是否已登录
    const token = uni.getStorageSync('token')
    if (token) {
      // 已登录，跳转到首页
      uni.switchTab({
        url: '/pages/index/index',
        fail: () => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }
      })
      return
    }
    
    // 判断是否显示返回按钮（从其他页面跳转过来时显示）
    const pages = getCurrentPages()
    if (pages.length > 1) {
      this.showBack = true
    }
    this.getSystemInfo()
  },
  methods: {
    // 获取系统信息
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
    },

    // 返回上一页
    handleBack() {
      uni.navigateBack()
    },

    // 切换密码显示/隐藏
    togglePassword() {
      this.showPassword = !this.showPassword
    },

    // 账户密码登录
    async handleLogin() {
      if (!this.canLogin) {
        uni.showToast({
          title: '请填写完整的登录信息',
          icon: 'none'
        })
        return
      }

      // 验证手机号格式
      const mobileReg = /^1[3-9]\d{9}$/
      if (!mobileReg.test(this.formData.mobile)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }

      this.loading = true
      try {
        const res = await login({
          mobile: this.formData.mobile,
          password: this.formData.password
        })

        // 登录成功，保存token（兼容不同的响应格式）
        const token = res?.accessToken || res?.token || res?.data?.accessToken || res?.data?.token
        if (token) {
          uni.setStorageSync('token', token)
        }

        // 保存refreshToken（用于刷新accessToken）
        const refreshToken = res?.refreshToken || res?.data?.refreshToken
        if (refreshToken) {
          uni.setStorageSync('refreshToken', refreshToken)
        }

        // 保存token过期时间
        const expiresTime = res?.expiresTime || res?.data?.expiresTime
        if (expiresTime) {
          uni.setStorageSync('tokenExpiresTime', expiresTime)
        }

        // 保存用户ID
        const userId = res?.userId || res?.data?.userId
        if (userId) {
          uni.setStorageSync('userId', userId)
        }

        // 保存用户信息（如果有）
        const userInfo = res?.userInfo || res?.data?.userInfo || res?.user || res?.data?.user
        if (userInfo) {
          uni.setStorageSync('userInfo', userInfo)
        }

        // 登录成功后，调用个人信息接口获取完整用户信息
        try {
          const userInfoRes = await getUserInfo()
          if (userInfoRes && userInfoRes.data) {
            // 根据接口返回的数据结构，保存 res.data
            uni.setStorageSync('userInfo', userInfoRes.data)
          } else if (userInfoRes) {
            // 兼容直接返回数据的情况
            uni.setStorageSync('userInfo', userInfoRes)
          }
        } catch (error) {
          console.error('获取用户信息失败:', error)
          // 获取用户信息失败不影响登录流程，继续执行
        }

        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })

        // 延迟跳转，让用户看到成功提示
        setTimeout(() => {
          // 检查是否有返回路径
          const pages = getCurrentPages()
          if (pages.length > 1) {
            // 有上一页，返回上一页
            uni.navigateBack()
          } else {
            // 没有上一页，跳转到首页
            uni.switchTab({
              url: '/pages/index/index'
            })
          }
        }, 1500)
      } catch (error) {
        console.error('登录失败:', error)
        // 错误信息已在request中统一处理，这里不需要再次提示
      } finally {
        this.loading = false
      }
    },

    // 小程序一键授权手机号登录
    async handleGetPhoneNumber(e) {
      console.log('获取手机号授权结果:', e)
      
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
        this.loading = true
        try {
          // 获取微信登录code（用于后端解密手机号）
          const loginRes = await new Promise((resolve, reject) => {
            uni.login({
              provider: 'weixin',
              success: resolve,
              fail: reject
            })
          })

          // 调用登录接口
          // 注意：这里需要根据后端实际接口要求传递参数
          // 通常需要传递 code、encryptedData、iv 等参数
          const res = await loginByPhone({
            code: loginRes.code,
            encryptedData: e.detail.encryptedData,
            iv: e.detail.iv
          })

        // 登录成功，保存token（兼容不同的响应格式）
        const token = res?.token || res?.data?.token || res?.accessToken || res?.access_token
        if (token) {
          uni.setStorageSync('token', token)
        }

        // 保存refreshToken（用于刷新accessToken）
        const refreshToken = res?.refreshToken || res?.data?.refreshToken
        if (refreshToken) {
          uni.setStorageSync('refreshToken', refreshToken)
        }

        // 保存token过期时间
        const expiresTime = res?.expiresTime || res?.data?.expiresTime
        if (expiresTime) {
          uni.setStorageSync('tokenExpiresTime', expiresTime)
        }

        // 保存用户ID
        const userId = res?.userId || res?.data?.userId
        if (userId) {
          uni.setStorageSync('userId', userId)
        }

        // 保存用户信息（如果有）
        const userInfo = res?.userInfo || res?.data?.userInfo || res?.user || res?.data?.user
        if (userInfo) {
          uni.setStorageSync('userInfo', userInfo)
        }

        // 登录成功后，调用个人信息接口获取完整用户信息
        try {
          const userInfoRes = await getUserInfo()
          uni.setStorageSync('userInfo', userInfoRes)
        } catch (error) {
          console.error('获取用户信息失败:', error)
        }

        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })

        // 延迟跳转
        setTimeout(() => {
          const pages = getCurrentPages()
          if (pages.length > 1) {
            uni.navigateBack()
          } else {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }
        }, 1500)
        } catch (error) {
          console.error('一键登录失败:', error)
          // 错误信息已在request中统一处理
        } finally {
          this.loading = false
        }
      } else {
        uni.showToast({
          title: '授权失败，请重试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #e2e8f1 0%, #ffffff 100%);
}

.status-bar {
  background-color: transparent;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20rpx 0;
  background-color: transparent;

  .back-btn {
    position: absolute;
    left: 30rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .back-icon {
      font-size: 60rpx;
      color: #333333;
      line-height: 1;
    }
  }

  .header-title {
    font-size: 36rpx;
    font-weight: 500;
    color: #1a1819;
  }
}

.login-content {
  padding: 60rpx 60rpx 0;
}

.logo-section {
  display: flex;
  justify-content: center;
  margin-bottom: 80rpx;

  .logo {
    width: 200rpx;
    height: 200rpx;
  }
}

.login-form {
  .form-item {
    margin-bottom: 40rpx;

    .input-wrapper {
      position: relative;
      background-color: #ffffff;
      border-radius: 16rpx;
      padding: 30rpx 24rpx;
      display: flex;
      align-items: center;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

      .input-label {
        width: 120rpx;
        font-size: 28rpx;
        color: #333333;
        font-weight: 500;
        flex-shrink: 0;
      }

      .input-field {
        flex: 1;
        font-size: 28rpx;
        color: #1a1819;
      }

      .password-toggle {
        width: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .toggle-icon {
          font-size: 32rpx;
        }
      }
    }
  }

  .login-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #004294 0%, #0066cc 100%);
    border-radius: 44rpx;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
    border: none;
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      border: none;
    }

    &.disabled {
      background: #cccccc;
      color: #999999;
    }
  }

  .divider {
    display: flex;
    align-items: center;
    margin: 60rpx 0 40rpx;
    padding: 0 20rpx;

    .divider-line {
      flex: 1;
      height: 1rpx;
      background-color: #e0e0e0;
    }

    .divider-text {
      margin: 0 20rpx;
      font-size: 24rpx;
      color: #999999;
    }
  }

  .wechat-login-btn {
    width: 100%;
    height: 88rpx;
    background-color: #07c160;
    border-radius: 44rpx;
    color: #ffffff;
    font-size: 28rpx;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;

    &::after {
      border: none;
    }

    .wechat-icon {
      font-size: 36rpx;
    }
  }

  .wechat-login-tip {
    text-align: center;
    padding: 40rpx 0;
    font-size: 24rpx;
    color: #999999;
  }
}
</style>
