<template>
  <div class="container">
    <div class="login-container">
      <div class="login-header">
        <van-image
          class="login-logo"
          width="90px"
          height="90px"
          round
          src="/xmsu7.jpg"
          fit="cover"
        />
        <div class="login-title">警务通</div>
        <div class="login-subtitle">登录后体验更多功能</div>
      </div>

      <div class="login-form">
        <van-cell-group inset class="form-group">
          <van-field
            v-model="username"
            left-icon="contact"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            @focus="handleFocus"
            @blur="handleBlur"
          />
          <div class="divider"></div>
          <van-field
            v-model="password"
            type="password"
            left-icon="lock"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            @focus="handleFocus"
            @blur="handleBlur"
          />
        </van-cell-group>

        <div class="login-options">
          <van-checkbox v-model="rememberPassword" icon-size="16px" checked-color="#1989fa">
            记住密码
          </van-checkbox>
          <span class="forget-password">忘记密码?</span>
        </div>

        <div class="login-button-area">
          <van-button
            round
            block
            type="primary"
            :loading="loginLoading"
            class="login-btn"
            @click="handleLogin"
          >
            登录
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  import { useRouter } from 'vue-router'
  import useUserStore from '@/store/modules/user'
  import { getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance()

  const userStore = useUserStore()
  const router = useRouter()
  // 登录状态
  const loginLoading = ref(false)

  // 登录表单数据
  const username = ref('')
  const password = ref('')
  const rememberPassword = ref(false)

  // 处理输入框聚焦事件
  const handleFocus = () => {
    // 阻止页面滚动
    document.body.style.position = 'fixed'
    document.body.style.width = '100%'
  }

  // 处理输入框失焦事件
  const handleBlur = () => {
    // 恢复页面滚动
    document.body.style.position = ''
    document.body.style.width = ''
  }

  // 处理登录
  const handleLogin = () => {
    if (!username.value || !password.value) {
      proxy.$showToast('请输入用户名和密码')
      return
    }

    loginLoading.value = true

    // 模拟登录请求
    setTimeout(() => {
      loginLoading.value = false
      userStore.isLoggedIn = true
      router.push('/')
      proxy.$showSuccessToast('登录成功')
    }, 1500)
  }

  // 阻止iOS设备上的视口调整
  const preventViewportChange = () => {
    const meta = document.createElement('meta')
    meta.name = 'viewport'
    meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
    document.head.appendChild(meta)
    return meta
  }

  let metaTag = null

  onMounted(() => {
    metaTag = preventViewportChange()

    // 监听软键盘弹出和收起
    window.addEventListener('resize', handleResize)
  })

  onBeforeUnmount(() => {
    if (metaTag) {
      document.head.removeChild(metaTag)
    }
    window.removeEventListener('resize', handleResize)
  })

  // 处理窗口大小变化
  const handleResize = () => {
    // 当键盘弹出时，滚动到输入框位置
    const activeElement = document.activeElement
    if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
      setTimeout(() => {
        activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
      }, 300)
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 60px;
    background: linear-gradient(135deg, #cfeafe 0%, #f0f7ff 50%, #ffffff 100%);
    position: relative;
    overflow-y: auto;

    // 登录界面样式
    .login-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 20px;
      min-height: 100vh;

      .login-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 50px;
        margin-top: 8vh;

        .login-logo {
          margin-bottom: 20px;
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }

        .login-title {
          font-size: 28px;
          font-weight: bold;
          margin-bottom: 10px;
          background: linear-gradient(to right, #1989fa, #39b9fa);
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
        }

        .login-subtitle {
          font-size: 15px;
          color: #666;
        }
      }

      .login-form {
        width: 100%;

        .form-group {
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

          :deep(.van-field) {
            padding: 15px 16px;
          }

          .divider {
            height: 1px;
            background-color: #f5f5f5;
            margin: 0 16px;
          }
        }

        .login-options {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 16px;

          .forget-password {
            color: #1989fa;
            font-size: 14px;
          }
        }

        .login-button-area {
          padding: 20px 16px;

          .login-btn {
            height: 44px;
            font-size: 16px;
            font-weight: 500;
            background: linear-gradient(to right, #1989fa, #39b9fa);
            border: none;
            box-shadow: 0 4px 8px rgba(25, 137, 250, 0.3);
          }
        }
      }
    }
  }

  // 适配iOS设备
  @supports (-webkit-touch-callout: none) {
    .container {
      padding-bottom: 80px;
    }
  }
</style>
