<template>
  <view class="login-bg">
	  <img @click="gotoU" src="../../static/right_rule.png" style="position: fixed;right: 0;top: 70%;z-index: 99" alt="">
	  <view class="pd-40">
      <view class="text-xxl pd-b-20 mg-l-10-m">
        <van-icon name="arrow-left" @tap="goto('/')" />
      </view>
      <van-image width="214rpx" src="/static/img/dz/jyx-logo.png" />
      <view class="text-xxl text-bold pd-v-45">你好，欢迎使用商城。</view>
      <van-form class="transparent" @submit="onSubmit">
        <van-field :class="{ 'field-focus': state.focus == 'phone' }" v-model="state.params.phone" placeholder="请输入手机号"
          type="digit" clearable @focus="onFocus('phone')" @blur="onFocus('')" clear-trigger="always" name="phone" autocomplete="on">
          <template #left-icon>
            <van-icon class-prefix="icon" name="shoujihao" />
          </template>
        </van-field>
        <van-field :class="{ 'field-focus': state.focus == 'pwd' }" v-model="state.params.pwd" clearable
          autocomplete="off" clear-trigger="always" placeholder="请输入密码" :type="state.showPwd ? 'text' : 'password'"
          @focus="onFocus('pwd')" @blur="onFocus('')">
          <template #left-icon>
            <van-icon class-prefix="icon" name="mima" />
          </template>
          <template #right-icon>
            <van-icon class="mg-l-30" class-prefix="icon" :name="state.showPwd ? 'xianshimima' : 'yincangmima'"
              @tap="onShowPwd" />
          </template>
        </van-field>
        <view class="justify-between pd-t-40 text-ss text-darkGray">
          <view class="">
            还没有账号? 立即
            <text class="text-orange" @tap="goto('/pages/login/register')">注册</text>
          </view>
          <view class="" @tap="goto('/pages/login/forget?phone=' + state.params.phone)">忘记密码?</view>
        </view>
        <div class="pd-v-50">
          <van-button :disabled="!loginOn" native-type="submit" class="text-l" :loading="state.loading.login"
            :color="loginOn ? 'linear-gradient(315deg, #FE521F 0%, #FE7902 100%)' : '#cccccc'" round block>
            登录
          </van-button>
        </div>
        <view class="justify-between text-ss">
          <van-checkbox class="" icon-size="17px" v-model="state.read">
            <view class=" text-darkGray">
              阅读并同意
              <text class="text-orange" @tap="goto('/pages/login/policy')">《隐私协议》</text>
              和
              <text class="text-orange" @tap="goto('/pages/login/service')">《服务协议》</text>
            </view>
          </van-checkbox>
          <van-checkbox v-if="state.switch.store" class="scale-9 scale-rt" icon-size="17px" v-model="state.store">
            <text class=" text-darkGray">记住密码</text>
          </van-checkbox>
        </view>
      </van-form>
	    <div v-if="state.hideshow" style="text-align: center;position: absolute;bottom: 10px;width: 100%;left: 0;" @click="gotoU">
		    <img style="width: 20px;height: 20px;vertical-align: sub;margin-right: 10px" src="../../static/favicon.ico" alt=""><span style="color: #666666">提供技术支持</span>
	    </div>
    </view>
  </view>
</template>

<script setup lang="ts">
import api from '@/api';
import { computed, onBeforeMount, onMounted, reactive,watch } from 'vue';
import md5 from 'md5';
import { PageUtils } from '@/utils/utils'
import { Toast } from 'vant'
const state = reactive({
    docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
    showHeight: document.documentElement.clientHeight,   //实时屏幕高度
    hideshow:true,  //显示或者隐藏footer
    params: {
    phone: '',
    pwd: '',
  },
  showPwd: false,
  focus: '',
  read: false,
  store: false,
  loading: {
    login: false,
  },
  redirect: undefined,
  switch: {
    store: false,
  }
})
const loginOn = computed(() => {
  return !!(state.params.phone && state.params.pwd)
})
watch([() => state.showHeight], (newValue, oldValue) => {
    if (state.docmHeight > state.showHeight) {
        state.hideshow = false
    } else {
        state.hideshow = true
    }
})
onBeforeMount(() => {
    window.onresize = ()=>{
        return(()=>{
            state.showHeight = document.body.clientHeight;
        })()
    }
    const query: any = PageUtils.getCurQuery()
  state.redirect = query.redirect
  uni.removeStorageSync('user');
  const storage: any = uni.getStorageSync('login') || {};
  state.store = storage.store || false
  state.params.phone = storage.phone || ''
  state.params.pwd = storage.pwd || ''
})
// 因为登录页不一定是直接登录，所以不自动弹起

function onSubmit() {
  if (!state.read) {
    Toast('请阅读并同意协议')
    return
  }
  if (state.loading.login) return
  state.loading.login = true
  api.login({
    mobilePhone: state.params.phone,
    password: state.params.pwd
  }).then((data: any) => {
    uni.setStorageSync('login', {
      store: state.store,
      phone: state.store ? state.params.phone : '',
      pwd: state.store ? state.params.pwd : '',
    })
    uni.setStorageSync('user', data)
    uni.reLaunch({ url: state.redirect || '/' })
  }).finally(() => {
    state.loading.login = false
  })
}
function gotoU() {
    uni.redirectTo({
        url: "/pages/my/technicalSupport?name=login",
    });
}
function onFocus(focus: string) {
  state.focus = focus
}
function goto(url: any) {
  url && uni.navigateTo({ url })
}
function onShowPwd() {
  state.showPwd = !state.showPwd
}
</script>

<style lang="scss" scoped>
.login-bg {
  background: url('@/static/img/login_bg.png') no-repeat;
  background-size: 100% auto;
  background-color: #ffffff;
  height: 100vh;
}
</style>
