<template>
  <div>
    <div class="gva-media-box" :style="{ 'width': props.width, 'height': props.height }"
      @click="clickPreviewVideo(props.url)">
      <el-icon :size="25">
        <VideoPlay />
      </el-icon>
    </div>

    <el-dialog v-model="videoPreviewDialog" align-center :z-index="100" :append-to-body="true">
      <video :src="videoPreviewUrl" controls="controls" style="width: 100%; height: 100%" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  url: {
    type: String,
    required: true,
  },
  width: {
    type: String,
    default: '120px'
  },
  height: {
    type: String,
    default: '90px'
  }
})

const videoPreviewDialog = ref(null)
const videoPreviewUrl = ref('')
const clickPreviewVideo = (url) => {
  videoPreviewDialog.value = true
  videoPreviewUrl.value = url
}

</script>
