<template>

<div class="image-some">

  <div v-if="images.length === 0" class="null-text">
    {{ emptyText }}
  </div>

  <el-image :src="images[0]" v-if="images.length === 1" class="x-image" >
    <template #error><div class="error">加载失败...</div></template>
  </el-image>

  <el-carousel
    v-if="images.length > 1"
    class="x-carousel"
    ref="carousel"
    @change="handleChange"
    indicator-position="none"
  >
    <el-carousel-item v-for="(item, x) in images" :key="x">
      <el-image :src="item" class="x-image" >
        <template #error>
          <div class="error">加载失败...</div>
        </template>
      </el-image>
    </el-carousel-item>

  </el-carousel>

</div>

</template>

<script lang='ts' setup>

withDefaults(defineProps<{
  images: string[],
  autoplay?: boolean,
  emptyText?: string
}>(), {
  images: () => [],
  autoplay: true,
  emptyText: '图片加载中...'
})

const emits = defineEmits(['current-change'])

const carousel = ref<any>(null)

const handleChange = (current: number) => {
  emits('current-change', current)
}

const setAct = (x) => {
  carousel.value.setActiveItem(x)
}

const prevImg = () => {
  carousel.value.prev()
}

const nextImg = () => {
  carousel.value.next()
}

defineExpose({
  setAct,
  prevImg,
  nextImg
})


</script>

<style lang='scss' scoped>

.image-some {
  width: 100%;
  height: 100%;
  position: relative;
  .error {
    color: rgba($color: #ffffff, $alpha: 0.8);
    font-size: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .null-text {
    position: absolute;
    width: 100%;
    height: 100%;
    color: rgba($color: #ffffff, $alpha: 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .x-image {
    width: 100%;
    height: 100%;
    :deep(.el-image__error) {
      background: transparent;
    }
    :deep(.el-image__placeholder) {
      background: transparent;
    }
  }
  .x-carousel {
    height: 100%;
  }
  :deep(.el-carousel__container) {
    height: 100%;
  }

}

</style>