<template>
  <div class="tab-sxdx">
    <i class="sxdx-scroll scroll-left" @click="handleSxdxScroll('left')"></i>
    <i class="sxdx-scroll scroll-right" @click="handleSxdxScroll('right')"></i>
    <i class="switch-btn type-switch" @click="handleChangeType()"></i>
    <i class="switch-btn view-switch" @click="handleChangeView()"></i>
    <el-carousel
      trigger="click"
      class="sxdx-list-wrapper"
      indicator-position="none"
      arrow="never"
      :autoplay="false"
      ref="sxdx_carousel"
    >
      <el-carousel-item v-for="page in sxdxData_len" :key="page" class="sxdx-list">
        <div
          v-for="item,index in sxdxData.value.slice((page-1)*4, (page-1)*4+4)"
          :class="{'highlight': sxdxCurrent.slice(0,4)==item.year, 'disable': !(item.usable1||item.usable2)}"
          class="sxdx-item"
          @click="handleChooseSxdx(item,'.1')"
        >
          <span>{{ item.year }}</span>
          <div>
            <span :class="{'highlight': sxdxCurrent.slice(5)==1,'disable': !item.usable1 }" @click.stop="handleChooseSxdx(item,'.1')">上半年</span>
            <span :class="{'highlight': sxdxCurrent.slice(5)==2,'disable': !item.usable2 }" @click.stop="handleChooseSxdx(item,'.2')">下半年</span>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'UnderWater'
}
</script>

<script setup>
import { onMounted, ref, reactive, computed, onBeforeUnmount } from 'vue'
import { ElCarousel, ElCarouselItem } from 'element-plus'
import 'element-plus/es/components/carousel/style/css'
import 'element-plus/es/components/carousel-item/style/css'
import { useNow, useDateFormat } from '@vueuse/core'
import { ueCallCloseWater, ueCallOpenWater, ueCallChangeShuishen, ueCallFlyToSXDX, ueCallFlyToSXDXNew, ueCallFlyToSXDXStretch, ueCallChangeTime, ueCallGetNowTime } from '@/utils/UIInteractions'
import bus from '@/utils/bus'


onMounted(() => {
  bus.emit('toggleUnderWaterLegend',{from: 'show_sxdx', state: true})
  initSxdxData()
  ueCallFlyToSXDX()
  setTimeout(() => {
    ueCallChangeTime(18)
    ueCallCloseWater()
    ueCallChangeShuishen('2023.1', currentType.value)
  }, 2000);
})

onBeforeUnmount(() => {
  ueCallGetNowTime()
  ueCallOpenWater()
  bus.emit('changeYuJiNum', 0)
  bus.emit('toggleUnderWaterLegend',{from: 'show_sxdx', state: false})
})

const sxdxCurrent = ref('2023.1')
const currentYear = useDateFormat(useNow(), 'YYYY').value

function initSxdxData() {
  for(let i=Number(currentYear); i>=2020; i--) {
    let usable1 = true
    let usable2 = true
    if(i===2023) {
      usable2 = false
    }
    sxdxData.value.push({
      year: i,
      usable1,
      usable2
    })
  }
}

const sxdxData_len = computed(() => {
  return Math.ceil(sxdxData.value.length/4)
})

const sxdx_carousel = ref(null)

function handleSxdxScroll(type) {
  if(type==='left') {
    sxdx_carousel.value.prev()
  }else if(type==='right') {
    sxdx_carousel.value.next()
  }
}

function handleChooseSxdx(i, type) {
  if(type==='.1'&&i.usable1) {
    sxdxCurrent.value = i.year+'.1'
    ueCallChangeShuishen(sxdxCurrent.value, currentType.value)
  }
  if(type==='.2'&&i.usable2) {
    sxdxCurrent.value = i.year+'.2'
    ueCallChangeShuishen(sxdxCurrent.value, currentType.value)
  }
  if(i.year===2022&&type==='.2') {
    bus.emit('changeYuJiNum', 1)
  }else {
    bus.emit('changeYuJiNum', 0)
  }
}

const sxdxData = reactive({value: []})

const currentView = ref('up')

// 切换视角
function handleChangeView() {
  if(currentView.value==='up') {
    if(currentType==='lashen') {
      // 拉伸视角
      ueCallFlyToSXDXStretch()
    } else {
      ueCallFlyToSXDXNew()
    }
    currentView.value = 'down'
  } else {
    ueCallFlyToSXDX()
    currentView.value = 'up'
  }
}

const currentType = ref('lashen')

// 切换类型
function handleChangeType() {
  currentType.value = currentType.value==='lashen'? 'pingmian': 'lashen'
}


</script>

<style lang="scss" scoped>
.tab-sxdx {
  box-sizing: border-box;
  position: absolute;
  top: -12vh;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 100px;
  padding: 10px 125px 18px;
  background: url('@/assets/imgs/navi/bg-sxdx.png') no-repeat;
  background-size: 720px 70px;
  background-position: bottom;

  .switch-btn {
    display: block;
    position: absolute;
    bottom: 28px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    &:hover {
      transform: scale(1.1);
    }
    &.view-switch {
      right: 45px;
      background: url('@/assets/imgs/navi/btn-view-change.png');
    }
    &.type-switch {
      left: 45px;
      background: url('@/assets/imgs/navi/btn-type-change.png');
    }
    background-size: cover;
  }

  .sxdx-list-wrapper {
    width: 100%;
    height: 100%;
    :deep(.el-carousel__container) {
      width: 100%;
      height: 100%;
    }
    .sxdx-list {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
      height: 100%;

      .sxdx-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        align-items: center;
        width: 103px;
        height: 57px;
        background: url('@/assets/imgs/navi/btn-sxdx.png') no-repeat;
        background-size: 100% 100%;
        &>span {
          font-size: 20px;
          font-family: BarlowBold;
          color: #eee;
          line-height: 20px;
          margin-bottom: 3px;
        }
        &>div {
          width: 90px;
          display: flex;
          justify-content: space-between;
          span {
            font-size: 12px;
            color: rgba($color: #eee, $alpha: 0.8);
            cursor: pointer;
            &.disable {
              cursor: not-allowed;
              color: rgba($color: #eee, $alpha: 0.5);
            }
          }
        }
        &.highlight {
          width: 119px;
          height: 70px;
          transform: translateY(2px);
          background: url('@/assets/imgs/navi/btn-sxdx-h.png') no-repeat;
          background-size: 100% 100%;
          &>span {
            font-size: 24px;
            color: transparent;
            background: linear-gradient(0deg, rgb(255, 227, 89) 10%, rgba(255,255,255,0.9) 90%);
            -webkit-background-clip: text;
          }
          &>div {
            span.highlight {
              color: rgb(245, 204, 23);
              font-weight: bold;
            }
          }
        }
        &.disable {
          opacity: 0.6;
          cursor: not-allowed;
          &>div>span {
            cursor: not-allowed;
          }
        }
      }
    }
  }


  .sxdx-scroll {
    display: block;
    position: absolute;
    bottom: 16px;
    width: 35px;
    height: 59px;
    cursor: pointer;
    &.scroll-left {
      left: 80px;
      background: url('@/assets/imgs/navi/sxdx-arrow-left.png');
      background-size: contain;
    }
    &.scroll-right {
      right: 80px;
      background: url('@/assets/imgs/navi/sxdx-arrow-right.png');
      background-size: contain;
    }
  }
}
</style>