<template>
  <div id="app">
    <nav class="nav-bar">
      <template v-for="(button, index) in optionData">
        <button
          :key="index"
          @click="handleButtonClick(button, index)"
          :class="['nav-button', { active: currentIndex === index }]"
        >
          <div :class="['button-text', {'scroll': button.text.length > 6}]">
            <span>{{ button.text }}</span>
          </div>
        </button>
        <span v-if="index < optionData.length - 1" class="separator">|</span>
      </template>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  // 业务组件提供的props
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      currentIndex: 0,
      intervalId: null
    }
  },
  computed: {
    option () {
      return this.config.option
    },
    optionData () {
      return this.option.data
    },
    customize () {
      return this.option.customize
    }
  },
  methods: {
    linkage (row) {
      this.$emit('linkage', row)
    },
    sendEnv (data) {
      this.$emit('event', data)
    },
    handleButtonClick (button, index) {
      this.currentIndex = index
      this.sendEnv(button.text)
    },
    startAutoClick () {
      this.intervalId = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.optionData.length
        this.handleButtonClick(this.optionData[this.currentIndex], this.currentIndex)
      }, 3000) // 每3秒点击一次
    }
  },
  mounted () {
    this.startAutoClick()
  },
  beforeDestroy () {
    clearInterval(this.intervalId)
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.nav-bar {
  display: flex;
  justify-content: center; /* 居中对齐 */
  align-items: center;
  background-color: transparent; /* 设置为透明背景 */
  padding: 10px;
}

.nav-button {
  background-color: transparent; /* 设置按钮背景为透明 */
  color: #999; /* 设置按钮文本颜色 */
  border: none;
  padding: 10px;
  cursor: pointer;
  transition: color 0.3s; /* 添加过渡效果 */
  width: 105px; /* 设置按钮宽度为96px以显示6个汉字 */
  overflow: hidden; /* 隐藏超出部分 */
  white-space: nowrap; /* 禁止换行 */
  text-align: center; /* 居中文本 */
  position: relative; /* 使得后续使用的absolute定位生效 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-button.active {
  color: #FFF; /* 设置当前活动按钮的文本颜色 */
}

.nav-button:hover {
  color: #999; /* 悬停时按钮文本颜色 */
}

.button-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  position: relative; /* 使得后续使用的absolute定位生效 */
}

.button-text.scroll span {
  display: inline-block;
  animation: marquee 10s linear infinite;
  padding-left: 100%; /* 为了让文本可以从右向左滚动 */
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.separator {
  margin-left: -2px;
  margin-right: -2px;
  color: #666; /* 设置分隔符颜色 */
}

.content {
  margin-top: 20px;
}
</style>
