<template>
  <div id="newOneMap">
    <!-- 地图组件 -->
    <MapBox ref="boxMap" />
    <!-- 底部导航 -->
    <footer class="mainFooter">
      <n-tabs type="bar" @update:value="changeNav" v-model:value="currentVal" class="tabsNav">
        <n-tab-pane :name="item.label" v-for="item in navArr" :key="item.value"></n-tab-pane>
      </n-tabs>
    </footer>

    <!-- 临时加载三方内容链接 -->
    <div class="otherFrame" v-if="showOther">
      <iframe :src="otherIframeUrl" frameborder="0"></iframe>
    </div>

    <!-- 全域感知-雷达图相关 v-if="ifQixiang"-->
    <div class="cloudPic" v-if="ifQixiang">
      <div class="color"></div>
      <!-- <n-button class="leida">气象雷达图</n-button> -->
      <div class="progress">
        <!-- <p class="time"></p> -->
        <div :class="['cast', ifPlay ? 'start' : 'end']" @click="goPlay"></div>
        <n-progress
          type="line"
          status="success"
          processing
          :show-indicator="false"
          color="#4BCCE5"
          rail-color="#081931"
          :percentage="percentage"
        />
        <p class="currentTime">{{ dateLine }}</p>
        <!-- <p class="time"></p> -->
        <n-select v-model:value="speedValue" style="width: 80px; margin-left: 10px" :options="yubaoOption" @update:value="changeSpeed" />
        <n-date-picker v-model:value="timeRange" style="width: 300px; margin-left: 10px" type="daterange" />
        <n-button class="leida" @click="searchWeather">查询</n-button>
      </div>
    </div>
    <!-- 内容切换 -->
    <OnePart v-if="currentVal == '全域感知'"></OnePart>
    <TwoPart v-if="currentVal == '规划引领'"></TwoPart>
    <!-- <ThreePart v-if="currentVal=='流域信息感知网'"></ThreePart> -->
    <FourPart v-if="currentVal == '长效治理'"></FourPart>
    <!-- 图例控制 -->
    <Legend />
    <!-- 水质监测、水位流量报警提示信息 -->
    <div class="lyInfoWarn" v-if="ifStationWarn">
      <vue3-seamless-scroll :list="listData" :singleHeight="49" :singleWaitTime="3000" :limitScrollNum="2" :hover="true" class="scroll">
        <div class="item" v-for="(item, index) in listData" @click="checkDetail(item)" :key="index">
          <span>
            {{ item.siteName }}：当前{{ item.factorsName }}值：{{ item.warnValue }}, {{ item.compareWayDesc }} {{ item.warnTypeDesc
            }}{{ item.warnConfigValue }},持续时间{{ item.durationTime }}
          </span>
        </div>
      </vue3-seamless-scroll>
    </div>
    <!-- 预警详情弹窗 -->
    <n-modal
      v-model:show="showWarnDetail"
      :show-icon="false"
      :mask-closable="false"
      preset="card"
      :title="modalTitle"
      class="modalWarns"
      style="width: 600px"
    >
      <WarnDetail ref="bjDetails" :warnDetailData="warnDetailData" @update:refeshData="getGdbjData" />
    </n-modal>

    <!-- 社会工程网 工艺图链接查看 -->
    <n-modal
      title="工艺图详情"
      :mask-closable="false"
      preset="dialog"
      :show-icon="false"
      :style="{ width: '1900px' }"
      v-model:show="modalShowGy"
    >
      <iframe :src="iframeUrl" frameborder="0" style="width: 1850px; height: 770px"></iframe>
    </n-modal>
  </div>
</template>
<script>
import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
import MapBox from './newPart/Mapbox.vue';
import OnePart from './newPart/natureNet.vue'; //全域感知
import TwoPart from './newPart/sheHuiNet.vue'; //规划引领
import ThreePart from './newPart/liuYuInfo.vue'; //流域信息感知网
import FourPart from './newPart/liuYuWater.vue'; //长效治理
import Legend from './newPart/legend.vue'; //图例
import { lyInfoReminder } from '@/services';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import WarnDetail from './newPart/warnDetail.vue'; //报警详情弹窗
import bus from '@/utils/util';
import { formatDate } from '@/utils/util';

