<template>
  <div class="dialog">
    <el-dialog
      v-model="modelValue"
      align-center
      :modal="false"
      :show-close="false"
      :z-index="9999"
      destroy-on-close
    >
      <div class="dialog-box">
        <div class="video">
          <img style="width: 100%;height: 100%;" :src="src" />
        </div>
      </div>
      <img class="close" src="@/assets/images/close.png" @click="handleClose" />
    </el-dialog>
  </div>
</template>

<script setup>

  const props = defineProps({
    src: {
      type: String,
      default: ''
    }
  })
  let modelValue = defineModel()
  watch(
    () =>modelValue.value,
    (val) => {

    },
    {
      immediate: true
    }
  )
  const handleClose = () => {
    modelValue.value = false
  }
  onMounted(()=>{

  })
</script>

<style scoped lang="scss">
  .dialog {
    z-index: 9999;
    .action {
      &-box {
        margin-top: vh(16);
        gap: vw(20);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      &-item {
        padding: vw(16);
        display: flex;
        align-items: center;
        background: #0a4190;
        border-radius: vw(8);
        > img {
          cursor: pointer;
          width: vw(34);
          height: auto;
        }
        > span {
          margin: 0 vw(16);
          font-weight: 400;
          font-size: vw(16);
          color: #ffffff;
        }
        .pause {
          margin: 0 vw(10);
        }
      }
    }
    .none {
      position: absolute;
      left: 50%;
      top: 50%;
      width: vw(1814);
      height: vw(980);
      color: #fff;
      font-weight: bold;
      font-size: vw(30);
      transform: translate(-50%, -50%);
      z-index: 999;
    }
    :deep(.el-dialog) {
      position: relative;
      width: vw(1940);
      background: transparent !important;
    }
    .dialog-box {
      padding: vw(40) vw(30) vw(30) vw(30);
      background-image: url('@/assets/images/video-bg.png');
      background-size: 100% 100%;
    }
    :deep(.el-dialog__header) {
      padding-bottom: 0 !important;
    }
    .video {
      width: vw(1814);
      height: vw(920);
      object-fit: contain;
      background-color: #062b57;
    }
    .close {
      cursor: pointer;
      position: absolute;
      right: vw(70);
      top: vw(80);
      width: vw(60);
      z-index: 9999;
    }
  }
</style>
