<template>
  <view class="login-container">
    <!-- 顶部标题 -->
    <view class="login-header">
      <text class="login-title">欢迎登录</text>
    </view>

    <!-- 登录方式切换 -->
    <view class="login-tabs">
      <view 
        class="login-tab" 
        :class="{ 'active': loginType === 'account' }"
        @click="loginType = 'account'"
      >
        账号密码
      </view>
      <view 
        class="login-tab" 
        :class="{ 'active': loginType === 'phone' }"
        @click="loginType = 'phone'"
      >
        手机验证码
      </view>
      <view 
        class="login-tab" 
        :class="{ 'active': loginType === 'wx' }"
        @click="loginType = 'wx'"
      >
        微信登录
      </view>
    </view>

    <!-- 登录表单 -->
    <view class="login-form">
      <!-- 账号密码登录 -->
      <view v-if="loginType === 'account'">
        <view class="form-item">
          <input 
            v-model="form.username" 
            type="text" 
            placeholder="请输入用户名/手机号" 
            class="input"
          />
        </view>
        <view class="form-item">
          <input 
            v-model="form.password" 
            type="password" 
            placeholder="请输入密码" 
            class="input"
          />
        </view>
        <view class="form-item captcha">
          <input 
            v-model="form.code" 
            type="text" 
            placeholder="验证码" 
            class="input"
          />
          <image 
            :src="captchaUrl" 
            @click="refreshCaptcha" 
            class="captcha-img"
          />
        </view>
        <button 
          class="login-btn" 
          :disabled="isLogining"
          @click="handleLogin"
        >
          {{ isLogining ? '登录中...' : '登录' }}
        </button>
      </view>

      <!-- 手机验证码登录 -->
      <view v-else-if="loginType === 'phone'">
        <view class="form-item">
          <input 
            v-model="form.phone" 
            type="tel" 
            placeholder="请输入手机号" 
            class="input"
          />
        </view>
        <view class="form-item">
          <input 
            v-model="form.code" 
            type="number" 
            placeholder="请输入验证码" 
            class="input"
          />
          <text 
            v-if="countdown > 0" 
            class="countdown"
          >{{ countdown }}s</text>
          <text 
            v-else 
            class="send-code" 
            @click="sendCode"
          >发送验证码</text>
        </view>
        <button 
          class="login-btn" 
          :disabled="isLogining"
          @click="handleLogin"
        >
          {{ isLogining ? '登录中...' : '登录' }}
        </button>
      </view>

      <!-- 微信登录 -->
      <view v-else-if="loginType === 'wx'">
        <button 
          class="wx-login-btn" 
          @click="wxLogin"
          :disabled="isLogining"
        >
          <image src="/static/icon-wechat.png" class="wx-icon" />
          微信一键登录
        </button>
        <view class="one-click-login" @click="getPhone">
          <image src="/static/icon-phone.png" class="phone-icon" />
          本机一键登录
        </view>
      </view>
    </view>

    <!-- 底部链接 -->
    <view class="login-footer">
      <text class="link" @click="toRegister">注册新账号</text>
      <text class="link" @click="toForget">忘记密码</text>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue';
import { login, getCodeImg, sendPhoneCode, verifyPhoneCode } from '@/api/login';
import { register } from '@/api/system/user';
import { getWxCode } from '@/utils/geek';
import { wxLogin, wxRegister } from '@/api/oauth';
import { setToken } from '@/utils/auth';
import { useUserStore } from '@/store/modules/user';
import modal from '@/plugins/modal';

