<template>
  <section class="header_title" :style="{ '--titleContentW': titleContentW + 'px', '--itemW': itemW + 'px', '--gap': gap + 'px' }">
    <el-button icon="el-icon-arrow-left" class="left_btn" @click="handleTitleBtn(1)"></el-button>
    <el-button icon="el-icon-arrow-right" class="right_btn" @click="handleTitleBtn(-1)"></el-button>
    <section class="left_titles_container">
      <section class="title_content" :style="{ left: `-${position}px` }">
        <section
          v-for="(item, i) in leftTitles"
          :key="`left_title_${i}`"
          :class="['title_item', activeTitle == item.value ? 'active' : '']"
          @click="handleTitleClick(item.value)"
        >
          {{ item.label }}
        </section>
      </section>
    </section>
    <section class="right_titles_container">
      <section class="title_content" :style="{ left: `${right ? right + 'px' : '-' + position + 'px'}` }">
        <section
          v-for="(item, i) in rightTitles"
          :key="`right_title_${i}`"
          :class="['title_item', activeTitle == item.value ? 'active' : '']"
          @click="handleTitleClick(item.value)"
        >
          {{ item.label }}
        </section>
      </section>
    </section>
  </section>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';

onMounted(() => {
  handleWidth();
});
const emit = defineEmits(['changeTitle']);
const props = defineProps({
  titles: {
    type: Array,
    default() {
      return [
        { label: '标题1', value: '1' },
        { label: '标题2', value: '2' },
        { label: '标题3', value: '3' },
        { label: '标题4', value: '4' },
        { label: '标题5', value: '5' },
        { label: '标题6', value: '6' },
        { label: '标题7', value: '7' },
        { label: '标题8', value: '8' },
        { label: '标题9', value: '9' },
        { label: '标题10', value: '10' },
        { label: '标题11', value: '11' },
        { label: '标题12', value: '12' },
        { label: '标题13', value: '13' },
        { label: '标题14', value: '14' },
        { label: '标题15', value: '15' },
        { label: '标题16', value: '16' },
        { label: '标题17', value: '17' },
        { label: '标题18', value: '18' },
        { label: '标题19', value: '19' },
      ];
    },
  },
});
const titleContentW = ref('0');
const itemW = ref('1');
const gap = ref(24);
const leftNum = ref(0);
const position = ref(0);
const right = ref(null);
const activeTitle = ref('1');
const leftTitles = ref([]);
const rightTitles = ref([]);

watch(
  () => props.titles,
  (val) => {
    if (val && val.length) {
      let l = val.length;
      if (l > 6) {
        leftTitles.value = val.slice(0, l - 3);
        rightTitles.value = val.slice(3);
      } else {
        leftTitles.value = val.slice(0, 3);
        if (l > 3) {
          rightTitles.value = val.slice(3);
        }
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
function handleWidth() {
  let ld = document.querySelector('.left_titles_container');
  let w = ld.clientWidth;
  itemW.value = (w - 2 * gap.value) / 3;
  titleContentW.value = itemW.value * leftTitles.value.length + leftTitles.value.length * gap.value;
  if (props.titles.length > 3 && props.titles.length < 6) {
    let l = 3 - (props.titles.length - 3);
    right.value = l * itemW.value + (l - 1) * gap.value;
  }
}
function handleTitleBtn(t = -1) {
  if (props.titles.length > 6) {
    if (leftNum.value > -1) leftNum.value = leftNum.value + t;
    if (leftNum.value < 0) leftNum.value = 0;
    if (leftNum.value > leftTitles.value.length - 3) leftNum.value = leftTitles.value.length - 3;
    position.value = leftNum.value * itemW.value + leftNum.value * gap.value;
  }
}
function handleTitleClick(val) {
  activeTitle.value = val;
  emit('changeTitle', val);
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.header_title {
  background-color: #f5f5f5;
  position: relative;
  padding: 0 68px;
  display: flex;
  justify-content: space-between;
  width: 100vw;
  height: 60px;
  //   background: url('./headerBG.png') no-repeat center/cover;
  background-color: skyblue;
  .left_btn,
  .right_btn {
    position: absolute;
    top: 15px;
    padding: 6px 6px;
    width: 30px;
    height: 30px;
    background-color: rgb(39, 172, 255);
    border-radius: 8px;
    cursor: pointer;
    z-index: 1;
    user-select: none;
    color: #fff;
    font-weight: bold;
  }
  .left_btn {
    left: 14px;
  }
  .right_btn {
    right: 14px;
  }
  .left_titles_container,
  .right_titles_container {
    position: relative;
    width: 30%;
    height: 60px;
    overflow: hidden;
    .title_content {
      position: absolute;
      top: 10px;
      width: var(--titleContentW);
      height: 40px;
      transition: all 0.4s ease;
      font-size: 20px;
      font-weight: bold;
      color: #f5f5f5;
      .active {
        color: #fff;
        text-shadow: 1px 1px 2px red;
      }
      .title_item {
        margin-right: var(--gap);
        display: inline-block;
        width: var(--itemW);
        height: 40px;
        line-height: 40px;
        text-align: center;
        // background: url('./titleBG.png') no-repeat center/cover;
        background-color: aquamarine;
        cursor: pointer;
        user-select: none;
      }
    }
  }
}
</style>
