<template>
  <main id="main">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="section-header">
            <h2>User Defined Field</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row mb-3">
        <div class="col-md-12">
          <form id="mainForm">
            <div class="form-group row">
              <div class="col-md-4">
                <label>Field Name</label>
                <input
                  class="form-control"
                  type="text"
                  name="description"
                  id="description"
                  v-model="userField.fieldName"
                />
              </div>
              <div class="col-md-4">
                <label>Field Type</label>
                <select
                  class="form-control"
                  name="UsageType"
                  id="UsageType"
                  v-model="userField.fieldType"
                >
                  <option value="text">Text</option>
                  <option value="number">Numberic</option>
                  <option value="yesno">Yes / No</option>
                </select>
              </div>
              <div class="col-md-4">
                <label>Order</label>
                <input
                  class="form-control"
                  type="number"
                  name="rank"
                  id="rank"
                  v-model="userField.rank"
                />
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="row">
        <div align="center" class="col">
          <button type="button" @click="SubmitData()" class="btn-solid-blue mb-5">
            Save
          </button>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  name: "UserField",
  props: {
    field: {}
  },
  data() {
    return {
      userField: {}
    };
  },
  mounted() {
    if (this.field) {
      this.userField = this.field;
    }
  },
  methods: {
    SubmitData() {
      this.$emit("UpdateUserField", this.userField);
    }
  }
};
</script>
