<template>
  <div class="app-container contrastAnalysisBox" id="contrastAnalysisBox">
    <!-- 搜索工作栏 -->
    <search-area  :isFold="isFold" @submit="getList"  @exportD="exportData"/>
		<div v-show="chartData.length">
			<bar-chart
				ref="analysisBarChart"
				:chartData="chartData"
				:timeDim="timeDim" />
			<base-table
				:table-props="tableProps"
				:table-data="list"
				:max-height="tableH"
				class="contrast-out-table" />
		</div>
    <!-- 没有数据 -->
    <div class="no-data-bg" v-show='!chartData.length'></div>
  </div>
</template>
<script>
import { getCompare ,exportCompare} from "@/api/analysis/energyAnalysis"
import SearchArea from "./components/searchArea"
import BarChart from "./components/barChart"
import tableHeightMixin from '@/mixins/tableHeightMixin';
import FileSaver from 'file-saver';
import * as XLSX from 'xlsx/xlsx.mjs';
// import moment from 'moment'
export default {
  name: 'ContrastAnalysis',
  components: { SearchArea, BarChart },
	mixins: [tableHeightMixin],
  data() {
    return {
      isFold: false,
			chartData: [],
			timeDim: '',
			tableProps: [],
			list: [],
			tableH: this.tableHeight(250) / 2,
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(260)
      this.isFold = this.searchBarWidth('contrastAnalysisBox', 1310)
      // console.log(document.getElementById("contrastAnalysisBox").offsetWidth)
    })
    this.isFold = this.searchBarWidth('contrastAnalysisBox', 1310)
  },
  methods: {
		_setTableHeight() {
			this.tableH = this.tableHeight(250) / 2;
		},
    getList(params) {
      this.timeDim = params.timeDim
      getCompare({ ...params }).then((res) => {
				if (res.code === 0) {
					this.getTableList(res.data || []);
					this.chartData = res.data || [];
        } else {
          this.chartData = []
        }
      })
    },
		getTableList(arr) {
			this.tableProps = [];
			this.list = [];
			let tempX = [];
			let timeArr = arr[0].trendRespVOList || [];
			this.list = timeArr.map((item) => {
				return { time: item.time };
			});
			for (let i = 0; i < arr.length; i++) {
				let obj = {};
				obj.prop = arr[i].objId;
				obj.label = arr[i].objName;
				obj.minWidth = 100;
				tempX.push(obj);
				let tiemList = arr[i].trendRespVOList;
				for (let j = 0; j < tiemList.length; j++) {
					this.list[j][arr[i].objId] = tiemList[j].useNum
						? tiemList[j].useNum.toFixed(2)
						: null;
				}
			}
			this.tableProps = [{ prop: 'time', label: '时间' }].concat(tempX);
		},
    /** 导出按钮操作 */
    exportData(val) {
      // 处理查询参数
      this.$modal.confirm('是否确认导出对比分析数据?').then(() => {
          this.exportLoading = true;
          return exportCompare(val);
        }).then(response => {
          this.$download.excel(response, '对比分析数据.xlsx');
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
}
</script>
<style lang='scss'>
.contrastAnalysisBox {
  .el-tabs__nav::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #e4e7ed;
    /* z-index: 1; */
  }
  .el-tabs__nav-wrap::after {
    width: 0;
  }
  .el-tabs__item {
    padding: 0 10px;
  }
  .el-tabs__item:hover {
    color: rgba(0, 0, 0, 0.85);
  }
  .el-tabs__item.is-active {
    color: rgba(0, 0, 0, 0.85);
  }
  .el-tabs__item {
    color: rgba(0, 0, 0, 0.45);
  }
}
</style>
