<script setup>
import { ACCESS_TOKEN_KEY, USER_LOGIN_ACCOUNT } from 'constants/storage'
import { postAuthLoginApi } from 'api/system'
import { tryFormValidate } from 'helper/async'
import { useGlobSetting } from 'hooks/setting/env'
import { getUserInfoApi } from '@/api/system'
import { useCdn } from '@/composables/use-cdn'
import { useUserStore } from '@/store/user'
const { cdnUrl } = useCdn('/elevator/2024/12/30')

const form = ref(null)
const model = ref({
  account: '',
  password: ''
})
const rules = ref({
  account: {
    type: 'string',
    required: true,
    message: '请输入账号',
    trigger: ['change']
  },
  password: {
    type: 'string',
    required: true,
    message: '请输入密码',
    trigger: ['change']
  }
})

const pwdType = ref('password')
const pwdVisible = ref(false)
const switchPwdVisible = () => {
  pwdVisible.value = !pwdVisible.value
  pwdType.value = pwdType.value === 'password' ? 'text' : 'password'
}

const { clientId } = useGlobSetting()
const { setUserInfo, setUserRoles } = useUserStore()
const submit = async () => {
  const [isOk] = await tryFormValidate(form)
  if (isOk) {
    console.log(model.value)
    const { account, password } = model.value
    const { error, data } = await postAuthLoginApi({
      username: account,
      password: password,
      grantType: 'password',
      clientId
    })
    uni.showLoading({
      title: '登录中'
    })
    if (!error) {
      uni.hideLoading()
      uni.$u.toast('登录成功')
      const { access_token } = data
      uni.setStorageSync(ACCESS_TOKEN_KEY, access_token)
      const { data: userData } = await getUserInfoApi()
      const { user, roles } = userData
      uni.setStorageSync(USER_LOGIN_ACCOUNT, model.value)
      setUserInfo(user)
      setUserRoles(roles)
      uni.redirectTo({
        url: '/pages/index/index'
      })
    } else {
      uni.hideLoading()
      uni.$u.toast('登录失败')
    }
  } else {
    uni.$u.toast('请核对填写的信息')
  }
}

// TODO: 仅开发环境使用
onMounted(() => {
  const { DEV } = import.meta.env
  if (DEV) {
    model.value.account = 'admin'
    model.value.password = 'admin123'
  }
})
</script>

<template>
  <view min-h-100vh px-30>
    <view mx-auto mb-50 w-400 h-400 f-c-c>
      <up-image
        :src="`${cdnUrl}/b7e2194e233e472fb25dc5bd3bc700de.png`"
        width="250rpx"
        height="250rpx"
      />
    </view>
    <up-form
      ref="form"
      label-width="80"
      label-position="left"
      :model="model"
      :rules="rules"
    >
      <up-form-item label="账号" prop="account" border-bottom>
        <up-input
          v-model="model.account"
          :border="`${'none'}`"
          placeholder="请输入账号"
        />
      </up-form-item>
      <up-form-item label="密码" prop="password" border-bottom>
        <up-input
          v-model="model.password"
          placeholder="请输入密码"
          :type="pwdType"
          :border="`${'none'}`"
        />
        <template #right>
          <view w-60 h-60 f-c-c @tap="switchPwdVisible">
            <up-icon v-if="pwdVisible" name="eye-fill" />
            <up-icon v-else name="eye-off" />
          </view>
        </template>
      </up-form-item>
    </up-form>

    <up-button
      type="primary"
      text="登录"
      custom-style="margin-top: 30px"
      @click="submit"
    />
  </view>
</template>
