<template>
  <div id="integrateStatistics">
    <!-- 环形表 -->
    <div class="statistics-chart" v-loading="loopchartLoading">
      <div class="chart-title" v-if="!type">
        表号功能号总数量：{{ tabFuncNumSum }} <span style="float:right">
        目前可能断数的数量：{{ disConn }}</span>
      </div>
      <hr style="width:90%" v-if="!type"/>
      <div ref="loopchart" class="chart" id="loopchart"></div>
    </div>
    <!--    通讯状态-->
    <div class="statistics-chart" v-if="type" style="border-top:5px solid #eee;">
      <span class="contain-title-leftblock">
         <i class="iconfont icon-juxing"/>
        通讯状态
          <i class="el-icon-refresh" style="cursor: pointer" @click="getStatus"/>
        </span>
      <el-table :data="statusList" height="250" border style="width: 100%">
        <el-table-column prop="Name" label="数据源名称" show-overflow-tooltip align='center'/>
        <el-table-column prop="ProtocolType" label="协议类型" show-overflow-tooltip align='center'/>
        <el-table-column prop="Status" label="状态" show-overflow-tooltip align='center' width="65"/>
        <el-table-column prop="Cpu" label="CPU" width="55" show-overflow-tooltip align='center'/>
        <el-table-column prop="Memory" label="内存" width="55" show-overflow-tooltip align='center'/>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleOpen(scope.row)" type="text" size="small" :disabled="scope.row.StartState == 1">
              启动
            </el-button>
            <el-button @click="handleBin(scope.row)" type="text" size="small" :disabled="scope.row.StartState == 0">停止
            </el-button>
            <el-popover
              placement="right"
              width="300"
              @hide="removeTestValue"
            >
              <div>测试报文</div>
              <el-input type="textarea" :rows="3" v-model="test"/>
              <div style=" margin: 10px auto">
                <el-button type="primary" size="mini" @click="handleTest(scope.row)">测试</el-button>
              </div>
              <el-input type="textarea" :rows="3" v-model="testLog" disabled/>
              <el-button slot="reference" type="text">测试</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    点位数量-->
    <div class="statistics-chart" style="border-top:5px solid #eee;" v-if="type">
        <span class="contain-title-leftblock">
         <i class="iconfont icon-juxing"/>
        点位数量
          <i class="el-icon-refresh" style="cursor: pointer" @click="getNumberPoints"/>
        </span>
      <el-table :data="pointList" height="250" border style="width: 100%">
        <el-table-column prop="Name" label="数据源名称"/>
        <el-table-column prop="Sum" label="总点位数量"/>
        <el-table-column prop="Obtained" label="已获取"/>
        <el-table-column prop="NotObtained" label="未获取"/>
        <el-table-column prop="ObtainedRate" label="上数率"/>
      </el-table>
    </div>
    <!-- 图形图 -->
    <div class="statistics-chart" style="border-top:5px solid #eee;min-height: calc(65% - 3px);" v-if="!type">
      <div class="chart-title">共包含原始点位：{{ originalPoint }} 个</div>
      <div style="padding:15px 20px;line-height:2;">
        1点位对多表号功能号：{{oneToM+''}}
        <br/>
        多点位对1表号功能号：{{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="" id="barchart" :style="{height:barChartData.length * 120 + 'px'}">
        <el-row class="barchart-title">
          <el-col :span="12">
            <span style="background:#79bbff;"></span>已接入点位 {{pointInSum}}
          </el-col>
          <el-col :span="12">
            <span style="background:#e1e4e5;"></span>未接入点位 {{pointOutSum}}
          </el-col>
        </el-row>
        <div>
          <div class="source" v-for="t in barChartData" :key="t.Id">
            <el-row class="source-name">
              <div :title='t.Name'>{{t.Name}}</div>
              <div>{{t.Notrelatedall+t.Relatedall}}个原始点位</div>
            </el-row>
            <el-row class="source-chart already-in">
              <el-col :style="{width:(t.widthin>1?t.widthin:1)+'%'}"></el-col>
              <el-col>{{t.Relatedall}}</el-col>
            </el-row>
            <el-row class="source-chart not-in">
              <el-col :style="{width:(t.widthout>1?t.widthout:1)+'%'}"></el-col>
              <el-col>{{t.Notrelatedall}}</el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <!-- 点位/表号功能号对应总览 -->
    <pointTabOverview ref="overviewDialog" v-if="!type"></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 {
    communicationStatus,
    getIntegrateStatisticsToBar,
    getIntegrateStatisticsToLoop,
    numberOfPoints,
    originBin,
    originOpen,
    originTest
  } from "@/api/scan/request";
  import pointTabOverview from "./pointTabOverview";

  export default {
    data() {
      return {
        test: '',
        testLog: '',
        pointList: [],//点位数量集合
        statusList: [],//通讯状态集合
        //环形图
        loopChart: null,
        loopchartLoading: false,
        //环形图数据
        loopChartData: [],
        //条形图数据
        barChartData: [],
        //点位-标号功能号数据
        tabFuncNumSum: 0,//总数
        oneToM: 0,//一对多
        mToOne: 0,//多对一
        disConn: 0,//可能断数数量
        //原始点数量
        originalPoint: null,
        pointInSum: 0, //左侧柱形图已接入
        pointOutSum: 0, //左侧柱形图未接入
      };
    },
    props: ['type'],
    methods: {
      removeTestValue() {
        this.test = ''
      },
      //启动
      handleOpen(row) {
        originOpen(row, res => {
          this.getStatus()
        })
      },
      //暂停
      handleBin(row) {
        originBin(row, res => {
          this.getStatus()
        })
      },
      //测试
      handleTest(row) {
        row.Content = this.test
        originTest(row, res => {
          // this.getStatus()

        })
      },
      //点位数量
      getNumberPoints() {
        numberOfPoints({}, res => {
          this.pointList = res.Content
        })
      },
      //通讯状态
      getStatus() {
        communicationStatus({}, res => {
          this.statusList = res.Content
        })
      },
      //加载图表数据
      loadChart() {
        let that = this;
        that.loopchartLoading = true;
        //获取环形图数据
        getIntegrateStatisticsToLoop({}, res => {
          //设置点位-表号功能号数据
          const tempData = res.Content[0];
          if (tempData) {
            that.tabFuncNumSum = tempData.Sum
            that.oneToM = tempData.OToM
            that.mToOne = tempData.MToO
            that.disConn = tempData.Disconn
            //设置环形表数据
            that.loopChartData = [
              {value: tempData.RelatedCount, name: "已对实例数量"},
              {value: tempData.Sum - tempData.RelatedCount, name: "未对应实例数量"}
            ];

          }
          //环形图参数
          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);
        that.loopchartLoading = false;

      })

      //获取条形图数据
      getIntegrateStatisticsToBar({}, res => {
        let max = 1;
        res.Content.forEach(t => {
          this.pointInSum += t.Relatedall;
          this.pointOutSum += t.Notrelatedall;
          if (t.Relatedall > max) {
            max = t.Relatedall
          }
          if (t.Notrelatedall > max) {
            max = t.Notrelatedall
          }
        })
        this.barChartData = res.Content.map(t => {
          t.widthin = ((t.Relatedall / max) * 0.8).toFixed(2) * 100
          t.widthout = ((t.Notrelatedall / max) * 0.8).toFixed(2) * 100
          return t;
        });
        this.originalPoint = (() => {
          let sum = 0;
          this.barChartData.map(item => {
            sum += item["Sum"];
          });
          return sum;
        })();
      });
      },
      //点位/表号
      showOverview() {
        this.$refs.overviewDialog.loadOverviewData();
      },
      init() {
        this.loadChart();
      }
    },
    mounted() {
      this.init();
      this.getStatus()
      this.getNumberPoints()
      //图表随窗口变化
      let that = this;
      window.onresize = () => {
        if (that.loopChart != null)
          that.loopChart.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 20px;
      font-size: 16px;
      font-weight: 500;
    }

    .contain-title-leftblock {
      height: 30px;
      line-height: 30px;
      /*border-left: 8px solid black;*/
      display: inline-block;
      margin: 8px 0;
      font-weight: 600;
      padding-left: 8px;
      cursor: default;
    }

  }
  .chart {
    min-height: 200px;
    height: auto;
    width: 100%;
  }
  #barchart {
    font-size: 12px;
    .barchart-title {
      margin: 15px 0;
      .el-col {
        padding-left: 20px;
        span {
          display: inline-block;
          width: 14px;
          height: 14px;
          margin: 0 10px -2px 0;
        }
      }
    }
    .source {
      margin-bottom: 15px;
      .source-name {
        margin-bottom: 15px;
        div {
          float: left;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:nth-child(1) {
            width: 65%;
            padding-left: 20px;
          }
          &:nth-child(2) {
            width: 35%;
            text-align: right;
            padding-right: 20px;
          }
        }
      }
      .source-chart {
        box-sizing: border-box;
        padding: 0 20px;
        .el-col {
          height: 30px;
          &:nth-child(2) {
            padding-left: 10px;
            width: 20%;
          }
        }
        &.already-in {
          .el-col:nth-child(1) {
            background: #79bbff;
          }
        }
        &.not-in {
          .el-col:nth-child(1) {
            background: #e1e4e5;
          }
        }
      }
    }
  }
}
</style>
