<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '欢迎登录',
    navigationBarBackgroundColor: '#f6d7a7',
  },
}
</route>

<template>
  <view class="text-center container">
    <view class="px-5 pt-20 pb-20 top-box">
      <view class="con-top">
        <view class="h1 mb-6 mt-8">科湃腾肉牛系统</view>
        <view class="h3 mb-14 pt-4">简化牧场管理，从这里开始！</view>
      </view>
      <!-- <view class="btn mt-10 user" @click="handleWX">用户一键登录</view> -->
      <view class="footer mt-10">
        <wd-button
          type="primary"
          size="large"
          open-type="getUserInfo"
          getuserinfo="loginWithWeChat"
          block
        >
          用户一键登录
        </wd-button>
      </view>
      <view class="footer mt-5">
        <wd-button size="large" type="success" @click="getPhone" block>手机号安全登录</wd-button>
      </view>
      <!-- <view class="btn mt-10 tel" @click="getPhone">手机号安全登录</view> -->

      <view class="mt-5">
        <wd-radio-group :modelValue="isChecked" inline checked-color="#eea441" @change="setChecked">
          <wd-radio :value="true" shape="dot" class="title" inline>
            我已认真阅读并同意《服务协议》、《隐私政策》
          </wd-radio>
          <!-- <text>  我已认真阅读并同意《服务协议》、《隐私政策》</text> -->
        </wd-radio-group>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
defineOptions({
  name: 'Login',
})

const isChecked = ref(false)
const getPhone = () => {
  uni.navigateTo({ url: '/pages/phone/phone' })
}

// 选择微信登录
const handleWX = () => {}
// 勾选同意
const setChecked = (val) => {
  console.log(val, isChecked.value, '000')
  if (isChecked.value) {
    isChecked.value = false
  } else {
    isChecked.value = true
  }
}

// 微信授权登录
const loginWithWeChat = (e) => {
  if (e.detail.userInfo) {
    uni.login({
      provider: 'weixin',
      success: (loginRes) => {
        console.log(loginRes)
        // 获取微信登录的授权码
        const code = loginRes.code
        // TODO: 获取code码 给到后端接口获取用户信息
        // uni.request({
        //   url: 'https://your-api.com/wechat-login',
        //   method: 'POST',
        //   data: {
        //     code: loginRes.code,
        //   },
        //   success: (res) => {
        //     if (res.data.success) {
        //       uni.setStorageSync('userToken', res.data.token)
        //       uni.showToast({
        //         title: '登录成功',
        //       })
        //     } else {
        //       uni.showToast({
        //         title: '登录失败',
        //         icon: 'none',
        //       })
        //     }
        //   },
        // })
      },
    })
  }
}
</script>

<style lang="scss" scoped>
//
.con-top {
  color: #f99304;
  font-size: 56rpx;
}
.h3 {
  font-size: 36rpx;
}

.btn {
  color: #fff;
  border-radius: 60rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 16px;
  margin: 30rpx auto;
  font-family: PingFang SC;
}

.user {
  background-color: #eea441;
  margin-bottom: 50rpx;
}
.tel {
  background-color: #2a9d8f;
}
.container {
  // background-color: #fafafa;
  height: 100vh;
}
.top-box {
  // background-color: #fff;
  background: linear-gradient(to bottom, #f6d7a7, #fff);
}
::v-deep .wd-radio-group.data-v-a6e3f5b0,
.wd-radio-group {
  background-color: transparent;
}
::v-deep .title > .wd-radio__label {
  font-size: 20rpx !important;
}
::v-deep .wd-button.is-success.data-v-aa3a6253 {
  background-color: #2a9d8f !important;
}
</style>
