<!--类别统计-->
<template>
  <div class="categoryStatistics">
    <div class="title-box-max-box">
      <div class="title-left-box">
        <p></p>
        <p>类别占比</p>
      </div>
      <div class="title-right-box">
      </div>
      <div class="pagination-controls" v-if="newData.length>7">
        <p @click="prevPage"
           :disabled="currentPage === 1"><</p>
        <p>{{ currentPage }}/{{ totalPages }}</p>
        <p @click="nextPage"
           :disabled="currentPage === totalPages">></p>
      </div>
    </div>
    <img class="null-data-img" v-show="!dataType" src="@/assets/ZDimages/basicsModules/null-data-1.png">
    <div id="eCharts-category" v-show="dataType"></div>
    <div class="position-max-box" v-show="dataType">
      <div class="position-for-box" v-for="(item,index) in currentPageData" :key="index">
        <p :style="'background:'+eChartsListColor[item.indexKey]+';'"></p>
        <el-tooltip class="item" effect="dark" :content="item.classifyAttribute" placement="top">
          <p>{{item.classifyAttribute}}</p>
        </el-tooltip>
        <p>{{item.chemicalMix}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { chemicalIndexChemicalGroup, chemicalIndexTypeGroup } from '@/api/chemicalManage'

  export default {
    name: 'categoryStatistics',
    data () {
      return {
        dataType:false,
        eChartsListColor : [
          "#009DFF", "#0045AF", "#FFA200", "#FF2A00", "#A069FF", "#63FFE5", "#C4C4C4",
          "#006400", "#FFFF00", "#FFC1C1", "#FF6A6A", "#DEB887", "#FF1493", "#FF4500" ],
        maxNum:0,
        newData:[],
        currentPage: 1,
        pageSize: 7,
        // 示例数据（实际使用时可以替换为你的数据）
        items: []
      }
    },
    computed: {
      // 计算总页数
      totalPages() {
        return Math.ceil(this.items.length / this.pageSize);
      },
      // 计算当前页的数据
      currentPageData() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.items.slice(start, end);
      }
    },
    created(){
      this.chemicalIndexChemicalGroup();
    },
    mounted(){


    },
    methods:{
      //获取数据
      getInfo(){
        this.$set(this,'dataType',true);
        this.eChartsDraw();
      },
      chemicalIndexChemicalGroup(){
        let self=this;
        let list=[];
        chemicalIndexChemicalGroup().then(response => {
          self.maxNum=response.data.count;
          response.data.list.forEach(function(item,index) {
            if(item.number>0){
              list.push({name:item.name,value:item.number,classifyAttribute:item.name,chemicalMix:item.ratio,indexKey:index})
            }
          })
          this.$set(this, 'newData',list)
          this.$set(this, 'items',list)
          this.getInfo();
        });
      },
      //eCharts绘制
      eChartsDraw(){
        let myChart = this.$echarts.init(document.getElementById('eCharts-category'));
        let bgColor = "#fff";
        let title = "化学品总数";
        let echartData = this.newData;
        let formatNumber = function (num) {
          let reg = /(?=(\B)(\d{3})+$)/g;
          return num.toString().replace(reg, ",");
        };
        let option = {
          backgroundColor: bgColor,
          color: this.eChartsListColor,
          title: [
            {
              text: "{name|" + title + "}\n{val|" + formatNumber(this.maxNum) + "}",
              top: "center",
              left: "center",
              type:false,
              textStyle: {
                rich: {
                  name: {
                    fontSize: 18,
                    fontWeight: "normal",
                    color: "#333333",
                    padding: [10, 0],
                  },
                  val: {
                    fontSize: 18,
                    fontWeight: "normal",
                    color: "#333333",
                  },
                },
              },
            },
          ],
          series: [
            {
              type: "pie",
              radius: ["50%", "70%"],
              center: ["50%", "50%"],
              data: echartData,
              hoverAnimation: false,
              itemStyle: {
                normal: {
                  borderColor: bgColor,
                  borderWidth: 2,
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              label: {
                normal: {
                  show: false,
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      },
      prevPage() {
        if (this.currentPage > 1) {
          this.currentPage--;
        }
      },
      nextPage() {
        if (this.currentPage < this.totalPages) {
          this.currentPage++;
        }
      }
    },
  }
</script>
<style scoped lang="scss">
  .categoryStatistics{
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
    border-radius: 10px;
    width:600px;
    height:351px;
    position: relative;
    .title-box-max-box{
      display: flex;
      padding:24px 22px;
      .title-left-box{
        display: flex;
        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{
        flex:1;
      }
      .pagination-controls{
        display: flex;
        border:1px solid #0183FA;
        border-radius:4px;
        p{
          font-size:16px;
          line-height:22px;
          height:22px;
          padding:0 10px;
        }
        p:nth-child(1){
          cursor: pointer;
          line-height:20px;
          color:#0183FA;
        }
        p:nth-child(2){
          border-left:1px solid #0183FA;
          border-right:1px solid #0183FA;
          padding:0 15px;
        }
        p:nth-child(3){
          cursor: pointer;
          line-height:20px;
          color:#0183FA;
        }
        p:nth-child(1):hover{
          background-color: #0183FA;
          color:#fff;
        }
        p:nth-child(3):hover{
          background-color: #0183FA;
          color:#fff;
        }
      }
    }
    .null-data-img{
      display: block;
      margin:0 auto;
      width:176px;
      vertical-align: top;
      text-align: center;
      line-height:300px;
    }
    #eCharts-category{
      width:280px;
      height:284px;
    }
    .position-max-box{
      position: absolute;
      top:70px;
      right:37px;
      .position-for-box{
        width:280px;
        display: flex;
        p{
          line-height:38px;
          font-size:16px;
          color:#333;
        }
        p:nth-child(1){
          width:14px;
          height:14px;
          margin:12px 10px 12px 0;
        }
        p:nth-child(2){
          flex:1;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        p:nth-child(3){
          text-align: right;
        }
      }
    }
  }
</style>
