<template>
  <div class="models">
    <div class="models__title" v-html="title"></div>
    <div class="models__item model" v-for="(model, index) in modelList">
      <radio-square :required="true" :radio-value="model.label" :name="name" v-model="selected">
        <div class="model__img">
          <img :src="model.url" width="300px" height="150px" :alt="model.label" :title="`Seleziona modello ${model.label}`"/>
        </div>
        <span class="model__label">{{ model.label }}</span>
      </radio-square>
    </div>
  </div>
</template>
<script>
import RadioSquare from './RadioSquare.vue';
// import image from 'file-loader!../assets/converse.png';

export default {
  data: function() {
    return {
    };
  },

  components: {
    'radio-square': RadioSquare
  },

  props: {
    'age': {
      default: 'adults',
      type: String
    },
    'models': {
      default: () => { return {
          'baby': [
            {'label': 'Converse Chuck Taylor All Star High top', 'url': ''},
            {'label': 'Converse Chuck Taylor All Star Low top', 'url': ''}
          ],
          'kids': [
            {'label': 'Converse Chuck Taylor All Star High top', 'url': ''},
            {'label': 'Converse Chuck Taylor All Star Low top', 'url': ''}
          ],
          'adults': [
            {'label': 'Converse Chuck Taylor All Star High top', 'url': ''},
            {'label': 'Converse Chuck Taylor All Star Low top', 'url': ''},
            {'label': 'Vans Authentic', 'url': ''},
            {'label': 'Vans SK8 Hi', 'url': ''},
            {'label': 'Birkenstock', 'url': ''}
          ]
        }
      },
      type: Object
    },
    'title': {
      default: 'Modello',
      type: String,
    },
    'name': {
      default: 'content[modello]',
      type: String,
    },
    'value': {
      default: '',
      type: String
    }
  },
  
  computed: {
    modelList() {
      return (this.age) ? this.models[this.age] : []
    },
    selected: {
      get: function() {
        let selectedModel = this.modelList.filter((item) => {
          return item.label === this.value
        })
        return ( selectedModel.length > 0 ) ? selectedModel[0].label : this.value
      },
      set: function(value) {
        let selectedModel = this.modelList.filter((item) => {
          return item.label === value
        })
        this.$emit('input', selectedModel[0].label)
      }
    }
  }
};
</script>
<style lang="scss">
  .models {
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 -.25rem;
    width: 100%;
    
    @media screen and (min-width:769px) {
      justify-content: flex-start;
      margin: 0 -.5rem;
    }

    &__title {
      padding: .5rem 1rem;
      width: 100%;

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

  }

  .model {
    display: flex;
    flex-flow: row nowrap;

    .radiosquare {
      min-height: 142px;
      min-width: 142px;

      label {
        align-items: flex-start;
        font-size: .9rem;
        text-align: center;
      }
    }

    &__img {
      width: 100%;

      img {
        height: auto;
        width: 100%;
      }

      img:empty {
        position: relative;
        border: 0;
        height: 65px;
        font-size: 0;

        &::before {
          background-color: #DDD;
          content: '';
          display: inline-block;
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
        }
      }
    }

    &__label {
      display: inline-block;
      padding: .5rem;
    }
  }
</style>


