<template>
  <div class="radiosquare">
    <input class="radiosquare__field" :id="random" type="radio" :value="radioValue" v-model="selected" :name="name" :required="required"/>
    <label class="radiosquare__label" :for="random"><slot></slot></label>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
    };
  },

  props: {
    'radioValue': {
      type: [String, Number],
      required: true
    },
    'value': {
      type: [String, Number]
    },
    'name': {
      type: String,
      required: true
    },
    'required': {
      default: false,
      type: Boolean
    }
  },

  computed: {
    random() {
      return Math.floor((Math.random() * 10000) + 1);
    },
    selected: {
      get: function() {
        return this.value
      },
      set: function(value) {
        this.$emit('input', value)
      }
    }
  },

  methods: {
    keyName(obj) {
      return Object.keys(obj)
    }
  },
};
</script>
<style lang="scss">
  .radiosquare {
    border: 2px solid #DDD;
    display: inline-flex;
    height: 108px;
    margin: .25rem;
    position: relative;
    transition: all .4s;
    width: 108px;

    @media screen and (min-width:769px) {
      margin: .5rem;
    }

    label {
      align-items: center;
      box-sizing: border-box;
      cursor: pointer;
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      padding: .5rem;
      transition: all .4s;
      width: 100%;
    }

    input[type="radio"]{
      border: 0;
      height: 100%;
      left: 0;
      margin: 0;
      opacity: 0;
      padding: 0;
      position: absolute;
      top: 0;
      transition: all .4s;
      width: 100%;
      z-index: 1;
    }

    input[type="radio"]:checked + label{
      background-color: #000;
      color: #FFF;
      transition: all .4s;
    }
  }
</style>


