<template lang="html">
  <div id="{{id}}" data-cpt-type="cpt-component-item" class="cpt-component-item">
    <h4 class="title">{{title}}</h4>
    <span class="description">{{description}}</span>
    <button type="button" name="button" @click="clickOn" class="btn pure-button pure-button-primary">{{buttonText}}</button>
  </div>
</template>

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

  .cpt-component-item{

    box-sizing:border-box;
    border:1px solid #eee;
    padding:5px 5px 5px 15px;
    height:45px;
    line-height:33px;

    .title{
      margin:0;
      font-size:20px;
      display:inline-block;
    }
    .description{
      font-size:14px;
    }

    .btn{
      float:right;
    }
  }
</style>

<script>

export default {
  props:{
    id:String,
    title:{
      default:'标题'
    },
    description:{
      default:'描述'
    },
    buttonText:{
      default:'确定'
    },
    onClick:{
      type:Function,
      default:_=>_,
    }
  },
  data: function () {
    return {
    }
  },
  computed: {},
  ready: function () {},
  attached: function () {},
  methods: {
    clickOn(){
      console.log('查看')
      this.onClick();
    }
  },
  components: {}
}
</script>
