<template>
  <div id="header">
    <div class="main">
      <div class="title">黄浦江数字孪生系统</div>
      <div class="content">
        <div class="left">
          <div class="right-box">
            <span class="now-time" @click="ueCallGetNowTime">{{ time }}</span>
            <div class="date">
              <span>{{ day }}</span>
              <span>{{ date }}</span>
            </div>
            <i class="weather" :class="weather" @click="toggleScene"></i>
            <i :class="waterDeepShows ? 'waterUpDownS' : 'waterUpDown'" @click="showChaogaos"></i>
          </div>
        </div>
        <div class="right">
          <div class="tab-item" v-for="item, index in isCheck.data" :key="item.name"
            @click="changeImage(index, item.imageName)">
            <div class="bottom">
              <el-tooltip class="item" effect="light" :content="item.name" placement="bottom-start">
                <img class="tab-icon" :src="item.click ? item.iconOn : item.icon" alt="">
              </el-tooltip>
            </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>-->
    <MiForChange v-if="miForChangeShow" />
    <water-level v-if="waterDeepShow" />
    <Tools v-show="checkTool" @showView="vidoShow = true" :shipinRonghe="vidoShow" @hiddenView="closeVido" />

    <VideoForHK v-if="vidoShow" :vidoBackShow="false" :cameraIndexCode="'89be6c491cf04a6aa3c42669e77d2127'"
      ref="childeRef" @closeVido="closeVidoAll" />
    <WaterLevelForChars v-if="waterDeepShows" />
    <LunDuMessage v-if="checkLinDu" @closeThis="closeLundu" :datas="ldData.value" />

    <HuiFangArea v-if="checkArea" />

    <SelectForUnit v-if="showSelect" />
  </div>
</template>

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

<script setup>
import { nextTick, onBeforeMount, defineComponent, onMounted, reactive, ref, toRaw } from 'vue';
import { useNow, useDateFormat } from '@vueuse/core'
import bus from '@/utils/bus'
import { GetWeather } from '@/apis/other'
import {
  ueCallBoatRealtime, ueCallClearBoatTime, ueCallfullExtent, ueCallCloseMi, ueCallShowWarningReturn,
  ueCallOpenVideoFusion, ueCallCloseVideoFusion, ueCallShowHangdaoLine, ueCallCloseHangdaoLine, ueCallCloseWarningReturn,
  ueCallOpenRlt, ueCallCloseRlt, ueCallFlyToHD, ueCallFlyToSP, ueCallFlyToZrcb, ueCallShowAllMi, ueCallGetNowTime
} from '@/utils/UIInteractions'
import WaterLevel from './cpns/WaterLevel.vue'
import WaterLevelForChars from './cpns/WaterLevelForChart.vue'
import MiForChange from './cpns/MiForChange.vue'
import VideoForHK from './cpns/VideoForHK'
import HuiFangArea from './cpns/tools/HuiFangArea.vue'
import Tools from './cpns/tools/Tools.vue'
import LunDuMessage from './cpns/boatPanel/LunDuMessage.vue'
import SelectForUnit from './SelectForUnit.vue'
import { asideShow } from '@/store/index'
import { ElMessage } from "element-plus";
import { ElTooltip } from 'element-plus'
import 'element-plus/es/components/tooltip/style/index'
// 地图方法
import { fullExtent, calculation, clearMap, setCamera } from "@/utils/map/ArcgisUtil";
import { setCenter } from "@/utils/map/Common";
import { closeAllLayer } from '@/utils/map/Layer'
import { locationUnit } from "@/utils/map/OperationSupervision";
import { GetUserPrivilege } from "@/utils/user";



const vidoShow = ref(false)
let ldData = reactive({ value: '' })
const checkLinDu = ref(false)
const checkArea = ref(false)
const checkSelect = ref(false)
const checkTool = ref(false)
const checkSouXiao = ref(false)
const checkQuanjing = ref(false)
const checkRuale = ref(false)
const checkCeMian = ref(false)
const checkClear = ref(false)
const waterDeepShows = ref(false)



