<template>
  <view class="login-page">
    <!-- 登录表单 -->
    <view class="login-container">
      <!-- 标题 -->
      <view class="title-section">
        <text class="title">现在登录</text>
        <text class="subtitle">欢迎回来，有好多小伙伴在思念你！</text>
      </view>
       
      <!-- 输入框区域 -->
      <view class="input-section">
        <view class="input-item">
          <text class="label">账号</text>
          <input 
            v-model="formData.mobile"
            type="number"
            maxlength="11"
            placeholder="请输入手机号"
            placeholder-class="placeholder"
            class="input"
          />
        </view>
        
        <view class="input-item">
          <text class="label">密码</text>
          <input 
            v-model="formData.password"
            password="true"
            placeholder="请输入密码"
            placeholder-class="placeholder"
            class="input"
          />
          <text class="forgot-text" @click="goToResetPassword">忘记</text>
        </view>
      </view>
      
      <!-- 登录按钮 -->
      <button 
        class="login-btn"
        :class="{ 'disabled': !canLogin }"
        :disabled="!canLogin"
        :loading="logging"
        @click="handleLogin"
      >
        {{ logging ? '登录中...' : '登录' }}
      </button>
      
      <!-- 注册入口 -->
      <view class="register-section">
        <text>还没有账号？</text>
        <text class="register-link" @click="goToRegister">注册</text>
      </view>
    </view>
  </view>
</template>

<script>
import { userLogin } from '@/api/miao.js';
import store from '@/store';
import { LOGIN_STATUS, USER_INFO, EXPIRES_TIME, BACK_URL } from '@/config/cache';
import Cache from '@/utils/cache';

export default {
  data() {
    return {
      formData: {
        mobile: '',
        password: ''
      },
      logging: false
    }
  },
  
  computed: {
    canLogin() {
      return this.formData.mobile.length === 11 && this.formData.password.length >= 6;
    }
  },
  
  methods: {
    // 验证手机号
    validateMobile(mobile) {
      const reg = /^1[3-9]\d{9}$/;
      return reg.test(mobile);
    },
    
    // 登录
    async handleLogin() {
      if (!this.validateMobile(this.formData.mobile)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      
      if (this.formData.password.length < 6) {
        uni.showToast({
          title: '密码长度不能少于6位',
          icon: 'none'
        });
        return;
      }
      
      this.logging = true;
      
      try {
        // 调用登录API
        const res = await userLogin({
          account: this.formData.mobile,
          password: this.formData.password
        });
        
        console.log('登录返回完整数据:', res);
        console.log('data.userInfo:', res.data?.userInfo);
        
        if (res.code === 0) {
          // 检查userInfo和token是否存在
          if (!res.data || !res.data.userInfo || !res.data.userInfo.token) {
            console.error('登录返回数据异常，缺少token:', res);
            uni.showToast({
              title: '登录失败：数据异常',
              icon: 'none'
            });
            return;
          }
          
          const userInfo = res.data.userInfo;
          const token = userInfo.token;
          const uid = userInfo.id || '';
          
          console.log('token值:', token);
          console.log('uid值:', uid);
          console.log('用户信息:', userInfo);
          console.log('开始保存token:', token);
          
          // 计算过期时间（当前时间+7天）
          const newTime = Math.round(new Date() / 1000);
          const expiresTime = newTime + 7 * 24 * 60 * 60;
          
          console.log('过期时间:', expiresTime);
          
          // 保存过期时间到缓存
          Cache.set(EXPIRES_TIME, expiresTime);
          
          // 保存token到store（这会同时保存到localStorage）
          store.commit('LOGIN', { token: token });
          
          console.log('token已保存到store');
          console.log('store中的token:', store.state.app.token);
          console.log('localStorage中的LOGIN_STATUS_TOKEN:', Cache.get(LOGIN_STATUS));
          
          // 设置UID
          if (uid) {
            store.commit('SETUID', uid);
            console.log('UID已保存:', uid);
          }
          
          // 保存用户信息到store（登录接口已返回完整用户信息，无需再次调用getUserInfo）
          store.commit('UPDATE_USERINFO', userInfo);
          console.log('用户信息已保存到store');
          console.log('localStorage中的USER_INFO:', Cache.get(USER_INFO));
          
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          });
          
          // 获取返回地址，如果没有或返回地址是登录页则跳转到首页
          let backUrl = Cache.get(BACK_URL) || '/pages/index/index';
          if (backUrl.indexOf('/pages/sub-pages/login/index') !== -1) {
            backUrl = '/pages/index/index';
          }
          
          console.log('即将跳转到:', backUrl);
          
          // 延迟跳转，确保数据已保存
          setTimeout(() => {
            uni.reLaunch({
              url: backUrl
            });
          }, 500);
        } else {
          uni.showToast({
            title: res.msg || '登录失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('登录失败:', error);
        uni.showToast({
          title: error.msg || '登录失败，请重试',
          icon: 'none'
        });
      } finally {
        this.logging = false;
      }
    },
    
    // 去注册页
    goToRegister() {
      uni.navigateTo({
        url: '/pages/sub-pages/login/register'
      });
    },
    
    // 去重置密码页
    goToResetPassword() {
      uni.navigateTo({
        url: '/pages/sub-pages/login/reset-account'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-container {
  width: 100%;
  max-width: 600rpx;
  margin-top: 100rpx;
}

.title-section {
  margin-bottom: 80rpx;
  
  .title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20rpx;
  }
  
  .subtitle {
    display: block;
    font-size: 28rpx;
    color: #999999;
    line-height: 1.5;
  }
}

.input-section {
  margin-bottom: 60rpx;
  
  .input-item {
    margin-bottom: 40rpx;
    
    .label {
      display: block;
      font-size: 32rpx;
      color: #333333;
      margin-bottom: 20rpx;
      font-weight: 500;
    }
    
    .input {
      width: 100%;
      height: 90rpx;
      font-size: 30rpx;
      color: #333333;
      padding: 0 20rpx;
      box-sizing: border-box;
      background-color: #f5f5f5;
      border-radius: 10rpx;
    }
    
    .placeholder {
      color: #999999;
    }
    
    .forgot-text {
      display: block;
      text-align: right;
      font-size: 28rpx;
      color: #ff4d4f;
      margin-top: 10rpx;
    }
  }
}

.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #ff4d4f;
  color: #ffffff;
  border-radius: 10rpx;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
  margin-bottom: 30rpx;
  
  &.disabled {
    opacity: 0.6;
  }
}

.register-section {
  text-align: center;
  font-size: 28rpx;
  color: #666666;
  
  .register-link {
    color: #ff4d4f;
    margin-left: 10rpx;
  }
}
</style>

