<template>
  <div id="main" class="h-all">
    <el-container class="h-all">
      <el-header height="auto">
        <!-- 条件查询工具栏 -->
        <div class="header-search">
          <el-row>
            <div class="search-input-box">
              <label>{{ $t("AlarmStatistics.beginTimestamp") }}</label>
              <el-date-picker
                v-model="beginTimestamp"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm"
                :clearable="false"
                align="center"
                :picker-options="startDatePicker"
                @change="beginDateChange"
                :placeholder="$t('AlarmStatistics.chooseStartTime')">
              </el-date-picker>
            </div>
            <div class="search-input-box">
              <label>{{ $t("AlarmStatistics.endTimestamp") }}</label>
              <el-date-picker
                v-model="endTimestamp"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm"
                :clearable="false"
                align="center"
                :picker-options="endDatePicker"
                @change="endDateChange"
                :placeholder="$t('AlarmStatistics.chooseEndTime')">
              </el-date-picker>
            </div>
            <div class="search-input-box">
              <label>{{ $t("AlarmStatistics.X") }}</label>
              <el-select size='mini' v-model="valueX"
                         @change="valueXChange">
                <el-option
                  v-for="item in valueList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </div>
            <div class="search-input-box">
              <label>{{ $t("AlarmStatistics.Y") }}</label>
              <el-select size='mini' v-model="valueY"
                         @change="valueYChange">
                <el-option
                  v-for="item in valueList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="search-input-box">
              <label>{{$t("Performance.statisticsType") + '：'}}</label>
              <el-select size='mini' v-model="valueType" :placeholder="$t('common.selectOption')">
                <el-option
                  v-for="item in optionsType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <el-button size='mini' icon="el-icon-plus" type="primary" @click="moreConditionOr">
              {{ $t("AlarmStatistics.moreCondition") }}
            </el-button>
            <el-button size='mini' icon="el-icon-upload2" type="warning" @click="importFile">
              {{$t("AlarmStatistics.importTemplate")}}
            </el-button>
            <el-button size='mini' icon="el-icon-s-data" type="success" @click="staticsData">
              {{$t("AlarmStatistics.statistic")}}
            </el-button>
            <el-button size='mini' icon="el-icon-download" type="danger" @click="exportFile">
              {{msg}}
            </el-button>
          </el-row>
          <el-row v-show="conditionShowFlag" style="margin-top: 5px">
            <div class="search-input-box">
              <label>{{ $t("Performance.deviceType") + '：'}}</label>
              <el-select size='mini' clearable
                         multiple
                         collapse-tags
                         v-model="deviceType"
                         @change="deviceTypeChange"
                         :placeholder="$t('common.selectOption')">
                <el-option v-for="item in deviceTypeList"
                           :key="item.deviceTypeKey"
                           :label="item.deviceTypeName"
                           :value="item.deviceTypeKey">
                </el-option>
              </el-select>
            </div>
            <div class="search-input-box">
              <label>{{ $t("Performance.deviceModel") + '：'}}</label>
              <el-select size='mini' clearable
                         v-model="deviceModel"
                         multiple
                         collapse-tags
                         @change="deviceModelChange"
                         :placeholder="$t('common.selectOption')">
                <el-option v-for="item in deviceModelList"
                           :key="item.deviceModelKey"
                           :label="item.deviceModel"
                           :value="item.deviceModel">
                </el-option>
              </el-select>
            </div>
            <div class="search-input-box">
              <label>{{ $t("Performance.deviceName") + '：'}}</label>
              <el-select size='mini' v-model="deviceName"
                         placeholder="请选择"
                         clearable
                         multiple
                         collapse-tags
                         multiple-limit=5>
                <el-option
                  v-for="item in deviceList"
                  :key="item.deviceKey"
                  :label="item.displayName"
                  :value="item.deviceKey">
                </el-option>
              </el-select>
            </div>
