<template>
  <div class="preview_mask" @click="handlePreviewMask">
    <div class="preview">
      <div class="preview_img" v-if="'png,jpg,jpeg,gif,bmp'.indexOf(previewType)>-1">
        <img :src="previewUrl" @click.stop style="max-width:100%;" alt="">
      </div>
      <div class="preview_video" v-if="'mp4,webm,ogg'.indexOf(previewType)>-1">
        <video :src="previewUrl" controls @click.stop style="max-width:100%;"></video>
      </div>
      <div class="preview_audio" v-if="'wav,mp3,ogg,acc,webm'.indexOf(previewType)>-1">
        <audio :src="previewUrl" controls @click.stop style="max-width:100%;"></audio>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
export default {
  name: 'preview',
  props: {
    previewType: String,
    previewUrl: String
  },
  setup (props, { emit }) {
    const state = reactive({
      previewUrl: props.previewUrl,
      previewType: props.previewType,
    })
    onMounted(() => {
      console.log(props)
      console.log(props.previewType)
    })
    const handlePreviewMask = () => {
      emit('closePreview')
    }
    return {
      ...toRefs(state),
      handlePreviewMask
    }
  }
}
</script>
<style lang="scss">
.preview_mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  font-size: 0;
  .preview {
    max-width: 70%;
    max-height: 70%;
    // background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>