<template>
  <!-- 图形报表分析 -->
  <div class="reportAnalyPage" v-loading="echartLoading">
    <div class="tableLineMonitor">
      <el-icon @click="checkLine('1')" title="表格数据统计"><Grid /></el-icon>
    </div>
    <!-- 折线图 -->
    <div id="reportEchart" class="animate__animated animate__fadeIn" v-if="chartOptionYs.xAxis.data.length > 0"></div>
    <!-- 暂无数据 -->
    <el-empty :image-size="200" v-if="chartOptionYs.xAxis.data.length == 0" />
  </div>
</template>
<script setup>
import { graphicReport } from '@/api/dataAnalysis/syntherticData';
import chartOptionYs from './chartYs';

const props = defineProps({
  searchDate: Array,
  stationCode: String,
});
const emit = defineEmits(['changeOneData']);
const { proxy } = getCurrentInstance();
const myChart = shallowRef(null);
const echartLoading = ref(true);
const propsColor = proxy.fixDict['propsColorYs']; // 根据因子的单位来匹配

// 获取列表数据
async function getList(code) {
  // console.log('报表分析---', code);
  let params = {
    startTime: props.searchDate ? props.searchDate[0] : '',
    endTime: props.searchDate ? props.searchDate[1] : '',
    stCode: code,
  };
  echartLoading.value = true;
  chartOptionYs.series = [];
  chartOptionYs.legend.data = [];
  chartOptionYs.xAxis.data = [];
  chartOptionYs.yAxis = [];
  chartOptionYs.color = [];
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    if (JSON.stringify(datas) == '{}' || datas.propertyMonitorXList.length == 0) {
      chartOptionYs.xAxis.data = [];
      echartLoading.value = false;
      return false;
    } else {
      chartOptionYs.xAxis.data = datas.propertyMonitorXList;
      datas.propertyMonitorList.map(item => {
        setEchartY(item); //设置多y轴
        chartOptionYs.series.push({
          name: item.monitorPropertyName + item.propertyUnit,
          type: 'line',
          smooth: true,
          data: item.ylist,
          lineStyle: { color: chartOptionYs.color[chartOptionYs.yAxis.length - 1] },
          yAxisIndex: chartOptionYs.yAxis.length - 1,
        });
        chartOptionYs.legend.data.push(item.monitorPropertyName + item.propertyUnit);
      });
      chartOptionYs.grid.left = 50 * (chartOptionYs.yAxis.length - 1); //left值设置
      setTimeout(() => {
        intChart();
      }, 1000);
      echartLoading.value = false;
    }
  }
}
// 设置多y轴
function setEchartY(row) {
  propsColor.map((item, index) => {
    if (row.propertyUnit == item.label) {
      chartOptionYs.color.push(item.color);
      chartOptionYs.yAxis.push({
        name: item.value, //value是英文单位，label是中文单位
        position: 'left',
        offset: 50 * chartOptionYs.yAxis.length,
        axisLine: { show: true, lineStyle: { color: item.color } },
        axisTick: { show: true },
        splitLine: {
          show: true, // 显示网格线
          lineStyle: { type: 'dashed' },
        },
      });
    }
  });
  chartOptionYs.color = [...new Set(chartOptionYs.color)]; //颜色和值对应
  chartOptionYs.yAxis = unique(chartOptionYs.yAxis); //去重
}
// 数组内对象去重
function unique(arr) {
  let allArr = [];
  for (let i = 0; i < arr.length; i++) {
    let flag = true;
    for (let j = 0; j < allArr.length; j++) {
      if (arr[i].name == allArr[j].name) {
        flag = false;
      }
    }
    if (flag) {
      allArr.push(arr[i]);
    }
  }
  return allArr;
}
// 点击切换
function checkLine(val) {
  emit('changeOneData', val);
}

// 初始化echarts
function intChart() {
  if (!!myChart.value) {
    myChart.value.dispose();
  }
  // 绘制图表
  myChart.value = proxy.echarts.init(document.getElementById('reportEchart'));
  myChart.value.setOption(chartOptionYs);
}

//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
// 初始化
onMounted(() => {
  getList(props.stationCode);
  window.addEventListener('resize', resizeTheChart);
});
defineExpose({
  getList,
});
</script>
<style lang="scss">
.reportAnalyPage {
  width: 100%;
  #reportEchart {
    width: 100%;
    height: calc(100vh - 490px);
  }
  .tableBox {
    .el-pagination {
      right: 25%;
    }
    .el-scrollbar {
      height: calc(100vh - 650px);
    }
  }
}
</style>