<template>
  <div class="avue-top">
    <div class="top-bar__title">
      <div id="top-TextLog2"
           v-if="!appStore.isHome">
        <div class="top-left-title"
             :text="titlelist.titlename">
          {{ titlelist.titlename }}
        </div>
        <div class="top-center">
          <div :class="[
              'top-center-word',
              appStore.TitleIndex == item.value ? 'active' : '',
            ]"
               v-for="item in titlelist.data"
               :key="item.value"
               @click="changetitle(item.value, item.name)">
            <span>{{ item.name }}</span>
            <div :class="[appStore.TitleIndex == item.value ? 'line-color' : '']"></div>
          </div>
        </div>
      </div>

      <div id="top-TextLog"
           v-if="appStore.isHome"
           text="周口市溢流污染控制系统"></div>
    </div>

    <div class="top-bar__right right-left"
         v-show="appStore.isHome">
      <div :class="['top-bar__item', 'top-bar__item--show']">
        <div class="top-weather-box"
             style="width:auto">
          <!-- <img class="top-bar__down"
               :src="getImageUrl(allData.weatherdata.code||'02', 'siping-fangxun/day')" /> -->
          <img class="wenduclass"
               :src="getImageUrl('wendu', 'cockpit')" />
          <div class="wendu-size">{{allData.weatherdata.temp}}</div>
        </div>

        <div class="top-bar-line-left"></div>

        <div class="time_box">
          <div class="top-bar-time year-time center">
            {{ allData.time4 }}
          </div>
          <div class="top-bar-time left-time-clock">{{ allData.time2 }}{{ allData.time3 }}</div>
        </div>

        <!-- <div class="top-bar-line"></div> -->
      </div>
    </div>

    <div class="top-bar__right">
      <!-- 天气显示 -->
      <div :class="['top-bar__item', 'top-bar__item--show']"
           v-if="!appStore.isHome">
        <div class="time_box">
          <div class="top-bar-time">{{ allData.time2 }}{{ allData.time3 }}</div>
          <div class="top-bar-time year-time">
            {{ allData.time1 }}
          </div>
        </div>

        <div class="top-bar-line"></div>

        <div class="top-weather-box">
          <img class="top-bar__down"
               :src="getImageUrl(allData.weatherdata.code||'02', 'siping-fangxun/day')" />
          <div class="weater-box">
            <div class="weather-item">{{allData.weatherdata.text}}</div>
            <div class="weather-item">{{allData.weatherdata.temp}}</div>
          </div>
        </div>
      </div>

      <!-- APP显示 -->
      <!-- <div class="top-bar__item top-bar__item--show"
           v-if="appStore.isHome">
        <img class="top-bar__down"
             src="@/assets/images/siping-home/icon app.png" />
        <div>APP下载</div>
      </div> -->

      <!-- <el-tooltip v-if="showTheme&&titlelist.titlename=='综合管理信息系统'&&!appStore.isHome"
                  effect="dark"
                  :content="$t('navbar.theme')"
                  placement="bottom">
        <div class="top-bar__item top-bar__item--show theme-icon">
          <top-theme>
          </top-theme>
        </div>
      </el-tooltip> -->

      <!-- <div @click="showmodal=true">测试按钮</div> -->

      <!-- <div class="top-bar__item top-bar__item--show">
        <img :src="xfgd">
      </div> -->

      <!-- 天气预警 -->
      <div class="top-bar__item top-bar__item--show"
           @click="openshade"
           v-if="!appStore.isHome && allData.warnMessage.desc">
        <!-- <div class="top-bar__item top-bar__item--show"
           @click="openshade"> -->
        <!-- <img class="top-bar-warn-icon wann-top"
             src="@/assets/images/siping-home/icon.png" /> -->
      </div>

      <!-- 下拉菜单 用户姓名 -->
      <div class="top-bar__item top-bar__item--show rightmaring">

        <img class="top-bar__down radius"
             :src="appStore.avatar" />

        <div class="top-color2">{{ appStore.name }}</div>

        <img class="top-bar__down pic-size"
             @click="btn('system')"
             :src="getImageUrl('system', 'cockpit')" />

        <img class="top-bar__down pic-size"
             @click="btn('esc')"
             :src="getImageUrl('esc', 'cockpit')" />
      </div>

      <!-- 下拉菜单 用户姓名 -->
      <!-- <div class="top-bar__item top-bar__item--show rightmaring">
        <el-dropdown>
          <span class="el-dropdown-link">
            <img class="top-bar__img"
                 src="@/assets/images/cockpit/user.png" />

            <img class="top-avatar2"
                 :src="appStore.avatar" />

            <span class="top-color">{{ appStore.name }}</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <router-link to="/wel">
                <el-dropdown-item>首页</el-dropdown-item>
              </router-link>

              <router-link to="/">
                <el-dropdown-item>系统菜单</el-dropdown-item>
              </router-link>

              <router-link to="/user/profile">
                <el-dropdown-item>个人中心</el-dropdown-item>
              </router-link>

            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div> -->

      <!-- 回到主菜单 -->
      <!-- <div class="top-bar__item top-bar__item--show"
           @click="gomenu"
           v-if="!appStore.isHome">
        <img class="top-bar-warn-icon wann-top"
             src="@/assets/images/siping-home/icon_home.png" />
      </div> -->
    </div>

    <div class="leftclick"
         title="点击回到首页"
         @click="router.push({ path: '/wel/index' });">
    </div>
  </div>
