<template>
  <div class="login">
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- Logo区域 -->
      <div class="logo-section">
        <div class="logo-wrapper">
          <img src="@/assets/hongqi.png" alt="logo" class="logo-img" />
        </div>
        <div class="brand-info">
          <!-- <h1 class="app-name">智慧政务平台</h1> -->
          <p class="app-desc">让理想飞扬</p>
        </div>
      </div>

      <!-- 登录卡片 -->
      <div class="login-panel">
        <div class="panel-header">
          <h2 class="panel-title">用户登录</h2>
          <div class="panel-divider"></div>
        </div>
        
        <div class="form-container">
          <!-- 浮动标签输入框 -->
          <div class="floating-input">
            <input 
              type="text"
              v-model="phone"
              class="input-field"
              :class="{ 'has-value': phone }"
              maxlength="11"
              required
              @input="validatePhone"
            />
            <label class="input-label">用户名/手机号</label>
            <div class="input-line"></div>
          </div>
          
          <div class="floating-input">
            <input 
              :type="showPassword ? 'text' : 'password'"
              v-model="password"
              class="input-field"
              :class="{ 'has-value': password }"
              maxlength="20"
              required
              @keyup.enter="handleLogin"
            />
            <label class="input-label">登录密码</label>
            <div class="input-line"></div>
          </div>
          
          <!-- 登录按钮 -->
          <button 
            class="login-button"
            :class="{ 'loading': loading }"
            @click="handleLogin"
            :disabled="loading || !canLogin"
          >
            <span v-if="!loading">登录</span>
            <div v-else class="loading-spinner"></div>
          </button>
          
          <!-- 底部链接 -->
          <div class="form-links">
            <router-link to="register" class="link-item">注册新账号</router-link>
            <span class="link-separator">•</span>
            <router-link to="/forget" class="link-item">忘记密码</router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部版权信息 -->
    <div class="footer-info">
      <div class="footer-links">
        <a href="#" class="footer-link">网站声明</a>
        <span class="divider">|</span>
        <a href="#" class="footer-link">隐私政策</a>
        <span class="divider">|</span>
        <a href="#" class="footer-link">中国一汽</a>
      </div>
      <p class="copyright">© 2020中国第一汽车集团有限公司版权所有</p>
      <p class="beian">
        <a href="https://beian.miit.gov.cn/" target="_blank" class="beian-link">
          吉ICP备17008829号-1
        </a>
      </p>
      <p class="police-beian">
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo" target="_blank" class="beian-link">
          吉公网安备 22017102000237 号
        </a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      phone: '',
      password: '',
      showPassword: false,
      rememberMe: false,
      agreeTerms: true,
      loading: false,
      phoneError: '',
      passwordError: ''
    }
  },
  computed: {
    canLogin() {
      return this.phone && 
             this.password && 
             this.agreeTerms && 
             !this.phoneError && 
             !this.passwordError
    }
  },
  methods: {
    validatePhone() {
      this.phoneError = ''
      if (this.phone && !/^1[3-9]\d{9}$/.test(this.phone)) {
        this.phoneError = '请输入正确的手机号'
      }
    },
    async handleLogin() {
      if (!this.canLogin || this.loading) return
      
      if (!this.phone) {
        this.$toast("账号不能为空");
        return;
      }
      if (this.password.length < 6) {
        this.$toast("密码不少于6位");
        return;
      }
      
      this.loading = true
      
      try {
        let data = {
          account: this.phone,
          password: this.password,
          sms_code: "",
          lang: "zh",
          country_code: "+86"
        };
        await this.$store.dispatch("Login", data);
        this.loading = false;
        this.$router.replace("home");
      } catch (error) {
        this.loading = false;
        this.$toast('登录失败，请检查账号密码')
      }
    },
    handleQuickLogin(method) {
      if (!this.agreeTerms) {
        this.$toast('请先同意用户协议和隐私政策')
        return
      }
      
      this.$toast(`${method === 'wechat' ? '微信' : '支付宝'}登录功能开发中`)
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  min-height: 100vh;
  background: linear-gradient(to bottom, #2f9580 0%, #4fb3a1 100%);
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 450px;
  margin: 0 auto;
  width: 100%;
  gap: 40px;
}

.logo-section {
  text-align: center;
  
  .logo-wrapper {
    width: 90px;
    height: 90px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.12),
      inset 0 2px 4px rgba(255, 255, 255, 0.8);
    
    .logo-img {
      width: 55px;
      height: 55px;
      object-fit: contain;
    }
  }
  
  .brand-info {
    .app-name {
      color: #ffffff;
      font-size: 26px;
      font-weight: 700;
      margin: 0 0 8px;
      letter-spacing: 1px;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    }
    
    .app-desc {
      color: rgba(255, 255, 255, 0.9);
      font-size: 14px;
      margin: 0;
      font-weight: 500;
    }
  }
}

.login-panel {
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 20px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  .panel-header {
    text-align: center;
    padding: 32px 32px 0;
    
    .panel-title {
      color: #2f9580;
      font-size: 22px;
      font-weight: 600;
      margin: 0 0 16px;
    }
    
    .panel-divider {
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #2f9580, #4fb3a1);
      border-radius: 2px;
      margin: 0 auto;
    }
  }
  
  .form-container {
    padding: 32px;
    
    .floating-input {
      position: relative;
      margin-bottom: 32px;
      
      .input-field {
        width: 100%;
        height: 56px;
        border: none;
        outline: none;
        background: transparent;
        font-size: 16px;
        color: #2d3748;
        padding: 20px 0 8px 0;
        border-bottom: 2px solid #e2e8f0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        &:focus,
        &.has-value {
          border-bottom-color: #2f9580;
          
          + .input-label {
            transform: translateY(-20px) scale(0.85);
            color: #2f9580;
            font-weight: 500;
          }
        }
        
        &:focus + .input-label + .input-line {
          transform: scaleX(1);
        }
      }
      
      .input-label {
        position: absolute;
        left: 0;
        top: 20px;
        font-size: 16px;
        color: #a0aec0;
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: left top;
      }
      
      .input-line {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #2f9580, #4fb3a1);
        transform: scaleX(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }
    
    .login-button {
      width: 100%;
      height: 52px;
      background: linear-gradient(135deg, #2f9580 0%, #4fb3a1 100%);
      border: none;
      border-radius: 26px;
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(47, 149, 128, 0.3);
      margin-bottom: 24px;
      
      &:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(47, 149, 128, 0.4);
      }
      
      &:active:not(:disabled) {
        transform: translateY(0);
      }
      
      &.loading {
        pointer-events: none;
      }
      
      &:disabled {
        opacity: 0.7;
        cursor: not-allowed;
      }
    }
    
    .loading-spinner {
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top: 2px solid #ffffff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    .form-links {
      text-align: center;
      
      .link-item {
        color: #2f9580;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: color 0.3s ease;
        
        &:hover {
          color: #268371;
        }
      }
      
      .link-separator {
        color: #cbd5e0;
        margin: 0 16px;
        font-weight: bold;
      }
    }
  }
}

.footer-info {
  text-align: center;
  margin-top: 20px;
  
  .footer-links {
    margin-bottom: 16px;
    
    .footer-link {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      font-size: 12px;
      font-weight: 500;
      transition: color 0.3s ease;
      
      &:hover {
        color: #ffffff;
      }
    }
    
    .divider {
      color: rgba(255, 255, 255, 0.8);
      margin: 0 8px;
      font-weight: bold;
    }
  }
  
  .copyright, .beian {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    margin: 4px 0;
    
    a {
      color: inherit;
      text-decoration: none;
      
      &:hover {
        color: #ffffff;
      }
    }
  }
  
  .police-beian {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    margin: 4px 0;
  }
  
  .beian-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
    
    &:hover {
      color: #ffffff;
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .login {
    padding: 16px;
  }
  
  .main-content {
    gap: 32px;
  }
  
  .logo-section {
    .logo-wrapper {
      width: 75px;
      height: 75px;
      margin-bottom: 20px;
      
      .logo-img {
        width: 45px;
        height: 45px;
      }
    }
    
    .brand-info {
      .app-name {
        font-size: 22px;
      }
    }
  }
  
  .login-panel {
    .panel-header {
      padding: 24px 24px 0;
      
      .panel-title {
        font-size: 20px;
      }
    }
    
    .form-container {
      padding: 24px;
      
      .floating-input {
        margin-bottom: 28px;
        
        .input-field {
          height: 50px;
          font-size: 15px;
        }
        
        .input-label {
          font-size: 15px;
        }
      }
      
      .login-button {
        height: 48px;
        font-size: 15px;
      }
    }
  }
}

@media (max-width: 480px) {
  .main-content {
    max-width: 100%;
  }
  
  .login-panel {
    .form-container {
      padding: 20px;
      
      .floating-input {
        margin-bottom: 24px;
      }
    }
  }
}
</style>

<style>
@import url("../components/watch-login/css/icon.css");
</style>

