<template>
  <div id="header">
    <div class="main">
      <div class="title">黄浦江核心段数字孪生系统</div>
      <div class="content">
        <div class="left">
          <i class="humidity"></i>
          <div class="wsd-title">
            <span>湿度</span>
            <span>Humidity</span>
          </div>
          <span class="wsd-data">{{humidity}}</span>
          <span class="wsd-unit">RH%</span>
          <i class="temperature"></i>
          <div class="wsd-title">
            <span>温度</span>
            <span>temperature</span>
          </div>
          <span class="wsd-data">{{temperature}}</span>
          <span class="wsd-unit">℃</span>
        </div>
        <div class="right">
          <!-- <i class="btn-dfmz" @click="handleDfmz"></i> -->
          <!-- <i class="btn-fulls" @click="handleFullExtent"></i> -->
          <!-- <i class="btn-tools" @click="changeToolsShow()"></i> -->
          <!-- <div class="tool-box" v-show="toolsShow">
            <i class="tb-icon-close" @click="changeToolsShow(false)"></i>
            <div class="search-wrapper">
              <input type="text" class="tools-search"/>
              <i class="search-btn"></i>
            </div>
            <div class="tool-items-wrapper">
              <div class="tool-items"
                v-for="item, index in toolList"
                :key="item.name"
                @click="handleToolClick(index)"
              >
                <img class="tool-icon" :src="item.status? item.iconOn: item.icon" alt="">
                <span :class="['tool-label', {'tool-label-highlight':item.status}]">{{item.name}}</span>
              </div>
            </div>
          </div> -->
          <!-- <div v-show="waterLevelShow" class="water-level">
            <span class="wl-title">水位监测</span>
            <div class="wl-main">
              <div class="wl-left">
                <span class="wl-subtitle">水位值</span>
                <div class="wl-aside-main">
                  <div class="wl-aside-label">
                    <span v-show="item%500 === 0" v-for="item in waterLevelNum">{{item}}mm</span>
                  </div>
                  <div id="water-axis" class="wl-aside-axis">
                    <div id="dragger-left" class="wl-axis-dragger">
                      <img src="@/assets/imgs/arrow-left.png" alt="">
                      <i></i>
                    </div>
                  </div>
                </div>
              </div>
              <div id="wl-center" class="wl-center"></div>
              <div class="wl-right">
                <span class="wl-subtitle">时间轴</span>
                <div class="wl-aside-main">
                  <div id="time-axis" class="wl-aside-axis">
                    <div @mousedown="handleTimeDrag" id="dragger-right" class="wl-axis-dragger">
                      <i></i>
                      <img src="@/assets/imgs/arrow-right.png" alt="">
                    </div>
                  </div>
                  <div class="wl-aside-label">
                    <span v-show="item%2 ===0" v-for="item in waterLevelTime">{{item}}:00</span>
                  </div>
                </div>
              </div>
            </div>

          </div> -->
          <!-- <div class="right-box" @click="toggleScene"> -->
          <div class="right-btns">
            <i class="rb-search"></i>
          </div>
          <div class="right-box">
            <span class="now-time">{{time}}</span>
            <div class="date">
              <span>{{day}}</span>
              <span>{{date}}</span>
            </div>
            <i class="weather" :class="weather"></i>
          </div>
          <!-- <div v-show="sceneBoxShow" class="scene-box">
            <div class="sb-time-row">
              <div v-for="item, index in sceneList.time" @click="toggleTime((index+1)*6)" class="scene-item">
                <img :src="item.icon" alt="">
                <span :class="{'highlight': item.status}">{{item.name}}</span>
              </div>
            </div>
            <div class="sb-weather-row">
              <div v-for="item, index in sceneList.weather" @click="toggleWeather(index)" class="scene-item">
                <img :src="item.icon" alt="">
                <span :class="{'highlight': item.status}">{{item.name}}</span>
              </div>
            </div>
          </div> -->

        </div>
      </div>
    </div>
    <div class="sub">
      <ul>
        <li v-for="item,index in subList" :class="{'highlight': item.status}">
          <span @click="handleToggleLayer(index)">{{ item.name }}</span>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
}
</script>

