<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">
      <el-carousel-item v-for="(item, x) in images" :key="x">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
          "
        >
          <el-image :src="item" class="x-image">
            <template #error>
              <div class="error">加载失败...</div>
            </template>
          </el-image>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts" setup>
import { useAttrs } from 'vue'

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

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

const carousel = ref<any>(null)
const act = defineModel<number>()

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

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

defineExpose({
  setAct
})
</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>
