<template>
  <div class="ai-script">
    <!-- 搜索和语言选择区域 -->
    <div class="search-container">
      <el-input
          v-model="searchKeyword"
          placeholder="请输入关键词查找文稿内容"
          class="search-input"
          prefix-icon="el-icon-search"
          @keyup.enter.native="searchContent"
          @input="handleInputChange"
          clearable
          native-type="text"
        />
      <div class="language-selector">
        <span class="language-label">语言</span>
        <el-select v-model="selectedLanguage" class="language-select" @change="changeLanguage" placeholder="请选择语言">
          <el-option v-for="lang in selectableLang" :key="lang.srclang" :label="getSelectLabel(lang)" :value="lang.srclang"></el-option>
        </el-select>
      </div>
    </div>

    <!-- 内容展示区域 -->
    <div class="content-container">
      <!-- 动态渲染内容块 -->
      <div v-for="(item, index) in contentList" :key="index" class="content-item" :class="{'active': currentTime >= item.start && currentTime <= item.end}">
        <div class="timestamp">
          <div class="timestamp-text">
            <i class="el-icon-time"></i>
            {{ formatTime(item.start) }}
          </div>
        </div>
        <el-card class="content-text" @click.native="scrollToTime(item.start)">
            <div v-html="item.highlightedContent || item.text"></div>
          </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  props: {
    // 视频链接对应的content Id
    blobId: {
      type: String,
      default: ''
    },
    isDrag:{
      type: Boolean,
      default: true,
    },
  },
  name: 'ai-script',
  data() {
    return {
      searchKeyword: '',
      selectedLanguage: 'zh-CN',
      originalContentList: [],
      contentList: [], // 用于显示的内容列表
      isUserScrolling: false, // 用户是否正在滚动
      userScrollTimeout: null // 滚动超时计时器
    }
  },
  computed: {
    ...mapGetters([
      'currentTime',
      'selectableLang',
      'duration'
    ]),
  },
  mounted: function() {
    // 添加滚动事件监听，检测用户手动滚动
    const container = document.querySelector('.content-container');
    if (container) {
      container.addEventListener('scroll', this.handleUserScroll);
    }
  },
  
  beforeDestroy: function() {
    // 清理事件监听和计时器
    const container = document.querySelector('.content-container');
    if (container) {
      container.removeEventListener('scroll', this.handleUserScroll);
    }
    if (this.userScrollTimeout) {
      clearTimeout(this.userScrollTimeout);
    }
  },
  
  watch: {
    // 监听currentTime变化，自动滚动到当前激活项
    currentTime: function(newTime) {
      // 只有当用户没有手动滚动时才执行自动滚动
      if (!this.isUserScrolling) {
        this.$nextTick(function() {
          const activeElement = document.querySelector('.content-item.active');
          if (activeElement) {
            // 获取内容容器
            const container = document.querySelector('.content-container');
            
            // 计算元素是否在可视区域内
            const containerRect = container.getBoundingClientRect();
            const elementRect = activeElement.getBoundingClientRect();
            
            // 如果元素不在可视区域内，则滚动到可视区域
            if (elementRect.top < containerRect.top || elementRect.bottom > containerRect.bottom) {
              // 计算元素相对于容器的偏移量，而不是使用scrollIntoView
              // 这样只会滚动content-container内部，不会影响页面滚动
              
              // 计算元素相对于容器的位置
              const elementOffsetTop = activeElement.offsetTop;
              const containerScrollTop = container.scrollTop;
              const containerHeight = container.clientHeight;
              const elementHeight = activeElement.clientHeight;
              
              // 计算目标滚动位置，使元素居中显示
              // 考虑容器的内边距和元素本身的高度
              let targetScrollTop = elementOffsetTop - (containerHeight / 2) + (elementHeight / 2);
              
              // 确保目标滚动位置不会小于0
              targetScrollTop = Math.max(0, targetScrollTop);
              
              // 确保目标滚动位置不会导致元素超出容器底部
              const maxScrollTop = container.scrollHeight - containerHeight;
              targetScrollTop = Math.min(targetScrollTop, maxScrollTop);
              
              // 使用requestAnimationFrame实现平滑滚动
              const startScrollTop = containerScrollTop;
              const distance = targetScrollTop - startScrollTop;
              const duration = 300; // 滚动持续时间，毫秒
              let startTime = null;
              
              function animateScroll(currentTime) {
                if (!startTime) startTime = currentTime;
                const timeElapsed = currentTime - startTime;
                container.scrollTo({
                  top: startScrollTop + distance - elementHeight - 120,
                  behavior: 'smooth'
                });
                
                if (timeElapsed < duration) {
                  requestAnimationFrame(animateScroll);
                }
              }
              
              requestAnimationFrame(animateScroll);
            }
          }
        });
      }
    }
  },
  created() {
    // 初始化时根据语言选择显示内容
    this.changeLanguage(this.selectedLanguage)
    
  },
  methods: {
    // 动态获取选择框的标签
    getSelectLabel(lang) {
      if (lang.srclang == 'zh-CN') {
        return lang.label;
      }
      return `${lang.name} (${lang.label})`;
    },
    formatTime (time) {
      // 格式化时间为HH:MM:SS，如01:00:00
      const hours = Math.floor(time / 3600);
      const minutes = Math.floor((time % 3600) / 60);
      const seconds = Math.floor(time % 60);
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
    // 跳转到指定时间点
    scrollToTime(time) {
      // console.log('scrollToTime', time , this.blobId, localStorage.getItem('videoProgressData'), this.duration)
      if(!this.isDrag && this.duration){
        var t = localStorage.getItem('videoProgressData')
        var arr = t&&JSON.parse(t) || {}
        if(arr[this.blobId] < time/this.duration || !arr[this.blobId]){
         return
        }
      }
      console.log('跳转到时间点:', time);
      this.$emit('changeCurrentTime', time);
      // 设置用户滚动状态，避免自动滚动干扰
      this.isUserScrolling = true;
      if (this.userScrollTimeout) {
        clearTimeout(this.userScrollTimeout);
      }
      this.userScrollTimeout = setTimeout(() => {
        this.isUserScrolling = false;
      }, 3000);
    },
    // 处理用户滚动事件
    handleUserScroll: function() {
      this.isUserScrolling = true;
      
      // 清除之前的计时器
      if (this.userScrollTimeout) {
        clearTimeout(this.userScrollTimeout);
      }
      
      // 设置新的计时器，3秒后恢复自动滚动
      this.userScrollTimeout = setTimeout(() => {
        this.isUserScrolling = false;
      }, 3000);
    },
    
    searchContent () {
      // 搜索功能实现
      if (!this.searchKeyword.trim()) {
        // 如果搜索关键词为空，显示所有内容
        this.contentList = this.originalContentList.map(item => ({ ...item }));
        return;
      }
      
      const keyword = this.searchKeyword.trim();
      // 过滤包含关键词的内容
      const filteredList = this.originalContentList.filter(item => 
        item.text.includes(keyword)
      );
      
      if (filteredList.length === 0) {
        // 如果没有搜索到内容，显示提示
        this.$message({
          message: '未找到相关内容',
          type: 'info'
        });
        this.contentList = this.originalContentList.map(item => ({ ...item }));
      } else {
        // 对搜索到的内容进行关键词高亮处理
        this.contentList = filteredList.map(item => ({
          ...item,
          highlightedContent: this.highlightKeyword(item.text, keyword)
        }));
        console.log(this.contentList)
      }
    },
    highlightKeyword(content, keyword) {
      // 对关键词进行转义，防止正则表达式特殊字符的影响
      const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      // 使用正则表达式全局匹配关键词并添加高亮标记
      const regex = new RegExp(`(${escapedKeyword})`, 'gi');
      return content.replace(regex, '<span style="color: rgba(6, 125, 255, 1); background: rgba(6, 125, 255, 0.1);">$1</span>');
    },
    changeLanguage (event) {
      // this.selectedLanguage = event
      this.selectableLang.forEach(item => {
        if (item.srclang === event) {
          console.log('当前语言：', item)
          if (!item.originalContentList) {
            try {
              item.originalContentList = JSON.parse(item.subtitleData)
            } catch (error) {
              console.error('ai文稿格式有问题！')
            }
          }
          this.originalContentList = item.originalContentList || []
          // 初始化时显示所有内容
          this.contentList = this.originalContentList.map(item => ({ ...item }));
          console.log('ai文稿数据：', this.originalContentList)
        }
      })
      console.log('切换语言:', event)
    },
    handleInputChange() {
      // 当输入框内容变化时，如果为空则重置显示所有内容
      if (!this.searchKeyword.trim()) {
        this.contentList = this.originalContentList.map(item => ({ ...item }));
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ai-script {
  padding: 15px 0;
  background-color: #fff;
  border-radius: 8px;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 20px 15px 20px;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-input {
  flex: 1;
}

:deep(.el-input__inner) {
  border-radius: 20px;
  border-color: #2688FF;
}

:deep(.el-input__inner:focus) {
  border-color: #1a6fe0;
  box-shadow: 0 0 0 2px rgba(38, 136, 255, 0.2);
}

:deep(.el-input__prefix) {
  left: 15px;
}

:deep(.el-input__icon) {
  color: #2688FF;
}

.language-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.language-label {
  font-size: 14px;
  color: #333;
}

.language-select {
  width: 90px;
}

:deep(.el-select__inner) {
  border-radius: 4px;
}

.content-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 410px;
  overflow-y: auto;
  padding: 0 20px;
}

.content-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.timestamp {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
  padding: 5px 0;
  .timestamp-text{
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 12px;
    padding: 2px 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.3px;
  }
}

:deep(.el-icon-time) {
  color: #2688FF;
}

.content-text {
  cursor: pointer;
  line-height: 1.6;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(250, 250, 250, 1);
  line-height: 22px;
    letter-spacing: 0.28px;
  }
  
.active {
  .timestamp-text{
    color: rgba(6, 125, 255, 1);
    background: rgba(6, 125, 255, 0.1);
  }
  .content-text{
    border: 1px solid rgba(116, 182, 255, 1);
    box-shadow: 0px 0px 7px 0px rgba(6, 125, 255, 0.24);
    background: rgba(250, 250, 250, 1);
  }
}
:deep(.el-card__body) {
  padding: 15px;
}

:deep(.el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover) {
  box-shadow: 0 2px 12px 0 rgba(38, 136, 255, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box {
    max-width: none;
  }
  
  .language-selector {
    justify-content: flex-end;
  }
}
</style>