export default {
  setup() {
    // 当前登录方式 (account/phone/wx)
    const loginType = ref('account');
    // 表单数据
    const form = ref({
      username: '',
      password: '',
      phone: '',
      code: '',
      captcha: ''
    });
    // 验证码图片
    const captchaUrl = ref('');
    // 倒计时（用于发送验证码）
    const countdown = ref(0);
    // 登录中状态
    const isLogining = ref(false);
    // 用户store
    const userStore = useUserStore();

    // 初始化验证码
    const initCaptcha = () => {
      getCodeImg().then(res => {
        captchaUrl.value = res;
      }).catch(() => {
        modal.toast('验证码加载失败');
      });
    };

    // 刷新验证码
    const refreshCaptcha = () => {
      initCaptcha();
    };

    // 发送手机验证码
    const sendCode = () => {
      if (!form.value.phone) {
        modal.toast('请输入手机号');
        return;
      }
      sendPhoneCode({ phone: form.value.phone }).then(() => {
        modal.toast('验证码已发送');
        countdown.value = 60;
        const timer = setInterval(() => {
          countdown.value--;
          if (countdown.value <= 0) clearInterval(timer);
        }, 1000);
      }).catch(err => {
        modal.toast(err.message || '发送失败');
      });
    };

    // 处理登录
    const handleLogin = async () => {
      isLogining.value = true;
      try {
        if (loginType.value === 'account') {
          // 账号密码登录
          if (!form.value.username || !form.value.password || !form.value.code) {
            modal.toast('请填写完整信息');
            return;
          }
          const res = await login(
            form.value.username,
            form.value.password,
            form.value.code,
            ''
          );
          handleLoginSuccess(res);
        } else if (loginType.value === 'phone') {
          // 手机验证码登录
          if (!form.value.phone || !form.value.code) {
            modal.toast('请填写完整信息');
            return;
          }
          // 1. 验证手机验证码
          await verifyPhoneCode({ phone: form.value.phone, code: form.value.code });
          // 2. 检查用户是否存在（自动注册逻辑）
          try {
            // 尝试用手机号登录（后端会自动注册新用户）
            const res = await login(
              form.value.phone,
              '123456', // 默认密码（首次登录自动注册时使用）
              '',
              ''
            );
            handleLoginSuccess(res);
          } catch (err) {
            // 用户不存在，自动注册
            await register({
              username: form.value.phone,
              phonenumber: form.value.phone,
              password: '123456'
            });
            // 注册后重新登录
            const res = await login(
              form.value.phone,
              '123456',
              '',
              ''
            );
            handleLoginSuccess(res);
          }
        }
      } catch (err) {
        modal.toast(err.message || '登录失败');
      } finally {
        isLogining.value = false;
      }
    };

    // 处理登录成功
    const handleLoginSuccess = (res) => {
      setToken(res.token);
      userStore.setUserInfo(res.user);
      uni.switchTab({ url: '/pages/index' });
    };

    // 微信登录
    const wxLogin = async () => {
      isLogining.value = true;
      try {
        const code = await getWxCode();
        const res = await wxLogin('pub', code); // pub: 公众号/小程序
        if (res.token) {
          handleLoginSuccess(res);
        } else {
          modal.toast('微信登录失败，请重试');
        }
      } catch (err) {
        modal.toast('微信登录异常: ' + err.message);
      } finally {
        isLogining.value = false;
      }
    };

    // 本机一键登录（获取手机号）
    const getPhone = async () => {
      try {
        const res = await uni.getPhoneNumber();
        if (res.code === 0) {
          form.value.phone = res.code;
          modal.toast('手机号获取成功');
        } else {
          modal.toast('获取手机号失败');
        }
      } catch (err) {
        modal.toast('获取手机号异常: ' + err.message);
      }
    };

    // 跳转到注册页面
    const toRegister = () => {
      uni.navigateTo({
        url: '/pages_system/pages/login/register'
      });
    };

    // 跳转到忘记密码页面
    const toForget = () => {
      uni.navigateTo({
        url: '/pages_system/pages/login/forget'
      });
    };

    onMounted(() => {
      initCaptcha();
    });

    return {
      loginType,
      form,
      captchaUrl,
      countdown,
      isLogining,
      handleLogin,
      sendCode,
      refreshCaptcha,
      wxLogin,
      getPhone,
      toRegister,
      toForget
    };
  }
};
</script>

<style scoped>
.login-container {
  padding: 40rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.login-header {
  text-align: center;
  margin-bottom: 80rpx;
}

.login-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.login-tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 60rpx;
}

.login-tab {
  padding: 16rpx 32rpx;
  border-radius: 40rpx;
  border: 1px solid #ddd;
  font-size: 28rpx;
  color: #666;
}

.login-tab.active {
  background: #007AFF;
  color: white;
  border-color: #007AFF;
}

.login-form {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
}

.form-item {
  margin-bottom: 30rpx;
  position: relative;
}

.input {
  width: 100%;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 12rpx;
  font-size: 28rpx;
}

.captcha {
  display: flex;
  align-items: center;
}

.captcha-img {
  width: 200rpx;
  height: 80rpx;
  margin-left: 20rpx;
  border-radius: 10rpx;
  background: #f0f0f0;
}

.countdown {
  color: #007AFF;
  font-size: 26rpx;
  margin-left: 10rpx;
}

.send-code {
  color: #007AFF;
  font-size: 26rpx;
  margin-left: 10rpx;
}

.login-btn {
  background: #007AFF;
  color: white;
  border-radius: 12rpx;
  font-size: 32rpx;
  height: 88rpx;
  line-height: 88rpx;
}

.wx-login-btn {
  background: #07C160;
  color: white;
  border-radius: 12rpx;
  font-size: 32rpx;
  height: 88rpx;
  line-height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
}

.wx-icon {
  width: 40rpx;
  height: 40rpx;
}

.one-click-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  color: #666;
  font-size: 28rpx;
  margin-top: 30rpx;
  padding: 16rpx;
  border-radius: 12rpx;
  background: #f5f5f5;
}

.phone-icon {
  width: 36rpx;
  height: 36rpx;
}

.login-footer {
  text-align: center;
  margin-top: 60rpx;
  color: #999;
  font-size: 28rpx;
}

.link {
  color: #007AFF;
  margin: 0 20rpx;
}
</style>