<template>
  <div class="form-group">
    <label v-if="label" class="form-label" :for="id">
      {{ label }}
      <span v-if="$attrs.required !== undefined" class="form-required">*</span>
    </label>

    <vue-tel-input
      :id="id"
      :inputClasses="`form-control ${hasError ? ' is-invalid': ''}`"
      :inputOptions="{ showDialCode }"
      v-on="$listeners"
      v-bind="$attrs"
    ></vue-tel-input>

    <div v-if="hasError" class="invalid-feedback d-block">
      <slot name="invalid-feedback">{{ getError }}</slot>
    </div>
  </div>
</template>

<script>
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/dist/vue-tel-input.css';
import ErrorMixin from '../../../mixins/error-mixin';

export default {
  name: 'EbTelInput',

  components: { VueTelInput },

  mixins: [ErrorMixin],

  inject: {
    elForm: {
      default: ''
    },
    elFormItem: {
      default: ''
    }
  },

  inheritAttrs: false,

  props: {
    id: {
      type: String,
      default() {
        return `tel-input-${this._uid}`;
      }
    },
    label: String,
    showDialCode: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style scoped>
.form-control.is-invalid,
input.is-invalid {
  border-color: #cd201f;
  padding-right: calc(1.6em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23cd201f' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23cd201f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
  background-repeat: no-repeat;
  background-position: center right calc(0.4em + 0.1875rem);
  background-size: calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
}

.el-table th div {
  padding-left: 0;
  padding-right: 0;
}

.cell > .form-group {
  margin-bottom: 0;
  vertical-align: bottom;
  padding-top: 0.75rem;
}

.vue-tel-input > .dropdown {
  padding: 0 !important;
}

.vue-tel-input {
  border: 1px solid rgba(0, 40, 100, 0.12) !important;
}
</style>
