<template>
  <!-- 智慧水务大脑   头部tab -->
  <div class="TopTab">
    <div class="headBox">
      <div class="logoText">智慧水务大脑</div>
      <div class="leftBox">
        <div class="timeText">
          <div class="weekText">{{ currentWeek }}</div>
          <div class="time">{{ time }}</div>
        </div>
        <div class="leftTab">
          <div
            class="eachLink"
            :class="activeName == item.value ? 'activeTab' : ''"
            v-for="item in leftMenuArr"
            :key="item.value"
            :style="{ right: item.posSum + '%' }"
            @click="TabClick(item)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="rightBox">
        <div class="rightTab">
          <div
            class="eachLink"
            :class="activeName == item.value ? 'activeTab' : ''"
            v-for="item in rightMenuArr"
            :key="item.value"
            :style="{ right: item.posSum + '%' }"
            @click="TabClick(item)"
          >
            {{ item.label }}
          </div>
        </div>
        <div class="RongYun_icon" @click="dialogShow = !dialogShow"></div>
        <div class="linkicon" @click="Tojiance"></div>

        <!-- <div class="weatherBox">
          <img class="weatherImg" :src="getImageUrl(weatherdata?.code || '02', 'pictureOnMap/weather/day')" />
          <div class="weatherText">
            <div class="weatherCase">{{weatherdata?.text}}</div>
            <div class="temperature">{{weatherdata?.low}}℃ <span>~</span> {{weatherdata?.high}}℃</div>
          </div>
        </div> -->
      </div>
    </div>

    <ModelRongYun :RYdialogShow="dialogShow" @OneDialogHide="dialogHide"></ModelRongYun>

    <!-- <div v-show="activeName == 2" class="headBoxTwo">
      <div class="centerbox" @click="BackHouse"></div>
    </div> -->
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import moment from 'moment';
import { getImageUrl } from '@/utils/ruoyi';
import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用

import { getweather } from '@/api/MonitorAssetsOnMap';
import { useRouter } from 'vue-router';
const router = useRouter();
import bus from '@/bus';
const { proxy } = getCurrentInstance();
const weatherdata = ref('');

const activeName = ref('2');
const lastActived = ref(2);

const leftMenuArr = ref([
  // {
  //   label: '防洪安全',
  //   value: '1',
  //   posSum: '53.5',
  //   link: '/FloodControlSafety',
  // },
  {
    label: '水资产',
    value: '2',
    posSum: '28.6',
    link: '/WaterAssets',
  },
  {
    label: '排水体系',
    value: '3',
    posSum: '-2',
    link: '/MonitoringAnalysis',
  },
]);
const rightMenuArr = ref([
  {
    label: '水安全',
    value: '4',
    posSum: '24.2',
    link: '/FloodControlAndDrainage',
  },
  {
    label: '水政务',
    value: '5',
    posSum: '16.9',
    link: '/PublicOpinionAnalysis',
  },
  // {
  //   label: '河湖生态',
  //   value: '6',
  //   posSum: '10.9',
  //   link: '/RiverAndLakeEcology',
  // },
]);
const TabClick = item => {
  newfiberMap.map.easeTo(newfiberMap.config_.params.init);
  bus.emit('clearTemporaryData');
  if (item.link == '/WaterAssets') {
    lastActived.value = activeName.value;
  }
  if (item.link != '/PublicOpinionAnalysis') {
    bus.emit('YQ_head', true);
  }
  activeName.value = item.value;
  localStorage.setItem('WB_Brad_in_actived', activeName.value);
  router.push({
    path: item.link,
  });
};

const BackHouse = () => {
  if (lastActived.value == 2) {
    activeName.value = leftMenuArr.value[1].value;
    router.push({
      path: leftMenuArr.value[1].link,
    });
  } else {
    router.go(-1);
    activeName.value = lastActived.value;
  }

  localStorage.setItem('WB_Brad_in_actived', activeName.value);
};
const time = ref('');
// 更新当前时间
const updateTime = () => {
  const now = new Date();
  time.value = now.toLocaleTimeString(); // 格式为hh:mm:ss
};
const currentWeek = computed(() => {
  const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  return days[new Date().getDay()];
});

const Tojiance = () => {};
function weatherForecast() {
  let type = 4;
  let time = moment().format('YYYY-MM-DD');
  getweather(type, time).then(res => {
    console.log('weatherForecast', res);
    if (res.code == 200 && res.data.length) {
      weatherdata.value = res.data[0].weatherResultVO.dailyFcsts[0];
      let Hours = new Date().getHours();
      let name = Hours <= 17 ? 'day' : 'night';
      let code = Hours <= 17 ? weatherdata.value.code_day : weatherdata.value.code_night;
      weatherdata.value.codeurl = `/static/images/weather/${name}/${code}.png`;

      console.log('allData.weatherdata', weatherdata.value);
      localStorage.setItem('weather', JSON.stringify(weatherdata.value));
    }
  });
}
const dialogShow = ref(false);

const dialogHide = val => {
  if (!val) {
    dialogShow.value = false;
  }
};

onBeforeUnmount(() => {
  bus.off('changeHeadePath');
});

