<template lang="html">
  <div id="{{id}}" data-cpt-type="item-box" class="item-box" @click="clickOnBox">

    <figure>
      <img :src="src" />
    </figure>
    <p class="title">
      {{title}}
      <span class="description">{{description}}</span>
    </p>
  </div>
</template>

<style lang="sass">
   @import "../../styles/core/base.scss";

  .item-box{
    border:1px solid #eee;
    padding:10px;
    width:200px;

    display:inline-block;

    cursor:pointer;

    figure{
      margin:0;
      width:100%;
      height:150px;
      overflow:hidden;
      img{
        width:100%;
      }
    }

    .title{
      padding:10px 0 0 0px;
      width:100%;
      font-size:14px;
      color:#666;
      white-space:nowrap;
      overflow:hidden;
    }
    .description{
      font-size:12px;
      color:#999;
    }
  }
</style>

<script>

export default {
  props:{
    id:String,
    src:String,
    title:String,
    description:String,
    onClick:{
      type:Function,
      default:_=>_,
    }
  },
  data: function () {
    return {
    }
  },
  computed: {},
  ready: function () {},
  attached: function () {},
  methods: {
    clickOnBox(){
      this.onClick();
    }
  },
  components: {}
}
</script>
