<route lang="yaml" type="home">
style:
  navigationBarTitleText: ''
  navigationBarBackgroundColor: '#ffffff'
</route>
<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { login } from '../../core/libs/requests'
import { useUserStore } from '../../store'
import { loginAccountIcon, loginPswIcon } from '@designer-hub/assets/src/svgs'

const userStore = useUserStore()
const { isLogined } = storeToRefs(userStore)
const { setUserInfo } = userStore
const formData = ref({
  mobile: '',
  password: '',
  socialType: 10,
  socialCode: '1024',
  socialState: '9b2ffbc1-7425-4155-9894-9d5c08541d62',
  socialCodeValid: true,
})
const handleLogin = async () => {
  const { msg, code, data } = await login(formData.value)
  if (code !== 0) {
    uni.showToast({ title: msg })
  } else {
    setUserInfo({
      ...data,
      token: data.accessToken,
    })
    uni.reLaunch({ url: '/pages/home/index' })
  }
}
onLoad(() => {
  if (isLogined.value) {
    uni.reLaunch({ url: '/pages/home/index' })
  }
})
</script>
<template>
  <div class="flex-grow flex flex-col items-center justify-start px-7.5 bg-[#ffffff] pt-[100px]">
    <template v-if="!(isLogined ?? true)">
      <div class="flex flex-col justify-start mb-[57px] title">
        <div class="text-black text-2xl font-normal font-['PingFang_SC']">你好!</div>
        <div class="text-black text-2xl font-normal font-['PingFang_SC'] mt-[9px]">
          欢迎来到筑巢荟
        </div>
      </div>
      <div class="w-full flex flex-col gap-6.5">
        <div class="bg-[#F6F6F6] flex items-center h-12.5 px-5 rounded-full gap-4">
          <wd-img :src="loginAccountIcon" mode="widthFix" width="19" />
          <wd-input
            no-border
            type="number"
            placeholder="请输入手机号"
            v-model="formData.mobile"
            custom-class="bg-transparent!"
          />
        </div>
        <div class="bg-[#F6F6F6] flex items-center h-12.5 px-5 rounded-full gap-4">
          <wd-img :src="loginPswIcon" mode="widthFix" width="19" />
          <wd-input
            no-border
            type="number"
            placeholder="请输入密码"
            v-model="formData.password"
            custom-class="flex-1 bg-transparent!"
          />
        </div>
      </div>
      <div class="w-full flex items-center justify-between mt-[19px]">
        <wd-checkbox :modelValue="true" shape="square">记住密码</wd-checkbox>
        <div class="text-[#2357e9] text-xs font-normal font-['PingFang_SC']">忘记密码？</div>
      </div>
      <div class="w-full mt-[50px]">
        <wd-button block :round="false" @click="handleLogin">登录</wd-button>
      </div>
      <div class="mt-8">
        <span class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-tight">
          登录即代表您已阅读并同意筑巢荟的
        </span>
        <span class="text-[#2357e9] text-xs font-normal font-['PingFang_SC'] leading-tight">
          《服务使用协议》
        </span>
      </div>
    </template>
  </div>
</template>

<style lang="scss">
.title {
  width: 100%;
}
</style>
