<template>
  <div
    :class="$style.radioCheck"
    :style="{
      'flex-direction': alignRadio
    }"
  >
    <div v-for="(element, index) in elements" :key="index">
      <input
        type="radio"
        :id="id + element.id"
        :value="element[filterValue]"
        v-model="select"
        @change="changeValue"
      />
      <label :for="id + element.id">
        <span>{{ element[filterName] }}</span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    elements: {
      type: [String, Array, Object],
      required: true
    },
    filterName: {
      type: String,
      default: "name"
    },
    filterValue: {
      type: String,
      default: "value"
    },
    alignRadio: {
      type: String,
      default: "row"
    },
    value: {
      type: [Number, String, Object],
      default: null
    }
  },
  data() {
    return {
      select: null,
      id: null
    };
  },
  mounted() {
    this.id = this._uid.toString() + "-";
    this.select =
      this.value[this.filterValue] != null
        ? this.value[this.filterValue]
        : this.value;
    this.changeValue();
    // if (this.keyActive != null) {
    //   this.select = this.keyActive;
    //   this.changeValue();
    // }
  },
  methods: {
    changeValue() {
      this.$emit("input", this.select);
    }
  }
};
</script>

<style lang="scss" module>
.radioCheck {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  input[type="radio"] {
    display: none;

    &:checked + label::after {
      background-color: rgba(96, 125, 139, 1);
    }
  }

  label {
    position: relative;
    cursor: pointer;
    padding-right: 8px;
    margin: 0;

    span {
      margin-left: 6px;
      font-size: 12px;
      top: -4px;
      position: relative;
    }

    &::before {
      content: "";
      border: 2px solid #607d8b;
      display: inline-block;
      width: 18px;
      height: 18px;
      border-radius: 100%;
    }

    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      width: 8px;
      height: 8px;
      background-color: rgba(96, 125, 139, 0);
      left: 5px;
      top: 5px;
      margin-left: 0;
      border-radius: 100%;
    }
  }
}
</style>
