<template>
      <v-form
        ref="form"
        v-model="isValid"
        class="pa-4 pt-6"
      >
        <v-text-field
          v-model="usrname"
          variant="filled"
          :rules="[rules.usrname]"
          color="pink"
          label="用户名"
        ></v-text-field>
        <v-text-field
          v-model="password"
          variant="filled"
          :rules="[rules.password]"
          color="pink"
          label="密码"
          type="password"
        ></v-text-field>

        <!--
          :rules="[rules.password]"
          counter="6"
            style="min-height: 96px"
            <v-text-field
          v-model="email"
          :rules="[rules.email]"
          variant="filled"
          color="deep-purple"
          label="Email address"
          type="email"
        ></v-text-field> -->
        <!-- <v-textarea
          v-model="bio"
          auto-grow
          variant="filled"
          color="deep-purple"
          label="Bio"
          rows="1"
        ></v-textarea> -->

      </v-form>
      <!-- <v-divider></v-divider> -->
      <v-card-actions>
        <v-btn
        :disabled="!isValid"
        :loading="loading"
        block
        class="text-none mb-4"
        color="pink"
        size="x-large"
        variant="flat"
        @click="loading = !loading"
      >
        登录
      </v-btn>
        <!-- <v-btn
          variant="text"
          @click="form.reset()"
        >
          Clear
        </v-btn>
        <v-spacer></v-spacer>
        <v-btn
          :disabled="!isValid"
          :loading="isLoading"
          color="deep-purple-accent-4"
        >
          Submit
        </v-btn> -->
      </v-card-actions>
      <!-- <v-dialog
        v-model="dialog"
        max-width="400"
        persistent
      >
        <v-card>
          <v-card-title class="text-h5 bg-grey-lighten-3">
            Legal
          </v-card-title>
          <v-card-text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </v-card-text>
          <v-divider></v-divider>
          <v-card-actions>
            <v-btn
              variant="text"
              @click="agreement = false, dialog = false"
            >
              No
            </v-btn>
            <v-spacer></v-spacer>
            <v-btn
              color="deep-purple"
              variant="tonal"
              @click="agreement = true, dialog = false"
            >
              Yes
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog> -->

  </template>
  <script setup>
    import { ref } from 'vue';
    import { reactive } from 'vue';

    const form = ref(null)
    const rules = reactive({
          email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
          length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
          usrname:v => !!v || '用户名不能为空',
          password:v => !!v || '密码不能为空',
          // password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
          //   'Password must contain an upper case letter, a numeric character, and a special character',
          required: v => !!v || 'This field is required',
        });
    const usrname = ref(null);
    const password = ref(null);
    const isValid = ref(false);
    const isLoading = ref(false);
    const loading = ref(false);


    // export default {
    //   data: () => ({
    //     agreement: false,
    //     bio: 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts',
    //     dialog: false,
    //     email: undefined,
    //     isValid: false,
    //     isLoading: false,
    //     password: undefined,
    //     phone: undefined,
        // rules: {
        //   email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
        //   length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
        //   password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
        //     'Password must contain an upper case letter, a numeric character, and a special character',
        //   required: v => !!v || 'This field is required',
        // },
    //   }),
    // }
  </script>