<template>
  <video
    class="sa-video"
    :src="checkUrl(url)"
    :width="size"
    :height="size"
    @click="previewVisible = true"
  ></video>
  <el-dialog class="sa-dialog-video sa-dialog" v-model="previewVisible" fullscreen>
    <video :src="checkUrl(url)" controls></video>
  </el-dialog>
</template>

<script>
  export default {
    name: 'SaVideo',
  };
</script>

<script setup>
  import { ref } from 'vue';
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  const props = defineProps(['url', 'size']);

  const previewVisible = ref(false);
</script>

<style lang="scss" scoped>
  .sa-video {
    cursor: pointer;
  }
</style>

<style lang="scss">
  .sa-dialog-video {
    --el-dialog-bg-color: transparent;

    .el-dialog__header {
      border-bottom: none !important;
    }

    .el-dialog__headerbtn {
      top: 40px;
      right: 40px;
      font-size: 24px;
    }

    .el-dialog__close {
      color: #fff !important;
    }

    .el-dialog__body {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
