<template>
  <view class="container">
    <view class="huanying">HELLO，</view>
    <view class="huanyingText">
      欢迎登录
      <text>一公里配送</text>
    </view>
    <view class="huanyingDes">
      近距离、快响应，即时补给线
    </view>
    <uv-form labelPosition="left" :model="formModel" labelWidth="80" :rules="rules" class="formContent" ref="formRef">
			<uv-form-item label="用户名" prop="userInfo.username" borderBottom>
				<uv-input v-model="formModel.userInfo.username" border="none" placeholder="请输入用户名" />
			</uv-form-item>
			<uv-form-item label="密码" prop="userInfo.password" borderBottom>
				<uv-input v-model="formModel.userInfo.password" :type="showPass ? '' : 'password'" border="none" placeholder="请输入密码" />
        <template v-slot:right>
					<uv-icon name="eye" @tap="changePassStatus" v-show="!showPass"></uv-icon>
					<uv-icon name="eye-off-outline" @tap="changePassStatus" v-show="showPass"></uv-icon>
				</template>
			</uv-form-item>
			<uv-button type="primary" size="large" text="登 录" shape="circle" color="#199793" customStyle="margin-top: 50px" @click="submit"></uv-button>
		</uv-form>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { userLogin } from "@/api/login"

const formModel = ref({
  userInfo: {
    username: '',
    password: '',
  },
})

const showPass = ref(false)
const formRef = ref()
const rules = ({
  'userInfo.username': {
    type: 'string',
    required: true,
    message: '输入用户名',
    trigger: ['blur', 'change']
  },
  'userInfo.password': {
    type: 'string',
    required: true,
    message: '请填写密码',
    trigger: ['blur', 'change']
  },
})

const changePassStatus = () => {
  showPass.value = !showPass.value
}
// 提交
const submit = () => {
  // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
  formRef.value.validate().then(res => {
    userLogin(formModel.value.userInfo).then(res => {
      console.log("登录成功", res)
      uni.setStorageSync('token', res.data.token)
      uni.setStorageSync('user', res.data.user)
      uni.navigateTo({
        url: "/pages/index/index"
      })
    })
  }).catch(errors => {
    // uni.showToast({
    //   icon: 'error',
    //   title: '校验失败'
    // })
  })
}
</script>

<style lang="scss" scoped>
.container{
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // flex-direction: column;
  padding: 0 56rpx;
  .title{
    font-size: 72rpx;
  }
  .formContent{
    // width: 80%;
    margin-top: 140rpx;
  }
  .huanyingText {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 34rpx;
    color: #000000;
    line-height: 44rpx;
    font-style: normal;
    margin-top: 38rpx;

    text {
      color: #199793;
    }
  }
  .huanying {
    margin-top: 130rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 72rpx;
    color: #000000;
  }
  .huanyingDes {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    line-height: 44rpx;
    font-style: normal;
    margin-top: 24rpx;
  }
}
::v-deep .uv-input__content{
  flex-direction: column;
  align-items: unset;
}
</style>