<template>
  <!-- 明渠水质监测 -->
  <div class="lyInfoOne">
    <!-- 黄机明渠水质达标情况 -->
    <div class="rainTime">
      <div class="publicTitle">黄机明渠水质达标情况</div>
      <div class="navBtn">
        <p :class="[currentIndex == 1 ? 'active' : '']" @click="checkInfo(1)">黄孝河</p>
        <p :class="[currentIndex == 2 ? 'active' : '']" @click="checkInfo(2)">机场河</p>
      </div>
      <div class="selectTerm">
        <n-date-picker v-model:value="searchTim1" type="date" size="small" style="width: 120px" />
        <n-select
          v-model:value="waterquality"
          :options="qualityOptions"
          size="small"
          style="width: 100px; margin-left: 15px"
        >
        </n-select>
        <n-select
          v-if="currentIndex == 2"
          v-model:value="stationArray"
          size="small"
          :options="stationOptions"
          style="width: 100px; margin-left: 15px"
        >
        </n-select>
        <n-button type="primary" size="small" style="margin-left: 15px" @click="changePlace()">查询</n-button>
      </div>
      <!-- echarts 柱状图 -->
      <div id="echartWuran"></div>
    </div>
    <!-- 明渠异常事件统计 -->
    <div class="scene">
      <div class="publicTitle">明渠异常事件统计</div>
      <div class="swrsjtj">
        <div class="navBtn" style="top: -35px">
          <p :class="[currentIndex2 == 0 ? 'active' : '']" @click="checkWuran(0)">发生次数</p>
          <p :class="[currentIndex2 == 1 ? 'active' : '']" @click="checkWuran(1)">解决情况</p>
        </div>
      </div>
      <div id="echartWuSjtj"></div>
    </div>

    <!-- 明渠水质报警统计 -->
    <div class="rainCount">
      <div class="publicTitle">明渠水质报警统计</div>
      <div class="dateCheck">
        <n-date-picker v-model:value="dateBjtj" type="daterange" @update:value="checkSzbjtj()" />
      </div>
      <div id="echartInfoOne"></div>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
import * as echarts from 'echarts';
import {
  lyInfoStationList,
  lyInfoStationResult,
  lyInfoQualityAarmTotal,
  getMqWaterPolluteEvents,
  SiteFactorEchat,
  szlljcTrend,
} from '@/services';
import { formatDate } from '@/utils/util';
import bus from '@/utils/util';
import Popup from './Popup.vue';

