<template>
  <div :style="{ height: (props.record?.itemHeight || 200) + 'px' }" class="carousel-box">
    <a-carousel arrows autoplay class="custom-carousel">
      <div class="slideshow" v-for="(item, index) in props.record.formItemCarouselList" :key="index">
        <div class="slideshow-image">
          <a-image :preview="false" :src="filePreviewUrl + item.pictureFileId" @click="imgClick(item)" />
        </div>

        <div class="slideshow-title">
          <span>{{ item.title }}</span>
        </div>
      </div>
      <template #prevArrow>
        <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
          <left-circle-outlined />
        </div>
      </template>
      <template #nextArrow>
        <div class="custom-slick-arrow" style="right: 10px">
          <right-circle-outlined />
        </div>
      </template>
    </a-carousel>
  </div>
</template>

<script setup name="FormCarousel">
import { onMounted, ref } from 'vue';
import { API_BASE_PREFIX } from '@/config/setting';
import { useRouter } from 'vue-router';

const router = useRouter();

// 文件预览接口
const filePreviewUrl = ref(`${API_BASE_PREFIX}/sysFileInfo/public/preview?fileId=`);

const props = defineProps({
  record: {
    type: Object,
    default: {}
  },
  //是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  }
});

onMounted(() => {});

// 图片点击
const imgClick = item => {
  if (props.readonly || props.disabled || !item.linkUrl) return;
  const { href } = router.resolve({
    path: item.linkUrl,
  });
  window.open(href, '_blank');
};
</script>

<style scoped lang="less">
.carousel-box {
  width: 100%;
  position: relative;
  border: 1px solid #eee;
}
.custom-carousel {
  position: absolute;
  width: 100%;
  height: 100%;

  :deep(.slick-slide) {
    & > div {
      height: 100%;
    }
  }
}

.custom-slick-arrow {
  display: none !important;
}

.custom-carousel:hover {
  :deep(.custom-slick-arrow) {
    display: block !important;
  }
}

:deep(.ant-image) {
  width: 100%;
  height: 100%;
  padding: 0 1px;
}

:deep(.ant-image-img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  width: 36px;
  height: 36px;
  font-size: 36px;
  color: #fff;
  border-radius: 100px;
  background-color: rgba(31, 45, 61, 0.3);
  opacity: 0.3;
  z-index: 1;
}

.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}

.ant-carousel :deep(.custom-slick-arrow:hover) {
  opacity: 0.5;
}

.slideshow-empty {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.slideshow {
  height: 100%;
  width: 100%;
  position: relative;
}

.slideshow-image {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.slideshow-title {
  position: absolute;
  width: 100%;
  height: 50px;
  background: rgba(0, 0, 0, 0.6);
  bottom: 0;
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  font-weight: 530;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  span {
    color: white;
  }
}

:deep(.ant-carousel .slick-dots-bottom) {
  bottom: 5px;
}

:deep(.slick-track) {
  height: 100%;
}

:deep(.slick-list) {
  height: 100%;
}

:deep(.ant-carousel .slick-slider) {
  height: 100%;
}
</style>
