<template>
  <view class="normal-login-container">
    <view class="background-decoration"></view>
    
    <view class="logo-content">
      <view class="logo-wrapper">
        <image class="logo-image" :src="globalConfig.appInfo.logo" mode="aspectFit"></image>
      </view>
      <text class="title">智聪记账管理平台</text>
      <text class="subtitle">专业的财务管理工具</text>
    </view>
    
    <view class="login-form-content">
      <view class="form-card">
        <view class="input-item">
          <view class="input-icon">
            <uni-icons type="person" size="20" color="#667eea"></uni-icons>
          </view>
          <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
        </view>
        
        <view class="input-item password-item">
          <view class="input-icon">
            <uni-icons type="locked" size="20" color="#667eea"></uni-icons>
          </view>
          <input v-model="loginForm.password" type="text" password class="input" placeholder="请输入密码" maxlength="20" />
          <view v-if="isH5" class="pwd-remember" @click.stop="rememberMeChange">
            <text class="pwd-remember-text">记住密码</text>
            <view :class="['mini-switch', rememberMe ? 'on' : '']">
              <view class="mini-switch-dot"></view>
            </view>
          </view>
        </view>

        <view class="agreement-box">
          <view class="agreement-line">
            <view class="agreement-row agree-part" @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>
        </view>
        
        <view class="action-btn">
          <button @click="handleLogin" class="login-btn">
            <text class="btn-text">登录</text>
          </button>
        </view>

        <view class="register-btn" @click="handleRegister">
          <text>立即注册</text>
        </view>
      </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'

let isH5 = false
// #ifdef H5
isH5 = true
// #endif

const userStore = useUserStore()
const codeUrl = ref("");
const captchaEnabled = ref(true); // 是否开启验证码
const useWxLogin = ref(false); // 是否使用微信登录
const globalConfig = ref(config);
const rememberMe = ref(false);
const agree = ref(true);
const loginForm = ref({
  username: "",
  password: "",
  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(() => {
  if (!isH5) {
    return
  }

  const username = localStorage.getItem('username');
  const password = localStorage.getItem('password');
  if (username&&password) {
    loginForm.value.username = username;
    loginForm.value.password = decrypt(password);
    rememberMe.value = true;
  }
});

// 获取图形验证码
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(() => {
    if (captchaEnabled.value) {
      modal.closeLoading()
      getCode()
    }
  })
};
function loginSuccess(result) {
  if (!isH5) {
    rememberMe.value = false
  } else if (rememberMe.value) {
    localStorage.setItem('username', loginForm.value.username);
    localStorage.setItem('password', encrypt(loginForm.value.password));
  } else {
    rememberMe.value=false
    localStorage.removeItem('username');
    localStorage.removeItem('password');
  }
  // 设置用户信息
  userStore.getInfo().then(res => {
    uni.switchTab({
      url: '/pages/calendar/index'
    });
  })
}

function rememberMeChange(){
  rememberMe.value = !rememberMe.value;	

}

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

function handlePrivacy() {
  uni.navigateTo({
    url: '/pages/common/privacy/index'
  })
}
// 官方网址
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 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100%;
  height: auto;
}

.normal-login-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  
  .background-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    pointer-events: none;
  }

  .logo-content {
    width: 100%;
    text-align: center;
    padding-top: 120rpx;
    position: relative;
    z-index: 1;
    
    .logo-wrapper {
      display: inline-block;
      margin-bottom: 32rpx;
      
      .logo-image {
        width: 142rpx;
        height: 140rpx;
        border-radius: 36rpx;
        box-shadow: 0 15rpx 28rpx rgba(0, 0, 0, 0.2);
        background: #ffffff;
        padding: 0rpx;
      }
    }

    .title {
      display: block;
      font-size: 48rpx;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 12rpx;
    }
    
    .subtitle {
      display: block;
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .login-form-content {
    flex: 1;
    margin-top: 80rpx;
    padding: 0 48rpx;
    position: relative;
    z-index: 1;
    
    .form-card {
      background: #ffffff;
      border-radius: 32rpx;
      padding: 48rpx 40rpx;
      box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
    }

    .input-item {
      margin-bottom: 32rpx;
      background-color: #f5f7fa;
      height: 96rpx;
      border-radius: 48rpx;
      display: flex;
      align-items: center;
      padding: 0 32rpx;
      transition: all 0.3s ease;
      
      &:focus-within {
        background-color: #eff1f5;
        box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
      }

      .input-icon {
        margin-right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .input {
        flex: 1;
        font-size: 28rpx;
        color: #303133;
        
        &::placeholder {
          color: #c0c4cc;
        }
      }

      .pwd-remember {
        display: flex;
        align-items: center;
        margin-left: 16rpx;
        flex-shrink: 0;
        padding: 6rpx 4rpx;

        .pwd-remember-text {
          font-size: 22rpx;
          color: #909399;
          margin-right: 10rpx;
          line-height: 1;
        }

        .mini-switch {
          width: 56rpx;
          height: 30rpx;
          border-radius: 15rpx;
          background: #dcdfe6;
          position: relative;
          transition: background 0.25s ease;

          &.on {
            background: #667eea;
          }

          .mini-switch-dot {
            position: absolute;
            top: 3rpx;
            left: 3rpx;
            width: 24rpx;
            height: 24rpx;
            border-radius: 50%;
            background: #ffffff;
            transition: transform 0.25s ease;
            box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
          }

          &.on .mini-switch-dot {
            transform: translateX(26rpx);
          }
        }
      }
    }
    
  .agreement-box {
    margin-bottom: 32rpx;
    margin-top: 24rpx;
    padding-left: 8rpx;

    .agreement-line {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .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;

        &.checked {
          background: #667eea;
          border-color: #667eea;
        }
      }

      .agreement-text {
        font-size: 24rpx;
        color: #606266;
        line-height: 1.6;
      }

      .link-text {
        font-size: 24rpx;
        color: #667eea;
        line-height: 1.6;
      }
    }
  }

    .action-btn {
      margin-top: 48rpx;
      
      .login-btn {
        width: 100%;
        height: 96rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 48rpx;
        border: none;
        box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        
        &::after {
          border: none;
        }
        
        &:active {
          transform: scale(0.98);
          box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
        }
        
        .btn-text {
          color: #ffffff;
          font-size: 32rpx;
          font-weight: 600;
        }
      }
    }

    .register-btn {
      width: 100%;
      height: 88rpx;
      background: transparent;
      border: 2rpx solid #667eea;
      border-radius: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24rpx;

      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>
