<template>
  <div class="h_scene flex justify-center bg-white">
    <div class="md:w-bodySet flex flex-col items-center">
      <h4 class=" mt-16 mb-4 text-28px text-title-color mb-12">{{ $t('lang.scene') }}</h4>
      <div class="scene_box relative">
        <img src="@/assets/images/home/scene-bottom.png" class="scene_img_bottom" alt="场景">
        <div class="scene_img_box absolute text-center" ref="box" :style="{'transition': isRight ? '0s' : ''}">
          <img src="@/assets/images/home/scene.png" class="scene_img" alt="场景">
          <img src="@/assets/images/home/scene.png" class="scene_img absolute" style="left: 2027px; top: 0" alt="场景">
          <img src="@/assets/images/home/scene.png" class="scene_img absolute" style="left: -2027px; top: 0" alt="场景">
          <div class="dot absolute" v-for="(item, _index) in lists" :key="_index" :style="{'left': !enStyle ? l_width * _index + 100 + 'px' : l_width * _index + 100 - 36 + 'px'}">
            <p class="text-14px absolute dot1_text text-article-color" :class="{'opacity-0': index === _index}" :style="{'top': item.direction === 'u' ? '-15px' : '', 'white-space': enStyle ? 'nowrap' : 'nowrap'}">{{ item.title }}</p>
            <div ref="block" class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': (index !== _index),}" :style="{'width': enStyle ? '245px' : '', 'height': item.height + 'px'}">
              <div class="circle flex items-center justify-center" @click="clickChange(_index)">
                <div class="circle_dot"></div>
              </div>
              <h4 class="text-18px text-white" :class="{'mb-4': !enStyle, 'mt-7': item.height > 240, 'mb-12': !enStyle && item.height > 270, 'mb-5': enStyle && item.height > 240}">{{ item.title }}</h4>
              <div class="text-14px text-white leading-normal pt-2 flex-grow flex">
                {{ item.text }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import lang from '@/mixin/lang'
export default Vue.extend({
  mixins: [lang],
  data() {
    return {
      index: 2,
      l_width: 226,
      timer: 0,
      isRight: false,
      copyNum: 6,
      prev: [],
      next: []
    }
  },
  computed: {
    // item 的 height 在 240 或 270 方块区域文本标题存在 margin 间距设置
    list() {
      // height 模块高度
      // direction 曲线拐向 d 向下 u 向上
      return [{
          id: 1,
          title: this.$t('lang.SC1'),
          text: this.$t('lang.SC1T'),
          height: 185,
          direction: 'd'
        },
        {
          id: 2,
          title: this.$t('lang.SC2'),
          text: this.$t('lang.SC2T'),
          height: 382,
          direction: 'u'
        },
        {
          id: 3,
          title: this.$t('lang.SC3'),
          text: this.$t('lang.SC3T'),
          height: 263,
          direction: 'd'
        },
        {
          id: 4,
          title: this.$t('lang.SC4'),
          text: this.$t('lang.SC4T'),
          height: 310,
          direction: 'u'
        },
        {
          id: 5,
          title: this.$t('lang.SC5'),
          text: this.$t('lang.SC5T'),
          height: 180,
          direction: 'd'
        },
        {
          id: 6,
          title: this.$t('lang.SC6'),
          text: this.$t('lang.SC6T'),
          height: 380,
          direction: 'u'
        },
        {
          id: 7,
          title: this.$t('lang.SC7'),
          text: this.$t('lang.SC7T'),
          height: 195,
          direction: 'd'
        },
        {
          id: 8,
          title: this.$t('lang.SC8'),
          text: this.$t('lang.SC8T'),
          height: 325,
          direction: 'u'
        },
        {
          id: 9,
          title: this.$t('lang.SC9'),
          text: this.$t('lang.SC9T'),
          height: 450,
          direction: 'u'
        }]
    },
    lists() {
      const prev = this.prev as any
      let next = this.next as any
      const list = this.list as any
      next = JSON.parse(JSON.stringify(list.slice(0, this.copyNum)))
      return [...prev, ...list, ...next]
    }
  },
  methods: {
    clickChange(i:number) {
      // 回归点设置
      let b = i === this.list.length + this.copyNum - 3 || i === this.list.length + this.copyNum - 4
      this.index = i
      this.moveBlock(this.index, b)
      this.initTimer()
    },
    moveBlock(i: number, b: boolean) {
      const el = (this.$refs.box as any & { style: () => any })?.style
      // 当第四个点时回归原始translate
      if (b) {
        el.transform = `translate3d(-${this.l_width * (i - 2)}px, 0, 0)`
        setTimeout(() => {
          el.transition = '0s'
          el.transform = i === 12 ? `translateX(-${this.l_width * (i - 2 - this.list.length)}px)` : 'translateX(0)'
          this.index = i === 12 ? 3 : 2
          const array = this.$refs.block as any
          for (const item of array) {
            item.style.transition = '0s'
          }
        }, 300)
        setTimeout(() => {
          el.transition = ''
          const array = this.$refs.block as any
          for (const item of array) {
            item.style.transition = ''
          }
        }, 500)
        return
      }
      el.transform = i >= 2 ? `translate3d(-${this.l_width * (i - 2)}px, 0, 0)` : 'translate3d(0, 0, 0)'
    },
    initTimer() {
      if (this.timer) clearInterval(this.timer)
      this.timer = window.setInterval(() => {
        this.index++
        this.clickChange(this.index)
        if (this.index === 13) {
          const el = (this.$refs.box as any & { style: () => any })?.style
          setTimeout(() => {
            this.index = 4
            el.transition = '0s'
            el.transform = 'translate3D(0, 0, 0)'
            const array = this.$refs.block as any
            for (const item of array) {
              item.style.transition = '0s'
            }
          }, 300)
          setTimeout(() => {
            el.transition = ''
            const array = this.$refs.block as any
            for (const item of array) {
              item.style.transition = ''
            }
          }, 500)
        }
      }, 4000)
    },
  },
  created() {
    this.next = JSON.parse(JSON.stringify(this.list.slice(0, this.copyNum)))
  },
  mounted() {
    this.initTimer()
  },
  watch:{
    $route() {
      this.next = JSON.parse(JSON.stringify(this.list.slice(0, this.copyNum)))
      this.initTimer()
    }
  }
})
</script>

<style scoped>
  .h_scene {
    height: 730px;
    background-image: url('../../assets/images/home/bg_scene.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position-x: 50%;
  }
  .scene_box {
    width: 1200px;
    height: 470px;
    overflow: hidden;
  }
  /* .scene_box::before {
    content: '';
    display: block;
    width: 40px;
    height: 460px;
    background-image: linear-gradient(to right, #fff, transparent);
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 100;
  }
  .scene_box::after {
    content: '';
    display: block;
    width: 40px;
    height: 460px;
    background-image: linear-gradient(to right, transparent, #fff);
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
    z-index: 100;
  } */
  .scene_img_box, .scene_img {
    width: 2105px;
    left: -80px;
  }
  .scene_img_box {
    top: 6px;
    transition: 0.35s ease-in;
  }
  .scene_img {
    max-width: 10000px;
    top: -20px;
  }
  .scene_img_bottom {
    width: 1200px;
    max-width: 1200px;
    position: absolute;
    bottom: 6px;
    left: 0;
  }
  .dot_block {
    width: 168px;
    padding: 5px 24px;
    background-image: linear-gradient(to bottom, rgba(76, 123, 231, 0.9), rgba(37, 69, 203, 0.9));
    border-radius: 4px 4px 0 0;
    transition: 0.35s ease-in;
  }
  .circle {
    width: 28px;
    height: 28px;
    margin-top: 6px;
    margin-bottom: 10px;
    border: 2px solid #9EF0FF;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
  }
  .circle_dot {
    width: 10px;
    height: 10px;
    background: #9EF0FF;
    border-radius: 50%;
  }
  .dot {
    bottom: -126px;
  }
  .dot1_text {
    left: 50%;
    top: 52px;
    transform: translateX(-50%);
  }
  .en_t_b {
    width: 230px;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
  }

</style>