<template>
  <!-- 风险研判 态势研判-->
  <div class="tabRightFX" v-if="tabShowWL == 4">
    <div class="allContent">
      <div class="selectTitle" style="margin-top: 15px">
        <div class="name">未来24h气象降雨预报</div>
      </div>
      <div class="staticPicture" v-loading="loadingWeather">
        <div id="chartOne"></div>
      </div>

      <div class="selectTitle">
        <div class="name">河道水位</div>
        <el-select v-model="riverIndex" style="margin: 0px 10px 0px 10px; width: 220px" size="small" @change="changeRiver">
          <el-option :label="item.stName" :value="item.stCode" v-for="item in riverLists" :key="item.stCode"></el-option>
        </el-select>
      </div>
      <div class="staticPicture" v-loading="loadingRiver">
        <div id="chartTwo"></div>
      </div>

      <div class="selectTitle">
        <div class="name">积水风险研判</div>
      </div>
      <el-table
        ref="tableArea"
        :data="tableData"
        v-loading="tableLoading"
        style="width: 100%; margin: 5px 0 10px 0"
        height="200"
        highlight-current-row
        @row-click="clickLogData"
        :empty-text="'暂无风险'"
      >
        <el-table-column prop="riskLevel" label="积水风险级别">
          <template #default="scope">
            {{
              scope.row.riskLevel == 'high'
                ? '高风险'
                : scope.row.riskLevel == 'middle'
                ? '中风险'
                : scope.row.riskLevel == 'low'
                ? '低风险'
                : '--'
            }}
          </template>
        </el-table-column>
        <el-table-column prop="avgZ" label="平均水深(m)" />
        <el-table-column prop="waterloggingArea" label="积水面积(k㎡)" />
      </el-table>
    </div>
    <!-- 积水区域预报水位弹窗 -->
    <el-dialog v-model="dialogShow" title="积水区域预报水位" width="800px" append-to-body>
      <LineChart
        v-if="dialogShow"
        :echartData="echartData"
        :refresh="refresh"
        style="width: 760px; height: 400px; margin-bottom: 30px"
      ></LineChart>
    </el-dialog>
  </div>
</template>
<script setup name="tabRightFX">
import chartOption from '@/components/Echarts/pieChart_1.js';
import * as echarts from 'echarts';
import { nextTick } from 'vue';
import bus from '@/bus';
import { ElLoading } from 'element-plus';
import { rainTrend, waterloggingRisk, riverRisk, geometryDurationData } from '@/api/floodSys/oneMap';
import LineChart from '@/components/Echarts/lineOneChart.vue'; //折线图
import xiaoganCityBoundary from '@/assets/geojson/xiaoganCityBoundary.json';

const tabShowWL = ref(null);
const loadingWeather = ref(true);
const tableData = ref([]);
const tableLoading = ref(true);
const tableArea = ref(null);
const riverIndex = ref(null);
const riverLists = ref([]);
const loadingRiver = ref(true);
const dialogShow = ref(false);
const refresh = ref(1);
const timer = ref(null);
const echartData = ref({
  xAxisData: [],
  yAxisName: '内涝点水位(m)',
  seriesData: [
    {
      type: 'line',
      smooth: true,
      data: [],
      // 填充区域的样式
      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)' },
        ]),
      },
    },
  ],
});

// 降雨预报柱状图
let chart = null;
const initEcharts = async () => {
  if (!!chart) chart.dispose();
  chart = echarts.init(document.getElementById('chartOne'));
  loadingWeather.value = true;
  let res = await rainTrend();
  if (res && res.code == 200) {
    let datas = res.data;
    console.log(datas, 9999999);
    let times = [];
    if (Boolean(datas.dateRange.length)) {
      datas.dateRange.forEach(i => {
        times.push(i.substr(0, 16));
      });
    }
    chartOption.floodOneMapFXrain.legend.data = ['近24h实测雨量', '未来24h预报雨量'];
    chartOption.floodOneMapFXrain.xAxis[0].data = times;
    chartOption.floodOneMapFXrain.yAxis[0].name = 'mm';
    chartOption.floodOneMapFXrain.series[0].name = '近24h实测雨量';
    chartOption.floodOneMapFXrain.series[1].name = '未来24h预报雨量';
    chartOption.floodOneMapFXrain.series[0].data = datas.history;
    chartOption.floodOneMapFXrain.series[1].data = datas.forecast;
    if (datas.dateRange.length == 0) {
      chartOption.floodOneMapFXrain.graphic.invisible = false; //暂无数据
    } else {
      chartOption.floodOneMapFXrain.graphic.invisible = true; //暂无数据
    }
    // 设置鼠标滚轮放大缩小展示数据区间
    chartOption.floodOneMapFXrain.dataZoom = [{ type: 'inside', startValue: 5 }];
  }
  chart.clear();
  chart.setOption(chartOption.floodOneMapFXrain);
  loadingWeather.value = false;
};

