<template>
  <view class="login-container">
    <!-- Logo和标题区域 -->
    <view class="header-section">
      <view class="logo-box">
        <image class="logo" :src="globalConfig.appInfo.logo" mode="aspectFit"></image>
      </view>
      <text class="app-title">智聪科技</text>
      <text class="app-subtitle">专业的全栈开发平台</text>
    </view>
    
    <!-- 登录表单卡片 -->
    <view class="form-card">
      <!-- 账号输入 -->
      <view class="input-item">
        <uni-icons type="person" size="20" color="#999"></uni-icons>
        <input 
          v-model="loginForm.username" 
          class="input-field" 
          type="text" 
          placeholder="请输入账号" 
          placeholder-class="placeholder"
          maxlength="30" 
        />
      </view>
      
      <!-- 密码输入 -->
      <view class="input-item">
        <uni-icons type="locked" size="20" color="#999"></uni-icons>
        <input 
          v-model="loginForm.password" 
          type="text"
          password
          class="input-field" 
          placeholder="请输入密码"
          placeholder-class="placeholder"
          maxlength="20" 
        />
      </view>
      
      <!-- 用户协议 -->
      <view class="agreement-box">
        <view class="agreement-row" @click="agreeChange">
          <view :class="['checkbox-small', agree ? 'checked' : '']">
            <uni-icons v-if="agree" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
          </view>
          <text class="agreement-text">已阅读并同意</text>
          <text class="link-text" @click.stop="handleUserAgrement">《用户协议》</text>
          <text class="agreement-text">和</text>
          <text class="link-text" @click.stop="handlePrivacy">《隐私协议》</text>
        </view>
      </view>
      
      <!-- 登录按钮 -->
      <button @click="handleLogin" class="login-btn">登录</button>
      
      <!-- 立即注册按钮 -->
      <view class="register-btn" @click="handleRegister">
        <text>立即注册</text>
      </view>
    </view>
    
    <!-- 版权信息 -->
    <view class="copyright">
      <text>Copyright © 2026 qdintc All Rights Reserved.</text>
    </view>
  </view>
</template>

<script setup>
import modal from '@/plugins/modal'
import { getCodeImg } from '@/api/login'
import { ref , onMounted } from "vue";
import config from '@/config.js'
import useUserStore from '@/store/modules/user'
import { getWxCode } from '@/utils/geek';
import { wxLogin } from '@/api/oauth';
import { setToken } from '@/utils/auth';
import { encrypt, decrypt } from '@/utils/jsencrypt'
const userStore = useUserStore()
const codeUrl = ref("");
const captchaEnabled = ref(true); // 是否开启验证码
const useWxLogin = ref(false); // 是否使用微信登录
const globalConfig = ref(config);
const agree = ref(false); // 同意协议
const loginForm = ref({
  tenantId: "000000",
  username: "admin",
  password: "LLqRDf6zkmsPVB40",
  code: "",
  uuid: ''
});

if (useWxLogin.value) {
  getWxCode().then(res => {
    console.log(res);
    wxLogin('miniapp',res).then(res => {
      if(res.token != null){
        setToken(res.token);
        loginSuccess()
      }
    });
  })
}
// 页面加载时检查是否记住了密码
onMounted(() => {
});

// 获取图形验证码
function getCode() {
  getCodeImg().then(res => {
    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
    if (captchaEnabled.value) {
      codeUrl.value = 'data:image/gif;base64,' + res.img
      loginForm.value.uuid = res.uuid
    }
  })
};
function handleRegister() {
  uni.navigateTo({
    url: `/pages/register`
  });
};

async function handleLogin() {
  if (loginForm.value.username === "") {
    modal.msgError("请输入您的账号")
  } else if (loginForm.value.password === "") {
    modal.msgError("请输入您的密码")
  } else if (!agree.value) {
    modal.msgError("请先阅读并同意用户协议和隐私协议")
  } else {
    modal.loading("登录中，请等待...")
    pwdLogin()
  }
};
// 密码登录
async function pwdLogin() {
  userStore.login(loginForm.value).then(() => {
    modal.closeLoading()
    loginSuccess()
  }).catch((error) => {
    modal.closeLoading()
    // 显示错误信息
    if (error && typeof error === 'string') {
      modal.msgError(error)
    }
    // 登录失败后重新获取验证码
    if (captchaEnabled.value) {
      getCode()
    }
  })
};
function loginSuccess(result) {
  // 设置用户信息
  userStore.getInfo().then(res => {
    uni.switchTab({
      url: '/pages/home/homepage/index'
    });
  }).catch(err => {
    modal.msgError('获取用户信息失败，请重新登录');
  });
}

function agreeChange(){
  agree.value = !agree.value;
}

// 隐私协议
function handlePrivacy() {
  let site = globalConfig.value.appInfo.agreements[0]
  uni.navigateTo({
    url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
  });
}
// 官方网址
function handleWebsite() {
  let site = globalConfig.value.appInfo.site_url;
  uni.navigateTo({
    url: `/pages/common/webview/index?title=智聪网络科技官网&url=${site}`
  });
};
// 用户协议
function handleUserAgrement() {
  let site = globalConfig.value.appInfo.agreements[1]
  uni.navigateTo({
    url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
  });
};
getCode();
</script>

<style lang="scss" scoped>
page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 100%;
}

.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 48rpx;
}

.header-section {
  padding-top: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
  
  .logo-box {
    width: 160rpx;
    height: 160rpx;
    background: #ffffff;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32rpx;
    box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
    
    .logo {
      width: 120rpx;
      height: 120rpx;
    }
  }
  
  .app-title {
    font-size: 40rpx;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12rpx;
  }
  
  .app-subtitle {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.form-card {
  width: 100%;
  background: #ffffff;
  border-radius: 24rpx;
  padding: 48rpx 40rpx 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.input-item {
  height: 88rpx;
  background: #f7f8fa;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  padding: 0 28rpx;
  margin-bottom: 24rpx;
  transition: all 0.3s ease;
  
  &:focus-within {
    background-color: #eff1f5;
  }
  
  .input-field {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
    margin-left: 20rpx;
  }
  
  .placeholder {
    color: #c0c4cc;
  }
}

.agreement-box {
  margin-bottom: 32rpx;
  margin-top: 24rpx;
  padding: 0 4rpx;
  
  .agreement-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.6;
    
    .checkbox-small {
      width: 28rpx;
      height: 28rpx;
      border: 2rpx solid #dcdfe6;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10rpx;
      flex-shrink: 0;
      transition: all 0.3s ease;
      
      &.checked {
        background: #667eea;
        border-color: #667eea;
      }
    }
    
    .agreement-text {
      font-size: 24rpx;
      color: #606266;
      line-height: 1.6;
    }
    
    .link-text {
      font-size: 24rpx;
      color: #667eea;
      text-decoration: none;
      line-height: 1.6;
    }
  }
}

.login-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 44rpx;
  border: none;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 24rpx;
  
  &::after {
    border: none;
  }
  
  &:active {
    opacity: 0.9;
    transform: scale(0.98);
  }
}

.register-btn {
  width: 100%;
  height: 88rpx;
  background: transparent;
  border: 2rpx solid #667eea;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  text {
    font-size: 32rpx;
    color: #667eea;
    font-weight: 500;
  }
  
  &:active {
    opacity: 0.8;
    background: rgba(102, 126, 234, 0.05);
  }
}

.copyright {
  text-align: center;
  padding: 40rpx 0 60rpx;
  
  text {
    font-size: 22rpx;
    color: rgba(255, 255, 255, 0.7);
  }
}
</style>
