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

/**
 * 页面数据管理
 * 存储页面中使用的各种数据和状态
 */
const pageData = ref({
  // 轮播图数据
  carouselItems: [
    {
      image: '/www.yuxiit.com/img/yuxiupdata/banner_2021_1.png',
      alt: '成本降低，效率更高',
      active: false
    },
    {
      image: '/www.yuxiit.com/img/yuxiupdata/banner_2021_2.png',
      alt: '成本降低，效率更高',
      active: false
    },
    {
      image: '/www.yuxiit.com/img/yuxiupdata/index23.png',
      alt: '共享单车最佳拍档',
      active: true
    }
  ],

  // 物联网解决方案数据
  iotSolutions: [
    {
      id: 1,
      title: '共享陪护床',
      description: '解决医院陪护家属未配有床位，休息不便的问题…',
      fullDescription: '解决医院陪护家属未配有床位，休息不便的问题，提高供给效率，满足患者及家属的需要，协助医院有效管理的同事，给患者家属更舒适的修养环境。',
      image: '/www.yuxiit.com/img/yuxiupdata/banner3-1.png',
      link: '/sharedbed'
    },
    {
      id: 2,
      title: '共享单车',
      description: '解决大型园区或短距离出行麻烦，提高出行效率…',
      fullDescription: '解决大型园区或短距离出行麻烦，提高出行效率，分时租赁单车，无桩共享，是一种新型的经济环保出行方式。',
      image: '/www.yuxiit.com/img/yuxiupdata/banner3-2.png',
      link: 'http://bike.yuxiit.com/',
      external: true
    },
    {
      id: 3,
      title: '共享电单车',
      description: '解决人们最后三公里的出行，促进环保和健康出行...',
      fullDescription: '解决人们最后三公里的出行，促进环保和健康出行，电动助力，省力高效。',
      image: '/www.yuxiit.com/img/yuxiupdata/banner3-3.png',
      link: '/Ebike'
    },
    {
      id: 4,
      title: '共享电动车',
      description: '电动车相比续航能力更强，适用于各种出行场…',
      fullDescription: '电动车相比续航能力更强，适用于各种出行场景，一站式提供硬件设备与软件开发',
      image: '/www.yuxiit.com/img/yuxiupdata/banner3-4.png',
      link: '/Ebike'
    },
    {
      id: 5,
      title: '共享滑板车',
      description: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符求…',
      fullDescription: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符合用户的短距离出行需求。',
      image: '/www.yuxiit.com/img/yuxiupdata/banner3-5.png',
      link: '/scooter'
    }
  ],

  // 多场景应用数据
  multiScenarioApplications: [
    {
      id: 1,
      title: '智能家居',
      description: '智能门锁<br> 智能空调<br> 智能电饭煲<br> 智能窗帘<br> …',
      image: '/www.yuxiit.com/img/yuxiupdata/banner2-1.png',
      class: 'bodycnt-info1'
    },
    {
      id: 2,
      title: '智慧出行',
      description: '共享单车<br> 共享汽车<br> 共享滑板车<br> 共享电动车<br> …',
      image: '/www.yuxiit.com/img/yuxiupdata/banner2-2.png',
      class: 'bodycnt-info2'
    },
    {
      id: 3,
      title: '智慧医疗',
      description: '共享陪护床<br> 智能安防<br> 共享打印机<br> 共享充电宝<br> …',
      image: '/www.yuxiit.com/img/yuxiupdata/banner2-3.png',
      class: 'bodycnt-info3'
    },
    {
      id: 4,
      title: '智慧园区',
      description: '智能自提柜<br> 共享健身房<br> 共享洗衣机<br> 智能门禁<br> …',
      image: '/www.yuxiit.com/img/yuxiupdata/banner2-4.png',
      class: 'bodycnt-info4'
    }
  ],

  // 软件应用开发数据
  softwareDevelopment: [
    {
      id: 1,
      title: 'iOS开发',
      description: '专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。',
      image: '/www.yuxiit.com/img/yuxiupdata/banner4-1.png'
    },
    {
      id: 2,
      title: 'Android开发',
      description: '针对主流的android系统，提供一站式APP咨询、策划、开发服务。',
      image: '/www.yuxiit.com/img/yuxiupdata/banner4-2.png'
    },
    {
      id: 3,
      title: '微信开发',
      description: '针对企业需求提供专业微信公众平台开发服务。...',
      image: '/www.yuxiit.com/img/yuxiupdata/banner4-3.png'
    },
    {
      id: 4,
      title: '小程序开发',
      description: '无需安装APP，就可以带来更流畅快速的体验。',
      image: '/www.yuxiit.com/img/yuxiupdata/banner4-4.png'
    }
  ],

  // 联网智能硬件数据
  smartHardware: [
    {
      id: 1,
      title: '锁',
      description: 'N2搭载蓝牙4.0通讯技术，以及充分利用这项技术配合物联锁App实现蓝牙秒连接，秒解锁。未来，无需等待。GPS+移动基站LBS多重精准定位，蓝牙低功耗待机，轨迹记录，电子围栏（延伸），远程授权自动开锁，支持应急开锁（延伸），支持短信远程修改相关参数。',
      image: '/www.yuxiit.com/img/yuxiupdata/locker.png',
      position: 'left'
    },
    {
      id: 2,
      title: '联网控制器',
      description: '通过改造传统传感器/PLC/变频器等实现快速联接（无需部署新设备）。通过灵活部署，快速形成各领域的物联网解决方案；有效降低用户改造、部署、维护成本。',
      image: '/www.yuxiit.com/img/yuxiupdata/koz.png',
      position: 'right'
    }
  ],

  // 联系我们数据
  contactInfo: {
    phone: '0755-85225123',
    business: '18123752516',
    email: 'yuxi@yuxiit.com',
    address: '深圳市龙华新区1970文化创意产业园A栋206',
    wechat: '/www.yuxiit.com/img/img/qywx.png'
  }
})