// 河湖风险研判切换河湖
function changeRiver(val) {
  riverIndex.value = val;
  getRiverData();
}
// 河湖风险研判echarts
let chartRiver = null;
async function getRiverData() {
  if (!!chartRiver) chartRiver.dispose();
  chartRiver = echarts.init(document.getElementById('chartTwo'));
  // echarts赋值
  let arrs = riverLists.value.filter(item => item.stCode == riverIndex.value);
  console.log(arrs);
  chartOption.floodOneMapFXYP.xAxis[0].data = arrs[0].riverX;
  chartOption.floodOneMapFXYP.series[1].data = arrs[0].riverY;
  chartOption.floodOneMapFXYP.series[1].markLine.data[0].yAxis = arrs[0].sfZ;
  chartOption.floodOneMapFXYP.series[1].markLine.data[0].label.formatter = '设防水位 ' + arrs[0].sfZ + 'm';
  let arrs2 = [];
  arrs[0].riverX.map(item => {
    arrs2.push(arrs[0].z);
  });
  chartOption.floodOneMapFXYP.series[0].data = arrs2;
  if (arrs[0].riverX.length == 0) {
    chartOption.floodOneMapFXYP.graphic.invisible = false; //暂无数据
  } else {
    chartOption.floodOneMapFXYP.graphic.invisible = true; //暂无数据
  }
  chartRiver.clear();
  chartRiver.setOption(chartOption.floodOneMapFXYP);
}
// 获取河湖风险研判下拉框值
async function getRiverSelect() {
  loadingRiver.value = true;
  let res = await riverRisk();
  if (res && res.code == 200) {
    let datas = res.data;
    riverLists.value = datas;
    riverIndex.value = datas[0].stCode;
    changeRiver(riverIndex.value);
  }
  loadingRiver.value = false;
}

//积水预报表格
async function getWaterLogging() {
  tableLoading.value = true;
  let res = await waterloggingRisk();
  if (res && res.code == 200) {
    tableData.value = res.data;
    tableLoading.value = false;
    clickLogData(tableData.value[2]);
    tableArea.value.setCurrentRow(tableData.value[2], true); //表格默认第3个高亮选中
  }
}
// 积水预报表格点击，gis加载积水单元
function clickLogData(val) {
  let golygonColor;
  let features = [];
  val.riskLevel == 'low' ? (golygonColor = '#10e8a1') : val.riskLevel == 'middle' ? (golygonColor = '#1e97f0') : (golygonColor = '#ff2603');
  let loading = ElLoading.service({
    lock: true,
    text: '正在进行积水单位渲染...',
  });
  val.geometry.forEach((element, index) => {
    let turfPolygon = turf.polygon(element.coordinates, { name: element.name, geoVal: element.geoVal, color: golygonColor });
    features.push(turfPolygon);
  });
  let waterlogRiskJson = turf.featureCollection(features);
  if (!!!newfiberMapbox.map.getLayer('waterLogingLayer')) {
    addWaterlogRiskLayer(waterlogRiskJson);
  } else {
    newfiberMapbox.map.getSource('waterLogingSource').setData(waterlogRiskJson);
  }
  loading.close();
}
//地图添加内涝风险
const addWaterlogRiskLayer = geojson => {
  newfiberMapbox.map.addSource('waterLogingSource', { type: 'geojson', data: geojson });
  newfiberMapbox.map.addLayer({
    id: 'waterLogingLayer',
    type: 'fill',
    source: 'waterLogingSource',
    paint: {
      'fill-color': ['get', 'color'],
    },
  });
};

