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

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

      }
    });
  }

  // const appVersion = ref<any>("");
  // const erweimaurl = ref<any>("");
  // const upgrade = () => {
  //   // 下方是自动更新
  //   //判断是否为安卓去更新版本
  //   let shebeitype = uni.getSystemInfoSync().osName; //判断是否Android或ios 'android', 'ios' 
  //   if (shebeitype == 'android') {
  //     //获取版本号 并且请求接口获取最新app 进行比较是否更新
  //     // let _self = this;
  //     plus.runtime.getProperty(plus.runtime.appid, (info) => {
  //       //console.log('获取出来的', JSON.stringify(info));
  //       appVersion.value = info.version;
  //       getConfigKey('HandAppHost').then((res : any) => {
  //         //	debugge
  //         //res.msg = 'http://111.15.191.198:8096/profile/app/20240116_android_223_v1.3.1.apk';
  //         console.log("更新", res)
  //         if (res) {
  //           if (!res.msg) return;
  //           erweimaurl.value = res.msg || '';
  //           let msgdatalist = erweimaurl.value.split('v');
  //           if (msgdatalist.length < 1) return; //如果数组长度小于1 说明地址为空
  //           let appversionnumber = msgdatalist[1].split('.apk')[0];
  //           let name = 'v' + appversionnumber; //新版本名称
  //           let code = appversionnumber; //新版本号（数字）
  //           let content = `1.新增完善部分功能<br>2.优化用户体验度`; //更新内容
  //           let url = erweimaurl.value; //app下载链接，（演示请换成真正在下载链接）
  //           //	url = 'http://111.15.191.198:8096/profile/app/20240116_android_223_v1.3.1.apk';
  //           let forceUpdate = true; //是否强制更新
  //           let selfVersionCode = appVersion.value; //线上版本号
  //           //console.log('返回的下载地址', url);
  //           checkVersion({
  //             selfVersionCode, //线上版本号
  //             name, //最新版本名称
  //             code, //最新版本号
  //             content, //更新内容
  //             url, //下载链接
  //             forceUpdate //是否强制升级			  
  //           })


  //         }
  //       });
  //     });

  //   }

  // }

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

  })
  onReady(() => {
    // plus.android.importClass(android.os.Build);
    //  var packageName = android.os.Build.PRODUCT;
    //  console.log("Android包名:", packageName); // 输出包名[1](@ref)
    formRef.value.setRules(rules);
  })
</script>
<template>
  <view class="login">


    <image class="login_bg" src="@/static/logbg.png" mode="aspectFill" />

    <view class="flex column login_content" style="justify-content: initial;">
      <image class="favicon_logo" src="@/static/faviconbai.png" />
      <view class="wenzimaoshu">森林防火信息终端</view>
      <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">
  @font-face {
    font-family: "pangmen";
    src: url('@/static/fonts/pangmen.ttf') format('truetype');
  }

  .login {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;

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

    .favicon_logo {
      width: 180rpx;
      height: 180rpx;
      // position: absolute;
      // top: 160rpx;
      // left: 50%;
      // transform: translateX(-50%);
      // margin: auto;
      margin-bottom: 40rpx;
    }

    .login_content {
      width: 90%;
      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: 5%;
      animation: move 0.6s forwards;

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

        to {
          height: 88%;
        }
      }

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

      .wenzimaoshu {
        font-family: 'pangmen';
        font-size: 60rpx;
        color: #fff;
        margin-bottom: 50rpx;
      }
    }

    :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>