<template>
  <!--  数据统计  -->
  <el-card :body-style="{ padding: '10px' }" :style="{height:height}" shadow="hover" class="data_statis">
    <h4 class="title">数据统计</h4>
    <div class="count_cards clearfix">
      <el-col v-for="item of dataCounts" :md="5" :key="item.id" class="mb">
        <div class="count_card">
          <count-to :start-val="0" :end-val="item.num" :duration="2600" class="count_num" />
          <p v-once class="count_txt">{{ item.name }}</p>
        </div>
      </el-col>
    </div>
  </el-card>
</template>

<script>
import CountTo from 'vue-count-to'
import { getCallStatic } from '@/api/dashboard/callDatas'

export default {
  name: 'DataStatistics',
  components: {
    CountTo
  },
  props: {
    height: {
      type: String,
      default: '170px'
    }
  },
  data() {
    return {
      dataCounts: [{
        id: 0,
        name: '今日来电量',
        num: 0
      },
      {
        id: 1,
        name: '今日回访量',
        num: 0
      },
      {
        id: 2,
        name: '本月来电量',
        num: 0
      },
      {
        id: 3,
        name: '本月回访量',
        num: 0
      },
      {
        id: 4,
        name: '未接电话量',
        num: 0
      }
      ]
    }
  },
  created() {
    this.getDatas()
  },
  methods: {
    // 获取数据
    getDatas() {
      return new Promise(resolve => {
        getCallStatic().then(response => {
          if (response.state.toLowerCase() === 'success') {
            const res = response.data
            if (res) {
              this.dataCounts = [
                {
                  id: 0,
                  name: '今日来电量',
                  num: res.jrldcount
                },
                {
                  id: 1,
                  name: '今日回访量',
                  num: res.jrhfcount
                },
                {
                  id: 2,
                  name: '本月来电量',
                  num: res.byldcount
                },
                {
                  id: 3,
                  name: '本月回访量',
                  num: res.byhfcount
                },
                {
                  id: 4,
                  name: '未接电话量',
                  num: res.wjcount
                }
              ]
            }
          }
        })
        resolve()
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.data_statis {
		.mb {
			margin-bottom: 6px;
		}
		.title {
			color: #333333;
			font-size: 14px;
			margin: 0 0 8px 0;
			padding: 0;
			font-weight: 500;
		}

		.count_cards {
			margin-left: -7.5px;
			margin-right: -7.5px;

			.count_card {
				background-color: #f5f5f6;
				height: 120px;
				width: 100%;
				text-align: center;

				.count_num {
					font-size: 30px;
					color: #c6d0d4;
					font-family: "Arial";
					padding-top: 34px;
					display: inline-block;
				}

				.count_txt {
					font-size: 14px;
					color: #333333;
					margin: 10px 0 0 0;
				}
			}
		}
	}

	@media only screen and (min-width: 992px) {
		.count_cards {
			.el-col-md-5 {
				width: 20%;
			}
		}
	}
</style>
