<!--pages/login/login.wxml-->
<view class="container">
  <!-- 顶部装饰 -->
  <view class="header-decoration">
    <view class="decoration-circle circle-1"></view>
    <view class="decoration-circle circle-2"></view>
    <view class="decoration-circle circle-3"></view>
  </view>

  <!-- 登录表单 -->
  <view class="login-form">
    <!-- Logo区域 -->
    <view class="logo-section">
      <view class="logo-icon">🛡️</view>
      <text class="app-name">生资保险</text>
      <text class="app-slogan">专业、安全的养殖保险平台</text>
    </view>

    <!-- 登录方式切换 -->
    <view class="login-tabs">
      <view 
        class="tab-item {{loginType === 'password' ? 'active' : ''}}"
        bindtap="switchLoginType"
        data-type="password"
      >
        <text>密码登录</text>
      </view>
      <view 
        class="tab-item {{loginType === 'sms' ? 'active' : ''}}"
        bindtap="switchLoginType"
        data-type="sms"
      >
        <text>短信登录</text>
      </view>
    </view>

    <!-- 密码登录表单 -->
    <view wx:if="{{loginType === 'password'}}" class="form-content">
      <view class="input-group">
        <view class="input-wrapper">
          <view class="input-icon">📱</view>
          <input 
            class="form-input"
            type="text"
            placeholder="请输入用户名或手机号"
            value="{{formData.phone}}"
            bindinput="onPhoneInput"
            maxlength="20"
          />
        </view>
        <view class="input-wrapper">
          <view class="input-icon">🔒</view>
          <input 
            class="form-input"
            type="{{showPassword ? 'text' : 'password'}}"
            placeholder="请输入密码"
            value="{{formData.password}}"
            bindinput="onPasswordInput"
          />
          <view class="password-toggle" bindtap="togglePassword">
            <text>{{showPassword ? '👁️' : '👁️‍🗨️'}}</text>
          </view>
        </view>
      </view>

      <view class="form-options">
        <view class="remember-me">
          <checkbox 
            checked="{{rememberMe}}"
            bindchange="onRememberChange"
            color="#1890ff"
          />
          <text class="remember-text">记住密码</text>
        </view>
        <text class="forgot-password" bindtap="goToForgotPassword">忘记密码？</text>
      </view>

      <button 
        class="login-btn {{canLogin ? 'active' : 'disabled'}}"
        bindtap="onPasswordLogin"
        disabled="{{!canLogin || loading}}"
      >
        {{loading ? '登录中...' : '登录'}}
      </button>
    </view>

    <!-- 短信登录表单 -->
    <view wx:if="{{loginType === 'sms'}}" class="form-content">
      <view class="input-group">
        <view class="input-wrapper">
          <view class="input-icon">📱</view>
          <input 
            class="form-input"
            type="text"
            placeholder="请输入用户名或手机号"
            value="{{formData.phone}}"
            bindinput="onPhoneInput"
            maxlength="20"
          />
        </view>
        <view class="input-wrapper sms-input">
          <view class="input-icon">📨</view>
          <input 
            class="form-input"
            type="number"
            placeholder="请输入验证码"
            value="{{formData.smsCode}}"
            bindinput="onSmsCodeInput"
            maxlength="6"
          />
          <button 
            class="sms-btn {{smsCountdown > 0 ? 'disabled' : 'active'}}"
            bindtap="sendSmsCode"
            disabled="{{smsCountdown > 0 || !isValidPhone}}"
          >
            {{smsCountdown > 0 ? smsCountdown + 's' : '获取验证码'}}
          </button>
        </view>
      </view>

      <button 
        class="login-btn {{canSmsLogin ? 'active' : 'disabled'}}"
        bindtap="onSmsLogin"
        disabled="{{!canSmsLogin || loading}}"
      >
        {{loading ? '登录中...' : '登录'}}
      </button>
    </view>

    <!-- 其他登录方式 -->
    <view class="other-login">
      <view class="divider">
        <text class="divider-text">其他登录方式</text>
      </view>
      
      <view class="social-login">
        <button class="social-btn wechat-btn" bindtap="onWechatLogin">
          <text class="social-icon">💬</text>
          <text class="social-text">微信登录</text>
        </button>
      </view>
    </view>

    <!-- 注册提示 -->
    <view class="register-tip">
      <text class="tip-text">还没有账号？</text>
      <text class="register-link" bindtap="goToRegister">立即注册</text>
    </view>


  </view>
</view>