const showSelect = ref(false)
// onBeforeMount(()=>{
//   childeRefAr.value=childeRef.value?.['onCancelVideoEx']
//   toRaw(onCancelVideoEx())
// })

const childeRef = ref()
// const childeRefAr = ref(false)
function closeVido() {
  childeRef.value.onCancelVideoEx()

}
function closeVidoAll() {
  vidoShow.value = false
}

function showChaogaos() {
  waterDeepShows.value = !waterDeepShows.value
}

bus.on('click_Lundu', (data) => {
  console.log(data)
  if (data != null && data != '') {
    checkLinDu.value = true
    ldData.value = data
  }
})
const isCheck = ref({
  data: [
    { name: '搜索企业或船舶', icon: require('@/assets/imgs/header/ssou-wei.png'), iconOn: require('@/assets/imgs/header/ssou-select.png'), imageName: 'ssou', click: false, checkIoc: showSelect },
    { name: '区域轨迹回放', icon: require('@/assets/imgs/area/bj_wei.png'), iconOn: require('@/assets/imgs/area/bj_select.png'), imageName: 'hf', click: false, checkIoc: checkArea },
    { name: '图层', icon: require('@/assets/imgs/header/tc-wei.png'), iconOn: require('@/assets/imgs/header/tc-select.png'), imageName: 'tc', click: false, checkIoc: checkTool },
    { name: '收缩两侧', icon: require('@/assets/imgs/header/ss-wei.png'), iconOn: require('@/assets/imgs/header/ss-select.png'), imageName: 'ss', click: false, checkIoc: checkSouXiao },
    { name: '切换全景视角', icon: require('@/assets/imgs/page_ylcbq/qj-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/qj-xuan.png'), imageName: 'qj', click: false, checkIoc: checkQuanjing },
    { name: '测距离', icon: require('@/assets/imgs/page_ylcbq/cl-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/cl-xuan.png'), imageName: 'cl', click: false, checkIoc: checkRuale },
    { name: '测面积', icon: require('@/assets/imgs/page_ylcbq/cm-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/cm-xuan.png'), imageName: 'cm', click: false, checkIoc: checkCeMian },
    { name: '清除图层', icon: require('@/assets/imgs/page_ylcbq/qc-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/qc-xuan.png'), imageName: 'qc', click: false, checkIoc: checkClear },

  ]
})

const global_aside = asideShow()

onMounted(() => [
  getWeather(),
  GetUserPrivilege(isCheck.value),
])

const weather = ref('qing')

function closeLundu() {
  checkLinDu.value = false
}


