<script setup lang="ts">
  // import Header from '@/components/Header/Header.vue'
  import type { userInfoInt } from '@/apis/login/type'
  import useUserStore from '@/store/user'
  import { debounce } from '@/utils/util'

  const userStore = useUserStore()

  const type = ref<boolean>(false)
  const getType = computed(() => {
    return type.value ? 'text' : 'password'
  })

  const formRef = ref()
  const loginForm = ref<userInfoInt>({
    username: 'testAdmin',
    password: '888888',
    // code: ''
  })

  const rules = {
    username: {
      type: 'string',
      required: true,
      message: '请输入账号',
      trigger: ['blur', 'change']
    },
    password: {
      type: 'string',
      required: true,
      message: '请输入密码',
      trigger: ['blur', 'change']
    },
    // code: {
    //   type: 'string',
    //   required: true,
    //   message: '请输入验证码',
    //   trigger: ['blur', 'change']
    // }
  }
  const login = debounce(() => {
    formRef
      .value!.validate()
      .then(() => {
        uni.showLoading({ title: '提交中...' })
        userStore.login(loginForm.value).then(() => {
          uni.hideLoading()
          uni.showToast({
            title: '登录成功',
            icon: 'none',
            duration: 1000,
            success: () => {
              setTimeout(() => {
                uni.goToPage({ url: 'pages/index/index' })
              }, 500)
            }
          })
        })
      })
      .catch((errors : any) => {
        console.log('errors', errors)
      })
  }, 400)
  // const login = () => {
  //   setTimeout(() => {
  //     uni.goToPage({ url: 'pages/index/index' })
  //   }, 2000);
  // }

  const getLocation = () => {
    //获取当前位置
    uni.getLocation({
      type: 'wgs84', // 可以选择返回的定位类型，默认为wgs84返回全球标准，gcj02返回可用于国测局出版的地图数据。
      success: function (res) {
        console.log('位置:', res);
        //  console.log('经度:', res.longitude, '纬度:', res.latitude);
        userStore.setlocation(res);
      },
      fail: (err) => {

        uni.showToast({ title: '定位失败，请重试', icon: 'none' });

      }
    });
  }

  onMounted(() => {
    getLocation();
    // checkAndRequestPermission();//获取当前位置

  })
  onReady(() => {
    formRef.value.setRules(rules);


  })
</script>
<template>
  <view class="login">
    <image class="login_bg" src="@/static/bg.jpeg" mode="aspectFill" />
    <view class="flex column login_content">
      <u-form ref="formRef" :model="loginForm" :rules="rules" :label-width="20" style="width: 86%">
        <u-form-item prop="username" left-icon="account" :border-bottom="false">
          <u-input v-model="loginForm.username" placeholder="请输入账号" border="none" />
        </u-form-item>
        <u-form-item prop="password" left-icon="lock" :border-bottom="false">
          <u-input v-model="loginForm.password" :type="getType" placeholder="请输入密码" border="none" />
          <template #right>
            <u-icon :name="`eye-${type ? 'fill' : 'off'}`" @tap="type = !type" />
          </template>
        </u-form-item>
        <u-button class="submit-btu" @tap="login" shape="circle" color="#31d0ab" text="登 录" />
      </u-form>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .login {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;

    .login_bg {
      width: 100%;
      height: 100%;
    }

    .login_content {
      width: 100%;
      height: 0%;
      box-sizing: border-box;
      border-radius: 50% 50% 0 0 /3%;
      background-color: rgba(0, 0, 0, 0.6);
      overflow: hidden;
      position: absolute;
      bottom: 0;
      left: 0;
      animation: move 0.6s forwards;

      @keyframes move {
        from {
          height: 00%;
        }

        to {
          height: 90%;
        }
      }

      .submit-btu {
        margin-top: 30rpx;
      }
    }

    :deep(.u-form-item) {
      height: 130rpx;

      .u-form-item__body {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 25px;
        padding: 20rpx;

        &__left {
          margin-right: 12rpx;
        }

        .u-icon__icon {
          font-size: 36rpx !important;
          color: #31d0ab !important;
        }

        .uni-input-input {
          color: #fff;

          &::placeholder {
            color: #fff;
          }
        }

        .u-input__content__field-wrapper__field {
          color: #fff !important;
        }
      }

      :deep(.u-form) {
        width: 100%;

        .form_item {
          width: 100%;
        }
      }

      .u-form-item__body__right__message {
        margin: 10rpx 40rpx !important;
      }
    }
  }
</style>