<template>
  <!-- 物联感知 -->
  <div class="tabRightWL" v-if="allData.tabShowWL == 2">
    <div class="tabChangeList">
      <div
        :class="['tabChange', allData.currentIndex === item.index ? 'active' : '']"
        v-for="item in allData.tabList"
        :key="item.index"
        @click="tabChangeClick(item.index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="dividerLine"></div>

    <!-- 雨量监测 -->
    <div v-if="allData.currentIndex == 1" class="allContent">
      <div class="selectTitle">
        <div class="name">气象信息</div>
      </div>
      <div class="weatherInfo">
        <div class="part" v-for="(item, index) in weatherArr" :key="'a' + index">
          <p style="color: #00d1ff">{{ item.week }}</p>
          <p style="color: #b4e7f2">{{ item.date.slice(5, 10) }}</p>
          <img :src="getWeatherImageUrl(`icon__${item.code_day}`, 'weather_icon')" style="width: 50px; height: 50px" />
          <p style="color: #b4e7f2">{{ item.text_day }}</p>
          <p style="color: #00d1ff">{{ item.low }}~{{ item.high }}℃</p>
          <!-- <p style="color: #00d1ff">{{ item.wd_day }}{{ item.wc_day }}</p> -->
        </div>
        <!-- 暂无数据 -->
        <el-empty :image-size="100" v-if="weatherArr.length == 0" />
      </div>
      <div class="selectTitle">
        <div class="name">雨量数据采集</div>
      </div>
      <el-table :data="tableData1" class="rightTab" height="250" @row-click="clickRain">
        <el-table-column prop="stName" label="雨量站名称" width="100" />
        <el-table-column prop="buildType" label="类型" width="60">
          <template #default="scope">
            {{ scope.row.buildType == 'owner' ? '新建' : scope.row.buildType == 'share' ? '共享' : '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="pj" label="当前降雨量(mm)">
          <template #default="scope"> {{ scope.row.pj || '--' }} </template>
        </el-table-column>
        <el-table-column prop="ago1h" label="过去1h降雨量(mm)" width="100">
          <template #default="scope"> {{ scope.row.ago1h }} </template>
        </el-table-column>
        <el-table-column prop="ago3h" label="过去3h降雨量(mm)" width="100">
          <template #default="scope"> {{ scope.row.ago3h }} </template>
        </el-table-column>
        <el-table-column prop="ago6h" label="过去6h降雨量(mm)" width="100">
          <template #default="scope"> {{ scope.row.ago6h }} </template>
        </el-table-column>
        <el-table-column prop="ago12h" label="过去12h降雨量(mm)" width="100">
          <template #default="scope"> {{ scope.row.ago12h }} </template>
        </el-table-column>
        <el-table-column prop="ago24h" label="过去24h降雨量(mm)" width="100">
          <template #default="scope"> {{ scope.row.ago24h }} </template>
        </el-table-column>
        <el-table-column prop="ago72h" label="过去72h降雨量(mm)" width="100">
          <template #def ault="scope"> {{ scope.row.ago72h }} </template>
        </el-table-column>
      </el-table>
      <monitorCalender :isCaleisnder="'calender'"></monitorCalender>
    </div>

    <!-- 管网监测 -->
    <div v-if="allData.currentIndex == 2" class="allContent">
      <div class="selectTitle">
        <div class="name">实时监测</div>
        <el-select v-model="allData.pipelineType" size="small" style="width: 120px" @change="getRealtimePipeLine">
          <el-option label="全部" value="" />
          <el-option label="雨水管网" value="Rain" />
          <el-option label="污水管网" value="Sewage" />
          <!-- <el-option label="雨污合流管网" value="Combined" /> -->
        </el-select>
      </div>
      <el-table
        :data="tableData2"
        class="rightTab"
        height="600"
        v-loading="tableDataLoading2"
        @row-click="clickPipeSupervise"
        highlight-current-row
      >
        <el-table-column prop="stName" label="监测站点名称" width="150" />
        <el-table-column prop="pipelineType" label="管网类型">
          <template #default="scope">
            {{
              scope.row.pipelineType == 'Rain'
                ? '雨水'
                : scope.row.pipelineType == 'Sewage'
                ? '污水'
                : scope.row.pipelineType == 'Combined'
                ? '雨污合流'
                : '--'
            }}
          </template>
        </el-table-column>
        <el-table-column prop="waterElevation" label="水位高程(m)" width="150" />
        <!-- <el-table-column prop="z" label="水位(m)" /> -->
        <el-table-column prop="va" label="流速(m/s)" width="110" />
        <el-table-column prop="turb" label="SS(mg/L)" />
        <el-table-column prop="buildType" label="类型" width="60">
          <template #default="scope">
            {{ scope.row.buildType == 'owner' ? '新建' : scope.row.buildType == 'share' ? '共享' : '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="tt" label="观测时间" width="160" />
      </el-table>
    </div>

    <!-- 积水点 -->
    <div v-if="allData.currentIndex == 3" class="allContent">
      <div class="selectTitle">
        <div class="name">实时监测</div>
      </div>
      <el-table :data="tableData3" v-loading="loadingZSD" class="rightTab" height="600" @row-click="clickZS" highlight-current-row>
        <el-table-column prop="stName" label="监测点名称" width="210px" />
        <el-table-column prop="buildType" label="类型">
          <template #default="scope">
            {{ scope.row.buildType == 'owner' ? '新建' : scope.row.buildType == 'share' ? '共享' : '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="z" label="水位(m)">
          <template #default="scope"> {{ scope.row.z || '--' }} </template>
        </el-table-column>
        <el-table-column prop="z" label="摄像头">
          <template #default="scope">
            <img
              :src="videoCamera"
              alt=""
              v-if="scope.row.cameraInfoIndexList && scope.row.cameraInfoIndexList.length > 0"
              @click.native.stop="checkVideo(scope.row)"
            />
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="tt" label="更新时间" width="160">
          <template #default="scope"> {{ scope.row.tt || '--' }} </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 排口 -->
    <div v-if="allData.currentIndex == 4" class="allContent">
      <div class="selectTitle">
        <div class="name">实时监测</div>
        <el-select v-model="allData.paikouType" size="small" style="width: 120px" @change="getRealtimedRainOutlet">
          <el-option label="雨水口" value="Rain" />
          <el-option label="溢流口" value="Sewage" />
        </el-select>
      </div>
      <el-table
        :data="tableData4"
        class="rightTab"
        height="600"
        v-loading="tableDataLoading4"
        @row-click="clickPipeSupervise"
        highlight-current-row
      >
        <el-table-column prop="stName" label="监测站点名称" width="150" />
        <el-table-column prop="dataTime" label="观测时间" width="160" />
        <el-table-column prop="waterElevation" label="水位高程(m)" />
        <el-table-column prop="va" label="流速(m/s)" width="110" />
        <el-table-column prop="sbl1" label="小时流量(m³/h)" width="110" />
        <el-table-column prop="turb" label="SS(mg/L)" />
        <el-table-column prop="codmn" label="COD(mg/l)" width="110" />
        <el-table-column prop="pipelineType" label="排口类型">
          <template #default="scope">
            {{ scope.row.pipelineType == 'Rain' ? '雨水口' : scope.row.pipelineType == 'Sewage' ? '溢流口' : '--' }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 河道监测 -->
    <div v-if="allData.currentIndex == 5" class="allContent">
      <div class="selectTitle" style="margin-bottom: 10px">
        <div class="name">河道水位</div>
        <el-select v-model="riverTitle" size="small" style="width: 120px" @change="checkRiverP">
          <el-option label="老澴河" value="老澴河" />
          <el-option label="槐荫河" value="槐荫河" />
        </el-select>
      </div>
      <el-table
        :data="tableData5"
        class="rightTab"
        height="260"
        v-loading="tableDataLoading5"
        @row-click="clickRiver"
        highlight-current-row
      >
        <el-table-column prop="stName" label="监测点名称" />
        <el-table-column prop="z" label="水位(m)" width="100" />
        <el-table-column prop="buildType" label="类型" width="60">
          <template #default="scope">
            {{ scope.row.buildType == 'owner' ? '新建' : scope.row.buildType == 'share' ? '共享' : '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="dataTime" label="观测时间" width="165" />
      </el-table>
      <div class="selectTitle" style="margin-bottom: 10px">
        <div class="name">人工水质采样</div>
        <el-select v-model="allData.sampleDate" size="small" style="width: 120px" @change="getSampleRiverSectionData">
          <el-option v-for="item in allData.options1" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="DMcontent">
        <div
          :class="['DMpart', allData.riverActive == item.id ? 'activeR' : '']"
          v-for="(item, index) in detailList"
          :key="index"
          @click="clickSample(item)"
        >
          <div class="partContent">
            <p class="title">{{ item.surfaceWaterBodiesName }}</p>
          </div>
        </div>
      </div>
      <el-table :data="tableData6" style="width: 100%; margin: 5px 0 5px 0" height="240">
        <el-table-column prop="sectionName" label="断面名称" width="205px" />
        <el-table-column prop="propertyName" label="指标名称" width="80px" />
        <el-table-column prop="value" label="监测值" />
        <el-table-column prop="propertyUnit" label="指标单位" />
      </el-table>
    </div>

    <!-- 厂站监测 -->
    <div v-if="allData.currentIndex == 6" class="allContent">
      <div class="selectTitle">
        <div class="name">厂站概况</div>
        <el-select v-model="allData.currentIndex2" size="small" style="width: 120px" @change="checkInfo(allData.currentIndex2)">
          <el-option label="雨水系统" value="rain_water" />
          <el-option label="污水系统" value="sewage_water" />
        </el-select>
        <!-- <div class="navBtn">
          <p :class="[allData.currentIndex2 == 'rain_water' ? 'active' : '']" @click="checkInfo('rain_water')">雨水系统</p>
          <p :class="[allData.currentIndex2 == 'sewage_water' ? 'active' : '']" @click="checkInfo('sewage_water')">污水系统</p>
        </div> -->
      </div>
      <el-table :data="tableData7" class="rightTab" height="250" v-loading="tableDataLoading7" @row-click="clickCZ" highlight-current-row>
        <el-table-column prop="pumpName" label="厂站名称" width="100" />
        <el-table-column prop="qcyw" label="前池水位(m)" v-if="allData.currentIndex2 == 'rain_water'" width="100" />
        <el-table-column prop="qbWaterlevel" label="起抽水位(m)" v-if="allData.currentIndex2 == 'rain_water'" width="100" />
        <el-table-column prop="designScale" label="规模(m³/s)" v-if="allData.currentIndex2 == 'rain_water'" width="90" />
        <el-table-column prop="designScale" label="规模(万吨/日)" v-if="allData.currentIndex2 == 'sewage_water'" />
        <el-table-column prop="totalLarge" label="累计处理量(万吨)" v-if="allData.currentIndex2 == 'sewage_water'" />
        <el-table-column prop="monitorTime" label="观测时间" width="160" />
      </el-table>
      <div class="selectTitle" style="margin-bottom: 10px">
        <div class="name">历史趋势</div>
        <div class="selectToolList">
          <el-date-picker
            v-model="allData.GWtime1"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            size="small"
            style="width: 300px; margin-left: -30px"
            @change="changeBengZhanDate"
          />
        </div>
      </div>
      <div class="staticPicture">
        <div id="chartThree"></div>
      </div>
    </div>
    <!-- 源头地块 -->
    <div v-if="allData.currentIndex == 7" class="allContent">
      <div class="selectTitle">
        <div class="name">源头地块监测</div>
      </div>
      <el-table
        :data="tableData71"
        v-loading="tableLoading71"
        class="rightTab"
        ref="tableRef71"
        height="250"
        @row-click="clickPipeSupervise"
        highlight-current-row
      >
        <el-table-column prop="stName" label="点位名称" width="150" />
        <el-table-column prop="dataTime" label="观测时间" width="100" />
        <el-table-column prop="z" label="水位(m)" />
        <el-table-column prop="va" label="流速(m/s)" width="100" />
        <el-table-column prop="turb" label="SS(mg/L)" />
        <el-table-column prop="sbl1" label="小时水量(m³/h)" width="110" />
        <el-table-column prop="cq1" label="累计流量" />
      </el-table>
      <div class="selectTitle" style="margin-bottom: 10px">
        <div class="name">历史趋势分析</div>
        <div class="selectToolList">
          <el-date-picker
            v-model="allData.pipeTime"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="small"
            style="width: 220px; margin-left: 70px"
            @change="changePipeDate"
          />
        </div>
      </div>
      <div class="staticPicture">
        <div id="chartSuperviseWL"></div>
      </div>
    </div>
  </div>
</template>
<script setup name="tabRightWL">
import chartOption from '@/components/Echarts/pieChart_1.js';
import * as echarts from 'echarts';
import bus from '@/bus';
import useUserStore from '@/store/modules/user';
import videoCamera from '@/assets/images/gisMap/video.png';
import monitorCalender from './monitorCalender.vue'; // 降雨日历统计
import {
  xfSevenDays,
  realtimeDataListByType,
  realtimeDataPipelineListByType,
  realtimeRainfallStatistics,
  orinignList,
  orinignDataList,
  realtimeDataWaterlogging,
  sampleDateList,
  sampleRiverSectionData,
  realtimeDataByPump,
  historyDataByPumpCode,
  sampleRiverList,
  getRiverProfileByRiverName,
} from '@/api/floodSys/oneMap.js';
import { graphicReport } from '@/api/dataAnalysis/syntherticData';
const emit = defineEmits(['showStationRiverclose']);
const { proxy } = getCurrentInstance();
const pinias = useUserStore();
const timer = ref(null);
const datevalue = ref(new Date());
const allData = reactive({
  tableDatalist: '',
  pipelineType: 'Rain',
  paikouType: 'Rain',
  riverActive: '',
  centerSearchShow: true,
  tabShowWL: null,
  currentIndex: 1,
  currentIndex2: 'rain_water',
  GWtime1: null,
  waterloggingDate: null,
  pipeTime: null,
  supervisePipeCode: null,
  systemType: 1,
  tabList: [
    { index: 1, name: '雨量监测' },
    { index: 5, name: '河道监测' },
    { index: 2, name: '管网监测' },
    // { index: 4, name: '排口' },
    { index: 3, name: '积水点' },
    { index: 7, name: '源头地块' },
    { index: 6, name: '厂站监测' },
  ],
  options: [
    {
      value: 1,
      label: '按天',
    },
    {
      value: 2,
      label: '按周',
    },
    {
      value: 3,
      label: '按月',
    },
  ],
  options1: [],
  sampleDate: null,
  surfaceWaterBodies: null,
  pumpCode: null,
});
const refresh = ref(null);
const supervisePopupdata = ref('');
const echartData = ref({
  xAxisData: [],
  seriesData: [
    {
      name: '当前水位',
      type: 'line',
      symbol: 'none',
      smooth: true,
      lineStyle: {
        color: 'rgba(156, 205, 247, 0.5)',
      },
      // 填充区域的样式
      areaStyle: {
        // 填充色渐变
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 1, color: 'rgba(156, 205, 247, 0.3)' },
          { offset: 0, color: 'rgba(156, 205, 247, 1)' },
        ]),
      },
      data: [],
      // 标注点
      markPoint: {
        symbol: 'arrow',
        symbolSize: 20,
        label: {
          show: true,
          formatter: params => {
            let a = params.data.name[0] + params.data.name[1] + 'm';
            return a;
          },
          fontSize: 12,
          color: '#fff',
          backgroundColor: 'transparent',
        },
        data: [
          {
            name: ['老澴河', '18'],
            coord: ['2', '18'],
          },
        ],
      },
    },
    {
      name: '河床',
      type: 'line',
      symbol: 'none',
      smooth: true,
      lineStyle: {
        color: 'rgba(215, 207, 143, 0.5)',
      },
      // 填充区域的样式
      areaStyle: {
        // 填充色渐变
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 1, color: 'rgba(215, 207, 143, 0.3)' },
          { offset: 0, color: 'rgba(215, 207, 143, 1)' },
        ]),
      },
      data: [],
      // 标注点
      markPoint: {
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: { color: 'red' },
        data: [
          {
            coord: ['800', '20.53'],
          },
        ],
      },
    },
    {
      name: '排口街道',
      barWidth: '0.1%',
      type: 'bar',
      data: [],
      itemStyle: '',
    },
    // { name: '右岸高程', type: 'line', smooth: true, symbol: 'none', data: [] },
  ],
});
const riverTitle = ref('');
const showStationRiver = ref(false);

//时间格式化
const getYearMonthDay = time => {
  return proxy.moment(time).format('YYYY-MM-DD');
};

// 统计分析散点图
let chart4 = null;
const initEcharts4 = () => {
  if (!!chart4) chart4.dispose();
  chart4 = echarts.init(document.getElementById('chartThree'));
  chart4.clear();
  chart4.setOption(chartOption.floodOneMapDataByPumpCode);
};

// 查看监控视频
function checkVideo(row) {
  bus.emit('VideosHK', row);
}

const weatherArr = ref([]);
//获取气象信息
const getWeatherPredict = async () => {
  let res = await xfSevenDays();
  if (res && res.code == 200) {
    let datas = JSON.parse(res.data);
    if (datas.result) {
      // weatherArr.value = datas.result.daily_fcsts.slice(0, 5);
      weatherArr.value = datas.result.daily_fcsts;
    }
  }
};
const tableData1 = ref([]);
//获取雨量数据采集信息
const getRealtimeRain = async () => {
  let params = {
    monitorTargetType: 'rainfall',
    orderBy: 'tt desc',
  };
  let res = await realtimeRainfallStatistics(params);
  if (res && res.code == 200) {
    let data = res.data;
    tableData1.value = data;
  }
};

const tableData2 = ref([]);
const tableDataLoading2 = ref(false);
const tableDataLoading4 = ref(false);
const tableDataLoading5 = ref(false);
const tableDataLoading7 = ref(false);

//获取管网实时监测
const getRealtimePipeLine = async () => {
  tableDataLoading2.value = true;
  let params = {
    monitorTargetType: 'pipeline',
    orderBy: 'tt desc',
    pipelineType: allData.pipelineType,
  };
  let res = await realtimeDataPipelineListByType(params);
  if (res && res.code == 200) {
    let data = res.data;
    tableData2.value = data;
    tableDataLoading2.value = false;
  }
};
//获取管网监测统计分析
const getSuperVisePipeData = async () => {
  let params = {
    startTime: allData.pipeTime[0],
    endTime: allData.pipeTime[1],
    stCode: allData.supervisePipeCode,
  };
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    if (!!!datas) return;
    if (datas.propertyMonitorList.length > 1) {
      chartOption.floodOneMapPipeSupervise.legend.data = [
        datas.propertyMonitorList[2].monitorPropertyName,
        datas.propertyMonitorList[0].monitorPropertyName,
      ];
      chartOption.floodOneMapPipeSupervise.xAxis[0].data = datas.propertyMonitorXList;
      chartOption.floodOneMapPipeSupervise.yAxis[0].name = datas.propertyMonitorList[2].propertyUnit;
      chartOption.floodOneMapPipeSupervise.yAxis[1].name = datas.propertyMonitorList[0].propertyUnit;
      chartOption.floodOneMapPipeSupervise.series[0].name = datas.propertyMonitorList[2].monitorPropertyName;
      chartOption.floodOneMapPipeSupervise.series[1].name = datas.propertyMonitorList[0].monitorPropertyName;
      chartOption.floodOneMapPipeSupervise.series[0].data = datas.propertyMonitorList[2].ylist;
      chartOption.floodOneMapPipeSupervise.series[1].data = datas.propertyMonitorList[0].ylist;
      chartOption.floodOneMapPipeSupervise.graphic.invisible = true; // 暂无数据
    } else if (datas.propertyMonitorList.length == 1) {
      chartOption.floodOneMapPipeSupervise.legend.data = [datas.propertyMonitorList[0].monitorPropertyName];
      chartOption.floodOneMapPipeSupervise.xAxis[0].data = datas.propertyMonitorXList;
      chartOption.floodOneMapPipeSupervise.yAxis[0].name = datas.propertyMonitorList[0].propertyUnit;
      chartOption.floodOneMapPipeSupervise.yAxis[1].name = '';
      chartOption.floodOneMapPipeSupervise.series[0].name = datas.propertyMonitorList[0].monitorPropertyName;
      chartOption.floodOneMapPipeSupervise.series[1].name = '';
      chartOption.floodOneMapPipeSupervise.series[0].data = datas.propertyMonitorList[0].ylist;
      chartOption.floodOneMapPipeSupervise.series[1].data = [];
      chartOption.floodOneMapPipeSupervise.graphic.invisible = true; // 暂无数据
    } else if (datas.propertyMonitorXList.length == 0) {
      chartOption.floodOneMapPipeSupervise.graphic.invisible = false; // 暂无数据
      chartOption.floodOneMapPipeSupervise.xAxis[0].data = [];
      chartOption.floodOneMapPipeSupervise.series[0].data = [];
      chartOption.floodOneMapPipeSupervise.series[1].data = [];
      chartOption.floodOneMapPipeSupervise.yAxis[0].name = '';
      chartOption.floodOneMapPipeSupervise.yAxis[1].name = '';
      chartOption.floodOneMapPipeSupervise.series[0].name = '';
      chartOption.floodOneMapPipeSupervise.series[1].name = '';
    }
    // 设置鼠标滚轮放大缩小展示数据区间
    chartOption.floodOneMapPipeSupervise.dataZoom = [
      { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length / 2] },
    ];
    initPipeChart();
  }
};
//管网监测趋势图
let pipeChart = null;
const initPipeChart = () => {
  pipeChart && pipeChart.dispose();
  pipeChart = echarts.init(document.getElementById('chartSuperviseWL'));
  pipeChart.clear();
  pipeChart.setOption(chartOption.floodOneMapPipeSupervise);
};
const changePipeDate = () => {
  allData.pipeTime = [getYearMonthDay(allData.pipeTime[0]), getYearMonthDay(allData.pipeTime[1])];
  getSuperVisePipeData();
};
const tableData3 = ref([]);
const loadingZSD = ref(true);
//获取积水点实时监测
const getRealtimeDataWaterlogging = async () => {
  loadingZSD.value = true;
  let res = await realtimeDataWaterlogging({ monitorTargetType: 'waterlogging', orderBy: 'tt desc' });
  if (res && res.code == 200) {
    let data = res.data;
    tableData3.value = data;
    loadingZSD.value = false;
  }
};

const tableData4 = ref([]);
//获取排口实时监测
const getRealtimedRainOutlet = async () => {
  tableDataLoading4.value = true;
  let params = {
    monitorTargetType: 'drain_outlet',
    orderBy: 'tt desc',
    pipelineType: allData.paikouType,
  };
  let res = await realtimeDataListByType(params);
  if (res && res.code == 200) {
    let data = res.data;
    data.forEach(element => {
      if (element.monitorValueList && element.monitorValueList.length > 0) {
        element.dataTime = element.monitorValueList[0].tt;
      }
    });
    tableData4.value = data;
    tableDataLoading4.value = false;
  }
};
const tableData5 = ref([]);
//获取管网实时监测
const getRealtimedRiver = async () => {
  tableDataLoading5.value = true;
  let params = {
    monitorTargetType: 'river',
    orderBy: 'order_no desc',
  };
  let res = await realtimeDataListByType(params);
  if (res && res.code == 200) {
    let data = res.data;
    data.forEach(element => {
      if (element.monitorValueList && element.monitorValueList.length > 0) {
        element.dataTime = element.monitorValueList[0].tt;
      }
    });
    tableData5.value = data;
    tableDataLoading5.value = false;
  }
};
//获取人工采样时间字典
const getSampleDateList = async () => {
  let res = await sampleDateList();
  if (res && res.code == 200) {
    let data = res.data;
    let dataList = [];
    data.forEach(item => {
      dataList.push({ value: item, label: item });
    });
    allData.options1 = dataList;
    allData.sampleDate = allData.options1[0].value;
    getSampleRiverList();
  }
};
//获取人工采样河湖查询
const getSampleRiverList = async () => {
  let res = await sampleRiverList();
  if (res && res.code == 200) {
    let data = res.data;
    detailList.value = data;
    // data.map(item=>{
    //   if(item=detailList.name){
    //   }
    // })

    allData.surfaceWaterBodies = detailList.value[0].surfaceWaterBodies;
    allData.riverActive = detailList.value[0].id;
    getSampleRiverSectionData();
  }
};
// 河道横断面分析点击
const checkRiverP = async val => {
  riverTitle.value = val;
  showStationRiver.value = true;
  let lonlat;
  val == '老澴河' ? (lonlat = '113.9263827,30.89512155') : (lonlat = '113.941462,30.926146');
  let lonLat = lonlat.split(',');
  newfiberMapbox.map.easeTo({
    center: [Number(lonLat[0]), Number(lonLat[1])],
    zoom: 13.5,
  });
  bus.emit('initeLayer', ['paiKou', 'drainOutlet']);
  let res = await getRiverProfileByRiverName({ riverName: val });
  if (res && res.code == 200) {
    let datas = res.data;
    echartData.value.xAxisData = datas.chainageList; //河道里程列表
    echartData.value.seriesData[0].data = datas.stationZList; //监测站点水位数据
    echartData.value.seriesData[1].data = datas.channelList; //河床高程列表
    // echartData.value.seriesData[2].data = datas.leftBankList; //左岸高程列表
    // echartData.value.seriesData[3].data = datas.rightBankList; //右岸高程列表
    //排口点位列表
    allData.tableDatalist = datas.outfallList;

    let titlenames = datas.roadNameList;
    let options = '';
    datas.roadNameList.forEach((item, index) => {
      if (item) {
        options = datas.sfZList[0];
      } else {
        options = '';
      }
      echartData.value.seriesData[2].data.push(options);
    });
    echartData.value.seriesData[2].itemStyle = {
      normal: {
        label: {
          show: true, //开启显示
          position: 'top', //内部显示
          rotate: 45,
          formatter: function (params) {
            return titlenames[params.dataIndex];
          },

          textStyle: {
            //数值样式
            color: '#ffffff',
            fontSize: 12,
          },
        },
      },
    };

    echartData.value.seriesData[1].markPoint.data = [];
    datas.outfallList &&
      datas.outfallList.map(item => {
        echartData.value.seriesData[1].markPoint.data.push({
          coord: [item.x, item.y],
          pointNumber: item.pointNumber,
          lonLat: item.lonLat,
          roadName: item.roadName,
        });
      });
    // 河道中建筑物类型，pump（泵站），gate（闸门），weir（堰）等
    let buildArr = [];
    if (Object.keys(datas.structureList).length > 0) {
      for (let i in datas.structureList) {
        buildArr.push({
          name: i,
          type: 'line',
          smooth: true,
          symbol: 'none',
          data: datas.structureList[i],
          areaStyle: { color: '#4085FF' },
        });
      }
      echartData.value.seriesData = echartData.value.seriesData.concat(buildArr);
    } else {
      echartData.value.seriesData = echartData.value.seriesData.slice(0, 4);
    }

    refresh.value = Math.random();
    supervisePopupdata.value = {
      riverTitle: allData.riverTitle,
      refresh: refresh.value,
      echartData: echartData.value,
      tableDatalist: allData.tableDatalist,
    };
    emit('showStationRiverclose', supervisePopupdata.value);
  }
};
//河湖断面采样数据查询
const getSampleRiverSectionData = async () => {
  let params = {
    surfaceWaterBodies: allData.surfaceWaterBodies,
    sampleDate: allData.sampleDate,
  };
  let res = await sampleRiverSectionData(params);
  if (res && res.code == 200) {
    let data = res.data;
    let dataList = [];

    data.forEach(item => {
      item.property == 'samplePh'
        ? ((item.propertyName = 'PH'), (item.propertyUnit = '--'))
        : item.property == 'sampleCond'
        ? ((item.propertyName = '电导率'), (item.propertyUnit = 'uS/m'))
        : item.property == 'sampleOrp'
        ? ((item.propertyName = '氧化还原电位'), (item.propertyUnit = 'mV'))
        : item.property == 'sampleDo'
        ? ((item.propertyName = '溶解氧'), (item.propertyUnit = 'mg/L'))
        : item.property == 'sampleCod'
        ? ((item.propertyName = '化学需氧量'), (item.propertyUnit = 'mg/L'))
        : item.property == 'sampleSs'
        ? ((item.propertyName = '悬浮物'), (item.propertyUnit = 'mg/L'))
        : item.property == 'sampleNh3n'
        ? ((item.propertyName = '氨氮'), (item.propertyUnit = 'mg/L'))
        : item.property == 'sampleTn'
        ? ((item.propertyName = '总氮'), (item.propertyUnit = 'mg/L'))
        : ((item.propertyName = '总磷'), (item.propertyUnit = 'mg/L'));
    });
    tableData6.value = data;
  }
};
const clickSample = item => {
  allData.surfaceWaterBodies = item.surfaceWaterBodies;
  allData.riverActive = item.id;
  getSampleRiverSectionData();
};
const tableData6 = ref([]);
const tableData71 = ref([]);
const tableRef71 = ref(null);
const tableLoading71 = ref(true);
//获取源头地块
const getOrinignList = async () => {
  tableLoading71.value = true;
  let res = await orinignList();
  if (res && res.code == 200) {
    let data = res.data;
    let params = data[0].stCodes;
    let res1 = await orinignDataList(params);
    if (res1 && res1.code == 200) {
      tableData71.value = res1.data;
      tableData71.value.forEach((item, index) => {
        item.dataTime = res1.data[index].monitorValueList[0].tt;
      });
      tableRef71.value.setCurrentRow(tableData71.value[0], true); //表格默认第一个高亮选中
      tableLoading71.value = false;
    }
  }
};
const tableData7 = ref([]);
//获取厂站概况
const getRealtimeDataByPump = async () => {
  tableDataLoading7.value = true;
  let params = {
    pumpType: allData.currentIndex2,
  };
  let res = await realtimeDataByPump(params);
  if (res && res.code == 200) {
    tableData7.value = res.data;
    tableDataLoading7.value = false;
    allData.pumpCode = res.data[0].pumpCode;
    getHistoryDataByPumpCode();
  }
};
//厂站历史数据
const getHistoryDataByPumpCode = async () => {
  let params = {
    startTime: allData.GWtime1[0],
    endTime: allData.GWtime1[1],
    pumpCode: allData.pumpCode,
  };
  let res = await historyDataByPumpCode(params);
  let data = res.data;
  chartOption.floodOneMapDataByPumpCode.legend.data = [data.pointName];
  chartOption.floodOneMapDataByPumpCode.xAxis.data = data.ttList;
  chartOption.floodOneMapDataByPumpCode.yAxis.name = data.unit;
  chartOption.floodOneMapDataByPumpCode.series.name = data.pointName;
  chartOption.floodOneMapDataByPumpCode.series.data = data.dataList;
  if (data.ttList.length == 0) {
    chartOption.floodOneMapDataByPumpCode.graphic.invisible = false; //暂无数据
  } else {
    chartOption.floodOneMapDataByPumpCode.graphic.invisible = true; //暂无数据
  }
  initEcharts4();
};
const changeBengZhanDate = () => {
  allData.GWtime1 = [
    proxy.moment(allData.GWtime1[0]).format('YYYY-MM-DD 00:00:00'),
    proxy.moment(allData.GWtime1[1]).format('YYYY-MM-DD 23:59:59'),
  ];
  console.log(allData.GWtime1);
  getHistoryDataByPumpCode();
};
const detailList = ref([]);
const tabChangeClick = async value => {
  allData.currentIndex = value;
  bus.emit('setHighlight');
  if (allData.currentIndex == 1) {
    allData.centerSearchShow = true;
    getWeatherPredict();
    getRealtimeRain();
    setTimeout(() => {
      let closeCommonPopup = false;
      bus.emit('closeCommonPopup', closeCommonPopup);
      bus.emit('initeLayer', ['rainStation']);
      newfiberMapbox.map.easeTo({
        center: [114.312, 34.802],
        zoom: 12.9,
        pitch: 55,
      });
      //dataToMap('rainStation', tableData1.value);
    }, 100);
  } else if (allData.currentIndex == 2) {
    allData.centerSearchShow = false;
    await getRealtimePipeLine();
    allData.supervisePipeCode = '2109600079';
    allData.pipeTime = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')];
    nextTick(() => {
      let closeCommonPopup = false;
      bus.emit('closeCommonPopup', closeCommonPopup);
      bus.emit('initeLayer', ['pipeSupervise']);
      newfiberMapbox.map.easeTo({
        center: [114.312, 34.802],
        zoom: 12.9,
        pitch: 55,
      });
    });
  } else if (allData.currentIndex == 3) {
    allData.centerSearchShow = false;
    getRealtimeDataWaterlogging();
    allData.waterloggingDate = proxy.moment().format('YYYY');
    let closeCommonPopup = false;
    bus.emit('closeCommonPopup', closeCommonPopup);
    bus.emit('initeLayer', ['waterlog']);
    newfiberMapbox.map.easeTo({
      center: [114.312, 34.802],
      zoom: 12.9,
      pitch: 55,
    });
  } else if (allData.currentIndex == 4) {
    allData.centerSearchShow = false;
    getRealtimedRainOutlet();
    allData.supervisePipeCode = '2109600075';
    allData.pipeTime = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')];
    let closeCommonPopup = false;
    bus.emit('closeCommonPopup', closeCommonPopup);
    bus.emit('initeLayer', ['PKsupervise']);
    newfiberMapbox.map.easeTo({
      center: [114.312, 34.802],
      zoom: 12.9,
      pitch: 55,
    });
  } else if (allData.currentIndex == 5) {
    riverTitle.value = '';
    allData.centerSearchShow = false;
    getRealtimedRiver();
    getSampleDateList();
    let closeCommonPopup = false;
    bus.emit('closeCommonPopup', closeCommonPopup);
    //bus.emit('initeLayer', ['riverLake']);
    newfiberMapbox.map.easeTo({
      center: [114.312, 34.802],
      zoom: 12.9,
      pitch: 55,
    });
  } else if (allData.currentIndex == 6) {
    allData.centerSearchShow = false;
    allData.GWtime1 = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD hh:mm:ss'), proxy.moment().format('YYYY-MM-DD hh:mm:ss')];
    getRealtimeDataByPump();
    let closeCommonPopup = false;
    bus.emit('closeCommonPopup', closeCommonPopup);
    bus.emit('initeLayer', ['YSBZ', 'WSBZ', 'WSCLC']);
    newfiberMapbox.map.easeTo({
      center: [114.312, 34.802],
      zoom: 12.9,
      pitch: 55,
    });
    chartOption.floodOneMapRainStatic.series[0].data = [
      { value: 5, name: '超警戒水位' },
      { value: 3, name: '超起抽水位' },
    ];
    chartOption.floodOneMapJSDTrend.legend.data = ['水位'];
    chartOption.floodOneMapJSDTrend.yAxis.name = '单位：m';
    chartOption.floodOneMapJSDTrend.series[0].name = '水位';
    nextTick(() => {
      initEcharts4();
    });
  } else if (allData.currentIndex == 7) {
    allData.centerSearchShow = false;
    getOrinignList();
    allData.pipeTime = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')];
    allData.supervisePipeCode = '2109600078';
    let closeCommonPopup = false;
    bus.emit('closeCommonPopup', closeCommonPopup);
    bus.emit('initeLayer', ['orinign']);
    timer.value = setInterval(() => {
      if (!!!newfiberMapbox) {
        return;
      } else {
        newfiberMapbox.map.easeTo({
          center: [114.312, 34.802],
          zoom: 12.9,
          pitch: 55,
        });
        clearInterval(timer.value);
      }
    }, 1000);

    getSuperVisePipeData();
  }
  bus.emit('centerSearchShow', allData.centerSearchShow);
};
const checkInfo = value => {
  allData.currentIndex2 = value;
  getRealtimeDataByPump();
};
//地图定位
const mapFlyTo = lonlat => {
  newfiberMapbox.map.easeTo({
    center: [Number(lonlat[0]), Number(lonlat[1])],
    zoom: 15.5,
  });
};
//雨量数据表格点击事件
const clickRain = row => {
  highlight(row);
  let closeCommonPopup = false;
  bus.emit('closeCommonPopup', closeCommonPopup);
  if (!!!row.lonLat) {
    proxy.$modal.msgError('站点坐标缺失');
    return;
  }
  let lonlat = row.lonLat.split(',');
  mapFlyTo(lonlat);
};
//管网检测表格点击事件
const clickPipeSupervise = row => {
  highlight(row);
  let closeCommonPopup = false;
  bus.emit('closeCommonPopup', closeCommonPopup);
  if (!!!row.lonLat) {
    proxy.$modal.msgError('站点坐标缺失');
    return;
  }
  let lonlat = row.lonLat.split(',');
  mapFlyTo(lonlat);

  allData.supervisePipeCode = row.stCode;
  // 源头地块加载对应历史数据
  if (row.monitorTargetType == 'typical_land') {
    allData.supervisePipeCode = row.stCode;
    getSuperVisePipeData(); //加载历史数据
  }
};
//积水点数据表格点击事件
const clickZS = row => {
  highlight(row);
  let closeCommonPopup = false;
  bus.emit('closeCommonPopup', closeCommonPopup);
  if (!!!row.lonLat) {
    proxy.$modal.msgError('站点坐标缺失');
    return;
  }
  let lonlat = row.lonLat.split(',');
  mapFlyTo(lonlat);
};
//河道数据表格点击事件
const clickRiver = row => {
  highlight(row);
  let closeCommonPopup = false;
  bus.emit('closeCommonPopup', closeCommonPopup);
  if (!!!row.lonLat) {
    proxy.$modal.msgError('站点坐标缺失');
    return;
  }
  let lonlat = row.lonLat.split(',');
  mapFlyTo(lonlat);
};
//厂站检测表格点击事件
const clickCZ = row => {
  highlight(row);
  let closeCommonPopup = false;
  bus.emit('closeCommonPopup', closeCommonPopup);
  if (!!!row.lon && !!!row.lat) {
    proxy.$modal.msgError('站点坐标缺失');
    return;
  }
  let lonlat = [Number(row.lon), Number(row.lat)];
  mapFlyTo(lonlat);
  allData.pumpCode = row.pumpCode;
  getHistoryDataByPumpCode();
};
onMounted(() => {
  bus.on('changeTableContent', val => {
    if (val == 2) {
      allData.centerSearchShow = true;
      tabChangeClick(1); //默认加载雨量监测数据
      bus.emit('centerSearchShow', allData.centerSearchShow);
      allData.tabShowWL = val;
    } else {
      allData.tabShowWL = null;
      allData.centerSearchShow = false;
      bus.emit('centerSearchShow', allData.centerSearchShow);
    }
  });
});

const types = ['rainStation', 'pipeSupervise', 'waterlog', 'PKsupervise', 'riverLake', 'YSBZ', 'orinign'];

watch(
  () => tableData1.value,
  val => dataToMap(types[0], val)
);
watch(
  () => tableData2.value,
  val => dataToMap(types[1], val)
);
watch(
  () => tableData3.value,
  val => dataToMap(types[2], val)
);
watch(
  () => tableData4.value,
  val => dataToMap(types[3], val)
);
watch(
  () => tableData5.value,
  val => dataToMap(types[4], val)
);
watch(
  () => tableData7.value,
  val => dataToMap(types[5], val)
);
watch(
  () => tableData71.value,
  val => dataToMap(types[6], val)
);
// 关闭弹窗;
const closePopup = () => {
  showStationRiver.value = false;
  bus.emit('initeLayer', []);
};
const dataToMap = (type, data) => {
  if (!!!(newfiberMapbox && newfiberMapbox.map.load)) {
    let interval = setInterval(() => {
      if (newfiberMapbox && newfiberMapbox.map.load) return method(), clearInterval(interval);
    }, 1000);
    return;
  }
  method();
  function method() {
    let closeCommonPopup = false;
    bus.emit('closeCommonPopup', closeCommonPopup);
    newfiberMapbox.map.easeTo({
      center: [114.312, 34.802],
      zoom: 12.9,
      pitch: 55,
    });
    types.forEach(i => bus.emit('setLayerVisible', { layername: i, isCheck: false }));
    let features = data
      .filter(i => i.lonLat || i.lon || i.lat)
      .map(i => {
        i.geometry = `POINT(${i.lonLat ? i.lonLat.replaceAll(',', ' ') : `${i.lon} ${i.lat}`})`;
        i.type = type;
        return turf.feature(Terraformer.WKT.parse(i.geometry), Object.assign({}, i));
      });
    bus.emit('removeMapDatas', [type]);
    bus.emit('setGeoJSON', { json: turf.featureCollection(features), type });
    bus.emit('setLayerVisible', { layername: type, isCheck: true });
  }
};

const highlight = i => {
  if (!(i.lonLat || i.lon || i.lat)) return;
  i.geometry = `POINT(${i.lonLat ? i.lonLat.replaceAll(',', ' ') : `${i.lon} ${i.lat}`})`;
  let feature = turf.feature(Terraformer.WKT.parse(i.geometry), Object.assign({}, i));
  bus.emit('setHighlight', feature);
};
onBeforeUnmount(() => {
  bus.off('changeTableContent');
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>
<style lang="scss" scoped>
.tabRightWL {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #00314e;
  border: 1px solid #094065;
  z-index: 115;
  overflow: auto;
  .tabChangeList {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .tabChange {
      width: 145px;
      height: 22px;
      font-family: PingFang SC;
      margin: 20px 0 10px 0px;
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      text-align: center;
      cursor: pointer;
      &:hover {
        color: #00d1ff;
      }
    }
    .active {
      color: #00d1ff;
    }
  }
  .dividerLine {
    height: 2px;
    border: 1px;
    margin: 0px 0 10px 0px;
    background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
  }
  .allContent {
    .selectTitle {
      .selectToolList {
        width: 300px;
        .selectTool {
          width: 135px;
          height: 26px;
          border-radius: 2px;
          background: linear-gradient(0deg, #004770, #004770), linear-gradient(0deg, #00d1ff, #00d1ff);
          border: 0.5px solid #00d1ff;
          margin-right: 10px;
        }
      }
    }
    .staticPicture {
      #chartThree {
        width: 500px;
        height: 300px;
      }
      #chartSuperviseWL {
        width: 500px;
        height: 300px;
      }
    }
    .navBtn {
      display: flex;
      justify-content: flex-end;
      p {
        width: 70px;
        height: 20px;
        text-align: center;
        color: #00a6d2;
        cursor: pointer;
        background: #004770;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        border-radius: 10px;
      }
      .active {
        background: #0188b1;
        border-radius: 10px;
        color: #004c6c;
      }
    }
    .DMcontent {
      display: flex;
      .activeR {
        background: #0188b1;
        color: #004c6c;
      }
      .DMpart {
        width: 154px;
        margin: 5px 10px;
        fill: linear-gradient(180deg, #0073a5 -112.14%, rgba(0, 115, 165, 0) 97.26%);
        border: 1px solid #0073a5;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        &:hover {
          background: #0188b1;
          color: #004c6c;
        }
        .partContent {
          display: flex;
          align-items: center;
          flex-direction: column;
          cursor: pointer;

          .title {
            color: #00d1ff;
            text-align: center;
            font-family: PingFang SC;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin: 10px 0;
          }
        }
      }
    }
    .weatherInfo {
      display: flex;
      justify-content: space-around;
      // margin-top: 5px;
      height: 200px;
      overflow-y: hidden;
      overflow-x: scroll;
      .part {
        padding: 10px;
        margin: 5px 6px;
        width: 100px !important;
        background: #003758;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        &:hover {
          background: linear-gradient(180deg, #004770 0%, rgba(0, 71, 112, 0) 100%);
          border: 1px solid #0073a5;
        }
        &:nth-child(1) {
          background: linear-gradient(180deg, #004770 0%, rgba(0, 71, 112, 0) 100%);
          border: 1px solid #0073a5;
        }
      }
      p {
        text-align: center;
        margin: 3px;
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
      }
    }
  }
  .rightTab {
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    margin-bottom: 10px;
  }
}
</style>