<template>
  <view class="c-login-container">
    <view>

      <u-form labelPosition="left" :model="model1" :rules="rules" ref="loginForm" :labelWidth="0">
        <u-form-item prop="userInfo.name" ref="item1">
          <u-input
            v-model="model1.userInfo.name"
            placeholder="请输入手机号"
            :shape="'circle'"
          ></u-input>
        </u-form-item>
        <u-form-item prop="userInfo.name" ref="item1">
          <u-input
            v-model="model1.userInfo.name"
            placeholder="请输入验证码"
            :shape="'circle'"
          >
            <template #suffix>
              <text>获取验证码</text>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item prop="userInfo.name" ref="item1">
          <u-input
            v-model="model1.userInfo.name"
            placeholder="请设置密码"
            :shape="'circle'"
            :type="'password'"
          ></u-input>
        </u-form-item>
        <u-form-item>
          <view class="c-flex-space-between">
            <u-checkbox-group
              v-model="checkboxValue1"
              placement="column"
              @change="checkboxChange"
            >
              <u-checkbox
                :customStyle="{ fontSize: '8px' }"
                :key="'1'"
                :label="'记住密码'"
                :name="'记住密码'"
              />
            </u-checkbox-group>
            <text class="f-s-15 l-h-28">无法收到验证码</text>
          </view>
        </u-form-item>
      </u-form>
      <u-button @click="submit">立即登录</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
const loginForm = ref(null);
const checkboxValue1 = ref([]);
const model1 = ref({
  userInfo: {
    name: "",
    sex: "",
  },
});
const rules = ref({
  "userInfo.name": {
    type: "string",
    required: true,
    message: "请填写姓名",
    trigger: ["blur", "change"],
  },
  "userInfo.sex": {
    type: "string",
    max: 1,
    required: true,
    message: "请选择男或女",
    trigger: ["blur", "change"],
  },
});

const checkboxChange = (n: any) => {
  console.log("change", n);
};
const submit = () => {
  (loginForm.value as any).validate();
};
</script>

<style lang="scss" scoped>
.c-flex-space-between {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
}
</style>