<!--            <div class="search-input-box">-->
<!--              <label>{{ $t("Performance.deviceBrand") + '：' }}</label>-->
<!--              <el-select size='mini' clearable-->
<!--                         v-model="deviceBrand"-->
<!--                         multiple-->
<!--                         collapse-tags-->
<!--                         :placeholder="$t('common.selectOption')">-->
<!--                <el-option v-for="item in deviceModelList"-->
<!--                           :key="item.deviceModelKey"-->
<!--                           :label="item.deviceModel"-->
<!--                           :value="item.deviceModelKey">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </div>-->
            <div class="search-input-box">
              <label>{{ $t("Performance.performParam") + '：'}}</label>
              <el-select size='mini' clearable
                         v-model="deviceParam"
                         multiple
                         collapse-tags
                         :placeholder="$t('common.selectOption')">
                <el-option
                  v-for="item in performTypeList"
                  :key="item.deviceParam"
                  :label="item.peformTypeName"
                  :value="item.deviceParam">
                </el-option>
              </el-select>
            </div>
          </el-row>
        </div>
      </el-header>
      <!-- table数据表格 -->
      <el-main class="adapt-height-box">
        <el-tabs v-model="activeName" type="card" class="statistic-tab-box h-all adapt-height adapt-height-box"
                 :before-leave="handleClick" @tab-click="handleClick1">
          <el-tab-pane :label="$t('AlarmStatistics.statisticResult')" name="first" class="h-all adapt-height adapt-height-box">
            <el-table
              id="myTable"
              :empty-text="$t('common.noData')"
              header-row-class-name="table-header"
              cell-class-name="table-cell"
              class="adapt-height"
              ref="multipleTable"
              :data="dataList1"
              stripe
              tooltip-effect="dark"
              height="auto"
              border
              :highlight-current-row="true">
              <el-table-column
                type="index"
                v-if="this.showFlag"
                :label="$t('AlarmStatistics.No')"
                width="50">
              </el-table-column>
              <el-table-column
                v-for="(item, index) in tableLabel"
                :key="index"
                :prop="item.prop"
                :width="item.width"
                :label="item.label"
              >
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane :label="$t('AlarmStatistics.statisticGraph')" name="second" :lazy='true' class="h-all adapt-height adapt-height-box">
            <el-row style="margin-left: -1000px" v-show="showFlag">
              <el-col>
                <label>{{ $t("AlarmStatistics.typeChange") }}</label>
                <el-select size='mini'
                           style="width: 100px"
                           @change="chartTypeChange"
                           v-model="chartType">
                  <el-option v-for="item in chartTypeList"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <div id="staticId" class="h-all adapt-height adapt-height-box">
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <ImportReportTemplate :innerVisible.sync="innerVisible"
                          :templateType.sync=templateType
                          :title="title"
                          :detailType="3">
    </ImportReportTemplate>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import DeviceService from '@/domain/services/DeviceService.js'
import AlarmManagerService from '@/domain/services/AlarmManagerService.js'
import HelperUtil from '../../utils/HelperUtil'
import legitimacyCheck from '../../utils/legitimacyCheck'
import Echart from 'echarts'
import PerformanceStatisticService from '../../domain/services/PerformanceStatisticService'
import ImportReportTemplate from "./ImportReportTemplate";