</template>
<script setup>
import { getImageUrl } from "@/utils/ruoyi";

import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment";

import useUserStore from "@/store/modules/user";
const appStore = useUserStore();

import { ElMessageBox } from 'element-plus'


// import { resetRouter } from "@/router/router";
// import { mapGetters, mapState } from "vuex";
// import { fullscreenToggel, listenfullscreen } from "@/util/util";
// import topLock from "./top-lock";
// import topMenu from "./top-menu";/
// import topHorizontalMenu from "./top-horizontal-menu";
// import topSearch from "./top-search";
// import topTheme from "./top-theme";
// import topLogs from "./top-logs";
// import topColor from "./top-color";
// import topNotice from "./top-notice";
// import topLang from "./top-lang";
// import logo from "../logo";
// import horizontalSidebar from "@/page/index/horizontalSidebar/";
// import RongYunPage from '@/page/rongyun/index'  //融云子组件
// import threeJSdial from "@/components/ThreeJs/threeJSdial.vue";
// import store from "@/store";

import {
  getweather,
  GetSecondMenu
} from "@/api/cockpit";

const allData = reactive({
  weatherdata: '',

  // TitleIndex: 1,
  // appStore.isHome: true,
  // rongyuntype: false,
  // GetFXphone: '',
  // ToName: '',
  // ToSrc: '',
  // RYtype: 'initiative',  //控制判断是主动initiative打开 还是被动passivity呼叫打开

  showmodal: false,
  gosidebar: 0,

  warnMessage: {},
  timeval: null,
  time1: "",
  time4: "",
  time2: "",
  time3: "",
  userInfo: {},
  xfgd: getImageUrl("company", "home"),

  jsc: [
    { name: "驾驶舱", value: 1 },
    { name: "溢流事件", value: 2 },
    { name: "视频监控", value: 3 },
    { name: "数据资产", value: 8 },
  ],

  ws: [
    { name: "管网一张图", value: 1 },
    { name: "管网巡查", value: 2 },
    // { name: '污水处理厂', value: 4 },
    { name: "数据资产", value: 8 },
  ],

  psh: [
    { name: "一张图", value: 1 },
    { name: "数据资产", value: 8 },
  ],


  psss: [
    { name: "首页", value: 1 },
    // { name: "数据管理", value: 2 },
    { name: "数据资产", value: 8 },
  ],

  showname: "",
  type1: false, //报警弹框
  fullloading: null, //全屏遮罩
  isShowSelet: false, //判断是否展示下拉
  isfangxun: false, //判断是否是防汛
  firstClike: 1,

  isShowneilaoSelet: false, //判断是否展示下拉(内涝风险图)
  isneilao: false, //判断是否是内涝风险图
  selectFX: "",

  today: {},
  wendu: "",
  tianqiurl: "02",
  tianqiWord: '',
  selectid: "",
});
let titlelist = ref({
  titlename: "xxx",
  data: {},
});

