<script setup>
import {onMounted, reactive, ref} from "vue";

const swiperItem=reactive([
  {
    src:'/src/assets/image/轮播图2.png'
  },
  {
    src:'/src/assets/image/轮播图2.png'
  },
  {
    src:'/src/assets/image/轮播图2.png'
  },
])
const cardSwiperItem=reactive([
  {
    src:'/src/assets/img/工地.png'
  },
  {
    src:'/src/assets/img/企业.png'
  },
  {
    src:'/src/assets/img/政务会议室.png'
  },
])

const tcSwiperItem=reactive([
  {
    src:'/src/assets/img/tc-img1.png',
    title:'飞利信流媒体实时总线1',
    text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
    label:'飞利信流媒体实时总线',
  },
  {
    src:'/src/assets/img/tc-img1.png',
    title:'飞利信流媒体实时总线2',
    text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
    label:'机器人声学感知',
  },
  {
    src:'/src/assets/img/tc-img1.png',
    title:'飞利信流媒体实时总线3',
    text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
    label:'动态啸叫抑制',
  },
  {
    src:'/src/assets/img/tc-img1.png',
    title:'飞利信流媒体实时总线3',
    text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
    label:'基于本地网络语音转写、声纹特征识别、会议纪要',
  },
  {
    src:'/src/assets/img/tc-img1.png',
    title:'飞利信流媒体实时总线3',
    text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
    label:'实时AI降噪',
  },
  {
    src:'/src/assets/img/tc-img1.png',
    title:'飞利信流媒体实时总线3',
    text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
    label:'多指向性可调',
  },
  {
    src:'/src/assets/img/tc-img1.png',
    title:'飞利信流媒体实时总线3',
    text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
    label:'快速人声定位及增强',
  },
  {
    src:'/src/assets/img/tc-img1.png',
    title:'飞利信流媒体实时总线3',
    text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
    label:'流数据实时加解密',
  },
])
const carouselRef = ref()
let hoverTimer = null

const onCardMouseEnter = (index) => {
  // 清除之前的定时器
  if (hoverTimer) {
    clearTimeout(hoverTimer)
  }

  // 延迟切换，避免鼠标快速划过时频繁切换
  hoverTimer = setTimeout(() => {
    if (carouselRef.value) {
      carouselRef.value.setActiveItem(index)
    }
  }, 200) // 200ms 延迟，提升体验
}


//核心技术
let hoverTime = null
const tcSwiperRef = ref()
const currentIndex = ref(0)
const showSwiper = (index) => {
  // 如果有定时器，先清除
  if (hoverTime) {
    clearTimeout(hoverTime)
  }

  // 设置定时器，延迟切换（避免快速划过时频繁切换）
  hoverTime = setTimeout(() => {
    goToSlide(index)
  }, 150) // 150ms 延迟，可以根据需要调整
}
// 跳转到指定幻灯片
const goToSlide = (index) => {
  // 确保索引在有效范围内
  if (index >= 0 && index < tcSwiperItem.length) {
    currentIndex.value = index
    // 如果需要直接操作轮播组件（兼容性）
    if (tcSwiperRef.value && tcSwiperRef.value.setActiveItem) {
      tcSwiperRef.value.setActiveItem(index)
    }
  }
}
onMounted(() => {
  // 可以设置初始显示
  goToSlide(0)
})
const tcSwiperChange=(current,perv)=>{
  currentIndex.value = current
}
</script>

