<template>
  <div class="login-page">
    <div class="login-left"></div>

    <div class="login-right">
      <div class="login-card">
        <div class="corner-qrcode" @click="tab='scan'">
        </div>
        <h2 class="title">账号登录</h2>

        <!-- <div class="tabs">
          <button :class="{active:tab==='account'}" @click="tab='account'">账号登录</button>
          <button :class="{active:tab==='scan'}" @click="tab='scan'">扫码登录</button>
        </div> -->

        <div v-if="tab==='account'" class="form">
          <div class="form-row">
            <label>账号</label>
            <input v-model="username" placeholder="请输入账号" />
          </div>
          <div class="form-row">
            <label>密码</label>
            <input v-model="password" type="password" placeholder="请输入密码" />
          </div>
          <button class="login-btn" @click="onLogin">登录</button>
        </div>

        <div v-else class="qr-area">
          <img :src="qrSrc" alt="qr" class="qr-img" />
          <p class="qr-tip">请使用微信扫码授权登录</p>
          <button class="login-btn" @click="onScanLogin">已扫码，确认登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { apiLogin } from '../api'
const router = useRouter()
const tab = ref('account')
const username = ref('')
const password = ref('')
const qrSrc = ref('https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=wechat-login')

async function onLogin(){
  try{
    // const res = await apiLogin({ username: username.value, password: password.value })
    // if(res && res.token){
      // localStorage.setItem('token', res.token)
      localStorage.setItem('token', '2222222222')
      router.push('/dashboard')
    // } else {
    //   alert('登录失败')
    // }
  } catch(e){
    alert(e?.response?.data?.message || '登录失败')
  }
}

async function onScanLogin(){
  // simulate qr login success, call login with special username 'scan'
  try{
    const res = await apiLogin({ username: 'scan', password: 'scan' })
    if(res && res.token){
      localStorage.setItem('token', res.token)
      router.push('/dashboard')
    }
  } catch(e){
    alert('扫码登录失败')
  }
}
</script>

<style scoped>
.login-page{
  height:100vh;
  display:flex;
  background: url('/src/assets/Rectangle.png') no-repeat;
  background-size: 100% 100%;
  align-items:center;
  justify-content:center;
}
/* left large image-ish area (you can replace with your image) */
.login-left{
  flex:1;
}
/* right card */
.login-right{
  width:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-right:6%;
}
.login-card{
  width:360px;
  background:#fff;
  border-radius:12px;
  padding:60px 28px;
  box-shadow: 0 10px 30px rgba(14,42,51,0.08);
  position:relative;
}
.corner-qrcode{
  position:absolute;
  width: 50px;
  height: 50px;
  right: -3px;
  top: -3px;
  font-size:12px;
  color:#009688;
  cursor:pointer;
  background: url('/src/assets/qrcode.png') no-repeat center;
}
/* title */
.title{
  text-align:center;
  margin:0 0 12px;
  font-size:20px;
  color:#333;
  font-weight:700;
}
/* tabs */
.tabs{ display:flex; gap:10px; justify-content:center; margin-bottom:12px;}
.tabs button{ padding:8px 14px; border-radius:20px; border:none; background:#f3f6f6; cursor:pointer;}
.tabs button.active{ background:#009688; color:#fff; font-weight:600;}

/* form */
.form label{ display:block; margin-top:8px; color:#666; font-size:13px;}
.form input{ width:100%; padding:10px; margin-top:6px; border-radius:6px; border:1px solid #eee; background:#fafafa;}
.login-btn{ width:100%; padding:12px; margin-top:60px; border-radius:16px; border:none; background:#009688; color:#fff; cursor:pointer; font-size:16px;}
.form-row {
  display: flex;
  align-items: center;
  margin-top: 14px;
}

.form-row label {
  width: 46px;        /* 固定宽度 */
  font-size: 14px;
  color: #666;
  flex-shrink: 0;
}

.form-row input {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #eee;
  background: #fafafa;
}
/* qr area */
.qr-area{ text-align:center; margin-top:6px;}
.qr-img{ width:160px; height:160px; display:block; margin:12px auto; border-radius:6px; border:1px solid #eee;}
.qr-tip{ color:#777; font-size:13px; margin-bottom:8px;}

/* responsive */
@media (max-width: 768px){
  .login-page{ align-items:flex-start; padding-top:40px; }
  .login-left{ display:none; }
  .login-right{ width:100%; padding:0 16px; margin:0 auto; }
  .login-card{ width:100%; padding:18px; border-radius:10px; }
  .qr-img{ width:120px; height:120px; }
}
</style>