export default {
  name: 'lyInfoOne',
  components: {
    Popup,
  },
  setup() {
    const allData = reactive({
      searchTim1: Date.now(),
      areaname: '',
      stationArray: 1,
      waterquality: 'codmn',
      stationOptions: [
        { value: 1, label: '东渠' },
        { value: 2, label: '西渠' },
      ],
      qualityOptions: [
        { value: 'codmn', label: 'COD' },
        { value: 'do', label: '溶解氧' },
        { value: 'nh4n', label: '氨氮' },
        { value: 'ph', label: 'PH值' },
        { value: 'tp', label: '总磷' },
      ],
      timeRange: [Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now()],
      stationName: '',
      stationIndex: '',
      factorUnit: '',
      warnValue: '',
      alarmValue: '',
      stationCode: '',
      currentIndex: 1,
      currentIndex2: 0,
      dateIndex: 1,
      placeIndex: 1,
      placeArr: [],
      factors: [],
      checkedLegend: [
        { isCheck: false, layername: 'zhengqu' },
        { isCheck: false, layername: 'layer16' },
      ],
      dateBjtj: [Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now()],
      termValue: 1,
      shuizhiOption: {
        legend: {
          show: true,
          textStyle: {
            color: 'rgba(166, 201, 203, 1)',
            fontSize: 10,
            lineHeight: 20,
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '15%',
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true,
        },
        yAxis: {
          axisLine: {
            show: true,
          },
          splitLine: {
            show: false,
          },
          show: true,
        },
        xAxis: {
          data: ['PH\n6-7.5', 'DO\n6-7.5', 'COD\n6-7.5', 'NH3-N\n6-7.5', 'TP\n6-7.5'],
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: '#fff',
            //设置行显示换行
            formatter: function (params) {
              var newParamsName = '';
              var paramsNameNumber = params.length;
              var provideNumber = 5;
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = '';
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
          },
        },
        series: [],
      },
      trendOption: {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true,
        },
        xAxis: {
          data: [],
          axisTick: {
            show: false,
          },
          axisPointer: {
            type: 'shadow',
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(25,76,90,0.8)',
            },
          },
        },
        yAxis: {
          min: 0,
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: 'rgb(41,111,121)',
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            type: 'line',
            data: [],
            showBackground: true,
            smooth: true,
            name: '因子值',
            label: {
              show: true,
              position: 'top',
              color: '#089F7F',
              fontSize: 16,
            },
            itemStyle: {
              color: '#089F7F',
            },
          },
        ],
      },
      shuiWRoption: {
        legend: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        title: {
          show: false,
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['20%', '50%'],
            labelLine: {
              length: 10,
            },
            label: {
              formatter: '\n{b|{b}} \n {hr|}\n  {c}次 ',
              backgroundColor: '#00596B',
              borderColor: '#14ccca',
              color: '#14ccca',
              fontWeight: 'bold',
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                hr: {
                  borderColor: '#14ccca',
                  width: '100%',
                  borderWidth: 1,
                  textAlign: 'center',
                  height: 0,
                },
                b: {
                  color: '#fff',
                  fontSize: 14,
                  fontWeight: '500',
                  padding: [13, 4],
                  lineHeight: 16,
                },
                per: {
                  color: '#14ccca',
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: [
              { value: 3, name: '雨天溢流' },
              { value: 1, name: '泵站异常' },
              { value: 8, name: '前池水位异常' },
              { value: 2, name: '河道水质异常' },
            ],
          },
        ],
      },
      leidaOption: {
        legend: {
          data: [
            { name: '黄孝河', textStyle: { color: '#01A581' } },
            { name: '机场河', textStyle: { color: '#CCAF1E' } },
          ],
          x: '0%',
        },
        tooltip: {
          trigger: 'axis',
        },
        radar: {
          indicator: [{ name: 'PH' }, { name: 'DO' }, { name: 'COD' }, { name: '总磷' }, { name: '氨氮' }],
          axisName: {
            formatter(params) {
              return params.replace(/\//g, '\n');
            },
          },
          center: ['55%', '55%'],
          radius: 95,
          axisLine: {
            // 设置雷达图中间射线的颜色
            lineStyle: {
              color: '#587A7F',
            },
          },
          splitArea: {
            //设置图表颜色，show的值为true
            areaStyle: {
              color: '#1C3D49',
            },
          },
          splitLine: {
            //网格颜色设置
            lineStyle: {
              width: 1,
              color: '#587A7F',
            },
          },
        },
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item',
            },
            areaStyle: {},
            data: [
              {
                value: [75, 93, 85, 90, 76],
                name: '黄孝河',
                itemStyle: {
                  color: '#01A581',
                },
              },
              {
                value: [45, 83, 45, 78, 86],
                name: '机场河',
                itemStyle: {
                  color: '#CCAF1E',
                },
              },
            ],
          },
        ],
      },
    });

    // 水质达标柱状图
    let echartsWuran = null;
    const echartSzjcdb = () => {
      echartsWuran = echarts.init(document.getElementById('echartWuran'));
      echartsWuran.clear();
      echartsWuran.setOption(allData.shuizhiOption);
    };
    // 河流湖泊点击切换
    const checkInfo = async (val) => {
      allData.currentIndex = val;
      if (val == 1) {
        //getStation('黄孝河');
        allData.areaname = '黄孝河';
        changePlace();
        mapbox._map.setPitch(60).setBearing(45);
        setTimeout(() => {
          mapbox.flyto([114.302596, 30.645028], 14, 0.8);
        }, 300);
      } else if (val == 2) {
        //getStation('机场河');
        allData.areaname = '机场河';
        changePlace();
        mapbox._map.setPitch(55).setBearing(300);
        setTimeout(() => {
          mapbox.flyto([114.235596, 30.66028], 14, 0.8);
        }, 300);
      }
    };
    // 获取站点名称
    // async function getStation(name) {
    //   let params = {
    //     area: name,
    //   };
    //   // let res = await lyInfoStationList(params);
    //   // if (res && res.code == 200) {
    //   allData.searchTim1 = Date.now();
    //   allData.waterquality = 'codmn';
    //   changePlace(); //渲染对应echarts数据
    //   //}
    // }
    // 不同地方水质点击
    const changePlace = async () => {
      allData.shuizhiOption.series = [];
      let params = {
        factor: allData.waterquality,
        dateTime: formatDate(allData.searchTim1, 'YYYY-MM-DD') + ' 00:00:00',
        area: allData.areaname,
        placeType: allData.stationArray,
      };
      let res = await SiteFactorEchat(params);
      if (res && res.code == 200) {
        let datas = res.data;
        let linedata = {};
        let factorarry = [];
        let stationName = [];
        let dateList = [];
        for (let item in datas) {
          if (datas[item].length > 0 && item != 'ttTimes') {
            datas[item].forEach((factoritem) => {
              factorarry.push(factoritem.factorValue);
              if (!!!stationName.includes(factoritem.stName)) {
                stationName.push(factoritem.stName);
              }
            });
            linedata[item] = factorarry;
            factorarry = [];
          }
        }
        datas['ttTimes'].forEach((dateitem) => {
          dateList.push(dateitem.split(' ')[1]);
        });
        allData.shuizhiOption.xAxis.data = dateList;
        let lineValue = Object.values(linedata);
        for (let i = 0; i < lineValue.length; i++) {
          allData.shuizhiOption.series.push({ type: 'line', smooth: true, data: [], name: '' });
          allData.shuizhiOption.series[i].data = lineValue[i];
          allData.shuizhiOption.series[i].name = stationName[i];
        }
        echartSzjcdb();
      }
    };
    // 明渠异常事件统计
    let mqswrsjtj = null;
    const echartWusjtj = async () => {
      let params = {
        type: allData.currentIndex2,
      };
      let res = await getMqWaterPolluteEvents(params);
      if (res && res.code == 200) {
        let datas = res.data;
        mqswrsjtj = echarts.init(document.getElementById('echartWuSjtj'));
        let arrs = [];
        for (let i = 0; i < datas.RX.length; i++) {
          arrs.push({
            value: datas.RY[i],
            name: datas.RX[i],
          });
        }
        allData.shuiWRoption.series[0].data = arrs;
        mqswrsjtj.clear();
        mqswrsjtj.setOption(allData.shuiWRoption);
      }
    };
    //  明渠异常事件统计点击切换
    const checkWuran = (val) => {
      allData.currentIndex2 = val;
      echartWusjtj();
    };
    // 明渠水质报警统计雷达图
    let echartLybt = null;
    const echartCount = () => {
      echartLybt = echarts.init(document.getElementById('echartInfoOne'));
      echartLybt.clear();
      echartLybt.setOption(allData.leidaOption);
    };
    // 明渠水质报警统计日期点击
    async function checkSzbjtj() {
      let params = {
        startTime: formatDate(allData.dateBjtj[0]),
        endTime: formatDate(allData.dateBjtj[1]),
      };
      let res = await lyInfoQualityAarmTotal(params);
      if (res && res.code == 1) {
        let datas = res.data;
        allData.leidaOption.series[0].data[0].value = datas.hxhDataYY;
        allData.leidaOption.series[0].data[1].value = datas.jchDataYY;
        allData.leidaOption.radar.indicator = [];
        datas.jchDataXX.map((item) => {
          allData.leidaOption.radar.indicator.push({
            name: item,
          });
        });
        echartCount();
      }
    }

    onMounted(() => {
      checkSzbjtj();
      checkInfo(1);
      echartWusjtj();
      bus.emit('ifStationWarn', true);
      mapbox._map.setPitch(60).setBearing(45);
      setTimeout(() => {
        mapbox.flyto([114.302596, 30.645028], 14, 0.8);
      }, 300);
      //添加弹窗
      for (let i = 0; i < 14; i++) {
        mapbox._map.on('click', 'layer' + i + '_layer', function (e) {
          e.preventDefault();
          const features = mapbox._map.queryRenderedFeatures(e.point);
          // 判断是否点击当前点位
          features.map((item) => {
            if (item.layer.id == 'layer' + i + '_layer') {
              // 拼接显示详情内容
              bus.emit('pointToDetail', item);
            }
          });
        });
        mapbox.changeTypeOfmouse('layer' + i + '_layer'); //切换鼠标样式
      }
      bus.on('pointToDetail', (param) => {
        mapbox.markerPopup(param, mapbox.createPopup(Popup, param.properties));
      });
      // 设置默认选中的图例图层
      setTimeout(() => {
        bus.emit('showDefaultLegend', allData.checkedLegend);
      });
    });
    onBeforeUnmount(() => {
      bus.emit('ifStationWarn', false);
      if (echartLybt) echartLybt.dispose();
      if (echartsWuran) echartsWuran.dispose();
      if (mqswrsjtj) mqswrsjtj.dispose();
      //清空图例默认开启,true 代表关闭图层
      bus.emit('showDefaultLegend', [
        { isCheck: true, layername: 'zhengqu' },
        { isCheck: true, layername: 'layer16' },
      ]);
      //清除选中图层
      !!window.timertuokuan && clearInterval(window.timertuokuan);
      !!window.timerspread && clearInterval(window.timerspread);
      !!window.timerbushui && clearInterval(window.timerbushui);
      //清除弹窗
      bus.off('pointToDetail');
      if (!!mapbox._popup) {
        mapbox._popup.remove();
      }
      mapbox._map.setPitch(60).setBearing(0);
      setTimeout(() => {
        mapbox.flyto([114.275596, 30.610028], 13.5, 0.8);
      }, 300);
    });
    return {
      ...toRefs(allData),
      checkInfo,
      checkWuran,
      checkSzbjtj,
      changePlace,
    };
  },
};
</script>
<style lang="less">
.lyInfoOne {
  width: 100%;
  height: 100%;

  .scene {
    margin-top: 20px;
    .swrsjtj {
      position: relative;
      top: 10px;
      .dateCheck {
        width: 60%;
      }
    }
    #echartWuSjtj {
      margin-top: 10px;
      width: 430px;
      height: 230px;
    }
  }
  .navBtn {
    position: absolute;
    right: 0px;
    top: 5px;
    width: 160px;
    height: 30px;
    display: flex;
    p {
      width: 75px;
      height: 25px;
      line-height: 27px;
      text-align: center;
      color: #d4f7ff;
      cursor: pointer;
      margin-right: 10px;
    }
    .active {
      background: #16a2aa;
      border-radius: 10px;
      color: #000;
    }
  }
  .rainTime {
    position: relative;
    .navBtn {
      width: 200px;
    }
    .selectTerm {
      margin: 10px 0px;
      padding: 3px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background: rgba(1, 27, 46, 0.3);
      max-height: 80px;
      overflow: auto;
      border-radius: 3px;
      .type {
        align-items: center;
        margin: 3px 10px 0 20px;
        padding: 2px 10px;
        cursor: pointer;
        border-radius: 20px;
        &:hover {
          background: #000;
        }
        &.active {
          background: #000;
        }
      }
    }
    #echartWuran {
      width: 430px;
      height: 200px;
    }
  }
  .rainCount {
    margin-top: 20px;
    position: relative;
    .dateCheck {
      position: absolute;
      right: 0px;
      top: 0px;
      .n-date-picker {
        width: 250px;
      }
    }
    #echartInfoOne {
      margin-top: 20px;
      width: 430px;
      height: 230px;
    }
  }
}
</style>