<template>
  <div class="header">
    <ul class="nav-left">
      <li
        class="nav-left-item"
        :style="{
          backgroundImage: `url(${current === index && !isSkip ? title2Select : title2})`
        }"
        v-for="(item, index) in navLeft"
        :key="index"
        @click="handleNav(item, index)"
      >
        {{ item.name }}
      </li>
      <!-- <el-dropdown v-if="navLeft.length > 3" trigger="click" @command="handleCommand">
        <li
          class="nav-left-item"
          :style="{
            backgroundImage: `url(${title2})`
          }"
        >
          {{ otherScenic || '其他景区' }}
          <img class="icon" src="@/assets/images/arrow-down-1.png" />
        </li>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(item, index) in navLeft" :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"
        @click="handleNav(item, index)"
        v-for="(item, index) in navRight"
        :key="index"
      >
        {{ item.name }}
      </li>
    </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>
      <span class="ml-20">{{ currentDate }}</span>
    </div>
    <div v-if="isBack" class="back" @click="handleBack">
      <img class="icon" src="@/assets/images/back.png" alt="" /> 返回
    </div>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  import title2 from '@/assets/images/title-2.png'
  import title2Select from '@/assets/images/title-2-select.png'
  import { getWeatherApi } from '@/api/home'
  import { getSpotApi } from '@/api/sentiment'

  const emit = defineEmits(['change'])

  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(0)
  let otherScenic = ref('')

  // 补零
  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 handleCommand = (e) => {
    console.log(e, '=========')
    title.value = e.name
    otherScenic.value = e.name
    current.value = ''
  }
  // 返回上一页
  const handleBack = () => {
    router.go(-1)
  }
  // 点击导航
  const handleNav = (item, index) => {
    if (isSkip.value) {
      router.push(item.path)
    } else {
      if (current.value === index) return
      otherScenic.value = ''
      current.value = index
      title.value = item.name
    }
  }
  // 获取天气数据
  const getWeather = async () => {
    let res = await getWeatherApi()
    weatherData.value = res.data
  }
  // 设置当前路由导航栏
  const setNav = async () => {
    switch (router.currentRoute.value.path) {
      case '/home':
        isSkip.value = true
        title.value = '奉节县旅游指挥调度中心'
        navLeft.value = [
          { name: '安全', path: '/monitor' },
          { name: '景区', path: '/scenic' },
          { name: '交通', path: '/traffic' }
        ]
        navRight.value = [
          { name: '停车' },
          { name: '工单', path: '/workOrder' },
          { name: '舆情', path: '/sentiment' },
          { name: '酒店' }
        ]
        break
      case '/scenic':
        isSkip.value = false
        isBack.value = true
        let res = await getSpotApi()
        navLeft.value = res.data.map((item) => {
          return {
            name: item.ssname,
            id: item.id
          }
        })
        title.value = navLeft.value[current.value].name
        navRight.value = []
        break
      case '/sentiment':
        title.value = '舆情检测'
        navLeft.value = []
        navRight.value = []
        isBack.value = true
        break
      case '/workOrder':
        title.value = '工单消息'
        navLeft.value = []
        navRight.value = []
        isBack.value = true
        break
      case '/traffic':
        title.value = '交通大屏'
        navLeft.value = []
        navRight.value = []
        isBack.value = true
        break
      case '/monitor':
        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
    }
  }
  watch(
    () => router.currentRoute.value,
    () => {
      setNav()
    },
    { immediate: true }
  )
  onMounted(() => {
    getWeather()
    getCurrentDate()
    setInterval(() => {
      getCurrentDate()
    }, 1000)
  })
</script>

<style scoped lang="scss">
  .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);
      }
    }
    .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;
      }
    }
    .title {
      width: vw(3133);
      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;
        background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
      }
    }
    .nav-left {
      position: absolute;
      right: vw(2100);
      top: vh(34);
      display: flex;
      &-item {
        cursor: pointer;
        margin-left: 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-size: 100% 100%;
        .icon {
          width: vw(18);
          height: vw(18);
        }
      }
    }
    .nav-right {
      position: absolute;
      left: vw(2110);
      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%;
      }
    }
  }
</style>
