<template>
  <!-- 站点对比分析-选择 -->
  <div class="stationDialogPage">
    <div class="searchBox">
      <el-date-picker
        v-model="dateRange"
        value-format="YYYY-MM-DD"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-button type="primary" @click="constrastData">
        <el-icon><DataLine /></el-icon> 对比分析
      </el-button>
    </div>
    <div class="stationDialog">
      <div class="stationLeft">
        <el-tree
          :data="stationList"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="defaultCheckedKeys"
          :props="{ label: 'name', children: 'children' }"
          @check="checkNode"
          v-loading="treeLoading"
        />
      </div>
      <!-- 具体echarts分析 -->
      <div id="stationEchartDB" v-if="chartOptionYs.xAxis.data.length > 0"></div>
      <!-- 暂无数据 -->
      <el-empty
        v-loading="echartLoading"
        :image-size="200"
        v-if="chartOptionYs.xAxis.data.length == 0"
        style="margin-left: 30%"
      />
    </div>
  </div>
</template>
<script setup>
import { monitorPropertyList, monitorPropertyGraphicCompare } from '@/api/dataAnalysis/syntherticData';
import chartOptionYs from './chartYs';

const props = defineProps({
  stationDBInfo: Object,
});
const { proxy } = getCurrentInstance();
const myChart = shallowRef(null);
const dateRange = ref([proxy.moment().subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
const stationList = ref([]);
const defaultCheckedKeys = ref([]);
const treeLoading = ref(true);
const monitorCode = ref([]);
const echartLoading = ref(false);

const propsColor = proxy.fixDict['propsColorYs']; // 根据因子的单位来匹配

// 选择树节点
function checkNode(data, checkedData) {
  monitorCode.value = [];
  monitorCode.value = checkedData.checkedNodes; //选择的id值
}

// echarts
function intChart() {
  if (!!myChart.value) {
    myChart.value.dispose();
  }
  myChart.value = proxy.echarts.init(document.getElementById('stationEchartDB'));
  // 绘制图表
  myChart.value.setOption(chartOptionYs);
}
// 获取监测项
function getPropertyList() {
  treeLoading.value = true;
  monitorPropertyList().then(res => {
    stationList.value = res.data.filter(item => item.children.length > 0);
    defaultCheckedKeys.value.push(stationList.value[0].children[0].id); //默认选中前两个
    defaultCheckedKeys.value.push(stationList.value[0].children[1].id); //默认选中前两个
    monitorCode.value.push(stationList.value[0].children[0]);
    monitorCode.value.push(stationList.value[0].children[1]);
    constrastData();
    treeLoading.value = false;
  });
}

// 对比分析搜索
function constrastData() {
  chartOptionYs.series = [];
  chartOptionYs.legend.data = [];
  chartOptionYs.xAxis.data = [];
  chartOptionYs.yAxis = [];
  chartOptionYs.color = [];
  echartLoading.value = true;
  let monitorArr = [];
  monitorCode.value.map(item => {
    monitorArr.push({
      monitorCode: item.code,
      stCode: item.assistField1,
    });
  });
  let params = {
    startTime: dateRange.value ? dateRange.value[0] + ' 00:00:00' : '',
    endTime: dateRange.value ? dateRange.value[1] + ' 23:59:59' : '',
    itemList: monitorArr,
  };
  monitorPropertyGraphicCompare(params).then(res => {
    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轴
        // console.log(chartOptionYs.yAxis, '--', chartOptionYs.color);
        chartOptionYs.series.push({
          name: item.stName + '--' + item.monitorPropertyName + item.propertyUnit,
          type: 'line',
          lineStyle: { color: chartOptionYs.color[chartOptionYs.yAxis.length - 1] },
          smooth: true,
          data: item.ylist,
          yAxisIndex: chartOptionYs.yAxis.length - 1,
        });
        chartOptionYs.legend.data.push(item.stName + '--' + item.monitorPropertyName + item.propertyUnit);
      });
      chartOptionYs.grid.left = 50 * (chartOptionYs.yAxis.length - 1); //left值设置
      setTimeout(() => {
        intChart();
      });
      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 resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
// 初始化
onMounted(() => {
  getPropertyList(); //获取监测项
  // console.log('对比分析参数--', props.stationDBInfo);
  window.addEventListener('resize', resizeTheChart);
});
</script>
<style lang="scss">
.stationDialogPage {
  padding-bottom: 10px;
  .searchBox {
    margin-bottom: 10px;
    .el-button {
      margin-left: 10px;
      margin-top: -5px;
    }
  }
  .stationDialog {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    .stationLeft {
      width: 400px;
      border: 1px solid #e4eeff;
      height: 600px;
      overflow: auto;
      padding: 15px;
    }
    #stationEchartDB {
      height: 600px;
      flex: 1;
    }
  }
}
</style>