/**
 * 响应式状态管理
 * 用于控制页面交互状态
 */
const uiState = ref({
  // 导航菜单状态
  mobileMenuOpen: false,

  // 轮播图状态
  currentSlide: 2,
  autoPlayInterval: null as NodeJS.Timeout | null,

  // 悬停状态
  hoveredItem: null as number | null,

  // 模态框状态
  showModal: false
})

/**
 * 导航菜单控制
 * 功能：切换移动端导航菜单的显示/隐藏状态
 */
const toggleMobileMenu = () => {
  uiState.value.mobileMenuOpen = !uiState.value.mobileMenuOpen
}

/**
 * 轮播图控制
 * 功能：管理轮播图的切换和自动播放
 */
const goToSlide = (index: number) => {
  uiState.value.currentSlide = index
  // 更新轮播图数据中的active状态
  pageData.value.carouselItems.forEach((item, i) => {
    item.active = i === index
  })
}

const nextSlide = () => {
  const nextIndex = (uiState.value.currentSlide + 1) % pageData.value.carouselItems.length
  goToSlide(nextIndex)
}

const previousSlide = () => {
  const prevIndex = uiState.value.currentSlide === 0
      ? pageData.value.carouselItems.length - 1
      : uiState.value.currentSlide - 1
  goToSlide(prevIndex)
}

const startAutoPlay = () => {
  uiState.value.autoPlayInterval = setInterval(() => {
    nextSlide()
  }, 5000) // 5秒自动切换
}

const stopAutoPlay = () => {
  if (uiState.value.autoPlayInterval) {
    clearInterval(uiState.value.autoPlayInterval)
    uiState.value.autoPlayInterval = null
  }
}

/**
 * 悬停效果控制
 * 功能：管理卡片悬停时的状态变化
 */
const handleMouseEnter = (itemId: number) => {
  uiState.value.hoveredItem = itemId
}

const handleMouseLeave = () => {
  uiState.value.hoveredItem = null
}

