<template>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container wid-72">
      <div class="navbar-header">
        <button 
          type="button" 
          class="navbar-toggle collapsed" 
          data-toggle="collapse" 
          data-target="#mynav" 
          aria-expanded="false"
          @click="toggleMobileMenu"
        >
          <span class="sr-only"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/yuxi">
          <img class="img-responsive" src="/www.yuxiit.com/img/yuxiupdata/logo.png" alt="玉犀科技">
          <span>万物互联 智启未来</span>
        </a>
      </div>
      
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" :class="{ 'in': mobileMenuOpen }" id="mynav">
        <ul class="nav navbar-nav navbar-right">
          <li class="hidden-xs hidden-sm hidden-md">
            <NuxtLink to="/yuxi">首页</NuxtLink>
          </li>
          
          <!-- 共享解决方案 -->
          <li class="dropdown">
            <a data-toggle="dropdown" role="button" @click="toggleDropdown('shared')">
              共享解决方案<span class="caret"></span>
            </a>
            <div class="dropdown-menu" :class="{ 'show': activeDropdown === 'shared' }">
              <div class="pull-left col-xs-8 col-sm-6">
                <img 
                  v-for="(img, index) in sharedMenuImages" 
                  :key="index"
                  class="img-responsive" 
                  :src="img.src" 
                  :alt="img.alt" 
                  :style="{ display: index === 0 ? 'block' : 'none' }"
                >
              </div>
              <ul class="pull-right col-xs-4 col-sm-6">
                <li v-for="(item, index) in sharedMenuItems" :key="index">
                  <a 
                    :href="item.href" 
                    :target="item.target"
                    @mouseenter="showMenuImage(index)"
                  >
                    {{ item.title }}
                    <p>{{ item.description }}</p>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          
          <!-- 行业解决方案 -->
          <li class="dropdown">
            <a data-toggle="dropdown" role="button" @click="toggleDropdown('industry')">
              行业解决方案 <span class="caret"></span>
            </a>
            <div class="dropdown-menu" :class="{ 'show': activeDropdown === 'industry' }">
              <div class="pull-left col-xs-8 col-sm-6">
                <img 
                  v-for="(img, index) in industryMenuImages" 
                  :key="index"
                  class="img-responsive" 
                  :src="img.src" 
                  :alt="img.alt" 
                  :style="{ display: index === 0 ? 'block' : 'none' }"
                >
              </div>
              <ul class="pull-right col-xs-4 col-sm-6">
                <li v-for="(item, index) in industryMenuItems" :key="index">
                  <a 
                    :href="item.href" 
                    :target="item.target"
                    @mouseenter="showIndustryMenuImage(index)"
                  >
                    {{ item.title }}
                    <p>{{ item.description }}</p>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          
          <!-- 软件应用开发 -->
          <li class="dropdown">
            <a data-toggle="dropdown" role="button" @click="toggleDropdown('software')">
              软件应用开发<span class="caret"></span>
            </a>
            <div class="dropdown-menu" :class="{ 'show': activeDropdown === 'software' }">
              <div class="pull-left col-xs-8 col-sm-6">
                <img 
                  v-for="(img, index) in softwareMenuImages" 
                  :key="index"
                  class="img-responsive" 
                  :src="img.src" 
                  :alt="img.alt" 
                  :style="{ display: index === 0 ? 'block' : 'none' }"
                >
              </div>
              <ul class="pull-right col-xs-4 col-sm-6">
                <li v-for="(item, index) in softwareMenuItems" :key="index">
                  <a 
                    :href="item.href" 
                    :target="item.target"
                    @mouseenter="showSoftwareMenuImage(index)"
                  >
                    {{ item.title }}
                    <p>{{ item.description }}</p>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          
          <!-- 物联网解决方案 -->
          <li class="dropdown">
            <a data-toggle="dropdown" role="button" @click="toggleDropdown('iot')">
              物联网解决方案 <span class="caret"></span>
            </a>
            <div class="dropdown-menu" :class="{ 'show': activeDropdown === 'iot' }">
              <div class="pull-left col-xs-8 col-sm-6">
                <img 
                  v-for="(img, index) in iotMenuImages" 
                  :key="index"
                  class="img-responsive" 
                  :src="img.src" 
                  :alt="img.alt" 
                  :style="{ display: index === 0 ? 'block' : 'none' }"
                >
              </div>
              <ul class="pull-right col-xs-4 col-sm-6">
                <li v-for="(item, index) in iotMenuItems" :key="index">
                  <a 
                    :href="item.href" 
                    :target="item.target"
                    @mouseenter="showIotMenuImage(index)"
                  >
                    {{ item.title }}
                    <p>{{ item.description }}</p>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          
          <li class="hidden-xs hidden-sm hidden-md">
            <NuxtLink to="/yuxi/about">关于创特</NuxtLink>
          </li>
          <li>
            <a href="#contact-us">联系我们</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 响应式数据
const mobileMenuOpen = ref(false)
const activeDropdown = ref('')

// 共享解决方案菜单数据
const sharedMenuImages = [
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-1.png', alt: '共享单车' },
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-2.png', alt: '景区共享电动车' },
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-3.png', alt: '共享滑板车' },
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-4.png', alt: '共享陪护床' },
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-5.png', alt: '共享电动车' },
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-6.png', alt: '共享充电宝' }
]