// 获取预报水位线
async function getFutureData(params) {
  dialogShow.value = true;
  let res = await geometryDurationData({ name: params.name, type: 'depth' });
  if (res && res.code == 200) {
    let datas = res.data;
    echartData.value.xAxisData = datas.timeList;
    echartData.value.seriesData[0].data = datas.valueList;
    refresh.value = Math.random();
  }
}
//添加孝感城区边界
const addCityBoundary = () => {
  !newfiberMapbox.map.getSource('xiaoganCityBoundary') &&
    newfiberMapbox.map.addSource('xiaoganCityBoundary', { type: 'geojson', data: xiaoganCityBoundary });
  !newfiberMapbox.map.getLayer('xiaoganCityBoundary') &&
    !newfiberMapbox.map.addLayer({
      id: 'xiaoganCityBoundary',
      type: 'line',
      source: 'xiaoganCityBoundary',
      paint: {
        'line-color': 'rgba(255,18,60,1)',
        'line-width': 3,
      },
    });
};
onMounted(() => {
  bus.on('changeTableContent', val => {
    if (val == 4) {
      tabShowWL.value = val;
      nextTick(() => {
        newfiberMapbox.map.easeTo({
          center: [114.312, 34.802],
          zoom: 12.9,
          pitch: 0,
        });
        addCityBoundary();
        initEcharts(); //未来气象预报
        getRiverSelect(); //河湖风险研判
        getWaterLogging(); //积水预报
      });
      newfiberMapbox.map.on('click', e => {
        const clickFeature = (
          newfiberMapbox.map.queryRenderedFeatures([
            [e.point.x - 10 / 2, e.point.y - 10 / 2],
            [e.point.x + 10 / 2, e.point.y + 10 / 2],
          ]) || []
        ).filter(feature => feature.source == 'waterLogingSource')[0];
        if (!!!clickFeature) {
          return;
        }
        newfiberMapbox.map.easeTo({
          center: [e.lngLat.lng, e.lngLat.lat],
          zoom: 17,
        });
        // 获取预报水位线
        getFutureData(clickFeature.properties);
      });
      bus.emit('initeLayer', []);
    } else {
      tabShowWL.value = null;
      timer.value = setInterval(() => {
        if (!!!newfiberMapbox) {
          return;
        } else {
          !!newfiberMapbox.map.getLayer('waterLogingLayer') && newfiberMapbox.map.removeLayer('waterLogingLayer');
          !!newfiberMapbox.map.getSource('waterLogingSource') && newfiberMapbox.map.removeSource('waterLogingSource');
          !!newfiberMapbox.map.getLayer('xiaoganCityBoundary') && newfiberMapbox.map.removeLayer('xiaoganCityBoundary');
          !!newfiberMapbox.map.getSource('xiaoganCityBoundary') && newfiberMapbox.map.removeSource('xiaoganCityBoundary');
          clearInterval(timer.value);
        }
      }, 100);
    }
  });
});
onBeforeUnmount(() => {
  bus.off('changeTableContent');
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>
<style lang="scss">
.tabRightFX {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #06488f;
  border: 1px solid #094065;
  z-index: 115;
  .allContent {
    height: 750px;
    overflow: auto;
    .selectTitle {
      .switchName {
        color: #00d1ff;
        text-align: center;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
      }
      .scendRain {
        width: 100px;
        margin-right: 10px;
      }
    }
    .staticPicture {
      #chartOne,
      #chartTwo {
        height: 200px;
      }
    }
    .navBtn {
      display: flex;
      justify-content: flex-end;
      width: 504px;
      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;
      }
    }

    .dutyInfo {
      display: flex;
      margin: 5px;
      .name {
        margin-top: 15px;
        margin-left: 20px;
        color: #00d1ff;
        text-align: center;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
      }
      .phone {
        margin-top: 15px;
        margin-left: 20px;
        text-align: center;
        color: #00d1ff;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
      }
      .isRead {
        margin-top: 15px;
        margin-left: 200px;
        width: 52px;
        height: 28px;
        color: #00d1ff;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        line-height: 28px;
        fill: #003758;
        border: 1px solid #01547b;
      }
      .isReadTrue {
        fill: #003758;
        border: 1px solid #00d1ff;
      }
    }
  }
}
</style>