<!--库存统计-->
<template>
  <div class="inventoryStatistics">
    <div class="title-box-max-box">
      <div class="title-left-box">
        <p></p>
        <p>库存统计</p>
      </div>
      <div class="title-right-box">
        <p @click="goPage">查看更多 <i class="el-icon-d-arrow-right"></i></p>
      </div>
    </div>
    <img class="null-data-img" v-show="!dataType" src="@/assets/ZDimages/basicsModules/null-data-1.png">
    <div id="eCharts-inventory" v-show="dataType">

    </div>
  </div>
</template>
<script>
import { chemicalIndexChemicalGroup, chemicalIndexStockCount } from '@/api/chemicalManage'

  export default {
    name: 'inventoryStatistics',
    data () {
      return {
        dataType:false,
        newData:[],
      }
    },
    created(){
      this.chemicalIndexStockCount();
    },
    mounted(){
      this.getInfo();
    },
    methods:{
      //页面跳转
      goPage(){
        this.$router.push({ path: '/chemicalManage/inventoryManagement/inventoryStatistics'});
      },
      chemicalIndexStockCount(){
        let self=this;
        let list=[];
        chemicalIndexStockCount().then(response => {
          response.data.forEach(function(item,index) {
            list.push({name:item.name,value:item.number})
          })
          this.$set(this, 'newData',list)
          this.getInfo();
        });
      },
      //获取数据
      getInfo(){
        this.$set(this,'dataType',true);
        this.eChartsDraw();
      },
      //eCharts绘制
      eChartsDraw(){
        let myChart = this.$echarts.init(document.getElementById('eCharts-inventory'));
        let data = this.newData;
        let myColor = ["#FFA200", "#0084FF"];
        let option = {
          title: {
            show: false,
          },
          tooltip: {
            show: false,
            trigger: 'item',
          },
          legend: {
            itemWidth:16,
            itemHeight:16,
            itemGap:40,
            bottom:'center',
            top:0,
            textStyle:{
              // 个
              rich: {
                name: {
                },
                percent: {
                },
              },
              borderWidth: 53 // 间距的宽度
            },
            formatter: (name,value) => {
              let total = 0;
              let data1 = 0;
              let rate;
              for(let i=0;i<data.length;i++){
                total += data[i].value
              }
              data1 = (total / 100).toFixed(2)
              for (let i = 0; i < data.length; i++) {
                if (data[i].name == name) {
                  rate = (data[i].value/data1).toFixed(2);
                }
              }
              return `{one|${name}} {three|${rate}%}`;
            }
          },
          series: [{
            type: 'pie',
            radius: ['0%', '60%'],
            itemStyle: {
              normal: {
                color: function(params) {
                  let num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                formatter: '{b} {d} % ',
                show: false,
              },
            },
            data: data,
          }, ],
        };
        myChart.setOption(option);
      },
    },
  }
</script>
<style scoped lang="scss">
  .inventoryStatistics{
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
    border-radius: 10px;
    width:348px;
    height:351px;
    .title-box-max-box{
      display: flex;
      padding:24px 22px;
      .title-left-box{
        display: flex;
        flex:1;
        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{
        p{
          font-size:14px;
          line-height:18px;
          color:#666666;
          cursor: pointer;
        }
      }
    }
    .null-data-img{
      display: block;
      margin:0 auto;
      width:176px;
      vertical-align: top;
      text-align: center;
      line-height:300px;
    }
    #eCharts-inventory{
      width:348px;
      height:284px;
    }
  }
</style>
