<template>
  <div class="header">
	  <div v-if="isBack" class="back2" @click="handleHome">
	    <img class="icon" src="@/assets/images/home.png" alt="" /> 首页
	  </div>
    <ul class="nav-left">
      <li
        class="nav-left-item"
        :style="{
          backgroundImage: `url(${current === item.id && !isSkip ? title2Select : title2})`
        }"
        v-for="(item, index) in navLeft"
        :key="index"
        :title="item.name"
        @click="handleNav(item)"
      >
        {{ item.name }}
      </li>
      <el-dropdown
        v-if="
          ['/scenic', '/hotel'].includes(router.currentRoute.value.path) && otherLeftNav.length > 0
        "
        trigger="click"
        @command="handleCommand($event, 'hotel')"
      >
        <li
          class="nav-left-item"
          :style="{
            backgroundImage: `url(${title2})`
          }"
        >
          {{ otherLeftLabel }}
          <img class="icon" src="@/assets/images/arrow-down-1.png" />
        </li>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(item, index) in otherLeftNav" :key="index" :command="item">
              <span class="label"> {{ item.name }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </ul>
    <div class="title">
      <span>{{ title }}</span>
    </div>
    <ul class="nav-right">
      <li
        class="nav-right-item"
        :style="{
          backgroundImage: `url(${current === item.id && !isSkip ? title3Select : title3})`
        }"
        v-for="(item, index) in navRight"
        :key="index"
        :title="item.name"
        @click="handleNav(item)"
      >
        {{ item.name }}
      </li>
      <el-dropdown
        v-if="
          ['/scenic', '/hotel'].includes(router.currentRoute.value.path) && otherRightNav.length > 0
        "
        trigger="click"
        @command="handleCommand($event, 'venue')"
      >
        <li
          class="nav-right-item"
          :style="{
            backgroundImage: `url(${title3})`
          }"
        >
          {{ otherRightLabel }}
          <img class="icon" src="@/assets/images/arrow-down-1.png" />
        </li>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(item, index) in otherRightNav" :key="index" :command="item">
              <span class="label"> {{ item.name }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </ul>
    <div class="weather">
      <span>{{ weatherData?.temperature }}-{{ weatherData?.skycon }}</span>
      <span class="line">|</span>
      <span>风速：{{ weatherData?.windSpeed }}</span>
      <span class="line">|</span>
      <span>空气质量：{{ weatherData?.airQuality }}</span>
    </div>
    <p class="date">{{ currentDate }}</p>
    <div v-if="isBack" class="back" @click="handleBack">
      <img class="icon" src="@/assets/images/back.png" alt="" /> 返回
    </div>
  </div>
  <div class="amplify" @click="handleAmplify">
	  <img class="icon-qp" src="@/assets/images/qping.png" alt="" />
  </div>
</template>
<script>

</script>
<script setup>
  import { useRouter } from 'vue-router'

  import title2 from '@/assets/images/title-2.png'
  import title3 from '@/assets/images/title-3.png'
  import title2Select from '@/assets/images/title-2-select.png'
  import title3Select from '@/assets/images/title-3-select.png'

  import { getWeatherApi } from '@/api/home'
  import { getSpotListApi } from '@/api/sentiment'
  import { getHotelListApi } from '@/api/hotel'

  import pubSub from 'pubsub-js'
  import { useScenicStore } from '@/stores/scenic'
  import { useHomeStore } from '@/stores/home'
  const homeStore = useHomeStore()
  const scenicStore = useScenicStore()
  const router = useRouter()

  let currentDate = ref('')
  let weatherData = ref({})
  let title = ref('')
  let navLeft = ref([])
  let navRight = ref([])
  let isSkip = ref(true)
  let isBack = ref(false)
  let current = ref(1)
  let otherLeftLabel = ref('')
  let otherRightLabel = ref('')
  let otherLeftNav = ref([])
  let otherRightNav = ref([])
  let spotList = ref([])
  let amplify = ref(true)
  //放大
  const handleAmplify = ()=>{
	  amplify.value = !amplify.value
	  homeStore.setAmplify(amplify.value)
  }
  // 补零
  const fillZero = (value) => {
    return value < 10 ? `0${value}` : value
  }

  // 获取当前日期
  const getCurrentDate = () => {
    var time = new Date()
    var year = time.getFullYear()
    var month = time.getMonth() + 1
    var day = time.getDate()
    var second = time.getSeconds()
    var hour = time.getHours()
    var minute = time.getMinutes()
    var second = time.getSeconds()
    currentDate.value = `${year}-${fillZero(month)}-${fillZero(day)} ${hour}:${fillZero(
      minute
    )}:${fillZero(second)}`
  }
  // 返回上一页
  const handleBack = () => {
    router.back()
  }
  // 返回首页
  const handleHome = ()=>{
	 router.push('/home')
  }
  const handleCommand = (item, type) => {

    current.value = ''
    if (type === 'hotel') {
      otherRightLabel.value = '其他场馆'
      otherLeftLabel.value = item.name
    } else {
      otherLeftLabel.value = '其他酒店'
      otherRightLabel.value = item.name
    }
    switch (router.currentRoute.value.path) {
      case '/scenic':
        pubSub.publish('scenicChange', item)
        break
      case '/monitor':
        pubSub.publish('monitorChange', item)
        break
      case '/hotel':
        pubSub.publish('hotelChange', item)
        break
    }
  }

  // 点击导航
  const handleNav = (item) => {
    if (isSkip.value) {
      router.push(item.path)
    } else {
      if (current.value === item.id) return
      current.value = item.id
      switch (router.currentRoute.value.path) {
        case '/scenic':
          title.value = item.name
          otherLeftLabel.value = '其他景区'
          otherRightLabel.value = ''
          pubSub.publish('scenicChange', item)
          break
        case '/monitor':
          title.value = item.name
          otherLeftLabel.value = '其他景区'
          otherRightLabel.value = ''
          pubSub.publish('monitorChange', item)
          break
        case '/hotel':
          otherLeftLabel.value = '其他酒店'
          otherRightLabel.value = '其他场馆'
          pubSub.publish('hotelChange', item)
          break
      }
    }
  }

  // 获取天气数据
  const getWeather = async () => {
    let res = await getWeatherApi()
    weatherData.value = res.data
  }
  // 获取景区列表
  const getSpotList = async () => {
    let res = await getSpotListApi()
    spotList.value = res.data
  }
  let monitorDefaultData = ref(null)
  // 设置当前路由导航栏
  const setNav = async () => {
    navLeft.value = []
    navRight.value = []
    otherLeftNav.value = []
    otherRightNav.value = []
    switch (router.currentRoute.value.path) {
      case '/home':
        title.value = '奉节县旅游指挥调度中心'
        isSkip.value = true
        isBack.value = false
        navLeft.value = [
		  { name: '景区', path: '/scenic' },
          { name: '监控', path: '/monitor' },
          { name: '交通', path: '/traffic' },
		  { name: '收藏', path: '/collect' },
        ]
        navRight.value = [
		  { name:'车船', path:'/vehicles'},
          { name: '工单', path: '/workOrder' },
          { name: '舆情', path: '/sentiment' },
          { name: '场馆', path: '/hotel' }
        ]
        break
		case '/vehicles':
		title.value = '车船信息'
		isBack.value = true
		break
      case '/scenic':
        otherLeftLabel.value = '其他景区'
        isSkip.value = false
        isBack.value = true
        let res = await getSpotListApi()
        navLeft.value = res.data.slice(0,3)
        current.value = res.data[0].id
        title.value = navLeft.value[0].name
        pubSub.publish('scenicChange', navLeft.value[0])
        otherLeftNav.value = [
          // {
          //   name: '大窝景区'
          // },
          // {
          //   name: '天坑景区'
          // },
          // {
          //   name: '旅游环线'
          // }
        ]
        break
      case '/sentiment':
        title.value = '舆情监测'
        isBack.value = true
        break
      case '/workOrder':
        title.value = '工单消息'
        isBack.value = true
        break
      case '/traffic':
        title.value = '交通大屏'
        isBack.value = true
        break
	  case '/collect':
		  title.value = '核心视频'
		  isBack.value = true
		  break
      case '/monitor':
        title.value = '监控大屏'
        isSkip.value = false
        current.vlaue = ''
        isBack.value = true
        let spotRes = await getSpotListApi()
        navLeft.value = [
          {
            name: '奉节县',
            scenicSpotId: '',
			id:10086,
          },
          ...spotRes.data.slice(0,3)
        ]
		if(monitorDefaultData.value){
			current.value = monitorDefaultData.value.id
			title.value = monitorDefaultData.value.name
			pubSub.publish('monitorChange', monitorDefaultData.value)
		}else{
			current.value = navLeft.value[0].id
			title.value = navLeft.value[0].name
		}


        break
      case '/sceneTesting':
        title.value = '三峡之巅-异常检测'
        navLeft.value = [
          {
            name: '奉节县',
            path: '/sceneTesting'
          },
          {
            name: '三峡之巅',
            path: '/sceneTesting'
          },
          {
            name: '白帝城',
            path: '/sceneTesting'
          },
          {
            name: '龙河桥',
            path: '/sceneTesting'
          }
        ]
        navRight.value = [
          {
            name: '路段',
            path: '/roadTesting'
          },
          {
            name: '路段',
            path: '/roadTesting'
          },
          {
            name: '路段',
            path: '/roadTesting'
          },
          {
            name: '路段',
            path: '/roadTesting'
          }
        ]
        isBack.value = true
        break
      case '/hotel':
        title.value = '场馆'
        otherLeftLabel.value = '其他酒店'
        otherRightLabel.value = '其他场馆'
        isSkip.value = false
        isBack.value = true
        let hotelRes = await getHotelListApi({ hotelStadiumType: 1 })
        navLeft.value = hotelRes.data.slice(0, 3)
		    current.value = navLeft.value[0].id
        otherLeftNav.value = hotelRes.data.slice(3, hotelRes.data.length)
        let venueRes = await getHotelListApi({ hotelStadiumType: 2 })
        navRight.value = venueRes.data.slice(0, 3)
        otherRightNav.value = venueRes.data.slice(3, venueRes.data.length)
        pubSub.publish('hotelChange', hotelRes.data[0])
        break
    }
  }
  watch(
    () => router.currentRoute.value,
    () => {
      setNav()
    },
    { immediate: true }
  )
  onMounted(async() => {
	// 获取查询参数
	PubSub.subscribe('navToChange', (msg, data) => {
		monitorDefaultData.value = data
		console.log(monitorDefaultData.value,'monitorDefaultData.valuemonitorDefaultData.value')
		// getSpotListApi().then((res)=>{
			// console.log(res.data[0],'spotResspotResspotRes')
			// router.push('/monitor')
			// router.currentRoute.value.path = '/monitor'
			// setTimeout(()=>{
			// 	current.value = res.data[1].id
			// 	handleNav(res.data[1])
			// 	pubSub.publish('monitorChange', res.data[1])
			// },2000)
		// })


	})
    getWeather()
    getSpotList()
    getCurrentDate()
    setInterval(() => {
      getCurrentDate()
    }, 1000)
  })
</script>

<style scoped lang="scss">
	.amplify{
		position:absolute;
		right:vw(20);
		top:vh(20);
		.icon-qp{
			width:vw(30);
		}
	}
  .header {
    position: absolute;
    left: vw(326);
    .weather {
      position: absolute;
      right: 0;
      top: vh(10);
      font-weight: 400;
      font-size: vw(18);
      color: #ffffff;
      .line {
        margin: 0 vw(10);
      }
    }
    .date {
      position: absolute;
      left: 0;
      top: vh(10);
      font-weight: 400;
      font-size: vw(18);
      color: #ffffff;
    }
    .back {
      position: absolute;
      right: 0;
      top: vh(50);
      width: vw(130);
      height: vh(36);
      font-weight: 600;
      font-size: vw(20);
      color: #ffffff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: vw(60);
      border: 1px solid rgba(0, 114, 220, 0.3);
      background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
      .icon {
        margin-right: vw(10);
        width: vw(24);
        height: auto;
      }
    }
	.back2 {
	  position: absolute;
	  left: 0;
	  top: vh(50);
	  width: vw(130);
	  height: vh(36);
	  font-weight: 600;
	  font-size: vw(20);
	  color: #ffffff;
	  cursor: pointer;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: vw(60);
	  border: 1px solid rgba(0, 114, 220, 0.3);
	  background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
	  .icon {
	    margin-right: vw(10);
	    width: vw(24);
	    height: auto;
	  }
	}
    .title {
      width: vw(3170);
      height: vh(120);
      line-height: vh(90);
      text-align: center;
      letter-spacing: vw(10);
      box-sizing: border-box;
      background-image: url('@/assets/images/title.png');
      background-size: 100% 100%;
      & > span {
        font-size: vw(48);
        font-weight: 800;
        font-family: 'MicrosoftYaHeiBold';
        color: transparent;
        letter-spacing: vw(10);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 4px 7px rgba(0, 150, 255, 0.75);
        background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
      }
    }
    .nav-left {
      position: absolute;
      right: vw(2120);
      top: vh(34);
      display: flex;
      &-item {
        cursor: pointer;
        margin-left: vh(-16);
        min-width: vw(210);
        height: vh(56);
        line-height: vh(46);
        font-weight: 600;
        font-size: vw(28);
        text-align: center;
        padding: 0 vw(50);
        color: rgba(208, 236, 255, 0.9);
        background-size: 100% 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
        .icon {
          width: vw(18);
          height: vw(18);
        }
      }
    }
    .nav-right {
      position: absolute;
      left: vw(2130);
      top: vh(34);
      display: flex;
      &-item {
        cursor: pointer;
        margin-right: vh(-16);
        width: vw(210);
        height: vh(56);
        line-height: vh(46);
        font-weight: 600;
        font-size: vw(28);
        text-align: center;
        color: rgba(208, 236, 255, 0.9);
        background-image: url('@/assets/images/title-3.png');
        background-size: 100% 100%;
        .icon {
          width: vw(18);
          height: vw(18);
        }
      }
    }
  }
</style>
