<template>
  <div class="ele-body">
    <!-- 搜索表单 -->
    <a-form :model="queryParams" :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical">
      <a-row>
        <a-col :lg="4" :md="8" :sm="24" :xs="24">
          <a-form-item label="开始年度">
            <a-select v-model:value="queryParams.startYear" allowClear showSearch>
              <a-select-option v-for="item in yearOptions" :key="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="4" :md="8" :sm="24" :xs="24">
          <a-form-item label="结束年度">
            <a-select v-model:value="queryParams.endYear" allowClear showSearch>
              <a-select-option v-for="item in yearOptions" :key="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="4" :md="8" :sm="24" :xs="24">
          <a-form-item label="城区:">
            <a-select mode="multiple" :default-value="['南宁']" v-model:value="queryParams.areaList" :options="areaOptions" placeholder="城区">
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="4" :md="8" :sm="24" :xs="24">
          <a-form-item label="测点名称:">
            <a-select mode="multiple" v-model:value="queryParams.placeList" :options="placeOptions" placeholder="测点名称">
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :lg="4" :md="8" :sm="24" :xs="24">
          <a-space>
            <a-button type="primary" class="mb-20" @click="drawTrend">开始统计</a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>
    <a-card :bordered="false">
      <div id="chartColumn" style="width: 100%; height: 500px;"></div>
    </a-card>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import { markRaw } from 'vue'
  import {
    getColumnOptions,
    getTrendChart
  } from "@/api/ecology/noise/road-sound";
  export default {
    components: {},
    data() {
      return {
        queryParams: {
          startYear: 2020,
          endYear: 2021,
          areaList: [],
          placeList: []
        },
        trendData: [],
        chartColumn: null,
        placeOptions: [],
        areaOptions: [],
        yearOptions: []
      };
    },
    mounted() {
      this.loadOptionData();
      this.drawTrend()
    },
    methods: {
      // 下拉列表
      loadOptionData() {
        getColumnOptions("place").then((res) => {
          this.placeOptions = res.data.data.map((item) => {
            return {
              label: item,
              value: item,
            };
          });
        });
        getColumnOptions("area").then((res) => {
          this.areaOptions = res.data.data.map((item) => {
            return {
              label: item,
              value: item,
            };
          });
          this.areaOptions.unshift({ label: '南宁市', value: '南宁'})
        });
        getColumnOptions("monitor_year").then((res) => {
          this.yearOptions = res.data.data.map((item) => {
            return {
              label: item,
              value: item,
            };
          });
        });
      },
      // 趋势图
      drawTrend() {
        getTrendChart(this.queryParams).then( res => {
          console.log('res', res);
          if (res.data.code == 0) {
            this.trendData = res.data.data
            this.initChart()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },
      initChart() {
        this.trendData.yAxis[0].axisLabel = {
          formatter: function (value) { return value.toFixed(1);}
        };
        echarts.init(document.getElementById("chartColumn")).dispose();
        this.chartColumn = markRaw(echarts.init(document.getElementById('chartColumn')))
        this.chartColumn.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              saveAsImage: {
                show: true
              }
            }
          },
          legend: this.trendData.legend,
          xAxis: this.trendData.xAxis,
          yAxis: this.trendData.yAxis,
          series: this.trendData.series
        })
      }
    }

  }
</script>
<style scoped lang="less">
  .mb-20 {
    margin-bottom: 20px;
  }
</style>
