<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="结束日期"
        @change="constrastData"
      >
      </el-date-picker>
      <el-button type="warning" @click="exportData">
        <el-icon><Download /></el-icon> 导出
      </el-button>
      <el-button type="primary" @click="clearData">
        <el-icon><DeleteFilled /></el-icon> 清除全部
      </el-button>
    </div>
    <div class="stationDialog">
      <div class="stationLeft">
        <el-input v-model="filterText" class="searchInput" placeholder="请输入名称" clearable />
        <el-tree
          ref="treeRef"
          :data="stationList"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="defaultCheckedKeys"
          :props="{ label: 'name', children: 'children' }"
          @check="checkNode"
          v-loading="treeLoading"
          :filter-node-method="filterNode"
        />
      </div>
      <div class="stationRight">
        <!-- 具体echarts分析 -->
        <div id="stationEchartDB" v-if="chartOptionYs.xAxis.data.length > 0" v-loading="echartLoading"></div>
        <!-- 暂无数据 -->
        <el-empty
          v-loading="echartLoading"
          :image-size="200"
          v-if="chartOptionYs.xAxis.data.length == 0"
          style="flex: 1; margin-top: 200px"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { monitorPropertyList, monitorPropertyGraphicCompare } from '@/api/dataAnalysis/syntherticData';
import chartOptionYs from './chartYs';
import bus from '@/utils/mitt';

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 filterText = ref('');

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

// 选择树节点
function checkNode(data, checkedData) {
  monitorCode.value = [];
  monitorCode.value = checkedData.checkedNodes; //选择的id值
  constrastData();
}
// 对树节点进行筛选时执行的方法
function filterNode(value, data, node) {
  let parentNode = node.parent; // 父级node
  let labels = [node.label]; // 当前node的名字
  let level = 1; // 层级
  while (level < node.level) {
    labels = [...labels, parentNode.label]; // 当前node名字，父级node的名字
    parentNode = parentNode.parent;
    level++;
  }
  return labels.some(d => d.indexOf(value) !== -1);
}
/** 根据名称筛选站点 */
watch(filterText, val => {
  // console.log(val, proxy.$refs['treeRef'].filter(val));
  proxy.$refs['treeRef'].filter(val);
});
// 清除所有选中的
function clearData() {
  monitorCode.value = [];
  proxy.$refs['treeRef'].setCheckedKeys([]);
  constrastData();
}

// echarts
function intChart() {
  if (!!myChart.value) {
    myChart.value.dispose();
  }
  myChart.value = proxy.echarts.init(document.getElementById('stationEchartDB'));
  // 绘制图表
  myChart.value.clear();
  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].children[0].id); //默认选中第一个
    monitorCode.value.push(stationList.value[0].children[0].children[0]);
    constrastData();
    treeLoading.value = false;
  });
}

// 导出数据
async function exportData() {
  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' : '',
    itemListString: JSON.stringify(monitorArr),
  };
  proxy.download(
    'business/siteHistoryMonitor/monitorPropertyGraphicCompareExport',
    {
      ...params,
    },
    `对比分析_${new Date().getTime()}.xlsx`
  );
}

// 对比分析搜索
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(); //获取监测项
  window.addEventListener('resize', resizeTheChart);
  bus.on('toggleSideBarClick', e => {
    // console.log(e, document.querySelector('.stationRight').clientWidth);
    // myChart.value.resize({ width: width });
  });
});
onUnmounted(() => {
  window.removeEventListener('resize', resizeTheChart);
  bus.off('toggleSideBarClick');
});
</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;
      height: 600px;
      padding: 15px;
      .searchInput {
        margin-bottom: 10px;
      }
      .el-tree {
        height: calc(100vh - 200px) !important;
        overflow: auto;
      }
      .el-tree-node__expand-icon.is-leaf {
        visibility: hidden;
      }
    }
    .stationRight {
      width: 100%;
      flex: 1;
      margin-left: 10px;
      #stationEchartDB {
        height: 600px;
        width: 100%;
      }
    }
  }
}
</style>