<template>
  <view class="w-full h-full flex flex-col relative">
    <view :style="{ backgroundColor: bgColor, borderBottom: border ? '1px solid #e5e6e9' : 'none' }">
      <uv-tabs :list="list" :scrollable="scrollable" @change="handleChange" :current="modelValue"
        :key-name="keyName"></uv-tabs>
    </view>
    <ie-auto-resizer>
      <swiper class="swiper h-full" :current="modelValue" @change="handleChangeSwiper">
        <swiper-item v-for="(item, index) in list" :key="index" class="h-full">
          <view class="h-full" v-if="Math.abs(index - modelValue) <= cacheCount">
            <scroll-view class=" h-full" scroll-y>
              <slot :name="item.slot"></slot>
            </scroll-view>
          </view>
        </swiper-item>
      </swiper>
    </ie-auto-resizer>
  </view>
</template>
<script lang="ts" setup>
import { SwiperTabItem } from '@/types';

defineOptions({
  name: 'ie-tabs-swiper',
  options: {
    virtualHost: true
  }
});
type Props = {
  list: SwiperTabItem[];
  scrollable?: boolean;
  keyName?: string;
  bgColor?: string;
  border?: boolean;
  cacheCount?: number;
  height?: string;
}
const props = withDefaults(defineProps<Props>(), {
  list: () => [],
  modelValue: 0,
  keyName: 'name',
  bgColor: '#FFFFFF',
  border: true,
  cacheCount: 2,
  height: '100%'
});
const modelValue = defineModel<number>('modelValue', {
  type: Number,
  default: 0
});

const handleChange = (e: any) => {
  modelValue.value = e.index;
}
const handleChangeSwiper = (e: any) => {
  modelValue.value = e.detail.current;
}
</script>
<style lang="scss" scoped></style>