<template>
  <div class="fixed top-0 left-0 w-b100 h-b100 bg-000" :style="{display: visible ? 'block': 'none'}" @click="close">
    <div class="h-36 w-36 rounded-44 bg-000 flex-center cursor-pointer absolute top-30 right-30" @click="close">
      <el-icon size="18" color="#fff"><Close /></el-icon>
    </div>
    <div class="h-b100 flex-center">
      <video :src="src" controls class="vw" @click.stop></video>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { Close } from '@element-plus/icons-vue'


const props = defineProps({
  src: {
    type: String,
    default: ''
  }
})

const visible = ref(false)

const open = () => {
  visible.value = true
}

const close = () => {
  visible.value = false
}

defineExpose({
  open,
  close
})

</script>
<style scoped lang="scss">
.bg-000 {
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}
.vw {
  width: 70%;
}

</style>