<template>
  <div
    v-if="visible"
    class="fixed top-0 left-0 w-full h-full flex-center"
    @click="visible = false"
    style="background: #000000b8; z-index: 9999"
  >
    <video
      :src="videoUrl"
      @click.stop
      class="round-10"
      :style="videoStyle"
      controls
      preload="metadata"
      @loadedmetadata="onLoadedMetadata"
    />
    <div class="absolute bg-333 top-30 right-30 round-100 w-50 h-50 z-1 flex-center pointer hover" @click="visible = false">
      <SvgIcon name="close" size="20" color="#fff" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue';

const visible = ref(false);
const videoUrl = ref('');
const videoStyle = ref({});
const onLoadedMetadata = (e: any) => {
  const a = e.target.videoWidth > e.target.videoHeight;
  videoStyle.value = {
    width: a ? 60 + '%' : 'auto',
    height: a ? 'auto' : '70%',
  };
};

const open = (node: any) => {
  videoUrl.value = node?.data.url;
  visible.value = true;
};
defineExpose({
  open,
});
</script>

<style scoped lang="scss">
.hover {
  &:hover {
    background: rgba(255, 255, 255, 0.4);
  }
}
</style>
