
<template>
  <div class="eye-renderer">
      <ul class="eye-clear">
          <li v-for="(row,index) in data"
              class="eye-renderer__item"
              :class="[{
                 'eye-renderer__item__select' : selectedIndex == index,
              },
              'eye-renderer__layout_' + layout,
              itemClass
              ]"
              :style="cols > 1 ? liStyle : {}"
              @click="handlerItemClick(row,index)">
              <slot :row="row" :index="index"></slot>
          </li>
      </ul>
  </div>
</template>

<script>


export default {

    name: "SRenderer",

    props:{
        data: {
            type: Array,
            default: function() {
                return [];
            }
        },

        itemClass: String,

        layout: {
            type:String,
            default: 'flex'
        },

        cols: {
            type:Number,
            default: 1
        }
    },

    computed: {
        liStyle: function () {
            let w = 100 / this.cols;
            return {
                "width" : w + "%"
            }
        },
    },

    data() {
      return {
          selectedIndex:-1,
      }
    },


    methods: {

        handlerItemClick(row,index) {
            this.selectedIndex = index;
            this.$emit('itemChange',row,index)
        }

    }


}
</script>
<style lang="scss" scoped>
    .eye-clear {
        *zoom:1;
        &:before{ content:' '; display:table;}
        &:after{display:block; content:""; font-size: 0; height:0; clear:both; overflow:hidden; visibility:hidden;}
    }
    .eye-renderer__layout_flex{
        float: left;
    }
</style>



