<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 mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" placeholder="请选择年度">
          </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.regionLevel" @change="handleRegionLevelChange" allowClear placeholder="请选择等级">
            <a-select-option v-for="(item) in regionLevelOptions" :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" 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-col :lg="4" :md="8" :sm="24" :xs="24">
          <a-form-item label="横坐标:">
            <a-select v-model:value="queryParams.xco" :options="xOptions" allowClear 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'
  let trendChart;
  import {
    getColumnOptions,
    getTrendChart,
    getPlaceByRegionLevel
  } from "@/api/ecology/noise/road-sound";
  import {
    getDictData,
  } from "@/api/ecology/dict";
  export default {
    components: {},
    data() {
      return {
        queryParams: {
          yearList: ["2020", "2021"],
          areaList: ['南宁市'],
          placeList: [],
          regionLevel: '市级', // 区域等级
          xco: '年度' // 横坐标
        },
        trendData: [],
        regionLevelOptions: [],
        placeOptions: [],
        areaOptions: [],
        yearOptions: [],
        xOptions: [
          {
            label: '年度',
            value: '年度',
          },
          {
            label: '区域/测点名称',
            value: '区域/测点名称',
          }
        ]
      };
    },
    mounted() {
      this.loadOptionData();
      this.drawTrend()
    },
    methods: {
      // 下拉列表
      loadOptionData() {
        getColumnOptions("monitor_year").then((res) => {
          this.yearOptions = res.data.data.map((item) => {
            return {
              label: item,
              value: item,
            };
          });
        });
        getColumnOptions("region_level").then((res) => {
          this.regionLevelOptions = res.data.data.map((item) => {
            return {
              label: item,
              value: item,
            };
          });
        });
        this.getArea()
        this.getPlace('市级')
      },
      // 区域下拉列表
      getArea() {
        getDictData({dictName:'城区行政区划代码'}).then(res=>{
          this.areaOptions = res.data.data.map((item) => {
            return {
              label: item.dictDataName,
              value: item.dictDataName,
            };
          });
          this.areaOptions.unshift({ label: '南宁市', value: '南宁市'})
        })
      },
      // 县级
      getCounty() {
        getDictData({dictName:'县行政区划代码'}).then(res=>{
          this.areaOptions = res.data.data.map((item) => {
            return {
              label: item.dictDataName,
              value: item.dictDataName,
            };
          });
        })
      },
      // 测点名称下拉列表
      getPlace(regionLevel) {
        console.log('regionLevel', regionLevel);
        getPlaceByRegionLevel(regionLevel).then((res) => {
          this.placeOptions = res.data.data.map((item) => {
            return {
              label: item,
              value: item,
            };
          });
          // this.placeOptions.unshift({ label: '所有测点', value: '所有测点'})
        });
      },
      handleRegionLevelChange(value) {
        console.log(`selected ${value}`);
        this.queryParams.areaList = []
        this.queryParams.placeList = []
        if (value == '市级') {
          this.getArea()
          this.getPlace(value)
        } else if (value == '县级') {
          this.getCounty()
          this.getPlace(value)
        }
      },
      // 趋势图
      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);},
        }
        if (trendChart != null && trendChart != "" && trendChart != undefined) {
            trendChart.dispose();// 销毁
        }
        trendChart = echarts.init(document.getElementById('chartColumn'))
        let option = {
          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
        }
        trendChart.on("legendselectchanged", obj => {
          console.log('obj', obj);
          let index
          if (this.queryParams.xco === '年度') {
            index = this.queryParams.areaList.indexOf(obj.name)
            if (index > -1) {
              this.queryParams.areaList.splice(index, 1)
            } else {
              index = this.queryParams.placeList.indexOf(obj.name)
              index > -1 && this.queryParams.placeList.splice(index, 1)
            }
          } else {
            index = this.queryParams.yearList.indexOf(obj.name.substring(0,obj.name.length - 1))
            index > -1 && this.queryParams.yearList.splice(index, 1)
          }
          this.drawTrend()
        });
        //添加一个新的刻度线 实现折线在柱状图的中间显示
        option.xAxis[1] = {
          type: 'value',
          max: option.xAxis[0].data.length,
          show: false
        }

        // option.xAxis[0].splitLine = { show: false } //去除网格线
        // option.xAxis[0].splitArea = { show: false } //保留网格区域
        // option.xAxis[0].axisTick = { show: false } //隐藏刻度线
        // let barArray = option.series.filter(item => item.type === 'bar')
        // barArray.forEach(item=>{
        //   item.barGap = '0%'
        // })
        let lineArray = option.series.filter(item => item.type === 'line')
        lineArray.forEach((item,index) => {
          item.xAxisIndex = 1
          item.lineStyle = {
            type: 'dashed',
          }
          item.data = item.data.map((x, i) => [(i + 1 / (option.legend.data.length + 1) * (index + 1 )) , x])
        })

        // option.series[2].xAxisIndex = 1
        // option.series[3].xAxisIndex = 1
        // option.series[2].data = option.series[2].data.map((x, i) => [(0.25+i) , x])
        //   option.series[3].data = option.series[3].data.map((x, i) => [(0.75+ i) , x])
        console.log('option', option);
        trendChart.setOption(option)
      }
    }

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