
<template>
<el-card shadow="none" :body-style="{height:'112px'}">
  <div class="flex-align-center flex-between height-full">
    <div v-if="data" style="align-self:stretch">
      <div class="flex-end height-full">
        <div style="flex:1;width:100%">
          <p class="info" style="margin-bottom:10px">短信已使用</p>
          <!-- <p class="num">{{data.used }}</p> -->
          <VueCountUp class="data-num" :start-value="0" :end-value="data.used" />
        </div>
        <p class="info" style="width:100%">短信总量&emsp;<span style="color:#666">{{data.total}}</span></p>
      </div>
    </div>
    <div id="sms"></div>
  </div>
</el-card>
</template>

<script>
import { Pie } from '@antv/g2plot';
import VueCountUp from 'vue-countupjs'

export default {
  props:['data'],
  data () {
    return  {
      piePlot () {},
    }
  },
  components:{
    VueCountUp
  },
  methods:{
    renderBar () {
      this.piePlot = new Pie('sms', {
        appendPadding: 10,
        data:[],
        width:100,
        height:100,
        label:{
          type: 'inner',
          content:''
        },
        legend:false,
        angleField: 'num',
        colorField: 'type',
        color: ['#38C2F6', '#5D76E4'],
        radius: 0.9,
        interactions: [{ type: 'element-active' }],
      });
      this.piePlot.render();
    }
  },
  mounted() {
    this.renderBar()
  }
}

</script>
<style>
.el-card__header {
  padding: 10px 16px !important;
}
</style>
<style scoped>
.flex-end {
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
.info{
  font-size: 14px;
  text-align:left;
}
.height-full{
  height: 100%;
}
.data-num{
  font-size: 30px;
  font-family: HelveticaNeue-, HelveticaNeue;
  font-weight: normal;
  color: #333333;
  line-height: 38px;
  text-align: left;
}
</style>