<template>
  <!-- 趋势统计 -->
  <div class="trendAnalyPage">
    <!-- <div class="tableLineMonitor">
      <el-icon @click="checkLine('1')" title="表格数据统计"><Grid /></el-icon>
      <el-icon @click="checkLine('2')" title="图形报表分析"><Histogram /></el-icon>
    </div> -->
    <!-- 表格 -->
    <div class="tableBox animate__animated animate__zoomIn" v-if="tableData.length > 0 && tabIndex == '1'">
      <el-table v-loading="tableLoading" :data="tableData">
        <el-table-column label="统计开始时间" prop="startDate" width="160" />
        <el-table-column label="统计结束时间" prop="endDate" width="160" />
        <el-table-column label="监测指标" prop="monitorName" />
        <el-table-column label="单位" prop="unit" />
        <el-table-column label="区间最大值" prop="maxValue" />
        <el-table-column label="区间最小值" prop="minValue" />
        <!-- <el-table-column label="监测阀值" prop="threshold" /> -->
        <el-table-column label="区间平均值" prop="averageValue" />
        <el-table-column label="区间累计值" prop="sectionCumulativeValue" />
        <el-table-column label="总累计值" prop="cumulativeValue" />
      </el-table>
    </div>
    <!-- 折线图 -->
    <div id="trendEchart" class="animate__animated animate__fadeIn" v-if="tableData.length > 0 && tabIndex == '2'"></div>
    <!-- 暂无数据 -->
    <el-empty v-loading="tableLoading" :image-size="200" v-if="tableData.length == 0" />
  </div>
</template>
<script setup>
import { tendencyStatistics } from '@/api/dataAnalysis/syntherticData';

const props = defineProps({
  searchDate: Array,
  stationCode: String,
});
const { proxy } = getCurrentInstance();

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  start: props.searchDate ? props.searchDate[0] : '',
  end: props.searchDate ? props.searchDate[1] : '',
});
const tableData = ref([]);
const tableLoading = ref(false);
const tabIndex = ref('1');
const myChart = ref(null);
const chartOption = reactive({
  grid: {
    left: '8%',
    right: '3%',
    bottom: '2%',
    top: '10%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: true,
    },
  },
  legend: {
    show: true,
    data: ['实时水位(m)'],
  },

  xAxis: {
    type: 'category',
    data: ['01:00', '02:00'],
    axisTick: {
      show: false,
    },
  },
  yAxis: [
    {
      // name: '水位(m)',
      axisLine: { show: true },
      position: 'left',
      splitLine: {
        show: true, // 显示网格线
        lineStyle: {
          type: 'dashed',
        },
      },
    },
  ],
  series: [
    {
      name: '实时水位(m)',
      type: 'line',
      smooth: true,
      data: [12, 13],
    },
  ],
});

// 获取列表数据
function getList(code) {
  // console.log('趋势统计---', props.searchDate);
  tableLoading.value = true;
  chartOption.series = [];
  chartOption.legend.data = [];
  chartOption.xAxis.data = [];
  let params = {
    startDate: props.searchDate ? props.searchDate[0] : '',
    endDate: props.searchDate ? props.searchDate[1] : '',
    siteCode: code,
  };
  tendencyStatistics(params).then(res => {
    let datas = res.data;
    tableData.value = datas;
    datas.map(item => {
      chartOption.xAxis.data.push(item.startDate);
      chartOption.legend.data.push(item.monitorName + item.unit);
      chartOption.series.push({
        name: item.monitorName + item.unit,
        type: 'line',
        smooth: true,
        data: [item.averageValue],
      });
    });
    tableLoading.value = false;
  });
}
// 点击切换
function checkLine(val) {
  tabIndex.value = val;
  if (val == '2' && tableData.value.length > 0) {
    setTimeout(() => {
      intChart();
    });
  }
}
// 初始化echarts
function intChart() {
  if (!!myChart.value) {
    myChart.value.dispose();
  }
  // 绘制图表
  myChart.value = proxy.echarts.init(document.getElementById('trendEchart'));
  myChart.value.setOption(chartOption);
}
//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
// 初始化
onMounted(() => {
  getList(props.stationCode);
  window.addEventListener('resize', resizeTheChart);
});
defineExpose({
  getList,
});
onBeforeUnmount(() => {});
</script>
<style lang="scss">
.trendAnalyPage {
  width: 100%;
  #trendEchart {
    width: 100%;
    height: calc(100vh - 490px);
  }
  .tableBox {
    border-top: 1px solid #00d1ff;
    .el-scrollbar {
      height: calc(100vh - 550px);
    }
  }
}
</style>