<script setup>
//核心技术
import {onMounted, reactive, ref} from "vue";

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:'流数据实时加解密',
  },
])
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="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>
</template>

<style scoped lang="less">
.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;
        cursor: pointer;
        opacity: 1;
        border-radius: 12px;
        padding: 27px 19px;
        background-color: #EBEBEB;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        color:#888888;
        &:hover{
          transform: scale(1.05);
        }
      }
      .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{
        color: #fff;
        font-weight: 700;
        font-size: 28px;
        line-height: 100%;
      }
      .text{
        font-weight: 400;
        font-size: 16px;
        color: #fff;
        margin-top: 20px;
        line-height: 1.5em;
      }
    }
  }
}
</style>
