<template>
  <div class="login-container">
    <uv-navbar title="登录" bgColor="#C6171E" leftIconColor="#FFFFFF" :titleStyle="{ color: '#FFFFFF' }" :autoBack="true" :placeholder="true"></uv-navbar>
    <!-- Logo区域 -->
    <div class="logo-box">
      <img src="@/static/logo.png" alt="logo" class="logo">
      <div class="app-name">Yeswash洗车</div>
    </div>

    <!-- 登录按钮 -->
    <div class="login-box">
      <uv-button
          class="phone-login-btn" type="primary" color="#C6171E"
          shape="circle"
          @getphonenumber="handleGetPhone" open-type="getPhoneNumber|agreePrivacyAuthorization">
    一键登录
      </uv-button>
    </div>

    <!-- 隐私协议 -->
    <div class="privacy-box" style="display: none;">
      <view style="display: inline-flex" class="agreement">
        <uv-checkbox-group
            v-model="isAgreePrivacy"
            shape="circle">
          <uv-checkbox
              :name="'aa'"
              activeColor="#C6171E"
          ></uv-checkbox>
        </uv-checkbox-group>
        <view class="text">
          我已阅读并同意
          <view class="link" @click="showUserAgreement">《用户协议》</view>
          和
          <view class="link" @click="showPrivacyPolicy">《隐私政策》</view>
        </view>
      </view>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {login} from "@/utils/auth";
import {onLoad} from "@dcloudio/uni-app";

const isAgreePrivacy = ref([])
const redirectUrl = ref("")
const shortId = ref(null)
const stationId = ref(null)
const phone_ref = ref(null)


onLoad((options: any) => {
  redirectUrl.value = options?.redirectUrl
  shortId.value = options?.shortId
  stationId.value = options?.stationId
})

const handleWechatLogin = () => {
  if (!isAgreePrivacy.value) {
    uni.showToast({
      title: '请先同意用户协议和隐私政策',
      icon: 'none'
    })
    return
  }
}

const handleShowModal = () => {
  wx.getPrivacySetting({
    success: res => {
      if (res.needAuthorization) {
        wx.requirePrivacyAuthorize({
          success: () =>handleGetPhone1,
          fail: () => uni.showToast({ title: '需同意协议', icon: 'none' })
        })
      } else {
        handleGetPhone1()
      }
    }
  })
}

const handleGetPhone1 =async  () => {
  phone_ref.value?.click();
}

const handlePrivacyChange = () => {
}

const showUserAgreement = () => {
  uni.navigateTo({
    url: '/pages-user/agreement/index'
  })
}

const showPrivacyPolicy = () => {
  uni.navigateTo({
    url: '/pages-user/policy/index'
  })
}

const handleClickLoginBtn = () => {
}

const handleGetPhone = (e: any) => {
  if (shortId.value) {
    e.shortId = shortId.value;
  }
  login(e).then((token: string) => {
    uni.navigateBack()
  })
}
</script>

<style scoped lang="scss">
.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 60rpx;
  background: $uni-bg-color-card;
}

.logo-box {
  margin-bottom: 160rpx;
  text-align: center;
}

.logo {
  border-radius: 50%;
  width: 240rpx;
  height: 240rpx;
  margin-bottom: 40rpx;
}

.app-name {
  font-size: 48rpx;
  font-weight: $uni-font-weight-semibold;
  color: $uni-text-color;
}

.login-box {
  width: 100%;
  margin-bottom: 80rpx;
}

.wechat-login-btn,
.phone-login-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-bottom: 30rpx;
  cursor: pointer;
}

.wechat-login-btn {
  background: #07c160;
  color: $uni-text-color-inverse;
}

.phone-login-btn {
  background: $uni-bg-color-page;
  color: $uni-text-color;
}

.wechat-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 16rpx;
}

.privacy-box {
  position: fixed;
  bottom: 60rpx;
  left: 0;
  right: 0;
  padding: 0 60rpx;
}

.agreement {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: $uni-text-color-secondary;
  position: relative;
}

.agreement input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


.text {
  display: inline-flex;
  line-height: 1.4;
}

.link {
  color: $uni-color-primary
}
</style>