/**
 * 复制手机号功能
 * 功能：复制手机号到剪贴板并显示成功提示
 */
const copyPhoneNumber = async () => {
  try {
    await navigator.clipboard.writeText(pageData.value.contactInfo.business)
    uiState.value.showModal = true

    // 3秒后自动关闭模态框
    setTimeout(() => {
      uiState.value.showModal = false
    }, 3000)
  } catch (error) {
    console.error('复制失败:', error)
    // 降级方案：使用传统复制方法
    const textArea = document.createElement('textarea')
    textArea.value = pageData.value.contactInfo.business
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    uiState.value.showModal = true
  }
}

/**
 * 关闭模态框
 * 功能：关闭复制成功的提示模态框
 */
const closeModal = () => {
  uiState.value.showModal = false
}

/**
 * 处理锚点链接
 * 功能：清除URL中的锚点，避免页面跳转问题
 */
const handleAnchorLinks = () => {
  if (window.location.hash) {
    history.replaceState('', document.title, window.location.pathname + window.location.search)
  }
}

/**
 * 加载CSS样式文件
 * 功能：动态加载所需的CSS样式文件
 */
const loadCSSFiles = () => {
  const cssFiles = [
    '/css/bootstrap.min.css',
    '/css/main2.css',
    '/css/main.css',
    '/css/yuxi2019.css'
  ]

  cssFiles.forEach(href => {
    // 检查是否已经加载过该CSS文件
    const existingLink = document.querySelector(`link[href="${href}"]`)
    if (!existingLink) {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = href
      link.type = 'text/css'
      document.head.appendChild(link)
    }
  })
}

/**
 * 添加网站图标
 * 功能：动态添加 favicon 到页面头部
 */
const addFavicon = () => {
  const link = document.createElement('link')
  link.rel = 'shortcut icon'
  link.href = '/img/logoIco.ico'
  document.head.appendChild(link)
}

/**
 * 百度统计代码
 * 功能：动态加载百度统计脚本
 */
const loadBaiduAnalytics = () => {
  const protocol = window.location.protocol === 'https:' ? 'https://' : 'http://'
  const script = document.createElement('script')
  script.src = `${protocol}hm.baidu.com/h.js?34439d222cbf169237b7b18841a6c8f0`
  script.type = 'text/javascript'
  document.head.appendChild(script)
}

/**
 * 解决方案标签页切换
 * 功能：处理解决方案部分的标签页切换逻辑
 */
const handleSolutionTabHover = (index: number) => {
  // 移除所有active类
  const tabs = document.querySelectorAll('.solution .items-body li')
  tabs.forEach(tab => tab.classList.remove('active'))

  // 添加active类到当前标签
  if (tabs[index]) {
    tabs[index].classList.add('active')
  }

  // 显示对应的内容
  const contents = document.querySelectorAll('.items-body-right .solution-rightTabs')
  contents.forEach((content, i) => {
    if (i === index) {
      (content as HTMLElement).style.display = 'block'
    } else {
      (content as HTMLElement).style.display = 'none'
    }
  })

  // 更新内容类名
  const content3 = document.querySelector('.content3')
  if (content3) {
    content3.className = `content3 content3${index}`
  }
}

/**
 * 下拉菜单图片切换
 * 功能：处理下拉菜单中图片的悬停切换
 */
const handleDropdownImageHover = (index: number) => {
  const dropdownMenu = document.querySelector('.dropdown-menu')
  if (dropdownMenu) {
    const images = dropdownMenu.querySelectorAll('.pull-left img')
    images.forEach((img, i) => {
      if (i === index) {
        (img as HTMLElement).style.display = 'block'
      } else {
        (img as HTMLElement).style.display = 'none'
      }
    })
  }
}

/**
 * 页面初始化
 * 功能：设置页面初始状态和事件监听
 */