function changeImage(index, name) {
  isCheck.value.data.forEach(i => {
    if (i.imageName === name) {
      console.log(name)
      i.click = !i.click;
      i.checkIoc = !i.checkIoc;
      if (i.click) {
        // 选择
        if (name == 'qj') {
          //返回全景
          // fullExtent();
          setCenter()
          i.click = !i.click;
          i.checkIoc = !i.checkIoc;
        } else if (name == 'ss') {
          togglePageAside()
        } else if (name == 'cl') {
          calculation('distance')
        } else if (name == 'cm') {
          calculation('area')
        }
        else if (name == 'qc') {
          // closeAllLayer()
          clearMap({ is_draw: true, is_search: true, layers: ['sketchLayer', 'bufferLayer', 'tempLayer', 'boatLayer', 'boatPathLayer'] })
          i.click = !i.click;
          i.checkIoc = !i.checkIoc;
        }
      } else {
        // 取消
        if (name == 'ss') {
          togglePageAside()
        } else {
          locationUnit(null, false)
        }

      }

    }

  })
}

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: 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
  if (subList[index].status === true) {
    switch (index) {
      case 0:
        ueCallFlyToHD()
        setTimeout(() => {
          ueCallShowHangdaoLine()
        }, 1000);
        break
      case 1:
        ueCallCloseWarningReturn()
        waterDeepShow.value = true
        break
      case 2:
        ueCallfullExtent()
        setTimeout(() => {
          ueCallBoatRealtime()
        }, 1000);
        break
      case 3:
        ueCallFlyToSP()
        bus.on('fly_Action', (data) => {
          if (data.isOk == 'true') {
            ueCallOpenVideoFusion()
            bus.off('fly_Action')
          }
        })
        break
      case 4:
        bus.emit('toggle_sxdx', true)
        clickWeeather.value = true
        break
      case 5:
        if (clickWeeather.value) {
          miForChangeShow.value = true
          subList[index].status = true
          ueCallShowAllMi()
        } else {
          subList[index].status = false
        }
        break
      case 6:
        ueCallFlyToZrcb()
        break
    }
  } else {
    switch (index) {
      case 0:
        ueCallCloseHangdaoLine()
        break
      case 1:
        ueCallShowWarningReturn()
        waterDeepShow.value = false
        break
      case 2:
        ueCallClearBoatTime()
        break
      case 3:
        ueCallCloseVideoFusion()
        break
      case 4:
        clickWeeather.value = false
        miForChangeShow.value = false
        subList[index + 1].status = false
        ueCallCloseMi()
        bus.emit('toggle_sxdx', false)
        break
      case 5:
        miForChangeShow.value = false
        ueCallCloseMi()
        break
      case 6:
        ueCallfullExtent()
        break
    }
  }
}
const clickWeeather = ref(false)
const temperature = ref('8')
const time = useDateFormat(useNow(), 'HH:mm')
const date = useDateFormat(useNow(), 'YYYY.MM.DD')
const day = useDateFormat(useNow(), 'ddd', { locales: 'en-US' })

const waterDeepShow = ref(false)

const miForChangeShow = ref(false)

function toggleScene() {
  bus.emit('toggleSceneBox')
}

function togglePageAside() {
  global_aside.toggleAside()
}

</script>

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

  .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%;
  }

  .tab-icon {
    width: 40px;
    height: 40px;
  }

  .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;
        padding: 0 25px;
        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: 4vh;
    display: flex;
    justify-content: space-between;
    width: 100%;

    .left,
    .right {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  }

  .right {
    margin-top: 8px;
    margin-right: 3px;

    .humidity,
    .temperature {
      display: inline-block;
      width: 36px;
      height: 36px;
      margin-right: 6px;
    }

    li {
      list-style: none;
      float: left;

      i {
        display: block;
        height: 50px;
        width: 50px;
      }
    }

    .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;
    }
  }

  .left {
    .right-btns {
      display: flex;
      align-items: center;

      &>i {
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
      }

      .rb-search {
        width: 30px;
        height: 30px;
        background: url('@/assets/imgs/header/search.png') no-repeat;
        background-size: contain;
      }

      .rb-fulls {
        width: 35px;
        height: 35px;
        background: url('@/assets/imgs/header/fulls.png') no-repeat;
        background-size: contain;
      }

      .rb-aside {
        width: 40px;
        height: 40px;
        margin-right: 5px;
        background: url('@/assets/imgs/header/btn-aside.png') no-repeat;
        background-size: contain;
      }
    }

    .right-box {
      margin-left: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // cursor: pointer;

    }

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

      &:hover {
        filter: brightness(1.2);
      }
    }

    .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;
      }
    }

    .waterUpDown {
      display: inline-block;
      width: 32px;
      height: 32px;
      background: url('@/assets/imgs/cg.png') no-repeat;
      background-size: contain;
    }

    .waterUpDownS {
      width: 32px;
      height: 32px;
      background: url('@/assets/imgs/cg_select.png') no-repeat;
      background-size: contain;
    }

    .weather {
      display: inline-block;
      width: 32px;
      height: 32px;
      background: url('@/assets/imgs/scene/w-qing.png') no-repeat;
      background-size: contain;
      margin: 0 20px;
      cursor: pointer;

      &.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;
      }
    }

  }

}
</style>