<template>
  <view class="page">
    <view class="card header">
      <text class="title">账号登录</text>
      <text class="sub">系统仅供内部使用，请使用内部账号密码登录</text>
    </view>

    <view class="card form">
      <view class="field">
        <text class="label">手机号</text>
        <input class="input" v-model="loginRequest.username"
          placeholder="请输入用户名或电话" :focus="usernameFocus" />
      </view>
      <view class="field">
        <text class="label">密码</text>
        <input class="input" v-model="loginRequest.password" placeholder="请输入密码"
          password />
      </view>
      <view class="actions">
        <button class="btn primary" @tap="onLogin">登录</button>
        <button class="btn" @tap="onCancel">取消</button>
      </view>
    </view>
  </view>

</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { login } from '../api/user'
import { fetchPendingCount } from '@/utils/messageManager'

const usernameFocus = ref(true)
const loginRequest = reactive({
  username: '',
  password: '',
  typecode: '007'
})

onMounted(() => {
  // 读取本地缓存的用户名和密码
  const userName = uni.getStorageSync('userName')
  const userPsw = uni.getStorageSync('userPsw')
  if (userName && userPsw) {
    loginRequest.username = userName
    loginRequest.password = userPsw
  }
})

async function onLogin() {
  if (!loginRequest.username) {
    uni.showToast({ title: '用户名不能为空', icon: 'none' })
    return
  }
  if (!loginRequest.password) {
    uni.showToast({ title: '密码不能为空', icon: 'none' })
    return
  }
  // 本地保存登录信息
  uni.setStorageSync('userName', loginRequest.username)
  uni.setStorageSync('userPsw', loginRequest.password)

  uni.showToast({ title: '登录中', icon: 'loading', duration: 2000 })
  // 清空旧身份
  uni.setStorageSync('staff', null)
  try {
    /* const res = await util.request({
      url: config.urls.login,
      method: 'POST',
      data: {
        username: loginRequest.username,
        password: md5.hexMD5(loginRequest.username + loginRequest.password),
        typecode: loginRequest.typecode
      }
    }) */
    const res = await login(loginRequest.username, loginRequest.password)
    if (res.code != 0) {
      uni.showToast({ title: '登录失败，' + res.msg, icon: 'success', duration: 1000 })
      return
    }
    const staff = res.data.userLoginRequestVO
    // 兼容旧逻辑，附加 role 别名
    uni.setStorageSync('token', res.data.token)
    uni.showToast({ title: '登录成功', icon: 'success', duration: 1000 })
    uni.setStorageSync('assetsRole', staff.assetsRole) // 保存用户信息到本地缓存
    // 跳转到首页（tabBar）
    setTimeout(() => {
      fetchPendingCount() // 登录成功后，获取待办消息数
      uni.switchTab({ url: '/pages/index/index' })
    }, 300)

  } catch (e: any) {
    console.error('登录失败', e)
    const msg = e?.message || '登录失败，请稍后再试'
    uni.showToast({ title: msg, icon: 'none', duration: 2000 })
  }
}

function onCancel() {
  uni.switchTab({ url: '/pages/index/index' })
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f5f7fb;
  padding: 24rpx 0 40rpx;
}

.card {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 32rpx 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
}

.header {
  padding: 28rpx 24rpx;
}

.title {
  font-size: 36rpx;
  color: #111;
  font-weight: 600;
}

.sub {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #888;
}

.form {
  padding: 20rpx 24rpx;
}

.field {
  margin-bottom: 20rpx;
}

.label {
  display: block;
  color: #666;
  font-size: 26rpx;
  margin-bottom: 10rpx;
}

.input {
  box-sizing: border-box;
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #e6e8ef;
  border-radius: 12rpx;
  background: #fcfdff;
}

.actions {
  display: flex;
  gap: 20rpx;
  margin-top: 8rpx;
}

.btn {
  flex: 1;

  border-radius: 14rpx;
  background: #eef2ff;
  color: #3a5ddd;
}

.btn.primary {
  background: #3a5ddd;
  color: #fff;
}
</style>
