<template>
  <div>
    <div class="background">
			<div class="block_3 flex-col">
			    <div class="section_1 flex-col"></div>
			    <div class="section_2 flex-col"></div>
			    <div class="section_3 flex-col"></div>
			</div>
		</div>
    <h2 class="log-tit">体检预约</h2>
    <van-form @submit="logSub" class="log-form">
      <van-field
        v-model="username"
        name="account"
        :placeholder="accountPlaceHolder"
        @focus="focusAccount"
        @blur="blurAccount"
        :rules="[{ required: true, message: '请填写账号！' }]"
        autocomplete="off"
        clearable
        style="border: 1px solid #62b0b0; background-color: #f3f9f9; font-size: 16px; box-sizing: border-box;"
      />
      <van-field
        v-model="password"
        name="password"
        :type="pwdType"
        :placeholder="pwdPlaceHolder"
        @focus="focusPwd"
        @blur="blurPwd"
        :rules="[{ required: true, message: '请填写密码！' }]"
        autocomplete="off"
        clearable
        style="margin-top: 0.5rem; border: 1px solid #62b0b0; background-color: #f3f9f9; font-size: 16px;"
      >
        <template #button>
            <van-button
              style="font-size: 16px; background-color: transparent; color: #1989fa; border: none;"
              size="small" 
              type="primary"
            >
              <span v-if="pwdStatus === 0" @click="showPwd">查看</span>
              <span v-if="pwdStatus === 1" @click="hidePwd">隐藏</span>
            </van-button>
        </template>
      </van-field>
      <div class="user-taps">
        <span @click="jumpForget()">忘记密码</span>
        <span @click="jumpMsg()">短信安全登录</span>
      </div>
      <div class="btn-area">
        <van-button 
          type="primary"
          native-type="submit"
          style="width: 70%; border-radius: 0.5rem; font-size: 18px;"
          @click="fetchLogin()"
        >
          登录
        </van-button>
      </div>
    </van-form>
    <van-overlay 
      :show="showPop"
    >
      <div
        style="
          width: 100vw; 
          height: 10vh;
          display: flex; 
          justify-content: right;
          align-items: center;
        "
      >
        <span style="color: #fff; font-size: 18px">点击此处用浏览器打开</span>
      <img 
        :src="arrowImg" 
        style="width: 20vw; height: 100%;"
        alt=""
      >
      </div>
    </van-overlay>
  </div>
</template>
<script setup lang="ts">

  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router'
  import { login } from '../../api/AccountLogin'
  import Crypoto from '../../api/AesCbc'
  import { showFailToast, showSuccessToast } from 'vant'
  import './scss/index.scss'
  import arrowImg from '../../static/openArrow.png'

  const cry: any = new Crypoto()
  const username = ref<any>('')
  const password = ref<any>('')
  const router = useRouter()
  const accountPlaceHolder = ref<string>('账号')
  const pwdPlaceHolder = ref<string>('密码')
  const pwdType = ref<any>('password')
  const pwdStatus = ref<number>(0)
  const showPop = ref<boolean>(false)


  // 输入框显示密码
  const showPwd = () => {
    pwdType.value = 'input'
    pwdStatus.value = 1
  }

  // 输入框隐藏密码
  const hidePwd = () => {
    pwdType.value = 'password'
    pwdStatus.value = 0
  }

  // 输入框获得焦点
  const focusAccount = () => {
    accountPlaceHolder.value = ''
  }
  const focusPwd = () => {
    pwdPlaceHolder.value = ''
  }

  // 输入框失去焦点
  const blurAccount = () => {
    accountPlaceHolder.value = '账号'
  }
  const blurPwd = () => {
    pwdPlaceHolder.value = '密码'
  }

  // 表单提交事件
  const logSub = (val: any) => {
    console.log('submit', val)
  }

  // 跳转到忘记密码
  const jumpForget = () => {
    router.push({
      path: '/forgetPassword'
    })
  }

  // 跳转到短信登录
  const jumpMsg = () => {
    router.push({
      path: '/msgLogin'
    })
  }

  // 点击登录
  const fetchLogin = () => {
    login({
      username: cry.encrypt(username.value),
      password: cry.encrypt(password.value)
    }).then((res: any) => {
      if (res.status === 200) {
        console.log(res.status)
        showSuccessToast('登录成功！')
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('phoneNumber', cry.encrypt(username.value))
        localStorage.setItem('avatarUrl', 'https://img.zcool.cn/community/0104c958b69c23a801219c77ba5da2.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100')
        // 设置登录状态码持续时间为3h
        const overDate = new Date().getTime() - 8 * 60 * 60 * 1000 + 3 * 60 * 60 * 1000
        document.cookie = `loginStatus=0;expires=${new Date(overDate)}`
        router.replace({
          path: '/home',
          query: {
            pwd: password.value
          }
        })
      } else {
        showFailToast('用户名或密码错误！')
      }
    }).catch(() => {
      showFailToast('用户名或密码错误！')
    })
  }

  const isAndroid = () => {
    showPop.value = true
   /* showConfirmDialog({
      title: '使用浏览器打开',
      message: '检测到当前为微信浏览器，建议使用外部浏览器打开此页面',
      showCancelButton: false
   }).then(() => {
    //  console.log(import.meta.env)
     window.location.href = 'http://112.29.103.165:1616/yntj/#/accountLogin'
   }).catch(() => {
     console.log('取消')
   }) */
  }

  onMounted(() => {
    let ua = window.navigator.userAgent.toLowerCase()
    console.log(ua)
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      isAndroid()
    } else {
      // isAndroid()
      console.log('不是微信')
    }
  })

</script>

<style scoped lang="scss">
  .background {
      width: 10rem;
		  height: 8rem;
		  background: url('../../static/bg.jpg')
		    100% no-repeat;
		  background-size: 100% 100%;
		  width: 100%;
		  position: absolute;
		  left: 0;
		  top: 0;
		  .section_1 {
			  background-color: rgba(255, 255, 255, 0.1);
			  border-radius: 50%;
			  width: 4rem;
			  height: 4rem;
			  position: absolute;
			}
		
		.section_2 {
			  background-color: rgba(255, 255, 255, 0.1);
			  border-radius: 50%;
			  position: absolute;
			  left: 0.1rem;
			  top: 1.2rem;
			  width: 6rem;
			  height: 6rem;
			}
		
		.section_3 {
			  background-color: rgba(255, 255, 255, 0.0624);
			  border-radius: 50%;
			  position: absolute;
			  left: 6rem;
			  top: 0.5rem;
			  width: 4rem;
			  height: 4rem;
			}
		}
    .log-tit{
      width: 100%;
      padding-top: 4rem;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
    }
    .log-form{
      width: 80%;
      height: 8rem;
      margin: 3.5rem auto;
      box-sizing: border-box;
      padding: 0.5rem;
      .user-taps{
        width: 100%;
        margin-top: 0.3rem;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 0.2rem;
        span{
          font-size: 14px;
          color: #49b3f2;
        }
      }
      .btn-area{
        width: 100%;
        margin-top: 0.6rem;
        display: flex;
        justify-content: center;
      }
    }
    
</style>