function GettopMenu () {
  GetSecondMenu().then(res => {
    console.log('GettopMenu', res.data);

    res.data.map(item => {
      item.children.map(item2 => {
        item2.name = item2.menuName
        item2.value = item2.orderNum
      })
    })

    res.data.map(item => {
      if (item.path == 'one') {
        allData.jsc = item.children
      }

      if (item.path == 'two') {
        allData.ws = item.children
      }

      if (item.path == 'three') {
        allData.psss = item.children
      }

      if (item.path == 'four') {
        allData.psh = item.children
      }
    })
  })
}


onMounted(() => {
  console.log(appStore.isHome, "isHome");
  GettopMenu()

  // this.bus.$on('ShowThree', data => {
  //   this.showmodal = true
  // })
  // // this.bus.$on('closeFX', data => {
  // //   this.rongyuntype = false
  // // })

  // // this.bus.$on('openrongyuntype', data => {
  // //   this.RYtype = 'passivity'
  // //   this.rongyuntype = true
  // // })

  // // this.bus.$on('GetFXphone', data => {
  // //   console.log(data);
  // //   this.RYtype = 'initiative'
  // //   this.GetFXphone = data.phone
  // //   this.ToName = data.name
  // //   this.ToSrc = data.src
  // //   // this.getmediaType = Number(data.mediaType)

  // //   this.$nextTick(() => {
  // //     this.chaxunstatus()
  // //   })

  // // })

  weatherForecast()

  console.log("router", router.currentRoute.value.path);

  var lastpath = window.localStorage.getItem("lastpath");
  var nowpath = router.currentRoute.value.path;

  if (nowpath == "/synthesize") {
    // useUserStore().SET_Top_TitleIndex(8);

    allData.gosidebar = 1;
    window.localStorage.setItem("gosidebar", 1);
  }

  if (nowpath == "/system" || nowpath == "/wel/index") {
    useUserStore().SET_Top_TitleIndex(1);

    allData.gosidebar = 0;
    window.localStorage.setItem("gosidebar", 0);
  }

  allData.gosidebar = Number(window.localStorage.getItem("gosidebar"));

  console.log("$route", nowpath, lastpath, allData.gosidebar);

  var a = {
    titlename: "",
    data: {},
  };

  // if (nowpath == "/cockpit") {
  //   // a.titlename = '综合管理一张图'
  //   // a.data = allData.jsc;
  // } else 

  if (
    nowpath == "/cockpit" ||
    (allData.gosidebar && lastpath == "/cockpit")
  ) {
    // a.titlename = "综合管理一张图";
    a.data = allData.jsc;
    window.localStorage.setItem('lastpath', '/cockpit')

  } else if (
    nowpath == "/riverOneMap" ||
    (allData.gosidebar && lastpath == "/riverOneMap")
  ) {
    // a.titlename = "排水管网管理";
    a.data = allData.ws;
    window.localStorage.setItem('lastpath', '/riverOneMap')

  } else if (
    nowpath == "/drainingOneMap" ||
    (allData.gosidebar && lastpath == "/drainingOneMap")
  ) {
    // a.titlename = "排水户管理";
    a.data = allData.psh;
    window.localStorage.setItem('lastpath', '/drainingOneMap')

  } else if (
    nowpath == "/drainagefacility" ||
    (allData.gosidebar && lastpath == "/drainagefacility")
  ) {
    // a.titlename = "排水设施";
    a.data = allData.psss;
    window.localStorage.setItem('lastpath', '/drainagefacility')
  }

  useUserStore().SET_Top_iscockpit(false);

  if (nowpath == "/fxkhPage/index") {
    useUserStore().SET_Top_iscockpit(true);
  }
  titlelist.value = a;

  // listenfullscreen(allData.setScreen);
  allData.time1 = moment().format("YYYY.MM.DD");
  allData.time4 = moment().format("YYYY/MM/DD");

  allData.timeval = setInterval(() => {
    allData.time2 = moment().format("HH:mm");
    allData.time3 = moment().format(":ss");
  }, 0);

  console.log("allData.titlelist", titlelist.value);
  allData.firstClike = 1;
});
// beforeDestroy(() => {
//   clearInterval(this.timeval)
//   this.timeval = null
// });
// watch([allData.type1, router.currentRoute.value, allData.isfangxun, allData.isneilao], () => onRadioChange())

