<template>
  <div
    class="text-swiper"
    v-if="data.length > 0"
  >
    <div
      class="left-arrow"
      @click="onScrollLeft"
    >
      <WlSvgIcon
        type="leftFill"
        width="36"
        height="36"
        :color="leftArrowDisabled ? '#e3e3e3' : 'var(--wl-primary-color)'"
      />
    </div>
    <div
      class="text-swiper-list"
      ref="swiperListRef"
    >
      <div
        class="text-swiper-list-container"
        :style="scrollStyle"
        ref="swiperScrollRef"
      >
        <template
          v-for="item in data"
          :key="item.id"
        >
          <p
            class="text-swiper-list-item"
            v-if="!hasSlot"
          >{{ item.name }}</p>
          <slot
            :row="item"
            v-else
          ></slot>
        </template>
      </div>
    </div>
    <div
      class="right-arrow"
      @click="onScrollRight"
    >
      <WlSvgIcon
        type="rightFill"
        width="36"
        height="36"
        :color="rightArrowDisabled ? '#e3e3e3' : 'var(--wl-primary-color)'"
      />
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "WlTextSwiper",
};
</script>

<script setup lang="ts">
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";;
import { TTextSwiperList } from "../type";
import { computed, nextTick, ref, watch, useSlots } from 'vue';

type Props = {
  data: TTextSwiperList[];
  distance?: number;
}
const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  distance: 30
});


const leftArrowDisabled = ref(false);

const rightArrowDisabled = ref(false);

const scrollDiatance = ref(0);

const swiperListRef = ref<HTMLElement>();

const swiperScrollRef = ref<HTMLElement>();


const hasSlot = computed(() => {
  let slots = useSlots();
  return !!slots.default
})

const onChangeArrowColor = () => {
  nextTick(() => {
    const scroll = swiperScrollRef.value?.clientWidth - swiperListRef.value?.clientWidth;
    const isMore = Math.abs(scrollDiatance.value) >= scroll;
    leftArrowDisabled.value = scrollDiatance.value === 0;
    rightArrowDisabled.value = scroll < 0 || isMore;
  });
}

const scrollStyle = computed(() => {
  return {
    transform: `translateX(${scrollDiatance.value}px)`
  }
});

const scrollListLen = computed(() => props.data.length);

const onScrollLeft = () => {
  if (!leftArrowDisabled.value) {
    scrollDiatance.value += props.distance;
    onChangeArrowColor();
  };
};

const onScrollRight = () => {
  if (!rightArrowDisabled.value) {
    scrollDiatance.value -= props.distance;
    onChangeArrowColor();
  };
};

watch(
  () => scrollListLen.value,
  () => { onChangeArrowColor() },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.text-swiper {
  width: 100%;
  @extend %flex-middle;
  justify-content: space-between;
  height: j(60);
  box-sizing: border-box;
  background: #f4f9fd;
  padding-right: j(10);

  .text-swiper-list {
    flex: 1;
    overflow-x: auto;

    .text-swiper-list-container {
      display: flex;
      width: max-content;
      transition: transform .5s;

      .text-swiper-list-item {
        flex-shrink: 0;
        background-color: #EBF0F5;
        padding: j(6) j(15);
        margin: 0 j(5);
        border-radius: j(4);
      }
    }
  }

  .left-arrow,
  .right-arrow {
    @extend %flex-middle;
    cursor: pointer;
  }

  .sure-btn {
    flex-shrink: 0;

    &-text {

      margin-left: auto;
      max-width: j(90);
    }
  }
}
</style>
