<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: "59.2",
    link: "/DrainageSystem",
  },
  {
    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) => {
  console.log("itemitemitem2", 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);
  localStorage.setItem("WB_Brad_in_Link", item.link);
  console.log("item.link", item.link);
  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 = () => {
  localStorage.setItem("WB_Brad_in_actived", 2);
  let herf = `${window.location.origin}/MonitoringAssets/MonitorAssetsOnMap#/portalPage`;
  window.open(herf, "_self");
};
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") || 2;
  // lastActived.value = 2;
  let item = {
    link: localStorage.getItem("WB_Brad_in_Link") || "/WaterAssets",
    value: localStorage.getItem("WB_Brad_in_actived") || 2,
  };
  TabClick(item);
  updateTime();
  // weatherForecast()
});
const interval = setInterval(updateTime, 1000); // 每秒更新一次时间
// 清理定时器，防止内存泄漏
onUnmounted(() => {
  clearInterval(interval);
  localStorage.setItem("WB_Brad_in_actived", 2);
});
</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>