var tmpl=`
  <div style="padding:20px">
    <slot name="header"></slot>
    <div style="width:100%;border:1px solid #eee"></div>
    <el-row  :gutter="20">
      <el-col  :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-for="item in datasrc">
          <el-card shadow="hover" class="box-card" style="min-height:300px;margin-top:20px;border-radius:0px">
            <div :style="styleFunc(item)"><h3>{{item.name}}</h3></div>
            <slot name="contents" :item="item">slot name content placeholder</slot>
          </el-card>
      </el-col>
    </el-row>
  </div>
`
module.exports=
`{
   template:'${tmpl}',
   props:['datasrc'],
   data:function(){
     return {
       hasHeader:false,
     };
   },
   mounted:function(){

   },
   methods:{
     rowclick:function(r){
       console.log(r);
       this.$emit("rowclick",r);
     },
     moreclick:function(id){
       this.$emit("moreclick",id);
     },
     styleFunc:function(item){
       return {
         'background':'no-repeat url('+item.bgimg+') center',
         "postion":"absolute",
         "top":"0px",
         "width":"100%",
         "line-height":"50px",
         "color":"#eee",
       };
     },
   },
   vname:"gsb-servicesitem"
}`
