<template>
  <view class="login_content">
    <view
      class="login_header_back_btn"
      :style="`padding-top:${capsuleRect.top}px;height:${capsuleRect.height}px;line-height:${capsuleRect.height}px;`"
    >
      <view
        class="btn_back"
        :style="`height:${capsuleRect.height}px;width:${capsuleRect.height}px;`"
        @click="handleBack"
      >
        <uni-icons type="left" size="20"></uni-icons>
      </view>
    </view>

    <view class="login_logo">
      <image
        src="https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K4C9JB5ZGK10VSSKW6HN5P2Y.png"
        mode="heightFix"
      />
    </view>
    <view class="group_des"> 欢迎登录邻里服务 </view>
    <view class="group_from">
      <!-- <view class="title"> 手机号码登录 </view> -->
      <!-- <view class="form_input">
        <hs-input
          v-model:valueModel="from_data.username"
          placeholder="请输入帐号"
          textAlign="left"
        />
      </view>
      <view class="form_input">
        <hs-input
          v-model:valueModel="from_data.password"
          placeholder="请输入密码"
          textAlign="left"
          password
        />
      </view> -->
    </view>

    <view class="footer_btn">
      <!-- <hs-button label="登录" size="md" @click="onSubmit" /> -->
      <hs-button
        label="快捷登录"
        type="primary"
        size="lg"
        v-if="environment === 'wxwork'"
        @click="handleGetPhoneNumberWxwork"
      />
      <hs-button
        type="primary"
        size="lg"
        v-else
        label="快捷登录"
        :openType="CheckedVal ? 'getPhoneNumber' : ''"
        @onGetPhoneNumber="handleGetPhoneNumber"
        @click="privacyToast"
      />
      <!-- <view class="footer_des"> 小程序只供合作企业用户使用，无法登录请联系管理员 </view> -->
    </view>

    <view class="PrivacyPolicy">
      <hs-private-policy
        policyName="《用户协议》"
        v-model:isAgree="CheckedVal"
        @clickPolicy="previewPdf"
      />
    </view>
  </view>
</template>
<script setup lang="ts">
const capsuleRect = ref<any>({})
const environment = ref('')
import { useWeAppAuthStore } from '@/common'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'

const auth = useWeAppAuthStore()
let CheckedVal = ref(false)

//在企业微信上获取手机号绑定
const handleGetPhoneNumberWxwork = () => {
  if (!privacyToast()) {
    return
  }
  uni.showLoading({
    title: '正在登录...',
    mask: true
  })
  uni.qy.getMobile({
    success: function (res: any) {
      console.log(res, 'res')
      if (res?.errMsg === 'qy__getMobile:ok') {
        auth?.handleUserLoginWxwork(res)
      } else {
        uni.showToast({
          title: '获取手机号失败',
          icon: 'none'
        })
      }
    }
  })
}

//绑定手机
const handleGetPhoneNumber = async (data: { detail: { code: string } }) => {
  if (!CheckedVal.value) {
    return false
  }
  uni.showLoading({
    title: '正在登录...',
    mask: true
  })
  auth?.handleUserLogin({ code: data.detail.code })
}

const privacyToast = () => {
  if (!CheckedVal.value) {
    uni.showToast({
      title: '请阅读并勾选隐私政策！',
      icon: 'none'
    })
    return false
  }
  return true
}

const previewPdf = () => {
  uni.showLoading({
    title: '加载中...',
    mask: true
  })
  uni.downloadFile({
    url: 'https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K44N5AP6T246WQWHNB2ERQ9M.pdf',
    success: function (e) {
      const filePath = e.tempFilePath
      uni.hideLoading()
      // 预览pdf
      uni.openDocument({
        filePath: filePath as string,
        showMenu: true
      })
    }
  })
}

const handleBack = () => {
  uni.navigateBack({
    delta: 1
  })
}

onLoad(() => {
  try {
    const res = uni.getSystemInfoSync()
    environment.value = res.environment
  } catch (e) {
    // Do something when catch error
  }
})

onShow(() => {
  capsuleRect.value = uni.getMenuButtonBoundingClientRect()
})
</script>
<style lang="scss">
.login_content {
  background:
    linear-gradient(180deg, rgba(208, 229, 255, 0.44) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(146deg, #d3d7ff 0%, rgba(255, 255, 255, 0) 400rpx),
    linear-gradient(194deg, #dffff3 0%, #ffffff 600rpx);
  padding-top: 350rpx;
}

.login_header_back_btn {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-left: 30rpx;
  .btn_back {
    border: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100rpx;
    background-color: rgba(255, 255, 255, 0.3);
  }
}

.login_logo {
  text-align: center;
  image {
    height: 150rpx;
  }
}

.group_des {
  text-align: center;
  font-size: 48rpx;
  font-weight: 500;
  color: #3d3d3d;
  padding-top: 10rpx;
}

.group_from {
  padding: 70rpx 70rpx 0 70rpx;
  .title {
    font-size: 36rpx;
    padding: 0 0 20rpx 0;
  }
  .form_input {
    background-color: #f8f8f8;
    border-radius: 100rpx;
    padding: 10rpx 30rpx;
    &:last-child {
      margin-top: 20rpx;
    }
  }
}

.footer_btn {
  padding: 40rpx 70rpx;
  .footer_des {
    font-size: 22rpx;
    text-align: center;
    padding-top: 30rpx;
    color: #555;
  }
}

.PrivacyPolicy {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  width: 100%;
  padding: 30rpx 0 0 0;
}
</style>
