<template>
  <!-- 明渠暗涵水位监测 -->
  <div class="lyInfoTwo">
    <!-- 流域内水位监测 -->
    <div class="scene">
      <div class="publicTitle">流域内水位监测</div>
      <div class="navBtn">
        <p :class="[swIndex == 1 ? 'active' : '']" @click="checkSw(1)">黄孝河</p>
        <p :class="[swIndex == 2 ? 'active' : '']" @click="checkSw(2)">机场河</p>
      </div>
      <div class="content">
        <div class="table">
          <n-data-table :columns="columns" :data="tableData" :max-height="160" :loading="tableLoading" :bordered="false" />
        </div>
      </div>
    </div>
    <!-- 流域内流量监测 -->
    <div class="rainCount">
      <div class="publicTitle">流域内近一周流量计观测情况</div>
      <div class="navBtn">
        <p :class="[llIndex == 1 ? 'active' : '']" @click="checkLl(1)">黄孝河</p>
        <p :class="[llIndex == 2 ? 'active' : '']" @click="checkLl(2)">机场河</p>
      </div>
      <div class="lynswbjtj" style="height: 30px">
        <div class="navBtn" style="width: auto; right: 15px; top: 0px">
          <n-select :options="lljcStation" filterable v-model:value="lljcValue" @update:value="checkLljc"></n-select>
          <n-select :options="yinziOption" v-model:value="yinziValue" @update:value="checkLljc" style="width: 300px"></n-select>
        </div>
      </div>
      <div id="echartHxh"></div>
    </div>
    <!-- 流域内水位报警统计 -->
    <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="lynswbjtj">
        <div class="navBtn">
          <p :class="[currentIndex2 == 0 ? 'active2' : '']" @click="checkWuran(0)">已报警</p>
          <p :class="[currentIndex2 == 1 ? 'active2' : '']" @click="checkWuran(1)">解决情况</p>
        </div>
        <div class="dateCheck">
          <n-date-picker v-model:value="dateRange" @update:value="getBjtjData()" type="daterange" />
        </div>
      </div>
      <div id="echartAirplane"></div>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
import * as echarts from 'echarts';
import { formatDate } from '@/utils/util';
import { swlljcLC, lyInfoSwlljcStation, lyInfoSwlljcData, lyInfoSwbjtjTotal, lyInfoStationListall } from '@/services';
import Popup from './Popup.vue';
import bus from '@/utils/util';

