<template>
  <div class="mb-37px">
    <Message
      :type="currentMsg.type"
      :file="currentMsg.fileInfo"
      :text="currentMsg.text"
      :loading="currentMsg.loading"
      :inversion="currentMsg.inversion"
    ></Message>
    <div
      class="flex items-center text-22px mt-20px ml-70px"
      v-if="messageLength > 1"
    >
      <SvgIcon
        @click="handlePrev"
        name="arrow-right"
        class="text-white cursor-pointer text-22px transform rotate-180"
      ></SvgIcon>
      <div class="px-20px">{{ currentIndex + 1 }} / {{ messageLength }}</div>
      <SvgIcon
        @click="handleNext"
        name="arrow-right"
        class="text-white text-22px cursor-pointer"
      ></SvgIcon>
    </div>
  </div>
</template>
<script setup>
import Message from './message.vue'
import { ref, computed ,watch} from 'vue'

const props = defineProps({
  arr: {
    type: Array,
    default: () => [],
  },
})

const currentMsg = computed(() => props.arr[currentIndex.value])
const currentIndex = ref(props.arr.length-1)
const messageLength = computed(() => props.arr.length)

const handleNext = () => {
  if (currentIndex.value < messageLength.value - 1) {
    currentIndex.value++
  }
}
const handlePrev = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--
  }
}

watch(
  () => props.arr.length,
  () => {
    currentIndex.value = props.arr.length - 1
  }
)
</script>
