<template>
  <div>
    <el-card class="box-card" style="margin-top: 15px;">
      <div slot="header" class="clearfix">
        <el-badge :value="list.length" :hidden="list.length==0" class="item"	>
          <div class="card-title">{{ title }}</div>
        </el-badge>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goDetail">查看详情</el-button>
      </div>
      <div v-loading="loading">
        <div v-for="(item,index) in list" :key="index" class="text-item">
          <span class="index">{{ index+1 }}</span><span>{{ item[column] }}</span>
        </div>
      </div>
      <div v-if="list.length==0">
        {{ emptyText }}
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'WaitCard',
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    emptyText: {
      type: String,
      default: '没有待办事件'
    },
    loading: {
      type: Boolean,
      default: false
    },
    column: {
      type: String,
      default: 'title'
    }
  },
  methods: {
    goDetail() {
      this.$emit('detail')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .box-card{
    font-size: 14px;
    .card-title{
      padding-right:10px;
    }
    .text-item{
      /*margin-bottom: 8px;*/
      line-height: 2;
      padding-left: 10px;
    }
    .text-item:hover{
      background-color: aliceblue;
      color: #000000;
      cursor: pointer;
    }
    .text-item .index{
     margin-right: 20px
    }
  }
</style>