<template>
  <div ref="card">
    <el-card class="box-card" style="">
      <div slot="header" class="clearfix">
        <el-badge :value="total" :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 class="content">{{ 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 []
      }
    },
    total: {
      type: Number,
      default: 0
    },
    emptyText: {
      type: String,
      default: '没有待办事件'
    },
    loading: {
      type: Boolean,
      default: false
    },
    column: {
      type: String,
      default: 'title'
    }
  },
  mounted() {
    var rightHeight = document.getElementById('mainbody').offsetHeight
    this.$refs.card.style.height = (rightHeight / 2 - 60) + 'px'
  },
  methods: {
    goDetail() {
      this.$emit('detail')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .box-card{
    font-size: 14px;
    margin-top: 15px;
    height:100%;
    .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
    }
    .text-item .content{
      display:inline-block;             /*内联对象需加*/
      width: calc( 100% - 35px);
      height: 16px;
      line-height: 16px;
      vertical-align: middle;
      word-break:keep-all;       /* 不换行 */
      white-space:nowrap;        /* 不换行 */
      overflow:hidden;           /* 内容超出宽度时隐藏超出部分的内容 */
      text-overflow:ellipsis;    /*溢出时显示省略标记...；需与overflow:hidden;一起使用*/
    }
  }
</style>