<template>
  <view class="login" :class="{ login_paddingtop: loginState === 1 }">
    <template v-if="loginState === 1">
      <image class="login-bgimg" src="/static/images/bg.png" mode="aspectFill" />
      <view class="login-topclose" @click="proxy.$h.relaunchUrl('/pages/index/index')">
        <u-icon name="close" size="22" color="#000"></u-icon>
      </view>
      <image class="login-avatar flexC" src="/static/images/bg.png" mode="aspectFill"></image>
      <image class="login-logo flexC" src="/static/images/logo.png" mode="aspectFill"></image>
    </template>
    <template v-if="loginState === 2">
      <PhoneLogin @editLoginStateHandler="(state: number) => loginState = state" ref="phoneLoginRef" />
    </template>
    <template v-if="loginState === 3">
      <AccountLogin @editLoginStateHandler="(state: number) => loginState = state" ref="accountLoginRef" />
    </template>
    <template v-if="loginState === 4">
      <view></view>
    </template>
    <ConfirmProtocol @login="loginHandler" :loginState="loginState" ref="confirmProtocolRef" />
    <template v-if="loginState === 1 && iosVersion >= 13">
      <AppleLogin v-if="false" ref="AppleLoginRef" />
    </template>
    <view v-if="loginState === 1" class="login-other flexC" @click="loginState = 2">其他登录方式</view>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { DebounceBy } from '@/utils/debounceBy'
import { onShow } from '@dcloudio/uni-app'
import ConfirmProtocol from './com/ConfirmProtocol.vue'
import PhoneLogin from './com/PhoneLogin.vue'
import AccountLogin from './com/AccountLogin.vue'
import useSetCidHandler from '../../hooks/useSetCidHandler'
import AppleLogin from './com/AppleLogin.vue'

const { proxy } = getCurrentInstance()

const phoneLoginRef = ref<InstanceType<typeof PhoneLogin>>()

const accountLoginRef = ref<InstanceType<typeof AccountLogin>>()

const confirmProtocolRef = ref<InstanceType<typeof ConfirmProtocol>>()

const AppleLoginRef = ref<InstanceType<typeof AppleLogin>>()

const iosVersion = ref<number>(0)

const loginState = ref<number>(1)

onShow(() => {
  uni.getSystemInfo({
    success: function (res) {
      const system = res.system.toLowerCase()
      if (system.indexOf('ios') !== -1) {
        const version = parseInt(system.split(' ')[1], 10)
        if (version >= 13) {
          iosVersion.value = version
        }
      } else {
      }
    }
  })
})

const loginHandler = (state: number) => {
  useSetCidHandler()

  setTimeout(() => {
    state === 1 && confirmProtocolRef.value.oneClickLoginHandler()

    state === 2 && phoneLoginRef.value.loginHandler()

    state === 3 && accountLoginRef.value.doctorLoginWithPwdHandler()
  }, 600)
}
</script>

<style lang="scss" scoped>
page {
}
.login {
  &_paddingtop {
    box-sizing: border-box;
    padding: 236rpx 0 0;
  }
  font-size: 26rpx;
  &-bgimg {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: -100;
  }
  &-topclose {
    position: fixed;
    top: 100rpx;
    left: 32rpx;
  }
  &-avatar {
    width: 136rpx;
    height: 136rpx;
    border-radius: 32rpx;
    /* margin: 236rpx auto 0; */
  }
  &-logo {
    margin: 0 auto;
    width: 320rpx;
    height: 320rpx;
  }
  &-phone {
    color: #323233;
    font-size: 60rpx;
    font-weight: 700;
    margin: 188rpx auto 0;
  }
  &-remark {
    color: #c1c1c6;
    font-size: 26rpx;
    font-weight: 700;
    margin: 12rpx auto 0;
  }

  &-other {
    color: #999999;
    width: 130pt;
    height: 30pt;
    border-radius: 6pt;
    border: 1rpx solid #0000001a;
    position: fixed;
    bottom: 140rpx;
    left: 50%;
    transform: translate(-50%);
  }
}
</style>