<template>
  <view class="login-page">
    <view class="login-body">
      <view class="login-logo">
        <image class="logo-icon" src="/static/logo.png" mode="aspectFit"></image>
      </view>
      <view class="login-title">危废智能管理终端</view>
      <view class="login-subtitle">PDA手持终端版</view>
      
      <view class="login-form">
        <view class="login-input-wrap">
        <input 
          class="login-input" 
          placeholder="请输入账号"
          placeholder-style="color: rgba(255,255,255,0.5)"
          v-model="form.username"
        />
      </view>
      <view class="login-input-wrap">
        <input 
          class="login-input" 
          placeholder="请输入密码"
          placeholder-style="color: rgba(255,255,255,0.5)"
          password
          v-model="form.password"
        />
          <!-- <uni-easyinput class="login-input" type="password" v-model="form.password" placeholder="请输入密码"></uni-easyinput> -->
        </view>
        
        <button class="login-btn" @click="handleLogin">登 录</button>
        
        <!-- <view class="login-remember">
          <checkbox :checked="form.remember" @click="form.remember = !form.remember" color="#fff" />
          <text>记住登录状态</text>
        </view> -->
      </view>
    </view>
    
    <view class="login-version">V{{ version }}</view>
  </view>
</template>

<script>
import { api } from '@/api/index'
export default {
  name: 'LoginPage',
  data() {
    return {
      version: '1.0.0',
      form: {
        username: '',
        password: ''
      }
    }
  },
  onLoad() {
    // #ifdef APP-PLUS
    this.version = plus.runtime.version
    // #endif
  },
  methods: {
    async handleLogin() {
      if (!this.form.username) {
        uni.showToast({ title: '请输入账号', icon: 'none' })
        return
      }
      if (!this.form.password) {
        uni.showToast({ title: '请输入密码', icon: 'none' })
        return
      }
      
      uni.showLoading({ title: '登录中...', mask: true })
      
      try {
        const res = await api.login({
          username: this.form.username,
          password: this.form.password
        })
        
        uni.hideLoading()
        
        if (res.code === 1000) {
          const { token, id, username, is_super, permission_enterprise_ids, device_uuid } = res.data
          
          // 存入 store
          this.$store.dispatch('user/login', {
            token,
            userInfo: {
              id,
              username,
              isSuper: is_super,
              permissionEnterpriseIds: permission_enterprise_ids
            },
            deviceUuid: device_uuid
          })
          
          uni.switchTab({
            url: '/pages/home/home'
          })
        }
      } catch (error) {
        uni.hideLoading()
        // request.js 已统一处理错误提示，此处兜底
        console.error('登录失败:', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
}

.login-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.login-logo {
  margin-bottom: 16px;
  
  .logo-icon {
    width: 80px;
    height: 80px;
  }
}

.login-title {
  color: #ffffff;
  font-size: $font-size-xl;
  font-weight: 700;
  margin-bottom: 6px;
}

.login-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: $font-size-base;
  margin-bottom: 32px;
}

.login-form {
  width: 100%;
}

.login-input-wrap {
  margin-bottom: 14px;
}

.login-input {
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 0 16px;
  color: #ffffff;
  font-size: $font-size-md;
}

.login-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.login-btn {
  width: 100%;
  height: 48px;
  background: #ffffff;
  color: #1890ff;
  border: none;
  border-radius: 10px;
  font-size: $font-size-lg;
  font-weight: 700;
  line-height: 48px;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: $font-size-xs;
  margin-top: 12px;
}

.login-version {
  padding-top: 24px;
  color: rgba(255, 255, 255, 0.5);
  font-size: $font-size-xs;
  text-align: center;
}
</style>
