<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'
// @ts-ignore
import md5 from '@/utils/md5.js'
// @ts-ignore
import util from '@/utils/util.js'
// @ts-ignore
import config from '@/config.js'

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
      }
    })
    if (res?.data?.code === 0) {
      const staff = res.data.data.userLoginInfo
      // 兼容旧逻辑，附加 role 别名
      uni.setStorageSync('staff', { ...staff, role: staff.role_ids })
      uni.setStorageSync('token', res.data.data.token)
      uni.showToast({ title: '登录成功', icon: 'success', duration: 1000 })
      // 跳转到首页（tabBar）
      setTimeout(() => {
        uni.switchTab({ url: '/pages/index/index' })
      }, 300)
    } else {
      uni.showToast({ title: res?.data?.msg || '登录失败', icon: 'error', duration: 3000 })
    }
  } catch (err: any) {
    // util.request 已有统一错误提示
    console.warn('login error', err)
  }
}

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>
