<script setup lang="ts">
import type { ReportSchemeItemModel }              from '@/model';
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';


const props = defineProps<{
  value?: ReportSchemeItemModel,
  reportId?: string;
}>();
const emits = defineEmits<{
  'destroy': [],

}>();
const model = computed(() => props.value);
const container = ref<HTMLDivElement | null>(null);

const noPictures = computed(() => !model.value.content?.some(t => t.imgUrl));

const stopPlay = () => {
  container.value?.querySelectorAll('video').forEach(video => video.pause());
};
</script>
<template>
  <div class="preview-wrapper" ref="container">
    <a-space direction="vertical" class="w-full">
      <template v-if="model.content?.length">
        <div v-if="noPictures">
          <a-space wrap size="large">
            <div v-for="item in model.content" :key="item.name">
              <span>{{ item.name }}</span>
              <span style="margin-left: 4px;">
                <template v-if="item.doase ">{{ item.doase }}</template>
                <template v-if="item.unit">{{ item.unit }}</template>
              </span>
            </div>
          </a-space>
        </div>
        <a-carousel v-else arrows :afterChange="stopPlay">
          <template #prevArrow>
            <div class="custom-slick-arrow" style="left: 5px;">
              <LeftCircleOutlined class="icon" />
            </div>
          </template>
          <template #nextArrow>
            <div class="custom-slick-arrow" style="right: 10px;">
              <RightCircleOutlined class="icon" />
            </div>
          </template>
          <div class="slick-slide-container relative" v-for="item in model.content">
            <video
              v-if="item.mediaUrl"
              :poster="item.imgUrl" preload="metadata"
              controls controlslist="nodownload" disablepictureinpicture
            >
              <source :src=item.mediaUrl />
            </video>
            <a-image v-else-if="item.imgUrl" :src="item.imgUrl" :preview="true" />
            <div v-if="item.name" class="absolute bottom-12px left-12px" style="color: #4c6fd7">{{ item.name }}</div>
          </div>
        </a-carousel>
      </template>
      <a-descriptions v-if="model.descriptions?.length" :column="1" size="small" bordered>
        <a-descriptions-item v-for="row in model.descriptions" :key="row.name" :label="row.name">
          {{ row.description }}
        </a-descriptions-item>
      </a-descriptions>
    </a-space>
  </div>
</template>
<style scoped lang="scss">
.preview-wrapper {
  padding: 12px 24px;
}

.slick-slide-container {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  height: 296px;

  :deep(.ant-image),
  video {
    margin: auto;
    height: 100%;
    max-height: 296px;

    img {
      height: 100%;
      max-height: 296px;
      object-fit: scale-down;
    }
  }
}

.ant-carousel {
  width: 100%;

  :deep(.slick-slide) {
    background: #f1f1f1;
    height: 100%;
  }

  :deep(.slick-arrow) {
    z-index: 2;

    .icon {
      font-size: 24px;
      color: #111;
    }
  }

  :deep(.slick-dots-bottom) {
    margin-bottom: 0;
    bottom: 12px;

    button {
      background-color: rgba(76, 111, 215, 0.71);
    }

    .slick-active {
      button {
        background-color: #4c6fd7;
      }
    }
  }
}
</style>