watch(
  () => router.currentRoute.value,
  (newValue) => {
    console.log("routerrouter", newValue.path);

    var lastpath = window.localStorage.getItem("lastpath");
    var nowpath = newValue.path;

    if (nowpath == "/synthesize") {
      // useUserStore().SET_Top_TitleIndex(8);

      allData.gosidebar = 1;
      window.localStorage.setItem("gosidebar", 1);
    }

    if (nowpath == "/system" || nowpath == "/wel/index") {
      useUserStore().SET_Top_TitleIndex("1");

      allData.gosidebar = 0;
      window.localStorage.setItem("gosidebar", 0);
    }

    var a = {
      titlename: "",
      data: {},
    };
    useUserStore().SET_Top_iscockpit(false);
    var a = {
      titlename: "",
      data: {},
    };

    console.log(nowpath, "nowpath");

    window.localStorage.setItem('sidernowpath', nowpath)
    if (nowpath == "/cockpit" ||
      (allData.gosidebar && lastpath == "/cockpit")
    ) {
      // a.titlename = "综合管理一张图";
      a.data = allData.jsc;
      window.localStorage.setItem('lastpath', '/cockpit')

    } else if (
      nowpath == "/riverOneMap" ||
      (allData.gosidebar && lastpath == "/riverOneMap")
    ) {
      // a.titlename = "排水管网管理";
      a.data = allData.ws;
      window.localStorage.setItem('lastpath', '/riverOneMap')

    } else if (
      nowpath == "/drainingOneMap" ||
      (allData.gosidebar && lastpath == "/drainingOneMap")
    ) {
      // a.titlename = "排水户管理";
      a.data = allData.psh;
      window.localStorage.setItem('lastpath', '/drainingOneMap')

    } else if (
      nowpath == "/drainagefacility" ||
      (allData.gosidebar && lastpath == "/drainagefacility")
    ) {
      // a.titlename = "排水设施";
      a.data = allData.psss;
      window.localStorage.setItem('lastpath', '/drainagefacility')
    }


    if (nowpath == "/fxkhPage/index") {
      useUserStore().SET_Top_iscockpit(true);
    }

    titlelist.value = a;
    if (nowpath == lastpath) {
      // useUserStore().SET_Top_TitleIndex(1);
    }
  },
  { immediate: true }
);

// function onRadioChange () {
//   if (!type1) {
//     this.fullloading && this.fullloading.close()
//   }

//   if (allData.isfangxun) {
//     this.GetHistory()
//   }

//   if (allData.isneilao) {
//     this.GetHistory()
//   }

// };
function btn (value) {
  switch (value) {
    case "wel":
      router.push({
        path: '/wel/index',
      });
      break

    case "esc":
      logout();
      break

    case "system":
      router.push({
        path: '/',
      });
      break
  }
}

function logout () {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    appStore.logOut().then(() => {
      location.href = '/index';
    })
  }).catch(() => { });
}


function openMenu () {
  var item = JSON.parse(localStorage.getItem("systemMenu"));
  var index = 6;
  console.log(item, item);
  //头部导航菜单
  let topMenu = item.children && item.children.length > 0 ? item.children : [];

  useUserStore().SET_TOPMENU(topMenu);

  if (topMenu.length > 0) {
    useUserStore().SET_ISHOME(false);
    console.log("ishome");
  } else {
    proxy.$modal.msgWarning(`当前系统暂未配置菜单`);
  }

  let childmenu =
    item.children && item.children.length > 0 ? item.children : [];
  let isMenu = childmenu && childmenu.length > 0 ? true : false;

  console.log("isMenu", isMenu);

  if (item.path == "/base") {
    isMenu = false;
  }

  useUserStore().SET_ACTIVE_INDEX(index);
  useUserStore().SET_IS_MENU(isMenu);
  useUserStore().SET_CHILDMENU(childmenu);

  router.push({
    path: childmenu[0].path,
  });
}

// chaxunstatus () {
//   if (this.GetFXphone) {
//     this.rongyuntype = true
//   } else {
//     this.$message({
//       type: 'error',
//       message: '无电话号码！',
//     });
//   }

//   // let prams = {
//   //   phone: this.GetFXphone
//   // }

