<template>
  <div class="ui-slide">
    <UIGate :index="index">
      <UIgateContent v-for="(item, i) in items" :key="i">
        <slot :raw="item" :active="items[index]" />
      </UIgateContent>
    </UIGate>
    <template v-if="showCtrl">
      <span v-if="index !== 0" class="left" @click="prevHandler"
        ><KkIcon type="left"
      /></span>
      <span v-if="index !== items.length - 1" class="right" @click="nextHandler"
        ><KkIcon type="pull-more"
      /></span>
    </template>
    <slot name="attach" :active="items[index]" />
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, watchEffect } from 'vue'
import KkIcon from '@kankan-components/components/basic/icon'
// import { Gate, GateContent } from '../gate/src/src'
import UIGate from '@kankan-components/components/basic/gate'
import UIgateContent from '@kankan-components/components/basic/gateContent'
import { slideProps } from './slide'

defineOptions({
  name: 'UISlide',
})

const props = defineProps(slideProps)
const index = ref()

watchEffect(() => (index.value = props.currentIndex))

const prevHandler = () => {
  if (index.value > 0) {
    index.value--
  }
}
const nextHandler = () => {
  if (index.value < props.items.length - 1) {
    index.value++
  }
}
</script>

<!-- <script>
export default { name: 'UiSlide' }
</script> -->