const sharedMenuItems = [
  { 
    title: '共享单车', 
    description: '一种新型环保共享经济，最大化的利用了公共道路通过率',
    href: 'http://bike.yuxiit.com/', 
    target: '_blank' 
  },
  { 
    title: '景区共享电动车', 
    description: '有助于缓解交通堵塞，以及公路的磨损，减少空气污染，降低对能量的依赖性',
    href: '#', 
    target: '_self' 
  },
  { 
    title: '共享滑板车', 
    description: '新的共享出行方式，轻便省力',
    href: '/yuxi/scooter', 
    target: '_self' 
  },
  { 
    title: '共享陪护床', 
    description: '立足医院民生需求而诞生，解决医患家属的休息问题',
    href: '/yuxi/sharedbed', 
    target: '_self' 
  },
  { 
    title: '共享电动车', 
    description: '通过扫码开锁，循环共享',
    href: '/yuxi/Ebike', 
    target: '_self' 
  },
  { 
    title: '共享充电宝', 
    description: '企业提供的充电租赁设备，用户扫码取出后即可使用，用完后就近归还',
    href: '/yuxi/sharabank', 
    target: '_self' 
  }
]

// 行业解决方案菜单数据
const industryMenuImages = [
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-12.png', alt: '智能电动车' },
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-16.png', alt: '智能换电柜' }
]

const industryMenuItems = [
  { 
    title: '智能电动车', 
    description: '打造智能电动车时代!方便用户的出行,让骑车出行便捷',
    href: '/yuxi/Internet_Things_ElectCar', 
    target: '_self' 
  },
  { 
    title: '智能换电柜', 
    description: '智能换电柜系统以集中换电替代用户充电，解决国内超过3.5亿辆电动车的电池续航问题',
    href: '/yuxi/Internet_Things_cabinet', 
    target: '_self' 
  }
]

// 软件应用开发菜单数据
const softwareMenuImages = [
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-9.png', alt: '微信开发' },
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-10.png', alt: 'APP开发' },
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-11.png', alt: '小程序开发' }
]

const softwareMenuItems = [
  { 
    title: '微信开发', 
    description: '定制开发可使您的微信公众平台更突出价值',
    href: 'http://wechat.yuxiit.com/', 
    target: '_blank' 
  },
  { 
    title: 'APP开发', 
    description: '小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验',
    href: '/yuxi/UI-s', 
    target: '_self' 
  },
  { 
    title: '小程序开发', 
    description: '提供高效的APP开发、手机APP制作与APP管理等服务',
    href: '/yuxi/proDevelop', 
    target: '_self' 
  }
]

// 物联网解决方案菜单数据
const iotMenuImages = [
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-15.png', alt: '物联网应用定制' },
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-13.png', alt: '物联网智能硬件' },
  { src: '/www.yuxiit.com/img/yuxiupdata/mune-14.png', alt: '物联网IOT云平台' }
]

const iotMenuItems = [
  { 
    title: '物联网应用定制', 
    description: '规范化的开发流程，实现产品快速落地',
    href: '/yuxi/Internet_Things', 
    target: '_self' 
  },
  { 
    title: '物联网智能硬件', 
    description: '支持定制，满足各类硬件场景需求',
    href: '/yuxi/Internet_Things_hardware', 
    target: '_self' 
  },
  { 
    title: '物联网IOT云平台', 
    description: '灵活、可靠、安全，有效降低成本',
    href: '/yuxi/Internet_Things_IOT', 
    target: '_self' 
  }
]

// 方法
const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
}

const toggleDropdown = (type: string) => {
  activeDropdown.value = activeDropdown.value === type ? '' : type
}

const showMenuImage = (index: number) => {
  // 显示对应的菜单图片
  const images = document.querySelectorAll('.dropdown-menu .pull-left img')
  images.forEach((img, i) => {
    ;(img as HTMLElement).style.display = i === index ? 'block' : 'none'
  })
}

const showIndustryMenuImage = (index: number) => {
  const images = document.querySelectorAll('.dropdown-menu .pull-left img')
  images.forEach((img, i) => {
    ;(img as HTMLElement).style.display = i === index ? 'block' : 'none'
  })
}

const showSoftwareMenuImage = (index: number) => {
  const images = document.querySelectorAll('.dropdown-menu .pull-left img')
  images.forEach((img, i) => {
    ;(img as HTMLElement).style.display = i === index ? 'block' : 'none'
  })
}

const showIotMenuImage = (index: number) => {
  const images = document.querySelectorAll('.dropdown-menu .pull-left img')
  images.forEach((img, i) => {
    ;(img as HTMLElement).style.display = i === index ? 'block' : 'none'
  })
}
</script>

<style scoped>
.navbar {
  background-color: #fff;
  border-bottom: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-brand {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #333;
}

.navbar-brand img {
  height: 40px;
  margin-right: 10px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu .pull-left {
  width: 60%;
  float: left;
}

.dropdown-menu .pull-right {
  width: 40%;
  float: right;
}

.dropdown-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-menu li {
  padding: 8px 15px;
  border-bottom: 1px solid #f0f0f0;
}

.dropdown-menu li:last-child {
  border-bottom: none;
}

.dropdown-menu a {
  color: #333;
  text-decoration: none;
  display: block;
}

.dropdown-menu a:hover {
  color: #007bff;
}

.dropdown-menu p {
  margin: 5px 0 0 0;
  font-size: 12px;
  color: #666;
}

@media (max-width: 768px) {
  .navbar-toggle {
    display: block;
  }
  
  .navbar-collapse {
    border-top: 1px solid #e7e7e7;
  }
  
  .navbar-collapse.in {
    display: block;
  }
}
</style>