//   // getUserStatus(prams).then(res => {
//   //   if (res.data.code == 200) {
//   //     console.log(res.data.data);

//   //     let data = JSON.parse(res.data.data)

//   //     console.log(data);

//   //     if (data.status == 1) {
//   //       this.rongyuntype = true
//   //     } else {
//   //       this.rongyuntype = true
//   //     }
//   //   }
//   // })
// },

// 应急指挥中获取一周天气预报接口
function weatherForecast () {
  let type = 7
  let time = moment().format("YYYY-MM-DD")
  getweather(type, time).then((res) => {
    console.log("weatherForecast", res);
    if (res.code == 200 && res.data.length) {
      // console.log(res.data[0].weatherResult);

      // let json = JSON.parse(res.data[0].weatherResult)
      // console.log(json.result.daily_fcsts[0]);

      // let result = json.result.daily_fcsts[0]

      // allData.wendu = result.low + "~" + result.high + "℃";
      // let Hours = new Date().getHours();
      // allData.tianqiurl = Hours <= 17 ? result.code_day : result.code_night;
      // allData.tianqiWord = Hours <= 17 ? result.text_day : result.text_night;


      // result.wendu = allData.wendu
      // result.tianqiurl = allData.tianqiurl
      // result.tianqiWord = allData.tianqiWord
      // result.fengli = Hours <= 17 ? `${result.wd_day}${result.wc_day}` : `${result.wd_night}${result.wc_night}`;



      allData.weatherdata = JSON.parse(res.data[0].weatherResult).result.realtime
      console.log(allData.weatherdata.code);
      let Hours = new Date().getHours();
      let name = Hours <= 17 ? 'day' : 'night'
      let code = allData.weatherdata.code
      allData.weatherdata.codeurl = `/static/images/weather/${name}/${code}.png`

      console.log('allData.weatherdata', allData.weatherdata);

      localStorage.setItem("weather", JSON.stringify(allData.weatherdata));


      // this.today = res.data[0];

    }
  });
}

// 关闭弹框
function closebg () {
  this.type1 = false;
}

// 改变汛后总结下拉框选中的样式
function changeitem (item2) {
  useUserStore().SET_Top_XunHounNb(item2);

  this.selectid = item2.id;
  this.showname = item2.name;
}


// 返回菜单页
function gomenu () {
  router.push({
    path: "/wel/index",
  });
  useUserStore().SET_Top_TitleIndex(1);
}

// 改变头部标题的索引 对应控制内部组件的显隐
function changetitle (TitleIndex, name) {
  console.log('try', TitleIndex, name);


  useUserStore().SET_Top_TitleIndex(TitleIndex);

  var lastpath = window.localStorage.getItem("lastpath");
  console.log('lastpath', lastpath);
  if (lastpath) {
    router.push({
      path: lastpath,
    });
  }

  // if (name == "汛后总结") {
  //   allData.isfangxun = true;
  // } else {
  //   allData.isfangxun = false;
  // }

  // if (TitleIndex == appStore.TitleIndex && TitleIndex == 3) {
  //   allData.isShowSelet = !allData.isShowSelet;
  // } else {
  //   allData.isShowSelet = false;
  // }

  // if (name == "内涝风险图") {
  //   allData.isneilao = true;
  // } else {
  //   allData.isneilao = false;
  // }

  // if (TitleIndex == appStore.TitleIndex && TitleIndex == 5) {
  //   allData.isShowneilaoSelet = !allData.isShowneilaoSelet;
  // } else {
  //   allData.isShowneilaoSelet = false;
  // }

  if (name == "数据资产") {
    router.push({
      path: "/synthesize",
    });
    useUserStore().SET_Top_TitleIndex(8);
    allData.gosidebar = true;
  }
}

function handleScreen () {
  fullscreenToggel();
}
function setCollapse () {
  useUserStore().SET_COLLAPSE();
}
function setScreen () {
  useUserStore().SET_FULLSCREN();
}


</script>

<style lang="scss" scoped>
// @import "@/styles/floodControlDrainage.scss";

.full-shade {
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.8);
}

.leftclick {
  position: absolute;
  cursor: pointer;
  height: 100%;
  width: 500px;
  top: 0;
  left: 0;
}
</style>