<template>
  <view class="protocol">
    <view class="protocol-loginBtn flexC" @click="login">{{ [1].includes(props.loginState) ? '一键登录' : '登录' }}</view>

    <view class="flexA protocol-xieyi flexC">
      <view v-if="isConfirmProtocol === false" @click="isConfirmProtocol = true" class="protocol-checkBox"></view>
      <image class="protocol-check flexC" v-else src="/static/images/checked.png" mode="aspectFill" @click="isConfirmProtocol = false"></image>
      <text style="margin-left: 16rpx">
        我已阅读并同意
        <text class="bluetext" @click="proxy.$h.jumpUrl(`/pages/login/agreement?title=用户协议&type=1`)">《用户协议》</text>
        和
        <text class="bluetext" @click="proxy.$h.jumpUrl(`/pages/login/agreement?title=隐私政策&type=2`)">《隐私政策》</text>
      </text>
    </view>
  </view>
  <u-modal :show="showMessage" :title="message">
    <view class="slot-content" style="width: 300rpx">
      <view class="flexA" style="height: 30vh">{{ message }}</view>
    </view>
  </u-modal>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { DebounceBy } from '@/utils/debounceBy'
import { doctorPhoneEasyLogin } from '../../../api'
import { doctorPhoneEasyLoginType } from '../../../types'
import UseSetCidHandler from '@/hooks/useSetCidHandler'

interface IProps {
  loginState: number
}
const props = defineProps<IProps>()

const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

const emit = defineEmits(['login'])

const isConfirmProtocol = ref<Boolean>(false)

const login = DebounceBy(() => (isConfirmProtocol.value ? emit('login', props.loginState) : uni.$u.toast('请先同意协议')), 1500)

const message = ref({})

const showMessage = ref<boolean>(false)

const oneClickLoginHandler = () => {
  // uni.chooseLocation({
  //   success: function (res) {
  //     console.log('位置名称：' + res.name)
  //     console.log('详细地址：' + res.address)
  //     console.log('纬度：' + res.latitude)
  //     console.log('经度：' + res.longitude)
  //   }
  // })

  // uniCloud
  //   .callFunction({
  //     name: 'oneclicklogin', // 你的云函数名称
  //     data: {
  //       access_token: 'bm1mYjQ0MGFkODcwMmU0OWM1YjUzODFhYzY5NmQ0YWYxY3wwNjM1fDN8djJ8M3w0MjYwNzgwM2FkMTUzMmY1YWNkZDUxN2Y1YzIwNTZlZg==', // 客户端一键登录接口返回的access_token
  //       openid: '100gtc_244041310f9634388fe309834f34e77838' // 客户端一键登录接口返回的openid
  //     }
  //   })
  //   .then(res => {
  //     console.log(res, 'callFunction res')
  //     message.value = JSON.stringify(res)
  //     showMessage.value = true
  //     // res.result = {
  //     //   code: '',
  //     //   message: ''
  //     // }
  //   })
  //   .catch(err => {
  //     console.log(err, 'callFunction err')
  //     message.value = JSON.stringify(err)
  //     showMessage.value = true
  //     // 处理错误
  //   })

  // uniCloud
  //   .callFunction({
  //     name: 'oneclicklogin', // 你的云函数名称
  //     data: {
  //       access_token: res.authResult.access_token, // 客户端一键登录接口返回的access_token
  //       openid: res.authResult.openid // 客户端一键登录接口返回的openid
  //     }
  //   })
  //   .then(res => {
  //     console.log(res, 'callFunction res')
  //     message.value = JSON.stringify(res)
  //     showMessage.value = true
  //     // res.result = {
  //     //   code: '',
  //     //   message: ''
  //     // }
  //   })
  //   .catch(err => {
  //     console.log(err, 'callFunction err')
  //     message.value = JSON.stringify(err)
  //     showMessage.value = true
  //     // 处理错误
  //   })

  uni.login({
    provider: 'univerify',
    univerifyStyle: {
      fullScreen: true,
      backgroundImage: 'static/images/bg.png',
      icon: {
        path: 'static/images/logo.png', // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
        width: '60px', //图标宽度 默认值：60px
        height: '60px' //图标高度 默认值：60px
      },
      authButton: {
        normalColor: '#06b8d3', // 授权按钮正常状态背景颜色 默认值：#3479f5
        textColor: '#ffffff', // 授权按钮文字颜色 默认值：#ffffff
        title: '一键登录', // 授权按钮文案 默认值：“本机号码一键登录”
        borderRadius: '24px' // 授权按钮圆角 默认值："24px" （按钮高度的一半）
      },
      otherLoginButton: {
        visible: false
      }
    },
    async success(res) {
      // 登录成功
      console.log(res, '成功')
      try {
        const { result } = await doctorPhoneEasyLogin({ ...res.authResult, cid: uni.getStorageSync('cid') || '' })

        uni.closeAuthView()

        console.log(result, '一键登录')
        // message.value = JSON.stringify(result)
        // showMessage.value = true

        // setTimeout(() => {
        uni.setStorageSync('token', result.token)

        uni.setStorageSync('UserInfo', result.userInfo)

        setTimeout(() => {
          uni.$u.toast('登录成功')
        }, 1000)

        uni.reLaunch({ url: '/pages/index/index' })
        // }, 800)
      } catch (error) {
        uni.$u.toast(error)
        setTimeout(() => {
          uni.closeAuthView()
        }, 1000)
      }
    },
    fail(res) {
      uni.$u.toast('网络错误')
      console.log(res, '失败')
      console.log(res.errMsg)
    }
  })
}

defineExpose({ oneClickLoginHandler })
</script>

<style lang="scss" scoped>
.protocol {
  &-xieyi {
    margin: 44rpx auto 0;
  }
  &-check {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    border: 1rpx solid transparent;
  }
  &-checkBox {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    border: 1rpx solid #999;
  }
  &-loginBtn {
    width: 602rpx;
    height: 108rpx;
    border-radius: 57rpx;
    background: #05b8d2;
    margin: 94rpx auto 0;
    color: #fff;
    font-size: 34rpx;
    font-weight: 700;
  }
}
</style>