<template>
  <div class="block text-center swiper" m="t-4">
    <el-carousel trigger="click" height="852px" :arrow="'never'" indicator-position >
      <el-carousel-item v-for="(item,index) in swiperItem" :key="index">
        <img :src=item.src :alt=index>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="main">
    <div class="solution">
      <div class="title">解决方案</div>
      <div class="card-swiper">
        <el-carousel ref="carouselRef" trigger="click" :interval="4000" type="card" height="524px"  :arrow="'never'" :autoplay="true" :pause-on-hover="true" indicator-position="none">
          <el-carousel-item v-for="(item,index) in cardSwiperItem" :key="item" @mouseenter="onCardMouseEnter(index)" >
            <img :src=item.src alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="technologyCore">
      <el-row>
        <el-col :span="9">
          <div class="tc-left">
            <div class="title">核心技术</div>
            <div class="hr"></div>
            <div class="text">
              深耕二十余载，飞利信积累了从核心硬件设计到智能算法开发的全面深厚功底。我们始终以自主创新的技术为核心驱动力，致力于为每一次关键通讯提供稳定、清晰、卓越的体验保障。
            </div>
            <div class="tc-left-list">
              <div
                  v-for="(item,index) in tcSwiperItem"
                  :key="index"
                  class="tc-left-list-item"
                  @click="showSwiper(index)"
                  :class="{ 'active': currentIndex === index }"
              >
                {{item.label}}
              </div>
            </div>
          </div>
        </el-col>
        <el-col :offset="3" :span="12">
          <div class="tc-right">
            <div class="img">
              <el-carousel ref="tcSwiperRef" v-model:current-index="currentIndex" class="tc-swiper" indicator-position="outside" height="635px" :autoplay="false" :arrow="'never'" @change="tcSwiperChange">
                <el-carousel-item v-for="(item,index) in tcSwiperItem" :key="index">
                  <img :src=item.src alt="">
                  <div class="content">
                    <p class="title">{{ item.label }}</p>
                    <div class="text">
                      {{item.text}}
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>

            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style scoped lang="less">
.swiper{
  height:852px;
  .el-carousel{
    --el-carousel-indicator-height:12.53px;
    --el-carousel-indicator-width:203.69px;
  }
}
.main{
  width: 1585px;
  margin: auto;
  .solution{
    margin: auto ;
    padding:109.79px 0;
    .title{
      text-align: center;
      font-size: 40px;
      font-weight: 700;
      margin-bottom: 80px;
    }
    .card-swiper{
      width: 100%;
      height: 524px;
      .el-carousel__container{
        .el-carousel__item{
          height: 524px;
        }
      }
      img{
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
  }
  .technologyCore{
    padding: 40.31px;
    .tc-left{
      .title{
        font-weight: 700;
        font-size: 56px;
        line-height: 100%;
        padding: 25px 0;
      }
      .hr{
        width: 48.2584228515625px;
        height: 6.0625px;
        opacity: 1;
        background: #80CAFF;
      }
      .text{
        margin-top: 50px;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.5em;
      }
      .tc-left-list{
        display: flex;
        gap: 15px;
        align-items: end; /* 顶部对齐 */
        flex-wrap: wrap;
        justify-content: space-between;

        margin-top: 140px;
        .tc-left-list-item{
          display: inline-block;
          text-align: center;
          flex-grow:1;
          //flex-shrink: 0;
          opacity: 1;
          border-radius: 12px;
          padding: 27px 19px;
          background-color: #EBEBEB;
          font-weight: 400;
          font-size: 16px;
          line-height: 100%;
          color:#888888;
        }
        .tc-left-list-item.active {
          font-weight: 500;
          //font-size: 20px;
          color: #fff;
          background-image: url("@/assets/img/itemBgShort.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          padding: 47px 19px;
        }
      }

    }
    .tc-right{
      .img{
        border-radius:8px;
        .tc-swiper{
          --el-carousel-indicator-width:10.08px;
          --el-carousel-indicator-height:10.08px;
          --el-carousel-indicator-out-color:#277EFF;
          :deep(.el-carousel__button){
            border-radius:50%;
          }
        }
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 16px;
          overflow: hidden;
        }
      }
      .content{
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 20px;
        background-color: #19304D4D;
        backdrop-filter: blur(14.399999618530273px);
        width: 100%;
        border-bottom-right-radius: 16px;
        border-bottom-left-radius: 16px;
        .title{
          font-family: Source Han Sans CN;
          color: #fff;
          font-weight: 700;
          font-size: 28px;
          line-height: 100%;
        }
        .text{
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #fff;
          margin-top: 20px;
          line-height: 1.5em;
        }
      }
    }
  }
}




</style>