<script setup>
  import { onMounted, reactive, ref, computed, nextTick, watch, onBeforeUnmount } from 'vue';
  import { useNow, useDateFormat } from '@vueuse/core'
  import { addResponseEventListener, callUIInteraction } from '@/webRtcVideo.js'
  // import { setWaterLevel } from '@/echarts/options'
  import bus from '@/utils/bus'
  import { GetWeather } from '@/apis/other'

  onMounted(() => [
    getWeather()
    // setWaterLevel(document.getElementById('wl-center'),[waterLevelNow.value])
  ])

  function getWeather() {
    GetWeather().then(res => {
      switch(res.data.weather) {
        case '晴': weather.value = 'qing'; break
        case '多云':weather.value = 'duoyun'; break
        case '小雨':weather.value = 'xiaoyu'; break
        case '中雨':weather.value = 'zhongyu'; break
        case '大雨':weather.value = 'dayu'; break
        case '雾':weather.value = 'wu'; break
        case '小雪':weather.value = 'xiaoxue'; break
      }
    })
  }

  const subList = reactive([
    { name: '码头', status: false },
    { name: '航道', status: true },
    { name: '岸线', status: false },
    { name: '船舶', status: false },
    { name: '视频', status: false },
    { name: '水下地形', status: false },
  ])
  
  function handleToggleLayer(index) {
    subList[index].status = !subList[index].status
  }

  /* const sceneBoxShow = ref(false)

  function toggleScene() {
    sceneBoxShow.value = !sceneBoxShow.value
  } */

  /* const sceneList = reactive({
    time: [
      { name: '早晨', icon: require('@/assets/imgs/scene/zaochen.png'), status: false },
      { name: '中午', icon: require('@/assets/imgs/scene/qingtian.png'), status: false },
      { name: '傍晚', icon: require('@/assets/imgs/scene/bangwan.png'), status: false },
      { name: '晚上', icon: require('@/assets/imgs/scene/wanshang.png'), status: false },
    ],
    weather: [
      { name: '晴', icon: require('@/assets/imgs/scene/w-qing.png'), status: false },
      { name: '多云', icon: require('@/assets/imgs/scene/w-duoyun.png'), status: false },
      { name: '雾', icon: require('@/assets/imgs/scene/w-wu.png'), status: false },
      { name: '小雨', icon: require('@/assets/imgs/scene/w-xiaoyu.png'), status: false },
      { name: '中雨', icon: require('@/assets/imgs/scene/w-zhongyu.png'), status: false },
      { name: '大雨', icon: require('@/assets/imgs/scene/w-dayu.png'), status: false },
      { name: '小雪', icon: require('@/assets/imgs/scene/w-xiaoxue.png'), status: false },
      { name: '中雪', icon: require('@/assets/imgs/scene/w-zhongxue.png'), status: false },
      { name: '大雪', icon: require('@/assets/imgs/scene/w-daxue.png'), status: false },
    ]
  }) */

  /* function callUIInteractionFormat(action) {
    if(action['Parameters']) {
      action['Parameters'] = JSON.stringify(action['Parameters'])
    }
    callUIInteraction(action)
  } */

  /* function toggleTime(hour) {
    let action = {
      "ActionName":"change_time",
      "Parameters":{
        "hour":hour,"minutes":0,"seconds":0
      }
    }
    callUIInteractionFormat(action);
  }

  function toggleWeather(type) {
    let action = {
      "ActionName":"change_weather",
      "Parameters":{
        "weather_type":type,
      }
    }
    console.log(action)
    callUIInteractionFormat(action);
  } */

  /* const waterLevelNow = ref(450)
  const waterLevelShow = ref(false) */

  // 水位时间条拖动时的处理函数
  /* function handleTimeDrag(event) {
    let timeDragger = document.getElementById('dragger-right')
    let totalH = document.getElementById('time-axis').offsetHeight
    event =event||window.event
    let tp =event.clientY - timeDragger.offsetTop
    let top = event.clientY-tp
    timeDragger.onmousemove = function(event){
      event =event||window.event
      top = event.clientY-tp
      if(top>-3 && top<totalH-22) {
        timeDragger.style.top= top+"px"
      }else {
        timeDragger.onmousemove = null
        handleTimeDragDone(parseInt(top/totalH*100))
      }
    }
    timeDragger.onmouseup= function(){
      timeDragger.onmousemove = null
      handleTimeDragDone(parseInt(top/totalH*100))
    }
  } */

  // 水位时间条拖动完成时的处理函数
  /* function handleTimeDragDone(perIn) {
    let perOut = -perIn*perIn / 60 + 1.8*perIn + 20
    let waterAxisH = document.getElementById('water-axis').offsetHeight-23
    let height = perOut/100*waterAxisH
    let waterLevelDragger = document.getElementById('dragger-left')
    waterLevelDragger.style.bottom= parseInt(height) + 'px'
    waterLevelNow.value = perOut*10
    setWaterLevel(document.getElementById('wl-center'),[waterLevelNow.value])
    toggleSwqk(parseInt(perOut*6+100))
  } */


  const temperature = ref('32')
  const humidity = ref('42.3')
  const time = useDateFormat(useNow(), 'HH:mm')
  const date = useDateFormat(useNow(), 'YYYY.MM.DD')
  const day = useDateFormat(useNow(), 'ddd', { locales: 'en-US' })
  const weather = ref('qing')

  /* const toolList = reactive([
    { name: '船舶位置', icon: require('@/assets/imgs/tool/tool-cbwz.png'), iconOn: require('@/assets/imgs/tool/tool-cbwz-h.png'), status: true },
    { name: '行驶航线', icon: require('@/assets/imgs/tool/tool-xshx.png'), iconOn: require('@/assets/imgs/tool/tool-xshx-h.png'), status: false },
    { name: '游览灯光', icon: require('@/assets/imgs/tool/tool-yldg.png'), iconOn: require('@/assets/imgs/tool/tool-yldg-h.png'), status: false },
    { name: '航线展示', icon: require('@/assets/imgs/tool/tool-hxzs.png'), iconOn: require('@/assets/imgs/tool/tool-hxzs-h.png'), status: false },
    { name: '淤泥预警', icon: require('@/assets/imgs/tool/tool-ynyj.png'), iconOn: require('@/assets/imgs/tool/tool-ynyj-h.png'), status: false },
    { name: '模拟驾驶', icon: require('@/assets/imgs/tool/tool-mnjs.png'), iconOn: require('@/assets/imgs/tool/tool-mnjs-h.png'), status: false },
    { name: '水位情况', icon: require('@/assets/imgs/tool/tool-swqk.png'), iconOn: require('@/assets/imgs/tool/tool-swqk-h.png'), status: false },
    { name: '视频融合', icon: require('@/assets/imgs/tool/tool-sprh.png'), iconOn: require('@/assets/imgs/tool/tool-sprh-h.png'), status: false },
    { name: '中燃船舶', icon: require('@/assets/imgs/tool/tool-zrcb.png'), iconOn: require('@/assets/imgs/tool/tool-zrcb-h.png'), status: false },
    { name: '杭申线', icon: require('@/assets/imgs/tool/tool-hsx.png'), iconOn: require('@/assets/imgs/tool/tool-hsx-h.png'), status: false },
  ]) */

  /* const toolsShow = ref(true)
  function changeToolsShow(param) {

    toolsShow.value = param || !toolsShow.value
  } */

  /* function handleFullExtent() {
    let action = {
      "ActionName":"full_extent"
    }
    callUIInteractionFormat(action);
  } */

  /* let dfmzStatus = false

  function handleDfmz() {
    let action = dfmzStatus? { "ActionName":"icon_close" }: { "ActionName":"icon_start" }
    callUIInteractionFormat(action);
    dfmzStatus = !dfmzStatus
  } */


  /* const waterLevelNum = computed(() => {
    let arr = []
    for(let i=2000; i<=5000; i+=200) {
      arr.push(i)
    }
    return arr
  })
  const waterLevelTime = computed(() => {
    let arr = []
    for(let i=24; i>=1; i--) {
      let a = ''
      if(i<10) {
        a = '0'+i
      }else {
        a = i
      }
      arr.push(a)
    }
    return arr
  }) */


  /* function handleToolClick(index) {
    toolList[index].status = !toolList[index].status
    let status = toolList[index].status
    switch (index) {
      case 0:
        if(status) { cbwzOn() } else { cbwzOff() }
        break;
      case 1:
        xshxOn()
        setTimeout(() => {
          toolList[index].status = !toolList[index].status
        }, 200);
        break;
      case 2:
        if(status) { yldgOn() } else { yldgOff() }
        break;
      case 3:
        if(status) { hxzsOn() } else { hxzsOff() }
        break;
      case 4:
        if(status) { ynyjOn() } else { ynyjOff() }
        break;
      case 5:
        if(status) { mnjsOn() } else { mnjsOff() }
        break;
      case 6:
        if(status) {
          waterLevelShow.value = true
          swqkOn()
          nextTick(() => {
            setWaterLevel(document.getElementById('wl-center'),[waterLevelNow.value])
          })
        } else {
          waterLevelShow.value = false
          toggleSwqk(280)
        }
        break;
      case 7:
        sprhOn()
        setTimeout(() => {
          toolList[index].status = !toolList[index].status
        }, 200);
        break;
      case 8:
        zrcbOn()
        setTimeout(() => {
          toolList[index].status = !toolList[index].status
        }, 200);
        break;
      case 9:
        hsxOn()
        setTimeout(() => {
          toolList[index].status = !toolList[index].status
        }, 200);
        break;
    }

  } */


  /* function cbwzOn() {
    let action1 = {
      "ActionName":"fly",
      "Parameters":{
        "x":180389,"y":-96050,"z":230000,"roll_x":0,"roll_y":-65,"roll_z":4.5
      }
    }
    callUIInteractionFormat(action1);
    let action2 = {
      "ActionName":"boat_realtime"
    }
    callUIInteractionFormat(action2);
    let action3 = {
      "ActionName":"start_time"
    }
    callUIInteractionFormat(action3);
  }

  function cbwzOff() {
    let action = {
      "ActionName":"clear_boat_time"
    }
    callUIInteractionFormat(action);
  }

  function xshxOn() {
    let action = {
      "ActionName":"drive_demo_boat"
    }
    callUIInteractionFormat(action);
  }

  function yldgOn() {
    let action1 = {
      "ActionName":"light_start"
    }
    callUIInteractionFormat(action1);
    let action2 = {
      "ActionName":"change_time",
      "Parameters":{
        "hour":23,"minutes":30,"seconds":0
      }
    }
    callUIInteractionFormat(action2);
  }

  function yldgOff() {
    let action1 = {
      "ActionName":"light_close"
    }
    callUIInteractionFormat(action1);
    let action2 = {
      "ActionName":"change_time",
      "Parameters":{
        "hour":12,"minutes":30,"seconds":0
      }
    }
    callUIInteractionFormat(action2);
  }

  function hxzsOn() {
    let action1 = {
      "ActionName":"fly",
      "Parameters":{
        "x":247875,"y":-120222,"z":71577,"roll_x":0,"roll_y":-80,"roll_z":64
      }
    }
    callUIInteractionFormat(action1);
    let action2 = {
      "ActionName":"start_rline"
    }
    callUIInteractionFormat(action2);
  }

  function hxzsOff() {
    let action = {
      "ActionName":"close_rline"
    }
    callUIInteractionFormat(action);
  }

  function ynyjOn() {
    let action = {
      "ActionName":"start_yjyj"
    }
    callUIInteractionFormat(action);
  }

  function ynyjOff() {
    let action = {
      "ActionName":"close_yjyj"
    }
    callUIInteractionFormat(action);
  }

  function mnjsOn() {
    let action = {
      "ActionName":"simulate_drive"
    }
    callUIInteractionFormat(action);
  }

  function mnjsOff() {
    let action = {
      "ActionName":"simulate_drive_close"
    }
    callUIInteractionFormat(action);
  }

  function swqkOn() {
    let action1 = {
      "ActionName":"fly",
      "Parameters":{ "x":230843,"y":-78457,"z":998,"roll_x":0,"roll_y":-20,"roll_z":-6 }
    }
    callUIInteractionFormat(action1);
    toggleSwqk(374)
  }

  function toggleSwqk(param) {
    let action = {
      "ActionName":"set_water_z",
      "Parameters":{ "water_z":param }
    }
    callUIInteractionFormat(action);
  }

  function sprhOn() {
    let action = {
      "ActionName":"fly_camera"
    }
    callUIInteractionFormat(action);
  }

  function zrcbOn() {
    let action = {
      "ActionName":"fly",
      "Parameters":{ "x":666635,"y":-1152420,"z":5000,"roll_x":0,"roll_y":-24,"roll_z":-170.0 }
    }
    callUIInteractionFormat(action);
  }

  function hsxOn() {
    let action = {
      "ActionName":"fly",
      "Parameters":{ "x":-4366605,"y":3078090,"z":3848,"roll_x":0,"roll_y":-34,"roll_z":142 }
    }
    callUIInteractionFormat(action);
  }

  function hsxOff() {
    let action = {
      "ActionName":"hangshenxian",
      "Parameters":{ "show":"false" }
    }
    callUIInteractionFormat(action);
  }

  bus.on('hideToolBox', () => { toolsShow.value = false});

  onBeforeUnmount(() => {
    bus.off('hideToolBox');
  }) */

