<!--
 * @Author: sjl
 * @Date: 2021-09-08 16:19:24
 * @Descripttion: 
-->
<template>
  <Popup class="popup" @changeBasinStatus="changeBasinStatus" v-show="basinStatus" />

  <div class="weather">
    <div class="temp">
      <!-- <div class="date">
        <i class="time">{{ dateTime }}</i>
      </div> -->
      <a-popconfirm
            title="你确定要修改更新数据库中的站点高程吗?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="updateSTHeight"
           
          >
          <img
                src="../../assets/images/flyto.png"
                style="position: absolute; right: 240px; top: -12px; height: 22px; width: 24px"
              
                alt=""
                title="更新站点高程"
              />
          </a-popconfirm>
      
      <img
        src="../../assets/images/reloading.png"
        style="position: absolute; right: 200px; top: -12px; height: 22px; width: 24px"
        @click="reload"
        alt=""
        title="刷新页面"
      />
      <!-- <span class="zcxt" @click="reload">刷新</span> -->
      <!-- <Dropdown>
        <img src="../../assets/images/flyto.png" style="position: absolute; right: 240px; top: -14px; width: 24px; height: 24px" alt="" />
        <template #overlay>
          <Menu>
            <MenuItem>
              <span @click="start">开始播放</span>
            </MenuItem>
            <MenuItem>
              <a style="color: #fff" @click="rotateEvents">{{ rotate ? '暂停' : '继续' }}</a></MenuItem
            >
            <MenuItem>
              <span @click="showPop">设置</span>
            </MenuItem>
          </Menu>
        </template>
      </Dropdown> -->
      <!-- <div class="btns"> </div> -->
      <img
        title="全屏显示"
        src="../../assets/images/fullscreen.png"
        @click="showFullScreen"
        style="position: absolute; right: 160px; margin-right: 0px; top: -14px; width: 24px; height: 24px"
        alt=""
      />
      <!-- <span class="zcxt" @click="showFullScreen">{{ screenState }}</span> -->
      <span class="zcxt" @click="baseAdmin">进入系统</span>
      <!-- <span class="zcxt" @click="baseAdmin">系统门户</span> -->
      <div class="user">
        <div>
          <img src="../../assets/images/user.png" alt="" @click="isPanelShow = !isPanelShow" />
          <div class="panel" @mouseover="isPanelShow = true" v-show="isPanelShow">
            <!-- <div>
              <b style="color: rgba(21, 254, 254, 1); line-height: 26px">{{ user }}</b></div
            > -->
            <!-- <div> <a href="javascript:;" style="color: #fff" @click="backToDoor">返回门户</a></div> -->
            <div> <a href="javascript:;" style="color: #fff" @click="outline">退出系统</a></div>
          </div>
        </div>

        <!-- <Dropdown>
          <img src="../../assets/images/user.png" alt="" />
        <template #overlay>
          <Menu >
            <MenuItem>
              <b  style="color: rgba(21, 254, 254, 1);line-height: 26px;">{{ user }}</b>
          </MenuItem>
          <MenuItem>
            <a href="javascript:;" style="color: #fff;" @click="backToDoor">返回门户</a>
          </MenuItem>
          <MenuItem >
            <a href="javascript:;" style="color: #fff;" @click="outline">退出系统</a>
          </MenuItem>
        
        </Menu>
        </template>
      
      </Dropdown> -->
        <!-- <span>张三</span> -->
      </div>
      <!-- <img class="sysout" @click="loginOut" src="../../assets/images/sysout.png" alt="" /> -->
    </div>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs, ref } from 'vue';
