<template>
  <!-- 排水防涝一张图降雨图 -->
  <div class="centerWarnSea" v-show="centerWarnSeaShow">
    <img class="warnImg" src="@/assets/images/gisMap/color.png" />
    <el-date-picker
      type="daterange"
      v-model="daterange"
      value-format="YYYY-MM-DD"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      placeholder="请选择日期"
      style="width: 320px"
      @change="getRainDistribution"
    >
    </el-date-picker>
    <el-select v-model="searchVal" placeholder="倍数" style="width: 80px; margin-left: 10px" @change="changeMul">
      <el-option v-for="item in bsType" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true" style="width: 640px"></el-progress>
    <el-button type="warning" @click="startImitate" v-if="ifStart">开始</el-button>
    <el-button type="danger" @click="stopImitate" v-if="!ifStart">暂停</el-button>
    <el-button type="warning" @click="showKring" v-if="ifShowKring">显示</el-button>
    <el-button type="danger" @click="unshowKring" v-if="!ifShowKring">隐藏</el-button>
  </div>
</template>

<script setup name="page">
import bus from '@/bus';
import { rainDistributionMapData } from '@/api/floodSys/floodStation.js';
import { getKrigingByPoints } from '@/utils/gis/rainkriging';
import bjBoundaryJson from '@/assets/geojson/krigingBoundary.json';
import { onBeforeUnmount } from 'vue';
const { proxy } = getCurrentInstance();
const daterange = ref(
  [proxy.moment().format('YYYY-MM-DD'), proxy.moment(new Date()).add(7, 'days').format('YYYY-MM-DD')] //未来7天
);
const searchVal = ref(2);
const processVal = ref(0);
const timer = ref(null);
const ifStart = ref(true);
const ifShowKring = ref(true);
const centerWarnSeaShow = ref(false);
const krigingJson = ref([]);
const featureStep = ref(0);
const bsType = ref([
  { value: 2, label: '2倍' },
  { value: 4, label: '4倍' },
  { value: 6, label: '6倍' },
]);
const searchText = ref('');

// 关键字搜索
function changeText(val) {
  console.log(val);
}

// 开始模拟
function startImitate() {
  ifStart.value = false;
  if (krigingJson.value.length < 1) {
    return;
  }
  if (krigingJson.value.length > 1) {
    let proStept = Math.round(100 / krigingJson.value.length);
    timer.value = setInterval(() => {
      processVal.value += proStept;
      featureStep.value += 1;
      let kriging = getKrigingByPoints(krigingJson.value[krigingJson.value.length - featureStep.value], bjBoundaryJson);
      newfiberMapbox.map.getSource('kriging_source').setData(kriging);
      if (processVal.value > 100) {
        processVal.value = 0;
        stopImitate();
      }
      if (featureStep.value == krigingJson.value.length) {
        featureStep.value = 0;
        //stopImitate();
      }
    }, 1000 / searchVal.value);
  } else {
    timer.value = setInterval(() => {
      processVal.value += 100;
      if (processVal.value > 100) {
        processVal.value = 0;
        stopImitate();
      }
    }, 1000);
  }
}
// 暂停模拟
function stopImitate() {
  ifStart.value = true;
  stopTimer();
}
//显示插值图
function showKring() {
  ifShowKring.value = false;
  !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.setLayoutProperty('kriging_layer', 'visibility', 'none');
}
//隐藏插值图
function unshowKring() {
  ifShowKring.value = true;
  !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.setLayoutProperty('kriging_layer', 'visibility', 'visible');
}
// 倍数选择
function changeMul(val) {
  searchVal.value = val;
}
// 定时器清除
function stopTimer() {
  if (timer.value) {
    clearInterval(timer.value);
  }
}
//获取降雨插值
const getRainDistribution = async () => {
  !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.removeLayer('kriging_layer');
  !!newfiberMapbox.map.getSource('kriging_source') && newfiberMapbox.map.removeSource('kriging_source');
  krigingJson.value = [];
  let params = {
    startTime: daterange.value[0],
    endTime: daterange.value[1],
  };
  let res = await rainDistributionMapData(params);
  if (res && res.code == 200) {
    let allRainData = res.data;
    if (!!!allRainData.length) {
      proxy.$modal.msgError('暂无数据');
      return;
    }
    allRainData.forEach(data => {
      let rainDataJson = getKrigingJson(data.rainSiteDistributionVOS);
      krigingJson.value.push(rainDataJson);
    });
    addKrigingLayer(krigingJson.value[0]);
  }
};
//获取雨量插值json
const getKrigingJson = dataList => {
  if (!!!dataList.length) return;
  let features = [];
  dataList.forEach(element => {
    let feature = {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [Number(element.lonLat.split(',')[0]), Number(element.lonLat.split(',')[1])],
      },
      properties: { value: element.p24, name: `${element.p24}mm` },
    };
    features.push(feature);
  });
  return {
    type: 'FeatureCollection',
    features: features,
  };
};
//地图添加降雨插值图
const addKrigingLayer = geoJson => {
  let layerId = `kriging_layer`;
  let sourceId = `kriging_source`;
  let kriging = getKrigingByPoints(geoJson, bjBoundaryJson);
  !newfiberMapbox.map.getSource(sourceId) && newfiberMapbox.map.addSource(sourceId, { type: 'geojson', data: kriging });
  !newfiberMapbox.map.getLayer(layerId) &&
    newfiberMapbox.map.addLayer({
      id: layerId,
      type: 'fill',
      source: sourceId,
      layout: {},
      paint: {
        'fill-color': { type: 'identity', property: 'color' },
        'fill-opacity': 0.6,
      },
    });
};
onMounted(() => {
  bus.on('centerSearchShow', value => {
    centerWarnSeaShow.value = value;
    if (!value) {
      !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.removeLayer('kriging_layer');
      !!newfiberMapbox.map.getSource('kriging_source') && newfiberMapbox.map.removeSource('kriging_source');
    }
  });
});
onBeforeMount(() => {
  stopTimer();
});
onBeforeUnmount(() => {
  if (!newfiberMapbox) return;
  !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.removeLayer('kriging_layer');
  !!newfiberMapbox.map.getSource('kriging_source') && newfiberMapbox.map.removeSource('kriging_source');
});
</script>
<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.centerWarnSea {
  background: $mainColor1;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  position: absolute;
  top: 10px;
  left: 5px;
  z-index: 99;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  width: 85%;
  .warnImg {
    width: 324px;
    height: 70px;
    margin-top: -20px;
  }
  .el-select {
    width: 150px;
  }
  .el-progress {
    width: 700px;
    margin: 0px 15px;
    .el-progress__text span {
      font-size: 12px;
    }
  }
}
</style>