export default {
  name: 'lyInfoTwo',
  components: {
    Popup,
  },
  setup() {
    const allData = reactive({
      yinziValue: 'q',
      yinziOption: [
        { value: 'q', label: '瞬时流量(m³/s)' },
        { value: 'va', label: '流速(m/s)' },
        { value: 'z', label: '液位(m)' },
      ],
      shuiweijson: null,
      currentIndex: 1,
      currentIndex2: 0,
      currentIndex3: 1,
      swIndex: 1,
      llIndex: 1,
      checkedLegend: [
        { isCheck: false, layername: 'zhengqu' },
        { isCheck: false, layername: 'layer14' },
      ],
      dateRange: [Date.now() - 7 * 24 * 60 * 60 * 1000, Date.now()],
      lljcStation: [],
      lljcValue: '',
      tableData: [],
      tableLoading: true,
      columns: [
        {
          title: '名称',
          key: 'stName',
        },
        {
          title: '液位(m)',
          width: '80',
          align: 'center',
          key: 'zvalue',
        },
        {
          title: '地面高程(m)',
          width: '100',
          align: 'center',
          key: 'groundLevel',
        },
        {
          title: '井底高程(m)',
          width: '100',
          align: 'center',
          key: 'plusCoef',
        },
      ],
      swjcOption: {
        legend: {
          data: ['超低报警', '低报警', '高报警', '超高报警'],
          textStyle: {
            color: '#B4C9E0',
          },
          itemWidth: 12,
          itemHeight: 10,
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '0%',
          top: '16%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['闸门水位', '闸门流量', '暗涵水位', '积水点水位'],
          axisLabel: {
            textStyle: {
              color: '#B4C9E0',
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
            },
          },
        },
        yAxis: {
          type: 'value',
          name: '次',
          nameTextStyle: {
            color: '#B4C9E0',
          },
          axisLabel: {
            textStyle: {
              color: '#B4C9E0',
            },
          },
          axisLine: { show: false },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
            },
          },
        },
        series: [
          {
            name: '超低报警',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(63,159,48,1)',
                },
                {
                  offset: 1,
                  color: 'rgba(63,159,48,0.3)',
                },
              ]),
              borderRadius: [12, 12, 12, 12],
            },
            data: [5, 7, 3, 8],
          },
          {
            name: '低报警',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(11,167,124,1)',
                },
                {
                  offset: 1,
                  color: 'rgba(11,167,124,0.3)',
                },
              ]),
              borderRadius: [12, 12, 12, 12],
            },
            data: [5, 10, 9, 3],
          },
          {
            name: '高报警',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(229,141,31,1)',
                },
                {
                  offset: 1,
                  color: 'rgba(229,141,31,0.3)',
                },
              ]),
              borderRadius: [12, 12, 12, 12],
            },
            data: [2, 10, 9, 3],
          },
          {
            name: '超高报警',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(226,85,37,1)',
                },
                {
                  offset: 1,
                  color: 'rgba(226,85,37,0.3)',
                },
              ]),
              borderRadius: [12, 12, 12, 12],
            },
            data: [5, 4, 9, 3],
          },
        ],
      },
      liuliangOption: {
        color: ['rgb(14,192,148)', 'rgb(1,153,217)', 'rgb(240,85,33)'],
        legend: {
          show: false,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        dataZoom: [
          {
            type: 'inside', // 内置在坐标系中
            xAxisIndex: 0,
            yAxisIndex: [0, 1],
            start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
            end: 100, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
            zoomLock: true, // 是否锁定选择区域（或叫做数据窗口）的大小。
          },
        ],
        grid: {
          top: '8%',
          left: '3%',
          right: '3%',
          bottom: '2%',
          containLabel: true,
        },
        xAxis: {
          data: ['0:00', '3:00', '6:00', '9:00', '12:00', '15:00', '18:00', '21:00', '23:00'],
          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: [
          {
            name: '监测值',
            type: 'line',
            data: [28, 15, 15, 27, 18, 30, 20, 20, 19, 18, 14],
            tooltip: {
              valueFormatter: (value) => value,
            },
            itemStyle: {
              borderRadius: [0, 0, 10, 10],
            },
          },
        ],
      },
    });
    // 流域内流量监测
    let echartHxhsw = null;
    const echartCount = () => {
      echartHxhsw = echarts.init(document.getElementById('echartHxh'));
      echartHxhsw.clear();
      echartHxhsw.setOption(allData.liuliangOption);
    };
    // 流量监测
    const checkLl = async (val) => {
      allData.llIndex = val;
      let params = {
        area: val == 1 ? '黄孝河' : '机场河',
      };
      if (val == 1) {
        mapbox._map.setPitch(60).setBearing(45);
        setTimeout(() => {
          mapbox.flyto([114.272596, 30.595028], 14, 0.8);
        }, 300);
      } else {
        mapbox._map.setPitch(55).setBearing(300);
        setTimeout(() => {
          mapbox.flyto([114.235596, 30.63028], 14, 0.8);
        }, 300);
      }
      let res = await lyInfoSwlljcStation(params);
      if (res && res.code == 1) {
        allData.lljcStation = [];
        res.data.map((item) => {
          allData.lljcStation.push({
            value: item.stCode,
            label: item.stName,
            lon: item.lon,
            lat: item.lat,
          });
        });
        allData.lljcValue = res.data[0].stCode;
        checkLljc();
      }
    };
    // 流量监测二级
    const checkLljc = async () => {
      let params = {
        stationCode: allData.lljcValue,
      };
      let res = await lyInfoSwlljcData(params);
      if (res && res.code == 1) {
        let datas = res.data;
        allData.liuliangOption.xAxis.data = datas.tt;
        if (allData.yinziValue == 'va') {
          allData.liuliangOption.series[0].data = datas.q;
          allData.liuliangOption.series[0].name = '流速(m/s)';
        } else if (allData.yinziValue == 'q') {
          allData.liuliangOption.series[0].data = datas.q;
          allData.liuliangOption.series[0].name = '瞬时流量(m³/s)';
        } else if (allData.yinziValue == 'z') {
          allData.liuliangOption.series[0].data = datas.z;
          allData.liuliangOption.series[0].name = '液位(m)';
        }
      }
      echartCount();
      // 地图点位移动
      let coordinates = allData.lljcStation.filter((item) => allData.lljcValue == item.value);
      let lonLat = [coordinates[0].lon, coordinates[0].lat];
    };
    // 流域内水位流量报警统计
    let echartJchplane = null;
    const echartAir = () => {
      echartJchplane = echarts.init(document.getElementById('echartAirplane'));
      echartJchplane.clear();
      echartJchplane.setOption(allData.swjcOption);
    };
    // 流域内水位流量报警统计标题点击切换
    const checkInfo = (val) => {
      allData.currentIndex = val;
      getBjtjData();
    };
    // 流域内水位流量报警统计二级点击切换
    const checkWuran = (val) => {
      allData.currentIndex2 = val;
      getBjtjData();
    };
    // 流域内水位流量报警统计数据渲染
    async function getBjtjData() {
      let params = {
        area: allData.currentIndex == 1 ? '黄孝河' : '机场河',
        totalType: allData.currentIndex2,
        startTime: formatDate(allData.dateRange[0]),
        endTime: formatDate(allData.dateRange[1]),
      };
      let res = await lyInfoSwbjtjTotal(params);
      if (res && res.code == 1) {
        let datas = res.data;
        allData.swjcOption.xAxis.data = datas.xxAramList;
        allData.swjcOption.series[0].data = datas.cdAramList;
        allData.swjcOption.series[1].data = datas.dAramList;
        allData.swjcOption.series[2].data = datas.gAramList;
        allData.swjcOption.series[3].data = datas.cgAramList;
      }
      echartAir();
    }

    // 水位监测点击
    const checkSw = async (val) => {
      allData.swIndex = val;
      if (val == 1) {
        val = '黄孝河';
      } else {
        val = '机场河';
      }
      allData.tableLoading = true;
      let params = {
        area: val,
      };
      let res = await swlljcLC(params);
      if (res && res.code == 200) {
        allData.tableData = res.data;
        allData.tableLoading = false;
      }
    };
    //添加弹窗
    const getMapJSON = async () => {
      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));
      });
    };

    onMounted(() => {
      bus.emit('ifStationWarn', true);
      nextTick(() => {
        checkLl(1); //流域内流量监测
        checkInfo(1); //水位报警统计
        checkSw(1); //水位监测
        getMapJSON();
        mapbox._map.setPitch(60).setBearing(0);
        setTimeout(() => {
          mapbox.flyto([114.275596, 30.610028], 13.5, 0.8);
        }, 300);
      });
      // 设置默认选中的图例图层
      setTimeout(() => {
        bus.emit('showDefaultLegend', allData.checkedLegend);
      });
    });
    onBeforeUnmount(() => {
      bus.emit('ifStationWarn', false);
      if (echartHxhsw) echartHxhsw.dispose();
      if (echartJchplane) echartJchplane.dispose();
      //清空图例默认开启,true 代表关闭图层
      bus.emit('showDefaultLegend', [
        { isCheck: true, layername: 'zhengqu' },
        { isCheck: true, layername: 'layer14' },
      ]);
      //清除选中图层
      !!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,
      checkSw,
      checkLl,
      checkLljc,
      getBjtjData,
      getMapJSON,
    };
  },
};
</script>
<style lang="less">
.lyInfoTwo {
  width: 100%;
  height: 100%;

  .scene {
    margin-top: 10px;
    position: relative;
    .content {
      width: 100%;
      height: 200px;
      .table {
        margin-top: 5px;
      }
    }
  }
  .navBtn {
    position: absolute;
    right: -10px;
    top: 0px;
    width: 160px;
    height: 30px;
    display: flex;
    p {
      height: 25px;
      padding: 0 10px;
      line-height: 27px;
      text-align: center;
      color: #d4f7ff;
      cursor: pointer;
    }
    .active {
      background: #16a2aa;
      border-radius: 10px;
      color: #000;
    }
  }
  .lynswbjtj {
    position: relative;
    top: 10px;
    .dateCheck {
      width: 60%;
    }
    .navBtn {
      .n-select {
        margin-left: 10px;
      }
      p {
        width: auto;
      }
      .active2 {
        color: #0ccab6;
      }
    }
  }
  .rainTime {
    margin-top: 20px;
    position: relative;
    .publicTitle {
      width: 260px;
    }

    #echartAirplane {
      margin-top: 20px;
      width: 430px;
      height: 200px;
    }
  }
  .rainCount {
    margin-top: 20px;
    position: relative;
    .publicTitle {
      width: 300px;
    }
    #echartHxh {
      margin-top: 20px;
      width: 430px;
      height: 200px;
    }
  }
}
</style>