<route lang="yaml">
style:
  navigationBarTitleText: 登录
</route>
<script lang="ts" setup>
import { testLogin, weixinMiniAppLogin } from '../../core/libs/requests'
import { logo } from '../../core/libs/svgs'
import { useUserStore } from '../../store'
import { toContentHtml } from '@/core/utils/common'
import { AgreementType } from '@/core/libs/enums'

const userStore = useUserStore()
const { setUserInfo } = userStore
const loginCode = ref('')
const phoneCode = ref('')
const loginType = ref()
const mobile = ref('')
const getPhoneNumber = async ({ detail: { code: phoneCode } }) => {
  const { code } = await uni.login()
  console.log(code, phoneCode)
  const { data } = await weixinMiniAppLogin(phoneCode, code, '9b2ffbc1-7425-4155-9894-9d5c08541d62')
  setUserInfo({
    token: data.accessToken,
    userId: data.userId,
    accessToken: data.accessToken,
    refreshToken: data.refreshToken,
    expiresTime: data.expiresTime,
    openid: data.openid,
  })
  uni.switchTab({
    url: '/pages/mine/index',
  })
}
const getTestCode = async ({ detail }) => {
  phoneCode.value = detail.code
  const { code } = await uni.login()
  loginCode.value = code
}
const handleTestLogin = async () => {
  // console.log('');
  const { data } = await testLogin({ mobile: mobile.value, password: '123456' })
  setUserInfo({
    token: data.accessToken,
    userId: data.userId,
    accessToken: data.accessToken,
    refreshToken: data.refreshToken,
    expiresTime: data.expiresTime,
    openid: data.openid,
  })
  uni.switchTab({
    url: '/pages/mine/index',
  })
}
onLoad(async (query: { type?: 'test' }) => {
  if (query.type) {
    loginType.value = query.type
  }
})
</script>
<template>
  <div class="flex-grow flex flex-col items-center justify-around px-3.5">
    <div>
      <wd-img :src="logo" width="78" height="78"></wd-img>
      <div class="text-black text-2xl font-normal font-['PingFang_SC'] leading-[10.18px]">
        筑巢荟
      </div>
    </div>
    <div class="w-full">
      <template v-if="loginType === 'test'">
        <div class="flex flex-col gap-4">
          <wd-input placeholder="请输入手机号" v-model="mobile"></wd-input>
          <div>
            <wd-button block @click="handleTestLogin">手机号测试登录</wd-button>
          </div>
        </div>
      </template>
      <template v-else>
        <button
          type="primary"
          size="large"
          :style="{
            backgroundColor: 'black',
          }"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          手机号一键登录
        </button>
        <div class="w-[318px] mt-8">
          <span class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-tight">
            如您点击授权，您将同意并授权
          </span>
          <span
            @click="
              toContentHtml({
                title: '筑巢荟用户服务协议',
                type: AgreementType.HuiWuServiceAgreement,
              })
            "
            class="text-[#0cbe7c] text-xs font-normal font-['PingFang_SC'] leading-tight"
          >
            《筑巢荟用户服务协议》、
          </span>
          <span
            @click="
              toContentHtml({ title: '隐私政策', type: AgreementType.ZCHUserPrivacyAgreement })
            "
            class="text-[#0cbe7c] text-xs font-normal font-['PingFang_SC'] leading-tight"
          >
            《隐私政策》、
          </span>
          <span
            @click="
              toContentHtml({ title: '注册协议', type: AgreementType.ZCHUserRegistrationAgreement })
            "
            class="text-[#0cbe7c] text-xs font-normal font-['PingFang_SC'] leading-tight"
          >
            《注册协议》
          </span>
        </div>
      </template>
    </div>
  </div>
  <!-- <view class="content">
    <textarea v-model="loginCode" placeholder="" placeholder-class="textarea-placeholder" />
    <textarea v-model="phoneCode" placeholder="" placeholder-class="textarea-placeholder" />
    <button style="margin: 20px 0 20px 0" @click="toUserInfoPage">个人资料</button>
    <uni-forms-item label="切换登录方式" labelWidth="70">
      <uni-data-checkbox
        :multiple="false"
        v-model="loginType"
        :localdata="loginTypeOption"
        mode="button"
      ></uni-data-checkbox>
    </uni-forms-item>
    <button @click="weixinLogin">前往登录</button> -->
  <!-- #ifdef MP-WEIXIN -->
  <!-- <button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"> -->
  <!-- 手机号一键登录
    </button> -->
  <!-- #endif -->
  <!-- #ifdef MP-WEIXIN -->
  <!-- <button type="primary" open-type="getPhoneNumber" @getphonenumber="getTestCode">
      获取测试码
    </button> -->
  <!-- #endif -->
  <!-- </view> -->
</template>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rpx;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-top: 200rpx;
  margin-right: auto;
  margin-bottom: 50rpx;
  margin-left: auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 18px;
  color: #8f8f94;
}
</style>
