<template>
  <view class="login_content">
    <hs-all-page-bg />
    <view class="login_content_box">
      <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/01K4720FBMW7CSV7XJXERJRV8S.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
          type="primary"
          size="lg"
          label="快捷登录"
          :openType="CheckedVal ? 'getPhoneNumber' : ''"
          @onGetPhoneNumber="handleGetPhoneNumber"
          @click="privacyToast"
        />
        <!-- <view class="primary_two_btn">
        <hs-button type="primary_two" size="lg" label="使用短信验证码登录" />
      </view> -->
      </view>

      <view class="PrivacyPolicy">
        <hs-private-policy
          policyName="《用户协议》"
          v-model:isAgree="CheckedVal"
          @clickPolicy="previewPdf"
        />
      </view>
    </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 pageSource = ref('')
const from_data = ref({
  username: '',
  password: ''
})

const auth = useWeAppAuthStore()
let CheckedVal = ref(false)
onLoad(e => {
  pageSource.value = e?.source
})

const handleBack = () => {
  if (pageSource.value === 'transfer') {
    uni.switchTab({
      url: '/pages/index/index'
    })
  } else {
    uni.navigateBack({
      delta: 1
    })
  }
}

//绑定手机
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/01K44N70AAG2V678XATHQTH1RC.pdf',
    success: function (e) {
      const filePath = e.tempFilePath
      uni.hideLoading()
      // 预览pdf
      uni.openDocument({
        filePath: filePath as string,
        showMenu: true
      })
    }
  })
}

onShow(() => {
  capsuleRect.value = uni.getMenuButtonBoundingClientRect()
})
</script>
<style lang="scss">
.login_content {
  background-color: #f8f8f8;
}

.login_content_box {
  position: relative;
  z-index: 10;
  padding-top: 350rpx;
  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);
}

.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: 140rpx;
  }
}

.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;
  }
  .primary_two_btn {
    padding-top: 40rpx;
  }
}

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