<template>
  <div>
    <v-form ref="contactForm" v-model="valid" :lazy-validation="lazy">
      <v-row no-gutters>
        <v-col cols="12">
          <v-text-field
            label="First Name"
            ref="firstName"
            v-model="firstname"
            outlined
            required
            dense
            :rules="textRules"
          ></v-text-field>
          <v-text-field
            label="Last Name"
            ref="lastName"
            v-model="lastname"
            outlined
            dense
            required
            :rules="textRules"
          ></v-text-field>
          <v-text-field label="Company" ref="company" v-model="company" outlined dense></v-text-field>
          <v-text-field
            label="Phone Number"
            ref="phoneNumber"
            v-model="telephone"
            outlined
            dense
            :rules="phoneNumberRules"
            required
            maxlength="12"
            type="number"
          ></v-text-field>
        </v-col>
      </v-row>
    </v-form>
  </div>
</template>
<script>
import { createHelpers } from "vuex-map-fields";

const { mapFields } = createHelpers({
  getterType: "accountOne/getField",
  mutationType: "accountOne/updateField"
  });
export default {
  name: "ContactInfoComponent",
  props: ["contactDetails"],
  computed: {
      ...mapFields([
      "one",
      "one.firstname",
      "one.lastname",
      "address",
      "address.telephone",
      "address.company"
    ])
    },
  data: () => ({
    //company: "",
    valid: true,
    lazy: false,
    textRules: [
      v => !!v || "This field is required",
      v => (v && v.length >= 3) || "This field must be at least 3 characters"
    ],
    phoneNumberRules: [
      v => !!v || "This field is required",
      v => (v && v.length >= 8) || "Phone Number must be at least 8 characters"
    ]
  }),
  components: {},
  
  methods: {},
  created() {    
  }
};
</script>