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

<script setup>
import { Gate, GateContent } from '../gate'
import { defineProps, ref, watchEffect } from 'vue'
import UIIcon from '../icon'

const props = defineProps({
  items: Array,
  currentIndex: {
    type: Number,
    default: 0
  },
  showCtrl: {
    type: Boolean
  }
})
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: 'ui-slide' } </script>