<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" 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="handleMonthChange" v-model:value="queryParams.monthList" :options="monthOptions" 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 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.placeList" :options="placeOptions" 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="handleCategoryChange" v-model:value="queryParams.categoryList" :options="categoryOptions" 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 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, getPlaceOptions, getColumnOptions, getTrendChart } from '@/api/ecology/atmosphere/acid';
export default {
  components: {},
  data() {
    return {
      queryParams: {
        yearList: ['2020', '2021'],
        monthList: [],
        placeList: ['所有测点'],
        regionLevel: '市级', // 区域等级
        xco: '年度', // 横坐标
        ycoList: ['ph'],
        categoryList: ['酸雨PH'] // 项目类别
      },
      trendData: [],
      regionLevelOptions: [{ label: '市级', value: '市级' }, { label: '县级', value: '县级' }],
      placeOptions: [],
      yearOptions: [],
      categoryOptions: [
        { label: '酸雨PH', value: '酸雨PH' },
        { label: '降水PH', value: '降水PH' },
        { label: '酸雨频率（%)', value: '酸雨频率' },
      ],
      monthOptions: [
        {
          label: '全部',
          value: '全部'
        }
      ],
      xOptions: [
        { label: '年度', value: '年度' },
        { label: '年月', value: '年月' },
        { label: '测点名称', value: '测点名称' }
      ],
      yOptions: [
        { label: 'PH值(无量纲)', value: 'ph' },
        { label: '酸雨频率（%）', value: 'rate' },
      ]
    };
  },
  mounted() {
    this.loadOptionData();
    this.drawTrend();
  },
  methods: {
    // 下拉列表
    loadOptionData() {
      getYearOptions().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.getPlaceOptions('市级')
      for (let i = 1; i <= 12; i++) {
        this.monthOptions.push({ label: i + '月', value: i });
      }
    },
    // 获取区域测点名称
    getPlaceOptions(regionLevel) {
      getPlaceOptions(regionLevel).then(res => {
        this.placeOptions = res.data.data.map(item => {
          return {
            label: item,
            value: item
          };
        });
        this.placeOptions.unshift({ label: '所有测点', value: '所有测点' });
      });
    },
    handleRegionLevelChange(value) {
      if (value) {
        this.getPlaceOptions(value)
      }
    },
    handleMonthChange(value) {
      if (value.includes('全部')) {
        this.queryParams.monthList = [1,2,3,4,5,6,7,8,9,10,11,12]
      }
    },
    // 纵坐标变化
    handleYcoChange(value) {
      if (value.includes('rate') && !this.queryParams.categoryList.includes('酸雨频率')) {
        this.queryParams.categoryList.push('酸雨频率')
      }
      if (!value.includes('rate') && this.queryParams.categoryList.includes('酸雨频率')) {
        let index = this.queryParams.categoryList.indexOf('酸雨频率')
        this.queryParams.categoryList.splice(index, 1)
      }
    },
    // 项目类别变化
    handleCategoryChange(value) {
      if (value.includes('酸雨频率') && !this.queryParams.ycoList.includes('rate')) {
        this.queryParams.ycoList.push('rate')
      }
      if (!value.includes('酸雨频率') && this.queryParams.ycoList.includes('rate')) {
        let index = this.queryParams.ycoList.indexOf('rate')
        this.queryParams.ycoList.splice(index, 1)
      }
      if ((value.includes('酸雨PH') || value.includes('降水PH')) && !this.queryParams.ycoList.includes('ph')) {
        this.queryParams.ycoList.push('ph')
      }
      if (!value.includes('酸雨PH') && !value.includes('降水PH') && this.queryParams.ycoList.includes('ph')) {
        let index = this.queryParams.ycoList.indexOf('ph')
        this.queryParams.ycoList.splice(index, 1)
      }
    },
    validParams() {
      console.log("params", this.queryParams);
      if (this.queryParams.yearList.length === 0) {
        this.$message.warning('年度不能为空')
        return false
      }
      if (!this.queryParams.regionLevel) {
        this.$message.warning('区域等级不能为空')
        return false
      }
      if (this.queryParams.placeList.length === 0) {
        this.$message.warning('测点名称不能为空')
        return false
      }
      if (this.queryParams.categoryList.length === 0) {
        this.$message.warning('项目类别不能为空')
        return false
      }
      if (!this.queryParams.xco) {
        this.$message.warning('横坐标不能为空')
        return false
      }
      if (!this.queryParams.ycoList.length === 0) {
        this.$message.warning('纵坐标不能为空')
        return false
      }
      if (this.queryParams.xco === '年月' && this.queryParams.monthList.length === 0) {
        this.$message.warning('横坐标为年月时，月份选择不能为空')
        return false
      }
      if (this.queryParams.ycoList.includes('rate') && !this.queryParams.categoryList.includes('酸雨频率')) {
        this.$message.warning('纵坐标选择酸雨频率时，项目类别也应选择酸雨频率')
        return false
      }
      if (this.queryParams.categoryList.includes('酸雨频率') && !this.queryParams.ycoList.includes('rate')) {
        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
      };
      let barArray = option.series.filter(item => item.type === 'bar')
      if (barArray && barArray.length <= 6) {
        barArray.forEach(item => {
          item.barWidth = 80
          if (barArray.length === 1) {
            item.itemStyle = { color: '#9fe080' }
          }
        })
      }
      let lineArray = option.series.filter(item => item.type === 'line');
      lineArray.forEach((item, index) => {
        console.log("item", item);
        item.lineStyle = {
          type: 'dashed',
        };
        if (lineArray.length === 2) {
          if (index === 0) {
            item.lineStyle.color = '#e8cd6a'
          } else {
            item.lineStyle.color = '#5c7bd9'
          }
        }
        if (index === 0) {
          item.label.offset = [20,30]
        }
      });
      console.log('option', option);
      trendChart.setOption(option);
    }
  }
};
</script>
<style scoped lang="less">
.mb-20 {
  margin-bottom: 20px;
}
</style>