onMounted(() => {
  // 加载CSS样式文件
  loadCSSFiles()

  // 添加 favicon
  addFavicon()

  // 处理锚点链接
  handleAnchorLinks()

  // 启动轮播图自动播放
  startAutoPlay()

  // 初始化轮播图状态
  pageData.value.carouselItems.forEach((item, index) => {
    item.active = index === uiState.value.currentSlide
  })

  // 加载百度统计
  loadBaiduAnalytics()

  // 绑定解决方案标签页事件
  const solutionTabs = document.querySelectorAll('.solution .items-body li')
  solutionTabs.forEach((tab, index) => {
    tab.addEventListener('mouseenter', () => handleSolutionTabHover(index))
  })

  // 绑定下拉菜单事件
  const dropdownItems = document.querySelectorAll('.dropdown-menu ul li')
  dropdownItems.forEach((item, index) => {
    item.addEventListener('mouseenter', () => handleDropdownImageHover(index))
  })
})

/**
 * 页面卸载清理
 * 功能：清理定时器和事件监听器
 */
onUnmounted(() => {
  stopAutoPlay()
})
</script>

<template>
  <view>
    <!-- 轮播轮播 轮播轮播 -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators" style="background-color: rgba(0,0,0,0.08);">
        <li class="active" data-slide-to="0" data-target="#carousel-example-generic"/>
        <li data-slide-to="1" data-target="#carousel-example-generic"/>
        <li data-slide-to="2" data-target="#carousel-example-generic"/>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item">
          <img alt="成本降低，效率更高" src="/img/yuxiupdata/banner_2021_1.png" style="width: 100%;">
        </div>
        <div class="item">
          <img alt="成本降低，效率更高" src="/img/yuxiupdata/banner_2021_2.png" style="width: 100%;">
        </div>
        <div class="item active">
          <img alt="共享单车最佳拍档" src="/img/yuxiupdata/index23.png" style="width: 100%;">
          <!-- <div class="carousel-caption">
          <h2>智慧科技让生活更美好，帮助企业快速实现智能化</h2>
          <ul class="list-unstyled hidden-xs hidden-sm">
          <li><a href="UI-s.html"><img src="/img/yuxiupdata/item1-1.png" alt="APP定制开发"></a> <span></span>APP定制开发</li>
          <li><a href="http://wechat.yuxiit.com/" target="_blank"><img src="/img/yuxiupdata/item1-2.png" alt="微信开发"></a><span></span>微信开发</li>
          <li><a><img src="/img/yuxiupdata/item1-3.png" alt="管理后台开发"></a><span></span>管理后台开发</li>
          <li><a href="proDevelop.html"><img src="/img/yuxiupdata/item1-4.png" alt="小程序开发"></a><span></span>小程序开发</li>
          </ul>
          </div> -->
        </div>
        <!-- <div class="item">
        <img src="/img/yuxiupdata/banner1.png" alt="成本降低，效率更高"> -->
        <!-- <div class="carousel-caption">
        <h4 style="margin-top: 160px;">成本降低，效率更高</h4>
        <h2 class="scondh2">物联网软硬件一站式解决方案提供商</h2>
        <ul class="list-unstyled hidden-xs hidden-sm">
        <li><a href="UI-s.html"><img src="/img/yuxiupdata/item1-1.png" alt="APP定制开发"></a> <span></span>APP定制开发</li>
        <li><a href="http://wechat.yuxiit.com/" target="_blank"><img src="/img/yuxiupdata/item1-2.png" alt="微信开发"></a><span></span>微信开发</li>
        <li><a><img src="/img/yuxiupdata/item1-3.png" alt="管理后台开发"></a><span></span>管理后台开发</li>
        <li><a href="proDevelop.html"><img src="/img/yuxiupdata/item1-4.png" alt="小程序开发"></a><span></span>小程序开发</li>
        </ul>
        </div> -->
        <!-- </div> -->
      </div>
    </div>


    <!-- 物联网解决方案 -->
    <div class="container-fluid text-center mainitems">
      <div class="headtit">物联网解决方案</div>
      <div class="minstit">针对不同类型使用场景需求，量身定制解决方案</div>
      <div class="row inteBody">
        <!--  -->
        <div class="col-xs-12 col-lg-2 col-lg-offset-1">
          <div class="intebody-info">
            <a href="#"><img alt="" src="/img/yuxiupdata/banner3-1.png"></a>
            <h2>共享陪护床</h2>
            <p>解决医院陪护家属未配有床位，休息不便的问题…</p>
          </div>

          <div class="intebody-hover">
            <h2>共享陪护床</h2>
            <p>
              解决医院陪护家属未配有床位，休息不便的问题，提高供给效率，满足患者及家属的需要，协助医院有效管理的同事，给患者家属更舒适的修养环境。</p>
            <a href="sharedbed.html">查看详情</a>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-12 col-lg-2">
          <div class="intebody-info">
            <a href="#"><img alt="" src="/img/yuxiupdata/banner3-2.png"></a>
            <h2>共享单车</h2>
            <p>解决大型园区或短距离出行麻烦，提高出行效率…</p>
          </div>

          <div class="intebody-hover">
            <h2>共享单车</h2>
            <p>解决大型园区或短距离出行麻烦，提高出行效率，分时租赁单车，无桩共享，是一种新型的经济环保出行方式。</p>
            <a href="http://bike.yuxiit.com/" target="_blank">查看详情</a>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-12 col-lg-2">
          <div class="intebody-info">
            <a href="#"><img alt="" src="/img/yuxiupdata/banner3-3.png"></a>
            <h2>共享电单车</h2>
            <p>解决人们最后三公里的出行，促进环保和健康出行...</p>
          </div>
          <div class="intebody-hover">
            <h2>共享单车</h2>
            <p>解决人们最后三公里的出行，促进环保和健康出行，电动助力，省力高效。</p>
            <a href="Ebike.html">查看详情</a>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-12 col-lg-2">
          <div class="intebody-info">
            <a href="#"><img alt="" src="/img/yuxiupdata/banner3-4.png"></a>
            <h2>共享电动车</h2>
            <p>电动车相比续航能力更强，适用于各种出行场…</p>
          </div>

          <div class="intebody-hover">
            <h2>共享电动车</h2>
            <p>电动车相比续航能力更强，适用于各种出行场景，一站式提供硬件设备与软件开发</p>
            <a href="Ebike.html">查看详情</a>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-12 col-lg-2">
          <div class="intebody-info">
            <a href="#"><img alt="" src="/img/yuxiupdata/banner3-5.png"></a>
            <h2>共享滑板车</h2>
            <p>滑板车相对更加轻便，可穿梭于狭窄街巷，更符求…</p>
          </div>

          <div class="intebody-hover">
            <h2>共享滑板车</h2>
            <p>滑板车相对更加轻便，可穿梭于狭窄街巷，更符合用户的短距离出行需求。</p>
            <a href="scooter.html">查看详情</a>
          </div>
        </div>
      </div>
    </div>


    <!-- 多场景应用 -->
    <div class="container-fluid text-center mainitems" style="background: #FAFAFA;">
      <div class="headtit">多场景应用</div>
      <div class="minstit">通过专业的智能硬件与软件系统开发，解决物联网平台在各类复杂场景下的应用问题</div>
      <div class="row bodycnt">
        <!--  -->
        <div class="col-xs-12 col-lg-2 col-lg-offset-2">
          <div class="bodycnt-info bodycnt-info1">
            <img alt="" src="/img/yuxiupdata/banner2-1.png"><span/>智能家居
          </div>

          <div class="bodycnt-datails">
            <h2>智能家居</h2>
            <span/>
            <p>智能门锁<br> 智能空调<br> 智能电饭煲<br> 智能窗帘<br> …</p>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-12 col-lg-2">
          <div class="bodycnt-info bodycnt-info2">
            <img alt="" src="/img/yuxiupdata/banner2-2.png"><span/>智慧出行
          </div>

          <div class="bodycnt-datails">
            <h2>智慧出行</h2>
            <span/>
            <p>共享单车<br> 共享汽车<br> 共享滑板车<br> 共享电动车<br> …</p>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-12 col-lg-2">
          <div class="bodycnt-info bodycnt-info3">
            <img alt="" src="/img/yuxiupdata/banner2-3.png"><span/>智慧医疗
          </div>
          <div class="bodycnt-datails">
            <h2>智慧医疗</h2>
            <span/>
            <p>共享陪护床<br> 智能安防<br> 共享打印机<br> 共享充电宝<br> …</p>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-12 col-lg-2">
          <div class="bodycnt-info bodycnt-info4">
            <img alt="" src="/img/yuxiupdata/banner2-4.png"><span/>智慧园区
          </div>
          <div class="bodycnt-datails">
            <h2>智慧园区</h2>
            <span/>
            <p>智能自提柜<br> 共享健身房<br> 共享洗衣机<br> 智能门禁<br> …</p>
          </div>
        </div>
      </div>
      <div class="m-btns"><a href="Intelhardware.html">了解更多</a></div>
    </div>


    <!-- 软件应用开发 -->
    <div class="container text-center mainitems">
      <div class="headtit">软件应用开发</div>
      <div class="row applicatBody">
        <!--  -->
        <div class="col-xs-12 col-lg-3">
          <div class="appbody-info">
            <img alt="" src="/img/yuxiupdata/banner4-1.png">
            <h2>iOS开发</h2>
            <p>专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。</p>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-12 col-lg-3">
          <div class="appbody-info">
            <img alt="" src="/img/yuxiupdata/banner4-2.png">
            <h2>Android开发</h2>
            <p>针对主流的android系统，提供一站式APP咨询、策划、开发服务。</p>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-12 col-lg-3">
          <div class="appbody-info">
            <img alt="" src="/img/yuxiupdata/banner4-3.png">
            <h2>微信开发</h2>
            <p>针对企业需求提供专业微信公众平台开发服务。...</p>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-12 col-lg-3">
          <div class="appbody-info">
            <img alt="" src="/img/yuxiupdata/banner4-4.png">
            <h2>小程序开发</h2>
            <p>无需安装APP，就可以带来更流畅快速的体验。</p>
          </div>
        </div>
      </div>
    </div>


    <!-- 联网智能硬件 -->
    <div class="container-fluid text-center mainitems hardware">
      <div class="headtit" style="color: #fff;">联网智能硬件</div>
      <div class="row">
        <div class="col-xs-12  col-lg-8 col-lg-offset-2">

          <div class="hardware-conter">
            <img alt="联网智能硬件" class="img-responsive" src="/img/yuxiupdata/locker.png">
            <div class="col-xs-12 col-lg-8">
              <span>锁</span>
              <i/>
              <p>
                N2搭载蓝牙4.0通讯技术，以及充分利用这项技术配合物联锁App实现蓝牙秒连接，秒解锁。未来，无需等待。GPS+移动基站LBS多重精准定位，蓝牙低功耗待机，轨迹记录，电子围栏（延伸），远程授权自动开锁，支持应急开锁（延伸），支持短信远程修改相关参数。</p>
            </div>
          </div>

          <div class="hardware-conter" style="margin-top: 30px;">
            <div class="col-xs-12 col-lg-8">
              <span>联网控制器</span>
              <i/>
              <p>
                通过改造传统传感器/PLC/变频器等实现快速联接（无需部署新设备）。通过灵活部署，快速形成各领域的物联网解决方案；有效降低用户改造、部署、维护成本。</p>
            </div>
            <img alt="联网智能硬件" class="img-responsive" src="/img/yuxiupdata/koz.png" style="float: right;">
          </div>

        </div>
      </div>
      <!-- 联网智能硬件锁-->
      <div class="m-btns" style="background: none">
        <a href="Intelhardware.html">了解更多</a>
      </div>
    </div>


  </view>
</template>

<style scoped>
/* 组件样式 */
</style>