<!--使用统计-->
<template>
  <div class="useStatistics">
    <div class="title-box-max-box">
      <div class="title-left-box">
        <p></p>
        <p>使用统计</p>
      </div>
      <div class="title-right-box">
        <p :class="checkType == -1?'leftCheck':''" @click="checkButton(-1)">全部</p>
        <p :class="checkType == 0?'centerCheck':''" @click="checkButton(0)">今日</p>
        <p :class="checkType == 1?'rightCheck':''" @click="checkButton(1)">近一个月</p>
      </div>
    </div>
    <img class="null-data-img" v-show="!dataType" src="@/assets/ZDimages/basicsModules/null-data-1.png">
    <div id="eCharts-use" v-show="dataType">

    </div>
  </div>
</template>
<script>
import { chemicalIndexUseCount } from '@/api/chemicalManage'

  export default {
    name: 'useStatistics',
    data () {
      return {
        dataType:false,
        checkType:-1,
        dataX:[],
        dataY:[],
      }
    },
    created(){
        this.chemicalIndexUseCount();
    },
    mounted(){
    },
    methods:{
      chemicalIndexUseCount(){
        let self=this;
        let list1=[];
        let list2=[];
        chemicalIndexUseCount({months:this.checkType}).then(response => {
          response.data.forEach(function(item,index) {
            list1.push(item.name)
            list2.push(item.number)
          })
          this.$set(this,'dataX',list1)
          this.$set(this,'dataY',list2)
          this.getInfo();
        });
      },
      checkButton(type){
        if(this.checkType != type){
          this.$set(this,'checkType',type);
        }
        this.chemicalIndexUseCount();
      },
      //获取数据
      getInfo(){
        this.$set(this,'dataType',true);
        this.eChartsDraw();
      },
      //eCharts绘制
      eChartsDraw(){
        let myChart = this.$echarts.init(document.getElementById('eCharts-use'));
        let dataName = this.dataX;
        let dataValue = this.dataY;
        let myColor = [
          "#0072DD",
          "#8EACFF",
          "#1BBC46",
          "#54F4EF",
          "#FFC831",
        ];
        let option = {
          title: {
            show: false,
            text: "使用统计",
          },
          grid: {
            left: "5%",
            top: "15%",
            right: "5%",
            bottom: "5%",
            containLabel: true,
          },
          xAxis: {
            data: dataName,
          },
          yAxis: {

            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                color: '#dddddd',
              },
            },
          },
          series: [
            {
              type: "bar",
              barWidth: 30,
              label: {
                normal: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#333",
                    fontSize: "12",
                  },
                },
              },
              itemStyle: {
                normal: {
                  barBorderRadius: [6, 6, 0, 0],
                  color: function (params) {
                    var num = myColor.length;
                    return myColor[params.dataIndex % num];
                  },
                },
              },
              data: dataValue,
            },
          ],
        };

        myChart.setOption(option);
      },
    },
  }
</script>
<style scoped lang="scss">
  .useStatistics{
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
    border-radius: 10px;
    width:550px;
    height:351px;
    margin:0 20px;
    .title-box-max-box{
      display: flex;
      padding:18px 22px;
      .title-left-box{
        display: flex;
        flex:1;
        margin-top:6px;
        p:nth-child(1){
          width:4px;
          height:18px;
          margin-right:11px;
          background: #0183FA;
        }
        p:nth-child(2){
          color:#333;
          font-size:18px;
          line-height:18px;
        }
      }
      .title-right-box{
        display: flex;
        p{
          cursor: pointer;
          width:70px;
          height:30px;
          line-height:30px;
          text-align: center;
          font-size:14px;
          color:#333;
        }
        p:nth-child(1){
          border:1px solid #E0E0E0;
          border-top-left-radius: 6px;
          border-bottom-left-radius:6px;
        }
        p:nth-child(2){
          border:1px solid #E0E0E0;
          border-left:none;
          border-right:none;
        }
        p:nth-child(3){
          border:1px solid #E0E0E0;
          border-top-right-radius: 6px;
          border-bottom-right-radius:6px;
        }
        .leftCheck{
          color:#fff;
          border:1px solid #0183FA!important;
          background: #0183FA;
        }
        .centerCheck{
          color:#fff;
          border:1px solid #0183FA!important;
          background: #0183FA;
        }
        .rightCheck{
          color:#fff;
          border:1px solid #0183FA!important;
          background: #0183FA;
        }
      }
    }
    .null-data-img{
      display: block;
      margin:0 auto;
      width:176px;
      vertical-align: top;
      text-align: center;
      line-height:300px;
    }
    #eCharts-use{
      width:550px;
      height:284px;
    }
  }
</style>
