<template>
  <div v-if="this.$store.state.formCustomTemplate[formKey]">
    <span class="v-label v-label--active theme--light">
      {{ this.$gzlocale.get("ObjectCustomFieldCustomGrid") }}
    </span>
    <div>
      <h5>FORMKEY: {{ formKey }}</h5>
      <h5>TEMPLATE: {{ this.$store.state.formCustomTemplate[formKey] }}</h5>
      <h5>CUSTOM FIELD DATA:</h5>
      <span class="caption">
        {{ value }}
      </span>
    </div>
    <hr />
    <div>
      <template v-for="item in this.$store.state.formCustomTemplate[formKey]">
        <span  :key="item.fld">
          [{{ item.type }}]
        </span>
      </template>
    </div>
  </div>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  Xeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////
/**
 * v-if="item.hide == false"
 *
 * TODO: have the template, have the custom field data, now just need to show it all properly and update the fragment of json when changes made which then updates the
 * parent object.
 *
 * 1) read the template
 * 2) Generate the controls dynamically based on the template
 * 3) bind to the data somehow (might have to warp the data to fit the controls in some cases due to changed template design)
 * 4) Profit$
 *
 */
export default {
  data() {
    return {
      obj: { blah: "blah", rhubarb: "rhubarb" }
    };
  },
  props: {
    value: String,
    formKey: String //used to grab template from store
  },
  watch: {
    value(val) {
      //this ensures the parent form gets the onchange event
      //not actually sure why there are two here but it worked with the datetime picker so I replicated it here
      this.$emit("input", val);
      this.$emit("change", val);
    }
  },

  methods: {},
  beforeCreate() {
    //check pre-requisites exist just in case
    if (this.$gzdevmode()) {
      if (!this.$_) {
        throw "custom-fields-control: $_ (lodash) is required and missing";
      }
      if (!this.$gzlocale) {
        throw "custom-fields-control: $gzlocale is required and missing";
      }
    }
  },
  created() {
    if (this.$gzdevmode()) {
      if (!this.formKey) {
        throw "custom-fields-control: formKey property is required and missing";
      }
    }
  }
};
</script>
