<template>
  <div class="show-image-div" ref="contentArea">
    <div class="show-image-item" v-for="(item, index) in props.data" :key="index">
      <ShowImage :data="item" :haveFooter="true">
        <template #footer>
          <div class="footer-div">
            <span style="margin-left: 35px">{{ item.specialText }}</span>
            <span style="margin-right: 40px">拍摄时间：{{ item.shijian }}</span>
          </div>
        </template>
      </ShowImage>
    </div>
    <div class="scroll-to-top" @click="scrollToTop" v-if="props.data.length > 1">
      <ArrowUpOutlined :style="{ fontSize: '35px', position: 'relative', left: '13px'}"/>
      回到顶部
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineProps } from 'vue';
  import { ArrowUpOutlined } from '@ant-design/icons-vue';
  import ShowImage from '@/views/dashboard/test/components/ShowImage/index.vue';
  const props = defineProps(['data']);
  const contentArea = ref<HTMLElement | null>(null);
  function scrollToTop(){
    if(contentArea.value) {
      contentArea.value.scrollTop = 0;
    }
  }
</script>

<style lang="scss" scoped>
  .footer-div {
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .show-image-div {
    max-height: 690px;
    overflow: auto;
    .show-image-item {
      width: 470px;
      height: 470px;
      margin-bottom: 5px;
      position: relative;
    }
  }
  .scroll-to-top {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #000000;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
</style>
