<template>
  <v-overlay v-model="overlay" class="align-center justify-center" @update:model-value="handleChange">
    <!-- <div class="close" @click="overlay = false">
      <v-icon color="#fff" size="60">mdi-close-circle</v-icon>
    </div> -->
    <v-window v-model="window" show-arrows @update:model-value="val => window = val">
      <v-window-item v-for="val in list" :key="val">
        <v-img v-if="checkIsImage(val)" width="1000" height="800" :src="val"></v-img>
        <video v-else :src="val" controls height="800" width="1000" preload="preload" :showPlay="true"></video>
      </v-window-item>
    </v-window>
  </v-overlay>
</template>

<script setup>
defineOptions({ name: 'preview-img'})
import { ref } from 'vue'
import { checkIsImage } from '@/utils'

const emits = defineEmits(['close'])
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  current: {
    type: Number,
    default: 0
  }
})

const overlay = ref(true)
const window = ref(0)
if (props.current) window.value = props.current
// const list = [
//   'https://fastly.picsum.photos/id/232/500/300.jpg?hmac=fyd8W1w8466rO5Je10xId1ShHAphw8iYnpt8XIkW4w0',
//   'https://zhipin-company-1251955568.file.myqcloud.com/zhipin-company/99/20231021/fpf81b1cdecd7a27dca3eeb40f661f1a3e_1a3cd48c41c942d0aa084b3dd0262681-OSS11.aac.s44100.stereo.1080x1920.b2000000.libx264.mp4?sign=d840267a7fb629df0a70cbc85702303e&t=1715917059'
// ]

const handleChange = (e) => {
  if (!e) emits('close')
}
</script>

<style scoped lang="scss">
.close {
  position: absolute;
  right: -150px;
  top: -45px;
  cursor: pointer;
}
</style>