export default {
  name: 'newOneMap',
  components: {
    MapBox,
    OnePart,
    TwoPart,
    ThreePart,
    FourPart,
    Vue3SeamlessScroll,
    WarnDetail,
    Legend,
  },
  setup() {
    const allData = reactive({
      showOther: false,
      otherIframeUrl: '',
      isPipelineflowShow: false,
      iframeUrl: '',
      modalShowGy: false,
      warnDetailData: {},
      ifQixiang: true,
      ifStationWarn: false,
      showWarnDetail: false,
      modalTitle: '',
      percentage: 0,
      dateNumber: 0,
      timer: null,
      ifPlay: false,
      currentVal: '全域感知',
      datearry: [],
      dateTime: [],
      dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
      navArr: [
        { value: '2', label: '规划引领' },
        { value: '1', label: '全域感知' },
        { value: '3', label: '长效治理' },
      ],
      speedValue: 500,
      yubaoOption: [
        { value: 500, label: '2倍速' },
        { value: 250, label: '4倍速' },
        { value: 160, label: '6倍速' },
      ],
      timeRange: [Date.now() - 24 * 30 * 60 * 60 * 1000, Date.now()],
      listData: [],
    });

    const boxMap = ref(null);
    // 底部菜单点击切换
    const changeNav = (val) => {
      allData.currentVal = val;
      if (val == '孪生流域') {
        allData.showOther = true;
      } else {
        allData.showOther = false;
      }
      if (val != '全域感知') {
        clearTimer();
        mapbox.setLayerVisible(['marker_kriging', 'kriging'], false);
        allData.ifQixiang = false;
        // 暂停,清除图层
        //clearInterval(window.timerYuntu);
        mapbox.setLayerVisible(['marker_kriging', 'kriging'], false);
      }
    };
    // 播放进度选择
    function changeSpeed(val) {
      allData.speedValue = val;
      searchWeather();
    }
    // 搜索播放云图数据 initKriging(0,'nowRainResult','2022-07-02')
    const searchWeather = async () => {
      allData.ifPlay = true;
      clearTimer();
      allData.percentage = 0;
      allData.dateNumber = 0;
      console.log(allData.timeRange[0]);
      let startTime = formatDate(allData.timeRange[0], 'YYYY-MM-DD') + ' 00:00:00';
      let endTime = formatDate(allData.timeRange[1], 'YYYY-MM-DD') + ' 23:59:59';
      boxMap.value.getAllRainValueRequest(startTime, endTime).then(() => {
        allData.dateTime = Object.values(allData.datearry);
        let DateStept = 100 / allData.dateTime.length;
        allData.timer = setInterval(() => {
          allData.dateLine = allData.dateTime[allData.dateNumber];
          boxMap.value.initKriging(allData.dateNumber);
          allData.percentage += DateStept;
          allData.dateNumber += 1;
          if (allData.dateNumber > window.rainstationlen) {
            allData.percentage = 0;
            allData.dateNumber = 0;
          }
        }, allData.speedValue);
      });
    };
    // 点击播放暂停云图
    const goPlay = () => {
      allData.ifPlay = !allData.ifPlay;
      if (allData.ifPlay) {
        console.log('播放');
        // 播放
        searchWeather();
        setTimeout(() => {
          mapbox._map.setLayoutProperty('kriging_layer', 'visibility', '  ');
          mapbox.setLayerVisible(['marker_kriging', 'kriging'], true);
        }, 500);
      } else {
        clearTimer();
        // 暂停,清除图层
        mapbox.setLayerVisible(['marker_kriging', 'kriging'], false);
        console.log('暂停');
      }
    };
    // 清除定时器
    const clearTimer = () => {
      clearInterval(allData.timer);
      allData.timer = null;
    };

    // 查看报警详情弹窗
    const bjDetails = ref(null);
    const checkDetail = async (item) => {
      allData.showWarnDetail = true;
      allData.warnDetailData = item;
      console.log('报警详情isWorkOrder---', item.isWorkOrder);
      allData.modalTitle = item.siteName + item.factorsName + '异常详情';
      nextTick(() => {
        bjDetails.value.showModal = true;
        bjDetails.value.isWorkOrder = item.isWorkOrder;
        bjDetails.value.getHistoryData();
      });
    };
    // 获取工单报警数据-跑马灯
    async function getGdbjData() {
      let params = {
        current: 1,
        size: 100,
      };
      let res = await lyInfoReminder(params);
      if (res && res.code == 1) {
        allData.listData = res.data.list;
      }
    }
    // 根据第三方值判断是否有孪生流域,临时添加
    function getFooterList() {
      let urls = localStorage.getItem('HJH_IFRAME_SRC');
      if (urls) {
        allData.navArr.push({ value: '4', label: '孪生流域' });
        allData.otherIframeUrl = urls;
      }
    }

    onMounted(() => {
      getFooterList();
      // 设置视频监控默认显示的code
      localStorage.setItem('defaultVideoCode', 'edaea623e40f45df8b1f3676aa283a79');
      bus.on('datelist', (e) => {
        allData.datearry = e;
      });
      // 控制播放雨量图例显示
      bus.on('ifQixiang', (e) => {
        if (e) {
          allData.ifQixiang = true;
        } else {
          allData.ifQixiang = false;
        }
      });
      // 水质监测、临测水位流量报警信息显示
      bus.on('ifStationWarn', (e) => {
        if (e) {
          allData.ifStationWarn = true;
          getGdbjData();
        } else {
          allData.ifStationWarn = false;
        }
      });
      // 工艺图弹窗展示
      bus.on('getGongYt', (e) => {
        allData.iframeUrl = e;
        allData.modalShowGy = true;
      });
    });
    onBeforeUnmount(() => {
      clearTimer();
      bus.off('getGongYt');
      bus.off('ifQixiang');
      bus.off('ifStationWarn');
      bus.off('datelist');
      if (mapbox._map.getLayer('kriging_layer')) {
        mapbox._map.removeLayer('kriging_layer');
        mapbox._map.removeLayer('marker_kriging_layer');
        mapbox._map.removeSource('kriging_source');
        mapbox._map.removeSource('marker_kriging_source');
      }
    });
    return {
      ...toRefs(allData),
      changeNav,
      goPlay,
      searchWeather,
      changeSpeed,
      boxMap,
      clearTimer,
      checkDetail,
      getGdbjData,
      bjDetails,
    };
  },
};
</script>
<style lang="less">
#newOneMap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .Pipelineflow {
    position: absolute;
    left: 100px;
    bottom: 10px;
    z-index: 999;
    cursor: pointer;
    color: #fff;
    background: #15caf7;
  }
  .lyInfoWarn {
    position: absolute;
    top: 30px;
    left: 30%;
    z-index: 10;
    width: 682px;
    height: 49px;
    background: url('@/assets/newImgs/warnBg.png') no-repeat center;
    .scroll {
      width: 100%;
      height: 49px;
      overflow: hidden;
      padding: 0px 30px;
      .item {
        height: 49px;
        line-height: 49px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        color: #f9feff;
        cursor: pointer;
      }
    }
  }

  .cloudPic {
    width: 100%;
    height: 70px;
    position: absolute;
    left: 20px;
    top: 10px;
    display: flex;
    align-items: center;
    .color {
      width: 324px;
      height: 70px;
      background: url('@/assets/newImgs/color.png') no-repeat center;
    }
    .progress {
      width: 850px;
      display: flex;
      align-items: center;
      margin-top: 20px;
      .n-progress.n-progress--line {
        flex: 1;
      }
      .n-base-selection-label,
      .n-input {
        background: #071322;
      }
      .currentTime {
        border: 1px solid #63e2b7;
        border-radius: 6px;
        color: #01cac0;
        width: 110px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-left: 10px;
      }
      .time {
        background: #071322;
        color: #fff;
        padding: 4px 6px;
        font-size: 14px;
        border-radius: 20px;
        margin: 0 10px;
      }
      .cast {
        width: 32px;
        height: 22px;
        cursor: pointer;
        margin-right: 10px;
      }
      .end {
        background: url('@/assets/newImgs/timeEnd.png');
        background-size: 100% 100%;
      }
      .start {
        background: url('@/assets/newImgs/timeStart.png');
        background-size: 100% 100%;
      }
    }
    .leida {
      border: 1px solid #14ccca;
      border-radius: 10px;
      opacity: 0.8;
      margin-left: 20px;
    }
  }
  .mainFooter {
    height: 67px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background: url('@/assets/newImgs/navBg.png') no-repeat center;
    background-size: 100% 100%;
    .tabsNav {
      margin-top: 20px;
      margin-left: 40%;
      .n-tabs-wrapper {
        .n-tabs-tab-wrapper {
          margin-right: 50px;
        }
        .n-tabs-tab {
          font-size: 16px;
          opacity: 0.3;
        }
        .n-tabs-tab:hover {
          color: #fff;
          opacity: 0.8;
        }
        .n-tabs-tab--active {
          color: #fff !important;
          opacity: 1;
        }
      }
      .n-tabs-bar {
        background: url('@/assets/newImgs/navSelected.png') no-repeat center !important;
        height: 16px;
        margin-right: 50px;
      }
    }
  }
  .otherFrame {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9990;
    background: #071322;
    iframe {
      width: 100%;
      height: 100%;
    }
  }
}
.mapboxgl-ctrl.mapboxgl-ctrl-scale {
  height: 10px;
  background-color: transparent;
  line-height: 10%;
  text-align: center;
  color: aliceblue;
  font-size: 15px;
  border-color: white white white;
  position: absolute;
  left: 10px;
  bottom: 5px;
}
</style>