<template>
  <Card :shadow="shadow" class="rich-info-card-wrapper" :padding="0">
    <div slot="title" :style="{background: color}">
      <div class="left-area" :style="{width: leftWidth}">
        <common-icon class="icon" :type="icon" :size="iconSize" color="#fff" />
      </div>
      <div class="right-area" :style="{width: rightWidth}">
        <div>
          <p style="font-weight: normal;color: #ffffff;font-size: 16px;margin-bottom: 2px">{{title}}</p>
          <count-to :end="count" :decimals="decimal" count-class="info-count-style" />
        </div>
      </div>
    </div>
    <div
      class="content-con"
      :style="{width: rightWidth, float: 'right'}"
      v-if="infoList && infoList.length !== 0"
    >
      <List>
        <ListItem v-for="(item, i, key) in infoList" :key="key">
          <ListItemMeta :description="item.label" />
          <p>{{item.count}}</p>
        </ListItem>
      </List>
    </div>
    <div class="no-data-con" v-else>暂无数据</div>
  </Card>
</template>

<script>
import CommonIcon from '_c/common-icon'
import CountTo from '_c/count-to'
export default {
  name: 'RichInfoCard',
  components: {
    CommonIcon,
    CountTo
  },
  props: {
    left: {
      type: Number,
      default: 25
    },
    color: {
      type: String,
      default: '#2d8cf0'
    },
    icon: {
      type: String,
      default: ''
    },
    iconSize: {
      type: Number,
      default: 36
    },
    shadow: {
      type: Boolean,
      default: false
    },

    title: {
      type: String,
      default: ''
    },
    count: {
      type: Number,
      default: 1000
    },
    decimal: {
      type: Number,
      default: 0
    },
    infoList: {
      type: Array,
      default: null
    }
  },
  computed: {
    leftWidth () {
      return `${this.left}%`
    },
    rightWidth () {
      return `${100 - this.left}%`
    }
  }
}
</script>

<style lang="less">
.info-count-style {
  font-size: 24px;
  color: #ffffff;
}
.common {
  float: left;
  height: 100%;
  display: table;
  text-align: center;
}
.size {
  width: 100%;
  height: 100%;
}
.middle-center {
  display: table-cell;
  vertical-align: middle;
}
.rich-info-card-wrapper {
  .size;
  overflow: hidden;

  .ivu-card-head {
    width: 100%;
    height: 88px;
    position: relative;
    padding: 0;
    > div {
      .size;
    }
    .left-area {
      .common;
      & > .icon {
        .middle-center;
      }
    }
    .right-area {
      .common;
      text-align: left;
      padding-left: 15px;
      & > div {
        .middle-center;
      }
    }
  }
  .ivu-card-body {
    width: 100%;
    height: calc(~"100% - 88px");
  }
  .content-con {
    height: 100%;
    padding: 10px 20px;
  }
  .no-data-con {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #808695;
  }
}
</style>
