<script>
import PlainLabel from "~/components/atoms/label/PlainLabel";
import PlainList from "~/components/atoms/list/PlainList";
import DateInput from "~/components/atoms/input/DateInput";

export default {
  components: {DateInput, PlainList, PlainLabel},
  props: {
    value: {default: ""},
    label: {default: ""},
    type: {default: ""},
    format: {default: ""},
    disabled_date: {default: ""},
    size: {default: "md"},
    placeholder: {type: String},
    is_disabled: {default: false},
    is_submitted: {default: false},
    is_error: {default: false},
    error_message: {default: []},
    additional_class_group: {default: ""},
    additional_class_input: {default: ""},
    additional_class_label: {default: ""}
  },
  computed: {
    local_value: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    submitToParent() {
      this.$emit("submit")
    }
  }
}
</script>
<template>
  <div :class="'form-group ' + additional_class_group">
    <plain-label :value="label" :is_bold="true" :additional_class="additional_class_label"/>
    <date-input :type="type" :format="format" v-model="local_value" :disabled_date="disabled_date"
                :placeholder="placeholder" :additional_class="additional_class_input"/>
    <small class="text-danger" v-if="is_submitted && is_error">
      <plain-list v-for="(error, index) in error_message" v-if="!error.state" :key="index" additional_class="ml-3 my-1">
        {{ error.message }}
      </plain-list>
    </small>
  </div>
</template>