// import { Dropdown, Menu, MenuItem } from 'ant-design-vue';
import { Dropdown, Menu, Popconfirm,notification, Button } from 'ant-design-vue';
import { UserOutlined } from '@ant-design/icons-vue';
import moment from 'moment';
import { useUserStore } from '/@/store/modules/user';
import { getAppEnvConfig } from '/@/utils/env';
import screenfull from 'screenfull';
import { useRouter } from 'vue-router';
import eventBus from '/@/utils/eventBus';
import Popup from './Popup.vue';
export default defineComponent({
  name: 'Weather',
  components: { Dropdown, Menu, MenuItem: Menu.Item, 'a-icon': UserOutlined, Popup },
  setup() {
    const router = useRouter();
    const data = reactive({
      dateTime: null,
    });
    const user = ref('');
    const basinStatus = ref(false);
    const rotate = ref(true);
    const time = () => {
      data.dateTime = moment().format('HH:mm:ss');
    };
    const changeBasinStatus = (value) => {
      console.log('触发了关闭？', value);
      basinStatus.value = false;
    };
    const showPop = () => {
      console.log('点击设置？');
      basinStatus.value = !basinStatus.value;
    };
    const stop = () => {
      console.log('stop');
      eventBus.emit('stop');
    };
    const continues = () => {
      console.log('continues');
      eventBus.emit('continues');
    };

    const rotateEvents = () => {
      if (startTyep) {
        rotate.value = !rotate.value;
        map.rotateAroundPoint(rotate.value);
      }
    };
    const updateSTHeight=()=>{
      eventBus.emit('updateSTHeight')  
    }

    let startTyep = null;
    const start = () => {
      startTyep = true;
      eventBus.emit('xunyou');
    };
    const userStore = useUserStore();
    const loginOut = () => {
      sessionStorage.removeItem('refreshToken');
      userStore.confirmLoginOut();
    };
    onMounted(() => {
      // setInterval(() => {
      //   time();
      // }, 1000);
      user.value = JSON.parse(sessionStorage.getItem('user'))?.realName;
      console.log(user.value, 'user.value');
    });
    const { VITE_GLOB_BASE_ADMIN } = getAppEnvConfig();
    const baseAdmin = () => {
      window.location.href = `${VITE_GLOB_BASE_ADMIN}`;
    };
    // 全屏
    let screenState = ref('全屏显示');
    let isPanelShow = ref(false);
    const showFullScreen = () => {
      if (screenState.value == '全屏显示') {
        screenState.value = '退出全屏';
      } else if (screenState.value == '退出全屏') {
        screenState.value = '全屏显示';
      }
      //screenfull.isEnabled  此方法返回布尔值，判断当前能不能进入全屏
      if (!screenfull.isEnabled) {
        return false;
      }
      //screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏
      screenfull.toggle();
    };
    const reload = () => {
      console.log('点击刷新');
      // 记录当前的全屏状态
      const isFullscreen =
        document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;

      // 清除缓存
      const timestamp = new Date().getTime();
      const url = window.location.href.replace(/(\?|&)t=\d+/, '');
      window.location.href = `${url}${url.includes('?') ? '&' : '?'}t=${timestamp}`;

      // 刷新页面
      window.location.reload();

      // 恢复全屏状态
      if (isFullscreen) {
        const element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
    };

    const backToDoor = () => {
      window.location.href = `${window.location.origin}/admin/index.html#/lifeline/bigscreen/systemNavigation`;
    };
    const outline = () => {
      console.log('点击了退出');
      loginOut();
    };
    return {
      rotateEvents,
      rotate,
      basinStatus,
      isPanelShow,
      user,
      backToDoor,
      outline,
      baseAdmin,
      ...toRefs(data),
      loginOut,
      screenState,
      showFullScreen,
      reload,
      changeBasinStatus,
      showPop,
      stop,
      continues,
      start,
      updateSTHeight
    };
  },
});
</script>
<style lang="less" scoped>
.popup {
  position: absolute;
  right: 464px;
  top: 196px;
  background: #031a26;
  // opacity: 0.3;
  border: 1px solid #0b5d7c;
  padding: 0px;
}
.popup:after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #0b5d7c 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 1;
}
.weather {
  width: 440px;
  padding-right: 0rem;
  display: flex;
  align-items: center;
  color: #e4ebf6;
  position: relative;
  top: -8px;
  right: -12px;
  .temp {
    position: relative;
    width: 440px;
    display: flex;
    align-items: flex-start;
    margin-right: 1rem;
    .user {
      position: relative;
      // width: 68px;
      height: 34px;
      margin: 2px 0px 0px 0px;
      position: absolute;
      right: 0px;
      top: -20px;
      .panel {
        position: absolute;
        padding: 0 10px;
        border: 1px solid #0b5d7c !important;
        background: #031a26 !important;
        opacity: 0.86 !important;
        border-radius: 3px !important;
        margin-left: -55px;
        margin-top: 40px;
        width: 100px;
        div {
          padding: 5px 0;
        }
      }
      .panel:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(90deg, #0b5d7c 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 1;
      }

      img {
        width: 34px;
        height: 34px;
        float: left;
      }
      span {
        font-size: 13px;
        line-height: 34px;
        height: 34px;
        float: right;
      }
    }
    .sysout {
      float: right;
      width: 35px;
      height: 28px;
      cursor: pointer;
    }
    img {
      width: 2.8rem;
    }

    span {
      font-family: Arial;
      font-size: 2rem;
      font-weight: bold;

      span {
        font-weight: normal;
        font-size: 1.25rem;
      }
    }
    .zcxt {
      opacity: 1;
      width: 86px;
      // margin-right: 30px;
      height: 29px;
      background: url('../../assets/images/zcxt.png') no-repeat;
      font-size: 13px;
      text-align: center;
      line-height: 29px;
      cursor: pointer;
      // margin: 4px 0px 0px 10px;
      position: absolute;
      right: 52px;
      top: -16px;
    }
  }

  .date {
    .day {
      margin-bottom: 0.5rem;
      font-size: 0.875rem;
      color: #ccc;
    }
    .time {
      font-size: 1.5rem;
      margin-right: 50px;
    }
  }
}

// ::v-deep  .ant-dropdown-menu {
//     /* background-color: #1f1f1f; */
//     border: 1px solid #0b5d7c ;
//     background: #031A26 !important;
//     opacity: 0.86;
//     border-radius: 3px;
// }

ul {
  border: 1px solid #0b5d7c !important;
  background: #031a26 !important;
  opacity: 0.86 !important;
  border-radius: 3px !important;
}
ul:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #0b5d7c 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 1;
}
</style>