export default {
  name: 'PerformDistributionStatisticReport',
  data: function () {
    return {
      conditionShowFlag: false,
      showFlag: false,
      msg: this.$t('AlarmStatistics.exportStatisticResult'),
      valueX: 'deviceTypeKey',
      valueY: 'deviceModel',
      valueType: 0,
      // 导出文件名称
      exportName: '性能统计结果',

      // Tab页
      activeName: 'first',
      se: [],
      chartType: 'bar',
      chartTypeList: [
        {
          value: 'line',
          label: this.$t('AlarmStatistics.line')
        },
        {
          value: 'bar',
          label: this.$t('AlarmStatistics.bar')
        }
      ],
      // XY值
      valueList: [
        {
          value: 'deviceTypeKey',
          label: this.$t('Performance.deviceType')
        },
        {
          value: 'deviceModel',
          label: this.$t('Performance.deviceModel')
        },
        {
          value: 'displayName',
          label: this.$t('Performance.deviceName')
        },
        {
          value: 'brand',
          label: this.$t('Performance.deviceBrand')
        },
        {
          value: 'deviceParam',
          label: this.$t('Performance.performParam')
        }
      ],
      // 统计类型
      optionsType: [
        {
          value: 0,
          label: this.$t('Performance.maximumValue')
        },
        {
          value: 1,
          label: this.$t('Performance.minimumValue')
        },
        {
          value: 2,
          label: this.$t('Performance.meanValue')
        },
        {
          value: 3,
          label: this.$t('Performance.sum')
        }
      ],
      // 设备类型选择域
      deviceList: [],
      deviceTypeList: [],
      deviceModelList: [],
      deviceList0: [],
      deviceModelList0: [],
      deviceModelList1: [],
      performTypeList: [],
      performListStatistics: [],
      performDataList: [],

      // 日期控件
      beginTimestamp: '', // 开始时间
      endTimestamp: '', // 结束时间
      addTimestamp: '00.000', // 查询开始时间默认添加
      addTimestamp1: '59.999', // 查询结束时间默认添加
      startDatePicker: this.beginDate(),
      endDatePicker: this.endDate(),

      // 双向绑定数据
      deviceBrand: [], // 设备类型
      deviceModel: [], // 设备类型
      deviceType: [], // 设备类型
      deviceName: [], // 设备名称
      deviceParam: [], // 性能事件
      dataList: [],
      dataList1: [],
      t1: [],
      pageSize: 20,
      currentPage: 1,
      total: 0,
      tableLabel: [],
      showData: [],
      showYaxis: [],
      showYaxisY: [],
      // 统计条件
      statisticsList: [],
      echartLine: null,
      echartPie: null,
      yAxisList: [],
      colors: ['#7cb5ec', '#f7a35c', '#434348', '#90ed7d', '#8085e9',
        '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
      check: null,
      innerVisible: false,
      templateType: {},
      title: this.$t('ReportTemplateManagement.performanceDistribution')
    }
  },
  created: function () {
    this.check = legitimacyCheck()
    this.setDefaultDateTime()
    this.getAlarmTypeList()
    this.getAllDevice()
    this.getAllDeviceModel()
    this.getAllDeviceType()
    this.getPerformType()
  },
  methods: {
    /**
     * @Description  : handleSizeChange
     * @author       : ls
     * @date         : 2020/5/15 12:11
     * @param        :
     * @return       :
     */
    handleSizeChange: function (pageSize) {
      this.pageSize = pageSize
      this.handleCurrentChange(this.currentPage)
    },
    /**
     * @Description  : handleCurrentChange
     * @author       : ls
     * @date         : 2020/5/9 17:04
     * @param        :
     * @return       :
     */
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.currentChangePage(this.dataList, currentPage)
    },
    /**
     * @Description  : currentChangePage
     * @author       : ls
     * @date         : 2020/5/9 17:06
     * @param        :
     * @return       :
     */
    currentChangePage (list, currentPage) {
      let from = (currentPage - 1) * this.pageSize
      let to = currentPage * this.pageSize
      this.dataList1 = []
      for (; from < to; from++) {
        if (list[from]) {
          this.dataList1.push(list[from])
        }
      }
    },
    /**
     * @Description  : 去重
     * @author       : ls
     * @date         : 2020/6/3 11:59
     * @param        :
     * @return       :
     */
    unique: function (arr) {
      return Array.from(new Set(arr))
    },
    /**
     * @Description  : handleTotal
     * @author       : ls
     * @date         : 2020/5/9 18:00
     * @param        :
     * @return       :
     */
    handleTotal: function () {
      this.dataList1 = []
      this.total = this.dataList.length
      if (this.total > this.pageSize) {
        for (let index = 0; index < this.pageSize; index++) {
          this.dataList1.push(this.dataList[index])
        }
      } else {
        this.dataList1 = this.dataList
      }
    },
    /**
     * @Description  : chartTypeChange
     * @author       : ls
     * @date         : 2020/5/15 12:09
     * @param        :
     * @return       :
     */
    chartTypeChange: function () {
      this.closeAll()
      this.chartInit()
      this.genChart()
    },
    /**
     * @Description  : 初始化
     * @author       : ls
     * @date         : 2020/5/7 16:08
     * @param        :
     * @return       :
     */
    chartInit: function () {
      var div_e = document.getElementById('staticId')
      this.echartLine = Echart.init(div_e)
      this.echartLine.setOption(
        {
          animation: true,
          tooltip: {
            trigger: 'axis'
          },
          color: this.colors,
          grid: {
            right: '20%'
          },
          toolbox: {
            show: true,
            orient: 'horizontal',
            itemSize: 15,
            itemGap: 5,
            showTitle: true,
            right: '10%',
            top: '20',
            emphasis: {
              iconStyle: {
                textPosition: 'top'
              }
            },
            feature: {
              saveAsImage: {
                show: true,
                type: 'png',
                backgroundColor: '#fff',
                title: '保存图片',
                pixelRatio: 1,
                excludeComponents: ['toolbox']
              }
            }
          }
        }
      )
    },
    /**
     * @Description  : loadData
     * @author       : ls
     * @date         : 2020/5/12 9:39
     * @param        :
     * @return       :
     */
    loadData: function () {
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      AlarmManagerService.queryReportService(this.conditions).then(result => {
        _this.performListStatistics = result
        _this.Loading.closeLoading(loadingInstance)
        if (_this.performListStatistics.length > 0) {
          this.showFlag = true
          _this.performListStatisticsInit()
        } else {
          this.showFlag = false
          this.dataList = []
          this.dataList1 = []
          this.tableLabel = []
          this.handleTotal()
          this.closeAll()
          _this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.QUERY_NULL_CODE))
        }
      }).catch(err => {
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : closeAll
     * @author       : ls
     * @date         : 2020/5/12 9:46
     * @param        :
     * @return       :
     */
    closeAll: function () {
      if (this.echartLine) {
        this.echartLine.clear()
      }
    },
    getData: function (val) {
      var a = []
      for (var i = 0; i < this.dataList.length; i++) {
        a.push(this.dataList[i][val])
      }
      return a
    },
    /**
     * @Description  : genChartInit
     * @author       : ls
     * @date         : 2020/5/12 19:31
     * @param        :
     * @return       :
     */
    genChartInit: function () {
      this.se = []
      this.yAxisList = []
      if (this.valueY === 'deviceParam') {
        for (var i = 0; i < this.showYAxis.length; i++) {
          this.se.push({
            type: this.chartType,
            name: this.showYAxis[i],
            smooth: true,
            yAxisIndex: i,
            data: this.getData(this.showYAxisY[i])
          })
          if (i === 0) {
            this.yAxisList.push({
              // name: this.showYAxis[i],
              position: 'left',
              type: 'value',
              // axisLabel: {
              //   formatter: '{value}'
              // },
              axisLine: {
                lineStyle: {
                  color: this.colors[i]
                }
              }
            })
          } else {
            this.yAxisList.push({
              // name: this.showYAxis[i],
              position: 'right',
              type: 'value',
              offset: 40 * (i - 1),
              axisLine: {
                lineStyle: {
                  color: this.colors[i]
                }
              }
            })
          }
        }
      } else {
        for (var k = 0; k < this.showYAxis.length; k++) {
          this.chartData = []
          for (var j = 0; j < this.dataList.length; j++) {
            this.chartData.push(this.dataList[j][this.showYAxisY[k]])
          }
          this.se.push(
            {
              type: this.chartType,
              name: this.showYAxis[k],
              data: this.chartData
            }
          )
        }
        this.yAxisList.push(
          {
            name: '性能值',
            minInterval: 1,
            type: 'value'
          }
        )
      }
    },
    /**
     * @Description  : 绘图
     * @author       : ls
     * @date         : 2020/5/7 16:13
     * @param        :
     * @return       :
     */
    genChart: function () {
      this.genChartInit()
      this.echartLine.setOption({
        series: this.se,
        legend: {
          left: 'center',
          top: 30
        },
        title: {
          text: '性能分布统计报表',
          x: 'center'
        },
        yAxis: this.yAxisList,
        xAxis:
          {
            type: 'category',
            data: this.showData,
            splitLine: {
              show: false
            },
            boundaryGap: ['10%', '10%'],
            axisLabel: {
              showMinLabel: true,
              showMaxLabel: true
            }
          }
      })
    },
    /**
     * @Description  : 校验
     * @author       : ls
     * @date         : 2020/5/12 16:58
     * @param        :
     * @return       :
     */
    submitCheck: function () {
      if (this.valueY !== 'deviceParam' && this.valueX !== 'deviceParam') {
        if (this.deviceParam.length !== 1) {
          this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PARAM_NOT_NULL), 'XY')
          return false
        }
      }
      return true
    },
    /**
     * @description   : 处理数据
     * @author        : ls
     * @date          : 2020/6/20 10:06
     * @param         :
     * @return        :
     **/
    handleData: function () {
      this.t1 = []
      for (var i = 0; i < this.showData.length; i++) {
        this.t1.push(this.showData[i])
      }
    },
    /**
     * @description   : genData
     * @author        : ls
     * @date          : 2020/6/20 10:15
     * @param         :
     * @return        :
     **/
    genData: function () {
      this.dataList = []
      for (var i = 0; i < this.showData.length; i++) {
        var datas = {}
        datas[this.valueX] = this.showData[i]
        for (var j = 0; j < this.showYAxis.length; j++) {
          datas[this.showYAxisY[j]] = '0'
        }
        this.dataList.push(datas)
      }
      for (var m = 0; m < this.dataList.length; m++) {
        for (var n = 0; n < this.performListStatistics.length; n++) {
          if (this.dataList[m][this.valueX] === this.performListStatistics[n][0]) {
            for (var q = 0; q < this.showYAxisY.length; q++) {
              if (this.showYAxis[q] === this.performListStatistics[n][1]) {
                this.dataList[m][this.showYAxisY[q]] = this.performListStatistics[n][2]
              }
            }
          }
        }
      }
    },
    /**
     * @Description  : 统计数据
     * @author       : ls
     * @date         : 2020/5/7 15:44
     * @param        :
     * @return       :
     */
    staticsData: function () {
      if (!this.submitCheck()) {
        return
      }
      this.setStatisticsList()
      // this.switchLabel()
      this.loadData()
    },
    /**
     * @Description  : performListStatisticsInit
     * @author       : ls
     * @date         : 2020/5/13 10:08
     * @param        :
     * @return       :
     */
    performListStatisticsInit: function () {
      this.showData = this.unique(this.performListStatistics.map(function (val) {
        return val[0]
      }))
      this.showYAxis = this.unique(this.performListStatistics.map(function (val) {
        return val[1]
      }))
      this.showYAxisY = []
      for (var k = 0; k < this.showYAxis.length; k++) {
        if (this.showYAxis[k].indexOf('.') !== -1) {
          this.showYAxisY.push(this.showYAxis[k].split('.').join(''))
        } else {
          this.showYAxisY.push(this.showYAxis[k])
        }
      }
      this.handleData()
      this.genData()
      this.handleTableLabel()
      this.handleTotal()
      if (this.activeName === 'second') {
        this.chartTypeChange()
      }
    },
    /**
     * @Description  : 设置统计条件
     * @author       : ls
     * @date         : 2020/5/12 9:30
     * @param        :
     * @return       :
     */
    setStatisticsList: function () {
      this.conditions = {}
      this.statisticsList = []
      if (this.deviceType.length !== 0) {
        this.statisticsList.push({
          quaryAttribute: 'deviceTypeKey',
          compareSymbol: 'in',
          compareValue: this.deviceType.join(',')
        })
      }
      if (this.deviceName.length !== 0) {
        this.statisticsList.push({
          quaryAttribute: 'deviceKey',
          compareSymbol: 'in',
          compareValue: this.deviceName.join(',')
        })
      }
      if (this.deviceModel.length !== 0) {
        this.statisticsList.push({
          quaryAttribute: 'deviceModel',
          compareSymbol: 'in',
          compareValue: this.deviceModel.join(',')
        })
      }
      if (this.deviceBrand.length !== 0) {
        this.statisticsList.push({
          quaryAttribute: 'brand',
          compareSymbol: 'in',
          compareValue: this.deviceBrand.join(',')
        })
      }
      if (this.deviceParam.length !== 0) {
        this.statisticsList.push({
          quaryAttribute: 'deviceParam',
          compareSymbol: 'in',
          compareValue: this.deviceParam.join(',')
        })
      }
      this.conditions.queryTerms = this.statisticsList
      this.conditions.reportType = 3
      this.conditions.startTime = HelperUtil.getTimeInit(this.beginTimestamp) + this.addTimestamp
      this.conditions.endTime = HelperUtil.getTimeInit(this.endTimestamp) + this.addTimestamp1
      this.conditions.xAxis = this.valueX
      this.conditions.yAxis = this.valueY
      this.conditions.aggregateFunc = this.valueType
      this.conditions.interval = -999
      this.conditions.topN = -999
      this.conditions.bottomN = -999
    },
    /**
     * @Description  : y校验
     * @author       : ls
     * @date         : 2020/5/7 12:48
     * @param        :
     * @return       :
     */
    valueYChange: function () {
      if (!this.check.textNullCheck(this.valueY)) {
        this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('ReportTemplateManagement.Y'))
        return false
      }
      if (this.valueY === this.valueX) {
        this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.NOT_EQUAL))
        this.valueY = ''
        return false
      }
      return true
    },
    /**
     * @Description  : x校验
     * @author       : ls
     * @date         : 2020/5/7 12:50
     * @param        :
     * @return       :
     */
    valueXChange: function () {
      if (!this.check.textNullCheck(this.valueX)) {
        this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('ReportTemplateManagement.Y'))
        return false
      }
      if (this.valueY === this.valueX) {
        this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.NOT_EQUAL))
        this.valueX = ''
        return false
      }
      return true
    },
    /**
     * @Description  : 更多条件
     * @author       : ls
     * @date         : 2020/5/7 12:45
     * @param        :
     * @return       :
     */
    moreConditionOr: function () {
      this.conditionShowFlag = !this.conditionShowFlag
    },
    // 导出按钮显示
    handleClick (activeName, oldActiveName) {
      if (activeName === 'first') {
        this.msg = this.$t('AlarmStatistics.exportStatisticResult')
      } else {
        this.msg = this.$t('AlarmStatistics.exportStatisticGraph1')
      }
      return true
    },
    /**
     * @Description  : handleClick1
     * @author       : ls
     * @date         : 2020/5/12 17:55
     * @param        :
     * @return       :
     */
    handleClick1: function () {
      if (this.activeName === 'second' && this.performListStatistics.length !== 0) {
        if (this.echartLine === null) {
          this.$nextTick(function () {
            this.chartTypeChange()
          })
        }
      }
    },
    /**
     * @Description  : 开始时间设置
     * @author       : ls
     * @date         : 2020/5/7 13:00
     * @param        :
     * @return       :
     */
    beginDate: function () {
      let self = this
      return {
        disabledDate (time) {
          return time.getTime() > self.endTimestamp.getTime() || time.getTime() > Date.now()
        }
      }
    },
    /**
     * @Description  : 结束时间设置
     * @author       : ls
     * @date         : 2020/5/7 13:00
     * @param        :
     * @return       :
     */
    endDate: function () {
      let self = this
      return {
        disabledDate (time) {
          return time.getTime() < self.beginTimestamp.getTime() || time.getTime() > Date.now()
        }
      }
    },
    /**
     * @Description  : 起始时间赋值
     * @author       : ls
     * @date         : 2020/5/7 15:40
     * @param        :
     * @return       :
     */
    beginDateChange: function () {
      const setTimes = new Date()
      if (this.beginTimestamp === null) {
        setTimes.setTime(this.endTimestamp.getTime() - (60 * 60 * 1000))
        this.beginTimestamp = setTimes
        this.InfoTip.warningTip_alarm(this, {message: this.$t('AlarmStatistics.startTimeEmpty')})
      }
      if (this.beginTimestamp > this.endTimestamp) {
        setTimes.setTime(this.endTimestamp.getTime() - (60 * 60 * 1000))
        this.beginTimestamp = setTimes
        this.InfoTip.warningTip_alarm(this, {message: this.$t('AlarmStatistics.startGreaterEnd')})
      }
      // this.changeValuePeriod()
    },
    /**
     * @Description  : 结束时间赋值
     * @author       : ls
     * @date         : 2020/5/7 15:40
     * @param        :
     * @return       :
     */
    endDateChange: function () {
      const setTimes = new Date()
      const curTimes = new Date()
      if (this.endTimestamp === null) {
        if ((this.beginTimestamp.getTime() + (60 * 60 * 1000)) > curTimes.getTime()) {
          this.endTimestamp = curTimes
        } else {
          setTimes.setTime(this.beginTimestamp.getTime() + (60 * 60 * 1000))
          this.endTimestamp = setTimes
        }
        this.InfoTip.warningTip_alarm(this, {message: this.$t('AlarmStatistics.endTimeEmpty')})
      }
      if (this.endTimestamp < this.beginTimestamp) {
        if ((this.beginTimestamp.getTime() + (60 * 60 * 1000)) > curTimes.getTime()) {
          this.endTimestamp = curTimes
        } else {
          setTimes.setTime(this.beginTimestamp.getTime() + (60 * 60 * 1000))
          this.endTimestamp = setTimes
        }
        this.InfoTip.warningTip_alarm(this, {message: this.$t('AlarmStatistics.endSmallerStart')})
      }
      if (this.endTimestamp > curTimes) {
        if ((this.beginTimestamp.getTime() + (60 * 60 * 1000)) > curTimes.getTime()) {
          this.endTimestamp = curTimes
        } else {
          setTimes.setTime(this.beginTimestamp.getTime() + (60 * 60 * 1000))
          this.endTimestamp = setTimes
        }
        this.InfoTip.warningTip_alarm(this, {message: this.$t('AlarmStatistics.endGreaterNow')})
      }
      // this.changeValuePeriod()
    },
    /**
     * @Description  : 默认时间
     * @author       : ls
     * @date         : 2020/5/7 15:14
     * @param        :
     * @return       :
     */
    setDefaultDateTime: function () {
      const start = new Date()
      const end = new Date()
      start.setTime(start.getTime() - 3600 * 1000)
      this.beginTimestamp = start
      this.endTimestamp = end
    },
    /**
     * @Description  : 导入模板
     * @author       : ls
     * @date         : 2020/6/8 11:26
     * @param        :
     * @return       :
     */
    importFile: function () {
      this.innerVisible = true
    },
    /**
     * @Description  : 获取告警原因
     * @author       : ls
     * @date         : 2020/5/7 15:12
     * @param        :
     * @return       :
     */
    getAlarmTypeList: function () {
      let _this = this
      AlarmManagerService.getAlarmTypeList().then(result => {
        _this.optionsAlarmCause = Object.values(result)
        // _this.handleAlarmCause();
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },

    /**
     * @Description  : 获取网元
     * @author       : ls
     * @date         : 2020/5/7 15:07
     * @param        :
     * @return       :
     */
    getAllDevice: function () {
      let _this = this
      DeviceService.getAllDeviceCollection().then(result => {
        _this.deviceList = Object.values(result)
        _this.deviceList0 = Object.values(result)
        // _this.getAllDeviceModelListSelf()
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 获取性能指标
     * @author       : ls
     * @date         : 2020/5/12 16:40
     * @param        :
     * @return       :
     */
    getPerformType: function () {
      let _this = this
      PerformanceStatisticService.getPerformTypeService().then(result => {
        _this.performTypeList = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 网元类型变化
     * @author       : ls
     * @date         : 2020/5/8 9:50
     * @param        :
     * @return       :
     */
    deviceTypeChange: function () {
      var a = HelperUtil.deviceTypeChangeCURD(this.deviceModelList1, this.deviceType, this.deviceModel, this.deviceList0)
      this.deviceModelList = a[0]
      this.deviceModel = ''
      this.deviceName = ''
      this.deviceList = []
      this.deviceList = a[1]

      // this.deviceModel = ''
      // this.deviceName = ''
      // this.deviceModelList = []
      // this.deviceList = []
      // for (let j in this.deviceModelList0) {
      //   if (this.deviceType.length === 0) {
      //     this.deviceModelList.push(this.deviceModelList0[j])
      //   }
      //   for (let key1 in this.deviceType) {
      //     if (this.deviceType[key1] === this.deviceModelList0[j]['key']) {
      //       this.deviceModelList.push(this.deviceModelList0[j])
      //     }
      //   }
      // }
      // for (let i in this.deviceList0) {
      //   if (this.deviceType.length === 0) {
      //     this.deviceList.push(this.deviceList0[i])
      //   }
      //   for (let key in this.deviceType) {
      //     if (this.deviceType[key] === this.deviceList0[i]['deviceTypeKey']) {
      //       this.deviceList.push(this.deviceList0[i])
      //     }
      //   }
      // }
    },
    /**
     * @Description  : 网元型号变化
     * @author       : ls
     * @date         : 2020/5/8 11:49
     * @param        :
     * @return       :
     */
    deviceModelChange: function () {
      this.deviceName = ''
      this.deviceList = []
      this.deviceList = HelperUtil.deviceModelChangeCURD(this.deviceType, this.deviceModel, this.deviceList0)



      // this.deviceName = ''
      // this.deviceList = []
      // for (let k in this.deviceList0) {
      //   if (this.deviceModel.length === 0) {
      //     if (this.deviceType.length === 0) {
      //       this.deviceList.push(this.deviceList0[k])
      //     } else {
      //       for (let t in this.deviceType) {
      //         if (this.deviceList0[k].deviceTypeKey === this.deviceType[t]) {
      //           this.deviceList.push(this.deviceList0[k])
      //         }
      //       }
      //     }
      //   }
      //   for (let key in this.deviceModel) {
      //     if (this.deviceModel[key] === this.deviceList0[k]['deviceModel']) {
      //       if (this.deviceType.length === 0) {
      //         this.deviceList.push(this.deviceList0[k])
      //       } else {
      //         for (let key1 in this.deviceType) {
      //           if (this.deviceType[key1] === this.deviceList0[k]['deviceTypeKey']) {
      //             this.deviceList.push(this.deviceList0[k])
      //           }
      //         }
      //       }
      //     }
      //   }
      // }
    },
    /**
     * @Description  : 获取设备的网元型号
     * @author       : ls
     * @date         : 2020/5/8 10:23
     * @param        :
     * @return       :
     */
    getAllDeviceModelListSelf: function () {
      for (let key in this.deviceList) {
        let containIs = false
        for (let i in this.deviceModelList) {
          if (this.deviceList[key].deviceModel === this.deviceModelList[i].value) {
            containIs = true
            break
          }
        }
        if (containIs === false && this.deviceList[key].deviceModel !== '') {
          let device = {}
          device.key = this.deviceList[key].deviceTypeKey
          device.label = this.deviceList[key].deviceModel
          device.value = this.deviceList[key].deviceModel
          this.deviceModelList.push(device)
          this.deviceModelList0.push(device)
        }
      }
    },
    /**
     * @Description  : 获取网元类型
     * @author       : ls
     * @date         : 2020/5/7 15:03
     * @param        :
     * @return       :
     */
    getAllDeviceType: function () {
      let _this = this
      DeviceService.getAllDeviceTypeCollection().then(result => {
        _this.deviceTypeList = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 获取网元型号
     * @author       : ls
     * @date         : 2020/5/7 15:05
     * @param        :
     * @return       :
     */
    getAllDeviceModel: function () {
      let _this = this
      DeviceService.getAllDeviceModelCollection().then(result => {
        _this.deviceModelList = Object.values(result)
        _this.deviceModelList1 = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @description   : biaoge
     * @author        : ls
     * @date          : 2020/6/20 11:40
     * @param         :
     * @return        :
     **/
    handleTableLabel: function () {
      this.tableLabel = []
      switch (this.valueX) {
        case 'deviceTypeKey':
          this.tableLabel.push(
            {
              'label': this.$t('Performance.deviceType'),
              'prop': 'deviceTypeKey'
            }
          )
          break
        case 'deviceModel':
          this.tableLabel.push(
            {
              'label': this.$t('Performance.deviceModel'),
              'prop': 'deviceModel'
            }
          )
          break
        case 'displayName':
          this.tableLabel.push(
            {
              'label': this.$t('Performance.deviceName'),
              'prop': 'displayName'
            }
          )
          break
        case 'brand':
          this.tableLabel.push(
            {
              'label': this.$t('Performance.deviceBrand'),
              'prop': 'brand'
            }
          )
          break
        case 'deviceParam':
          this.tableLabel.push(
            {
              'label': this.$t('Performance.performParam'),
              'prop': 'deviceParam'
            }
          )
          break
      }
      for (var i = 0; i < this.showYAxisY.length; i++) {
        this.tableLabel.push(
          {
            prop: this.showYAxisY[i],
            width: '',
            label: this.showYAxis[i]
          }
        )
      }
    },
    /**
       * ---------------------------导出功能实现---------------------------
       * */
    exportFile () {
      if (this.performListStatistics.length === 0) {
        this.InfoTip.warningTip_alarm(this, {message: '暂无统计结果!'})
      } else {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.querySelector('.el-row')
        })
        if (this.activeName === 'first') {
          HelperUtil.downloadExcel('性能分布统计报表.xlsx')
        } else {
          HelperUtil.downloadImage()
        }
        loading.close()
      }
    },
    // table download
    exportExcel () {
      this.exportName1()
      /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(document.querySelector('#myTable'))
      /* get binary string as output */
      var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
      try {
        FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), this.exportName)
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },

    // 导出名称
    exportName1: function () {
      let aspect = ''
      for (let i = 0; i < this.optionsAspect.length; i++) {
        if (this.optionsAspect[i].value === this.valueAspect) {
          aspect = this.optionsAspect[i].label
        }
      }
      this.exportName = this.exportName + '-统计维度-' + aspect + '.xlsx'
    }
  },
  components: {
    ImportReportTemplate
  },
  watch: {
    templateType: {
      handler () {
        this.valueX = ''
        this.valueY = ''
        this.valueType = ''
        this.deviceModel = []
        this.deviceName = []
        this.deviceBrand = []
        this.deviceType = []
        this.deviceParam = []
        this.valueX = this.templateType.statDimensionX
        this.valueY = this.templateType.statDimensionY
        this.valueType = this.templateType.statType
        this.conditionShowFlag = true
        var arr = (this.templateType.filterValue.indexOf(';') !== -1) ? this.templateType.filterValue.split(';') : this.templateType.filterValue.split()
        var obj = {}
        for (var t = 0; t < arr.length; t++) {
          var arr1 = []
          arr1 = arr[t].split('@#')
          obj[arr1[0]] = arr1[2]
        }
        if (obj.hasOwnProperty('deviceTypeKey')) {
          this.deviceType = obj['deviceTypeKey'].split(',')
        }
        if (obj.hasOwnProperty('deviceModel')) {
          this.deviceModel = obj['deviceModel'].split(',')
        }
        if (obj.hasOwnProperty('displayName')) {
          this.deviceName = obj['displayName'].split(',')
        }
        if (obj.hasOwnProperty('brand')) {
          this.deviceBrand = obj['brand'].split(',')
        }
        if (obj.hasOwnProperty('deviceParam')) {
          this.deviceParam = obj['deviceParam'].split(',')
        }
      }
    },
    dataList: {
      handler () {
        if (this.activeName === 'first' && this.echartLine !== null) {
          this.chartTypeChange()
        }
      }
    }
  }
}
</script>

<style>
</style>
