<template>
  <view class="">
    <uv-form :model="form" ref="formRef" errorType="toast" :rules="rules">
      <uv-form-item prop="username">
        <view class="h-92rpx bg-white rounded-full w-full flex-center">
          <uv-input
            v-model="form.username"
            shape="circle"
            maxlength="11"
            placeholder="请输入帐号"
            type="text"
            border="none1"
            fontSize="27rpx"
          >
          </uv-input>
        </view>
      </uv-form-item>

      <uv-form-item prop="password">
        <view class="h-92rpx bg-white rounded-full w-full flex-center">
          <uv-input
            v-model="form.password"
            shape="circle"
            placeholder="请输入密码"
            type="password"
            border="none1"
            fontSize="27rpx"
          >
          </uv-input>
        </view>
      </uv-form-item>
      <view class="mt-40rpx">
        <uv-checkbox-group
          shape="circle"
          activeColor="#ff0000"
          v-model="checkboxValue"
        >
          <uv-checkbox :customStyle="{ marginBottom: '8px' }" :name="true">
            <view @click.stop="handleW" class="text-24rpx"
              >登录并同意《隐私政策》</view
            >
          </uv-checkbox>
        </uv-checkbox-group>
      </view>
    </uv-form>
    <view class="mt-115rpx">
      <uv-button block type="primary" shape="circle" @click="onValidate"
        >登录</uv-button
      >
    </view>
  </view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import { useUserStore } from '@/store/modules/user'
const checkboxValue = ref([false])
const userStore = useUserStore()

const form = ref({
  username: '',
  password: '',
})

const rules = computed(() => {
  return {
    username: [
      {
        required: true,
        message: '请输入帐号',
      },
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
      },
    ],
  }
})

const formRef = ref(null)

const handleW = () => {
  uni.navigateTo({ url: '/pages/webview/index' })
}

const onValidate = () => {
  formRef.value.validate().then(() => {
    handleClick()
  })
}

const handleClick = async () => {
  checkboxValue.value = [true]
  try {
    const { username, password } = form.value
    await userStore.login({
      username,
      password,
    })
    uni.switchTab({
      url: '/pages/home/index',
    })
  } catch (e) {
    console.log(e)
  }
}
</script>
