<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '登录',
    // navigationBarBackgroundColor: '#f6d7a7',
  },
}
</route>

<template>
  <view class="text-center container">
    <view class="px-5 pt-10 pb-20 top-box">
      <image src="../../static/logo.png" mode="scaleToFill" class="logo" />
      <view class="con-top">
        <view class="h1 mb-6 mt-2">科湃腾肉牛系统</view>
        <view class="h3 mb-10 pt-4">简化牧场管理，从这里开始！</view>
      </view>

      <wd-form ref="form" :model="model">
        <wd-cell-group border>
          <wd-input
            label-width="160rpx"
            prop="username"
            clearable
            prefix-icon="user"
            size="large"
            v-model="model.username"
            placeholder="请输入用户名"
            :rules="[{ required: false, validator: validatorMessage, message: '请输入用户名' }]"
          />
          <wd-input
            label-width="160rpx"
            prop="password"
            size="large"
            show-password
            prefix-icon="lock-on"
            clearable
            v-model="model.password"
            placeholder="请输入密码"
            :rules="[{ required: false, validator: validatorPassword, message: '请输入密码' }]"
          />

          <!-- <view class="flex justify-between mt-4 bot px-4">
              <text @click="handleRegist">注册 ></text>
              <text @click="handleForget">修改密码 ></text>
            </view> -->
        </wd-cell-group>

        <view class="footer mt-8">
          <wd-button type="primary" size="large" @click="handleSubmit" block>登 录</wd-button>
        </view>
      </wd-form>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getAuth } from '@/service/index/auth'
import { useMessage } from 'wot-design-uni'
import { useUserStore } from '@/store'

defineOptions({
  name: 'Login',
})

const userStore = useUserStore()
const model = reactive<{
  username: string
  password: string
}>({
  username: '',
  password: '',
})

const form = ref()
const message = useMessage()

// 接口请求参数
async function logins(obj) {
  const { data } = await getAuth({
    username: obj.username.trim(),
    password: obj.password,
  })
  console.log(data, '9999')
  if (data?.token) {
    const person = {
      username: model.username,
      token: data?.token,
    }
    userStore.userInfo = person
  } else {
    message.show(data)
  }
}

// 用户名校验
const validatorMessage = (val) => {
  if (String(val).length >= 4) {
    return Promise.resolve()
  }
}
// 用密码校验
const validatorPassword = (val) => {
  if (String(val).length < 6) {
    return Promise.reject('密码不能少于6个字符')
  } else {
    return Promise.resolve()
  }
}

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        logins(model)
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

function handleRegist() {
  uni.navigateTo({ url: '/pages/regist/regist' })
}

function handleForget() {
  uni.navigateTo({ url: '/pages/forget/forget' })
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.bot {
  font-size: 28rpx;
  color: #bfbfbf;
}
.logo {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}
//
.con-top {
  font-family: 'Times New Roman', Times, serif;
  font-size: 56rpx;
  font-weight: 600;
  color: #f99304;
}
.h3 {
  padding-left: 10rpx;
  // font-family: 'Times New Roman', Times, serif;
  font-size: 36rpx;
  // font-style: oblique 4deg;
  font-weight: 300;
}

.btn {
  height: 80rpx;
  margin: 30rpx auto;
  font-family: PingFang SC;
  font-size: 16px;
  line-height: 80rpx;
  color: #fff;
  border-radius: 60rpx;
}

.user {
  margin-bottom: 50rpx;
  background-color: #eea441;
}
.tel {
  background-color: #2a9d8f;
}
.container {
  // background-color: #fafafa;
  height: 100vh;
}
.top-box {
  // background-color: #fff;
  // background: linear-gradient(to bottom, #f6d7a7, #fff);
}
::v-deep .wd-radio-group.data-v-a6e3f5b0,
.wd-radio-group {
  background-color: transparent;
}
::v-deep .title > .wd-radio__label {
  font-size: 20rpx !important;
}
::v-deep .wd-button.is-success.data-v-aa3a6253 {
  background-color: #2a9d8f !important;
}
::v-deep .wd-icon-user:before,
.wd-icon-user[data-v-7f3ba649]:before {
  padding: 0 20rpx;
  font-size: 46rpx;
  color: #f99304;
}
::v-deep .wd-icon-lock-on:before,
.wd-icon-lock-on[data-v-7f3ba649]:before {
  padding: 0 20rpx;
  font-size: 46rpx;
  color: #f99304;
}
</style>