</script>

<style lang="scss" scoped>
#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;

  .main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 119px;
    background: url('@/assets/imgs/header/bg-main.png') no-repeat;
    background-size: 100% 100%;
  }

  .sub {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 1114px;
    height: 105px;
    transform: translateX(-50%);
    background: url('@/assets/imgs/header/bg-sub.png') no-repeat;
    background-size: 100% 100%;

    &>ul {
      position: absolute;
      bottom: 9px;
      left: 0;
      width: 100%;
      text-align: center;
      li {
        display: inline-block;
        width: 110px;
        height: 72px;
        margin: 0 5px;
        text-align: center;
        span {
          display: inline-block;
          margin-top: 40px;
          width: fit-content;
          font-size: 20px;
          font-family: YSBTH;
          font-weight: 400;
          color: #CCE6FF;
          opacity: 0.65;
          cursor: pointer;
          &:hover {
            transform: scale(1.1);
          }
        }
        
      }
      .highlight {
        background: url('@/assets/imgs/header/bg-sub-highl.png') no-repeat;
        background-size: 100% 100%;
        span {
          color: #EDF3FF;
          opacity: 1;
        }
      }
    }
  }

  .title {
    position: absolute;
    width: fit-content;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: YSBTH;
    font-size: 42px;
  }

  .content {
    position: absolute;
    top: 32px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .left, .right {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  }

  .left {
    margin-left: 30px;
    .humidity, .temperature {
      display: inline-block;
      width: 36px;
      height: 36px;
      margin-right: 6px;
    }
    .humidity {
      background: url('@/assets/imgs/header/humidity.png') no-repeat;
    }
    .temperature {
      background: url('@/assets/imgs/header/temperature.png') no-repeat;
    }
    .humidity, .temperature {
      background-size: contain;
    }

    .wsd-title {
      text-align: left;
      margin-right: 9px;
      font-family: PFlight;
      span {
        display: block;
        color: #F6F6F6;
      }
      span:first-child {
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 3px;
      }
      span:last-child {
        font-size: 8px;
        line-height: 8px;
      }
    }

    .wsd-data {
      font-family: PFlight;
      font-size: 26px;
      line-height: 26px;
    }

    .wsd-unit {
      font-family: PFlight;
      font-size: 14px;
      line-height: 14px;
      transform: translateY(-5px);
      margin: 0 18px 0 3px;
    }
  }

  .right {

    /* .btn-dfmz, .btn-fulls, .btn-tools {
      display: inline-block;
      width: 40px;
      height: 40px;
      cursor: pointer;
    }
    .btn-dfmz {
      background: url('@/assets/imgs/dfmz.png') no-repeat;
      background-size: contain;

    }
    .btn-fulls {
      background: url('@/assets/imgs/fulls.png') no-repeat;
      background-size: contain;
    }
    .btn-tools {
      margin-right: 36px;
      background: url('@/assets/imgs/tool/tools.png') no-repeat;
      background-size: contain;
    } */

    /* .tool-box {
      position: absolute;
      top: 3.5vh;
      right: 360px;
      display: inline-block;
      width: 33.8vh;
      height: 44vh;
      background: url('@/assets/imgs/tool/toolbox-bg.png') no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding-top: 28px;

      // .tb-icon-close {
      //   position: absolute;
      //   display: block;
      //   right: 10px;
      //   top: 40px;
      //   width: 20px;
      //   height: 20px;
      //   background: url('@/assets/imgs/tool/toolbox-close.png') no-repeat;
      //   background-size: contain;
      //   cursor: pointer;
      // }

      .search-wrapper {
        position: relative;
        width: 100%;
        height: 8%;
        margin-top: 24px;
        text-align: center;
        .tools-search {
          box-sizing: border-box;
          width: 84%;
          height: 100%;
          outline: none;
          border: 1px solid #01B9BE;
          border-radius: 18px;
          background-color: transparent;
          color: #fff;
          padding: 0 35px 0 15px;
          font-size: 14px;
        }
        .search-btn {
          display: inline-block;
          position: absolute;
          right: 11%;
          top: 20%;
          width: 6%;
          height: 58%;
          background: url('@/assets/imgs/icon-search.png') no-repeat;
          background-size: contain;
          cursor: pointer;
        }
      }

      .tool-items-wrapper {
        box-sizing: border-box;
        padding: 2% 6% 3%;
        width: 99%;
        height: 86%;
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: wrap;
        .tool-items {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 33.3%;
          cursor: pointer;
          .tool-icon {
            width: 6.94vh;
            height: 6.94vh;
            transform: translateY(8px);
          }
          .tool-label {
            font-size: 12px;
            width: 50px;
            text-align-last: justify;
          }
          .tool-label-highlight {
            color: yellow;
          }
        }
      }

    } */

    .right-btns {
      display: flex;
      align-items: center;
      .rb-search {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-right: 20px;
        background: url('@/assets/imgs/header/search.png') no-repeat;
        background-size: contain;
        cursor: pointer;
      }
    }

    .right-box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // cursor: pointer;
    }

    .now-time {
      font-family: PFlight;
      font-size: 30px;
      margin-right: 16px;
    }

    .date {
      position: relative;
      text-align: left;
      margin-right: 28px;
      span {
        color: #ccc;
        display: block;
        font-size: 12px;
        line-height: 14px;
      }
      &::after {
        content: '';
        position: absolute;
        right: -28px;
        top: 7px;
        display: inline-block;
        width: 1px;
        height: 14px;
        background-color: #fff;
      }
    }
    
    .weather {
      display: inline-block;
      width: 32px;
      height: 32px;
      background: url('@/assets/imgs/scene/w-qing.png') no-repeat;
      background-size: contain;
      margin: 0 36px;

      &.qing {
        background: url('@/assets/imgs/scene/w-qing.png') no-repeat;
        background-size: contain;
      }
      &.duoyun {
        background: url('@/assets/imgs/scene/w-duoyun.png') no-repeat;
        background-size: contain;
      }
      &.xiaoyu {
        background: url('@/assets/imgs/scene/w-xiaoyu.png') no-repeat;
        background-size: contain;
      }
      &.zhongyu {
        background: url('@/assets/imgs/scene/w-zhongyu.png') no-repeat;
        background-size: contain;
      }
      &.dayu {
        background: url('@/assets/imgs/scene/w-dayu.png') no-repeat;
        background-size: contain;
      }
      &.wu {
        background: url('@/assets/imgs/scene/w-wu.png') no-repeat;
        background-size: contain;
      }
      &.xiaoxue {
        background: url('@/assets/imgs/scene/w-xiaoxue.png') no-repeat;
        background-size: contain;
      }
    }

    /* .scene-box {
      position: absolute;
      box-sizing: border-box;
      padding: 25px 20px;
      top: 5vh;
      right: 0.5vw;
      width: 300px;
      height: 350px;
      background-color: rgba(14, 30, 50, 0.7);
      transition: all 0.5s linear;

      .sb-time-row, .sb-weather-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
      }

      .sb-weather-row {
        margin-top: 10px;
        .scene-item {
          width: 26%;
        }
      }

      .sb-time-row {
        .scene-item {
          width: 20%;
        }
      }

      .scene-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 15px;
        cursor: pointer;
        img {
          width: 40px;
          height: 40px;
        }
        .highlight {
          color: yellow;
        }
      }

    } */

    /* .water-level {
      position: absolute;
      bottom: -79vh;
      right: 19vw;
      width: 360px;
      height: 370px;
      background: rgba(0,38,77,0.5);
      text-align: center;

      .wl-title {
        display: block;
        margin: 14px 0 10px;
        font-size: 18px;
        font-weight: bold;
        color: #FFFFFF;
      }

      .wl-main {
        box-sizing: border-box;
        padding: 0 20px 18px;
        display: flex;
        justify-content: space-between;
        height: calc(100% - 58px);
      }

      .wl-subtitle {
        display: block;
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: bold;
        color: transparent;
        background: linear-gradient(180deg, #FFFFFF 0%, #FFD24C 100%);
        -webkit-background-clip: text;
        text-align: right;
      }

      .wl-aside-main {
        display: flex;
        justify-content: space-between;
        height: calc(100% - 26px);
      }

      .wl-aside-label {
        box-sizing: border-box;
        padding-bottom: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        &>span {
          font-size: 14px;
          font-family: Barlow;
          font-weight: bold;
          color: transparent;
          background: linear-gradient(183deg, #55C5FF 0%, #FFFFFF 50%, #86D2FF 100%);
          -webkit-background-clip: text;
        }
      }

      .wl-aside-axis {
        position: relative;
        width: 23px;
        height: 100%;
        background: url('@/assets/imgs/water-level.png') no-repeat;
        background-size: contain;
      }

      .wl-axis-dragger {
        position: absolute;
        bottom: 40%;
        right: 6px;
        width: 40px;
        height: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        i {
          display: inline-block;
          width: 14px;
          height: 14px;
          background-color: #fff;
          border-radius: 50%;
        }
      }

      .wl-left  {
        width: 35%;
        box-sizing: border-box;

      }

      .wl-center {
        width: 36%;
        height: 100%;
      }
      .wl-right  {
        width: 28%;
        height: 100%;
        box-sizing: border-box;
        padding-left: 8px;

        .wl-subtitle {
          text-align: left;
        }

        .wl-aside-axis {
          background: url('@/assets/imgs/water-timeaxis.png') no-repeat;
          background-size: contain;
        }

        .wl-axis-dragger {
          cursor: pointer;
          left: 0;
          bottom: 0;
        }

      }
    } */

  }
}
</style>
