<template>
  <div ref="chart" class="chart" :style="{height: '400px', width: '100%'}" />
</template>

<script>
import { listScatterPlot } from '@/api/analysis/achievement'
import * as echarts from "echarts";
require('echarts/theme/macarons') // echarts theme
import resize from '@/utils/resize'

export default {
  mixins: [resize],
  props: {
    queryParams: Object,
  },
  data() {
    return {
      pagination: {
        page: 1,
        size: 10000,
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.chart = echarts.init(this.$refs.chart, 'macarons');
      this.setOptions();
    })
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
  methods: {
    setOptions() {
      const { queryParams } = this;
      if (!queryParams.siteId) return;
      const params = {
        ...this.queryParams,
        ...this.pagination,
      };
      listScatterPlot(params).then((res) => {
        const chartData = res.data || [];
        const flows = chartData.map(({flowsum}) => flowsum)
        const max = Math.max(...flows);
        const min = Math.min(...flows);
        const seriesData = chartData.map(({ flowsum, waterlevel }) => [waterlevel, flowsum]);

        console.log(seriesData)

        this.chart.setOption({
          xAxis: {
            name: '水位（m）',
            scale: true,
            axisLine: {
              lineStyle: {
                color: '#54606C'
              }
            }
          },
          yAxis: {
            name: '流量（m³/h）',
            scale: true,
            axisLine: {
              lineStyle: {
                color: '#54606C'
              }
            }
          },
          grid: {
            left: 30,
            right: 70,
            bottom: 40,
            top: 40,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            formatter: (params) => {
              const { data } = params[0];
              return `水位：${data[1]} m<br />流量：${data[0]} m³/h`;
            },
            padding: [5, 10]
          },
          series: [{
            name: '水位',
            type: 'scatter',
            data: seriesData,
            symbolSize: (value) => {
              if (max === min) {
                return 10;
              }
              const per = (value[1] - min) / (max - min);
              return 10 + 10 * per;
            },
            itemStyle: {
              color: '#54D192'
            }
          }]
        })
      })
    }
  },
  watch: {
    queryParams: {
      handler() {
        this.setOptions();
      },
      deep: true,
    },
  }
}
</script>

<style scoped>

</style>
