<template>
  <view class="index-page">
    <!-- 内容区域 -->
    <view class="content">
      <!-- 上部区域：Logo和标题 -->
      <view class="top-section">
        <!-- Logo区域 -->
        <view class="logo-container">
          <view class="logo-circle">
            <image class="logo-image" src="/static/logo1.png" mode="aspectFit"></image>
          </view>
        </view>
        
        <!-- 应用名称 -->
        <view class="app-title">
          <text class="title-text">上动智联</text>
        </view>
      </view>

      <!-- 登录表单：账号、密码 -->
      <view class="form-section">
        <!-- <view class="form-item">
          <text class="form-label">账号</text>
          <input class="form-input" v-model="username" placeholder="请输入账号" placeholder-class="placeholder" confirm-type="next" />
        </view> -->
        <view class="form-item">
          <text class="form-label">密码</text>
          <input class="form-input" v-model="password" password placeholder="请输入密码" placeholder-class="placeholder" confirm-type="done" />
        </view>
        <view class="action-container">
          <button class="enter-button" @click="navigateToTabBar">
            <text class="button-text">进入系统 →</text>
          </button>
        </view>
      </view>
      
      <!-- 下部区域：按钮和版本号 -->
      <view class="bottom-section">
        <!-- 进入系统按钮 -->
        <!-- <view class="action-container">
          <button class="enter-button" @click="navigateToTabBar">
            <text class="button-text">进入系统 →</text>
          </button>
        </view> -->
        
        <!-- 版本号 -->
        <view class="version-container">
          <text class="version-text">版本 1.0.0</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { manualReconnect } from '@/utils/sendMqtt.js'
import { authApi } from '@/utils/api.js'

export default {
  data() {
    return {
      title: 'Hello',
      username: '',
      password: '',
    }
  },
  computed: {
    canLogin() {
      // return this.username && this.username.trim().length > 0 && this.password && this.password.trim().length > 0
      return this.password && this.password.trim().length > 0
    }
  },
  onLoad() {},
  methods: {
    async navigateToTabBar() {
      if (!this.canLogin) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none',
          duration: 1200
        })
        return
      }
      // 先登录
      try {
        uni.showLoading({ title: '正在登录...' })
        const loginRes = await authApi.login({
          username: this.username || 'admin',
          password: this.password
        })
        if (loginRes.success) {
          // 可选：如果返回 token，保存以备后续请求使用
          if (loginRes && loginRes.token) {
            const token = loginRes.token;
            try {
              uni.setStorageSync('auth_token', token)
            } catch (e) {}
          }

          uni.hideLoading()
          uni.showToast({ title: '登录成功', icon: 'success', duration: 800 })
          // 立即显示连接提示
          uni.showLoading({
            title: '正在连接MQTT...',
            // mask: true
          })
      
          // 调用MQTT重连函数
          try {
            manualReconnect()
            // 延迟跳转，给MQTT连接一些时间
            setTimeout(() => {
              // 更新loading文本
              uni.showLoading({
                title: '正在跳转系统...',
                // mask: true
              })
              uni.hideLoading()
              // 跳转到tabbar的第一个页面（环境参数页面）
              uni.switchTab({
                url: '/pages/environment/index',
                success: () => {
                  uni.showToast({
                    title: '系统连接成功',
                    icon: 'success',
                    duration: 1000
                  })
                },
                fail: (err) => {
                  // 如果失败，尝试使用redirectTo
                  uni.redirectTo({
                    url: '/pages/environment/index',
                    success: () => {
                      uni.showToast({
                        title: '系统连接成功',
                        icon: 'success',
                        duration: 1000
                      })
                    },
                    fail: (redirectErr) => {
                      uni.showToast({
                        title: '页面跳转失败',
                        icon: 'error',
                        duration: 1000
                      })
                    }
                  });
                }
              })
              
            }, 300) // 1秒后开始跳转
            
          } catch (error) {
            uni.hideLoading()
            uni.showToast({
              title: 'MQTT连接失败',
              icon: 'error',
              duration: 1000
            })
          }
        } else {
          uni.hideLoading()
          uni.showToast({
            title: loginRes?.message || '登录失败',
            icon: 'none',
            duration: 1500
          })
          return
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({
          title: e?.message || '登录失败',
          icon: 'none',
          duration: 1500
        })
        return
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.index-page {
  height: 100vh;
  width: 100vw;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding: 40rpx;
  position: relative;
}

/* 上部区域 */
.top-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120rpx;
}

/* Logo区域 */
.logo-container {
  margin-bottom: 60rpx;
}

.logo-circle {
  width: 160rpx;
  height: 160rpx;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.logo-image {
  width: 120rpx;
  height: 120rpx;
}

/* 应用名称 */
.app-title {
  margin-bottom: 0;
}

.title-text {
  font-size: 48rpx;
  font-weight: bold;
  color: #000000;
  text-align: center;
}

/* 下部区域 */
.bottom-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 60rpx;
}

/* 进入系统按钮 */
.action-container {
  margin-bottom: 40rpx;
  margin-top: 40px;
}

.enter-button {
  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 100%);
  border: none;
  border-radius: 12rpx;
  padding: 20rpx 50rpx;
  box-shadow: 0 2rpx 8rpx rgba(25, 118, 210, 0.2);
  min-width: 200rpx;
}

.button-text {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
}

/* 表单样式 */
.form-section {
  width: 100%;
  max-width: 640rpx;
  margin-top: 40rpx;
}

.form-item {
  display: flex;
  align-items: center;
  background: #f7f8fa;
  border-radius: 12rpx;
  padding: 20rpx 24rpx;
  margin-bottom: 24rpx;
}

.form-label {
  width: 120rpx;
  font-size: 28rpx;
  color: #333333;
}

.form-input {
  flex: 1;
  font-size: 28rpx;
  color: #111111;
}

.placeholder {
  color: #999999;
}

.enter-button:disabled {
  opacity: 0.5;
}

/* 版本号 */

.version-text {
  font-size: 24rpx;
  color: #999999;
  text-align: center;
}
</style>
