<template>
  <SimplePopup 
    :show="show"
    @update:show="(v) => emit('update:show', v)"
  >
    <div class="dialog bg-light p-4 d-flex flex-col">
      <div class="d-flex flex-row align-center ">
        <img class="main-image-button" src="@/assets/images/IconBack.png" tabindex="0" @click="emit('update:show', false)"></img>
        <h2 class="mb-0 ml-3">查看大图</h2>
      </div>
      <ScrollLeftRightButton
        class="d-flex flex-row align-center w-100 position-relative"
        @right="emit('update:activeItem', Math.min(activeItem + 1, list.length - 1))"
        @left="emit('update:activeItem', Math.max(activeItem - 1, 0))"
      >
        <img
          :src="list[activeItem]"
          class="image-item"
        />
      </ScrollLeftRightButton>
    </div>
  </SimplePopup>
</template>

<script setup lang="ts">
import { ref, type PropType } from 'vue';
import SimplePopup from '@/components/SimplePopup.vue';
import ScrollLeftRightButton from './ScrollLeftRightButton.vue';

const emit = defineEmits(['update:show', 'update:activeItem'])
const props = defineProps({
  list: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  show: {
    type: Boolean,
    default: false,
  },
  activeItem: {
    type: Number,
    default: 0,
  },
});

</script>

<style lang="scss" scoped>
.image-item {
  height: 80vh;
  width: 70vw;
  object-fit: cover;
}
</style>