<template>
  <div id="integrateStatistics">
    <!-- 环形表 -->
    <div class="statistics-chart">
      <div class="chart-title">表号功能号总数量：{{ pointData.tabFuncNumSum }} <span style="float:right">目前可能断数的数量：{{ pointData.disConn }}</span></div>
      <hr style="width:90%" />
      <div ref="loopchart" class="chart" id="loopchart"></div>
    </div>
    <!-- 图形图 -->
    <div class="statistics-chart" style="border-top:5px solid #eee;min-height: calc(65% - 3px);">
      <div class="chart-title">共包含原始点位：{{ originalPoint }} 个</div>
      <div style="padding:15px 10%;line-height:2;">
        1点位对多表号功能号：{{ pointData.oneToM }}
        <br />
        多点位对1表号功能号：{{ pointData.mToOne }}
        <!-- 查看表号功能号一对多多对一总览 -->
        <el-button @click="showOverview" type="info" icon="el-icon-arrow-right" circle
          style="margin:-25px 0 0 50px;background:rgb(121, 187, 255);color:rgb(225, 228, 229);border:none;"></el-button>
      </div>
      <hr style="width:90%;margin-top: 1px;" />
      <div ref="barchart" class="chart" id="barchart" :style="{height:barChartData.length * 120 + 'px'}"></div>
    </div>
    <!-- 点位/表号共更好对应总览 -->
    <pointTabOverview ref="overviewDialog"></pointTabOverview>
  </div>
</template>

<script>
//echarts
import echarts from "echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";

import {
  getIntegrateStatisticsToLoop,
  getIntegrateStatisticsToBar
} from "@/api/scan/request";
import pointTabOverview from "./pointTabOverview";

export default {
  data() {
    return {
      //环形图
      loopChart: null,
      //条形图
      barChart: null,
      //环形图数据
      loopChartData: [],
      //条形图数据
      barChartData: [],
      //点位-标号功能号数据
      pointData: {
        tabFuncNumSum: 0,//总数
        oneToM: 0,//一对多
        mToOne: 0,//多对一
        disConn: 0//可能断数数量
      },
      //原始点数量
      originalPoint: null
    };
  },
  methods: {
    //加载图表数据
    loadChart() {
      //获取环形图数据
      getIntegrateStatisticsToLoop({}, res => {
        //设置点位-表号功能号数据
        this.pointData = {
          tabFuncNumSum: res.Content[0].Sum,
          oneToM: res.Content[0].OtoM,
          mToOne: res.Content[0].MtoO,
          disConn: res.Content[0].Disconn
        };
        //设置环形表数据
        this.loopChartData = [
          { value: res.Content[0].RelatedCount, name: "已对实例数量" },
          { value: res.Content[0].Sum - res.Content[0].RelatedCount, name: "未对应实例数量" }
        ];

        let that = this;
        //环形图参数
        let loopOption = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          color: ['rgb(121, 187, 255)', 'rgb(225, 228, 229)'],
          graphic: {
            elements: [
              {
                type: "text",
                left: "center",
                top: "center",
                style: {
                  text: (() => {
                    let s = 0;
                    that.loopChartData.map(item => {
                      s += item["value"];
                    });
                    return s;
                  })(),
                  textAlign: "center",
                  fontSize: 32,
                  fontWeight: 300
                }
              },
              {
                type: "text",
                left: "center",
                top: "center",
                style: {
                  text: (() => {
                    let s = 0;
                    that.loopChartData.map(item => {
                      s += item["value"];
                    });
                    return "\n\n\n总数";
                  })(),
                  textAlign: "center",
                  fontSize: 16,
                  fontWeight: 300
                }
              }
            ]
          },
          series: [
            {
              name: "实例总数",
              type: "pie",
              radius: ["50%", "70%"],
              avoidLabelOverlap: false,
              legendHoverLink: false,
              selectedOffset: 0,
              label:{
                  color:'rgb(121, 187, 255)',
              },
              emphasis: {
                itemStyle: {
                  // 高亮时点的颜色。
                  color: undefined
                }
              },
              data: this.loopChartData
            }
          ]
        };

        setTimeout(() => {
          //实例化
          that.loopChart = echarts.init(document.getElementById("loopchart"));
          //设置参数并加载
          that.loopChart.setOption(loopOption);
          //消除高亮
          that.loopChart.on('mouseover', function (param) {
            if (param.dataIndex == 1) {
              loopOption.series[0].emphasis.itemStyle.color = 'rgb(225, 228, 229)';
              that.loopChart.setOption(loopOption);
            }
            else {
              loopOption.series[0].emphasis.itemStyle.color = 'rgb(121, 187, 255)';
              that.loopChart.setOption(loopOption);
            }
          });
        }, 100);

      })

      //获取条形图数据
      getIntegrateStatisticsToBar({}, res => {
        this.barChartData = res.Content;
        this.originalPoint = (() => {
          let sum = 0;
          this.barChartData.map(item => {
            sum += item["Sum"];
          });
          return sum;
        })();

        //条形图参数
        let barOption = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          color: ['rgb(121, 187, 255)', 'rgb(225, 228, 229)'],
          legend: {
            data: ["已接入", "未接入"]
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: [
            {
              type: "value",
              position: "top"
            }
          ],
          yAxis: [
            {
              type: "category",
              axisTick: { show: false },
              data: this.barChartData.map(item => item.Name)
            }
          ],
          series: [
            {
              name: "已接入",
              type: "bar",
              label: {
                normal: {
                  show: true,
                  position: "inside"
                }
              },
              data: this.barChartData.map(item => item.Relatedall)
            },
            {
              name: "未接入",
              type: "bar",
              stack: "总量",
              label: {
                normal: {
                  show: true
                }
              },
              data: this.barChartData.map(item => item.Notrelatedall)
            }
          ]
        };

        /* 条形图高度随数量变化，延时初始化 */
        let that = this;
        setTimeout(() => {
          that.barChart = echarts.init(document.getElementById("barchart"));
          that.barChart.setOption(barOption);
        }, 100);
      });
    },
    //点位/表号
    showOverview() {
      this.$refs.overviewDialog.loadOverviewData();
    },
    init() {
      this.loadChart();
    }
  },
  mounted() {
    this.init();
    //图表随窗口变化
    let that = this;
    window.onresize = () => {
      if (that.loopChart != null)
        that.loopChart.resize();
      if (that.barChart != null)
        that.barChart.resize();
    };
  },
  components: {
    pointTabOverview
  }
};
</script>

<style lang="less" scoped>
#integrateStatistics {
  border-top: 5px solid #eee;
}
.statistics-chart {
  min-height: calc(35% - 3px);
}
.chart-title {
  padding: 5px 5%;
  font-size: 16px;
  font-weight: 500;
}
.chart {
  min-height: 200px;
  height: auto;
  width: 100%;
}
</style>