onMounted(() => {
  bus.on('changeHeadePath', e => {
    let newarr = [...leftMenuArr.value, ...rightMenuArr.value];
    let Getitem = newarr.filter(item => {
      return item.link == e;
    })[0];
    if (Getitem) {
      console.log(Getitem);
      TabClick(Getitem);
    }
  });

  activeName.value = localStorage.getItem('WB_Brad_in_actived');
  lastActived.value = 2;
  updateTime();
  // weatherForecast()
});
const interval = setInterval(updateTime, 1000); // 每秒更新一次时间
// 清理定时器，防止内存泄漏
onUnmounted(() => {
  clearInterval(interval);
  localStorage.setItem('WB_Brad_in_actived', 1);
});
</script>
<style lang="scss" scoped>
.TopTab {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  .headBox {
    width: 100%;
    height: 90px;
    background: url('@/assets/images/pictureOnMap/topBgc.png') no-repeat center;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    .logoText {
      position: absolute;
      font-family: PangMenZhengDao;
      font-weight: 400;
      font-size: 46px;
      color: #ffffff;
      line-height: 1px;
      text-shadow: 0px 6px 3px #013660;
      background: linear-gradient(0deg, rgba(43, 156, 248, 0.83) 0%, rgba(232, 254, 255, 0.83) 100%);
      -webkit-background-clip: text;
      letter-spacing: 10px;
      // -webkit-text-fill-color: transparent;
      transform: translate(-50%, -50%);
      position: absolute;
      top: 40%;
      left: 50%;
    }
    .leftBox {
      display: flex;
      .timeText {
        height: 60px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        display: flex;
        padding-left: 29px;
        margin-top: 25px;
        .time {
          min-width: 80px;
        }
        .weekText {
          padding-right: 31px;
        }
      }
      .leftTab {
        width: 450px;
        height: 60px;
        display: flex;
        align-content: center;
        position: relative;
        .eachLink {
          width: 178px;
          height: 45px;
          line-height: 45px;
          text-align: center;
          font-family: PangMenZhengDao;
          font-weight: 400;
          font-size: 22px;
          color: #94ceff;
          text-shadow: 0px 6px 3px #021625;
          background: url('@/assets/images/pictureOnMap/topTabBgcL.png') no-repeat center;
          background-size: 100% 100%;
          position: absolute;
          top: 11px;
          cursor: pointer;
        }
        .activeTab {
          background: url('@/assets/images/pictureOnMap/activeTabL.png') no-repeat center;
          background-size: 100% 100%;
          color: #ffffff;
        }
      }
    }
    .rightBox {
      display: flex;
      .rightTab {
        width: 450px;
        height: 90px;
        display: flex;
        align-content: center;
      }
      .eachLink {
        width: 178px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-size: 22px;
        color: #94ceff;
        text-shadow: 0px 6px 3px #021625;
        background: url('@/assets/images/pictureOnMap/topTabBgcR.png') no-repeat center;
        background-size: 100% 100%;
        position: absolute;
        top: 13px;
        cursor: pointer;
      }
      .activeTab {
        background: url('@/assets/images/pictureOnMap/activeTabR.png') no-repeat center;
        background-size: 100% 100%;
        color: #ffffff;
      }
      .weatherBox {
        display: flex;
        margin-top: 18px;
        padding-right: 12px;
        .weatherImg {
          margin-top: 5px;
          width: 23px;
          height: 23px;
          // background: url('@/assets/images/pictureOnMap/weather/xiaoyu.png') no-repeat center;
          // background-size: 100% 100%;
          margin-right: 10px;
        }
        .weatherText {
          text-align: center;
          .weatherCase {
            font-family: AlibabaPuHuiTi;
            font-weight: 400;
            font-size: 13px;
            color: #bfdfff;
            text-shadow: 0px 1px 3px rgba(5, 12, 25, 0.54);
          }
          .temperature {
            font-family: PangMenZhengDao;
            font-weight: 400;
            font-size: 16px;
            color: #aecaf5;
            text-shadow: 0px 1px 3px rgba(5, 12, 25, 0.54);
            // background: linear-gradient(0deg, rgba(172,221,255,0.13) 0%, rgba(255,255,255,0.13) 100%);
            opacity: 0.9;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

  .headBoxTwo {
    position: relative;
    width: 100%;
    height: 90px;
    background: url('@/assets/images/shuiwuzichan/swzc-top-head.png') no-repeat center;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    justify-content: space-between;

    .centerbox {
      cursor: pointer;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      width: 36%;
      height: 100%;
      border-radius: 0 0px 40px 40px;
    }
  }

  .linkicon {
    margin-top: 23px;
    margin-right: 20px;
    cursor: pointer;
    width: 23px;
    height: 23px;
    background: url('@/assets/images/pictureOnMap/TOjiance.png') no-repeat;
    background-size: 100% 100%;
  }

  .RongYun_icon {
    margin-top: 23px;
    margin-right: 20px;
    cursor: pointer;
    width: 25px;
    height: 25px;
    background: url('@/assets/images/rongYunImg/RongYun_icon.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>

<style lang="scss">
@import '@/assets/styles/pictureOnMap.scss';
</style>