<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="6" :md="12" :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="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="月份:"><a-select mode="multiple" v-model:value="queryParams.monthList" :options="monthOptions" placeholder="请选择月份"></a-select></a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :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="6" :md="12" :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="6" :md="12" :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="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="监测指标:">
            <a-select mode="multiple" @change="handleIndicatorChange" v-model:value="queryParams.indicatorList" :options="indicatorOptions" placeholder="请选择监测指标"></a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :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-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="纵坐标:">
            <a-select mode="multiple" @change="handleYcoChange" v-model:value="queryParams.ycoList" :options="yOptions" allowClear placeholder="请选择纵坐标"></a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :lg="6" :md="12" :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 { getYearOptions, getTrendChart, getCityPlace, getCountryPlace } from '@/api/ecology/atmosphere/air';
import { getDictData } from '@/api/ecology/dict';
export default {
  components: {},
  data() {
    return {
      queryParams: {
        yearList: ['2020', '2021'],
        monthList: [],
        areaList: ['南宁市'],
        placeList: [],
        regionLevel: '市级', // 区域等级
        xco: '年度', // 横坐标
        ycoList: ['ch'],
        indicatorList: ['so2', 'no2'] // 监测指标
      },
      trendData: [],
      regionLevelOptions: [{ label: '市级', value: '市级' }, { label: '县级', value: '县级' }],
      placeOptions: [],
      areaOptions: [],
      yearOptions: [],
      indicatorOptions: [
        { label: '二氧化硫浓度/(μg/m3)', value: 'so2' },
        { label: '二氧化氮浓度/(μg/m3)', value: 'no2' },
        { label: '可吸入颗粒物浓度/(μg/m3)', value: 'pm10' },
        { label: '一氧化碳 浓度/(mg/m3)', value: 'co' },
        { label: 'O3（O3）最大8小时滑动平均浓度/(μg/m3)', value: 'o3' },
        { label: '细颗粒物浓度/(μg/m3)', value: 'pm25' },
        { label: '空气质量指数AQI', value: 'aqi' },
        { label: '首要污染天数', value: 'main' },
        { label: '多项首要污染物天数', value: 'multi' }
      ],
      monthOptions: [
        {
          label: '全部',
          value: '全部'
        }
      ],
      xOptions: [
        { label: '年度', value: '年度' },
        { label: '年月', value: '年月' },
        { label: '区域', value: '区域' },
        { label: '测点名称', value: '测点名称' },
        { label: '监测指标', value: '监测指标' }
      ],
      yOptions: [
        { label: '达标天数（天）', value: 'days' },
        { label: '达标率（%）', value: 'rate' },
        { label: '浓度', value: 'ch' },
        { label: '首要污染物天数', value: 'main' },
        { label: '空气质量指数', value: 'aqi' },
        { label: '优良率', value: 'abRate' },
        { label: '多项首要污染物天数', value: 'multi' },
      ]
    };
  },
  mounted() {
    this.loadOptionData();
    this.drawTrend();
  },
  methods: {
    // 下拉列表
    loadOptionData() {
      getYearOptions().then(res => {
        this.yearOptions = res.data.data.map(item => {
          return {
            label: item,
            value: item
          };
        });
      });
      for (let i = 1; i <= 12; i++) {
        this.monthOptions.push({ label: i + '月', value: i });
      }
      this.getArea();
      this.getCityPlace();
    },
    // 区域下拉列表
    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
          };
        });
        this.areaOptions.unshift({ label: '所有县', value: '所有县' });
      });
    },
    // 县级测点名称下拉列表
    getCountryPlace() {
      getCountryPlace().then(res => {
        this.placeOptions = res.data.data.map(item => {
          return {
            label: item,
            value: item
          };
        });
      });
    },
    // 县级测点名称下拉列表
    getCityPlace() {
      getCityPlace().then(res => {
        this.placeOptions = res.data.data.map(item => {
          return {
            label: item,
            value: item
          };
        });
      });
    },
    handleRegionLevelChange(value) {
      this.queryParams.areaList = [];
      this.queryParams.placeList = [];
      if (value == '市级') {
        this.getArea();
        this.getCityPlace();
      } else if (value == '县级') {
        this.getCounty();
        this.getCountryPlace();
      }
    },
    // 纵坐标变化
    handleYcoChange(value) {
      if (value.length > 2) {
        this.$message.warning('纵坐标最多只能选择两个')
        this.queryParams.ycoList.splice(this.queryParams.ycoList.length - 1)
      }
      if (value.includes('rate') || value.includes('aqi') || value.includes('abRate')) {
        this.queryParams.indicatorList = []
      }
      if (value.includes('multi')) {
        this.queryParams.ycoList = ['multi']
        this.queryParams.indicatorList = ['multi']
      }
      if (value.includes('main')) {
        this.queryParams.ycoList = ['main']
        this.queryParams.indicatorList = ['main']

      }
      if (value.includes('aqi')) {
        this.queryParams.ycoList = ['aqi']
        this.queryParams.indicatorList = ['aqi']
      }
    },
    handleIndicatorChange(value) {
      if (value.includes('multi')) {
        this.queryParams.ycoList = ['multi']
        this.queryParams.indicatorList = ['multi']
      }
      if (value.includes('main')) {
        this.queryParams.ycoList = ['main']
        this.queryParams.indicatorList = ['main']
      }
      if (value.includes('aqi')) {
        this.queryParams.ycoList = ['aqi']
        this.queryParams.indicatorList = ['aqi']
      }
    },
    validParams() {
      console.log("params", this.queryParams);
      if (this.queryParams.xco === '年月' && this.queryParams.monthList.length === 0) {
        this.$message.warning('横坐标为年月时，月份选择不能为空')
        return false
      }
      if (this.queryParams.xco === '区域' && this.queryParams.areaList.length === 0) {
        this.$message.warning('横坐标为区域时，区域选择不能为空')
        return false
      }
      if (this.queryParams.xco === '区域' && this.queryParams.indicatorList.length > 1) {
        this.$message.warning('横坐标为区域时，监测指标不能多选')
        return false
      }
      if (this.queryParams.xco === '监测指标' && this.queryParams.areaList.length > 1) {
        this.$message.warning('横坐标为监测指标时，区域不能多选')
        return false
      }
      if (this.queryParams.xco === '监测指标' && this.queryParams.placeList.length > 1) {
        this.$message.warning('横坐标为监测指标时，测点名称不能多选')
        return false
      }
      if (this.queryParams.xco === '测点名称' && this.queryParams.placeList.length === 0) {
        this.$message.warning('横坐标为测点名称时，测点名称选择不能为空')
        return false
      }
      if (this.queryParams.xco === '测点名称' && this.queryParams.indicatorList.length > 1) {
        this.$message.warning('横坐标为测点名称时，监测指标不能多选')
        return false
      }
      if (this.queryParams.areaList.length > 0 && this.queryParams.placeList.length > 0) {
        this.$message.warning('区域与测点名称不能同时选择')
        return false
      }
      if (this.queryParams.ycoList.includes('浓度') && this.queryParams.indicatorList.length === 0) {
        this.$message.warning('纵坐标为浓度时，监测指标不能为空')
        return false
      }
      return true
    },
    // 趋势图
    drawTrend() {
      if (!this.validParams()) {
        return
      }
      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
      };

      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]);
      });
      console.log('option', option);
      trendChart.setOption(option);
    }
  }
};
</script>
<style scoped lang="less">
.mb-20 {
  margin-bottom: 20px;
}
</style>
