<template>
  <el-dialog title="视频" v-model="visible">
    <ali-player :source="fnSrc(src)" ref="playerRef" />
  </el-dialog>
</template>

<script setup>
import { useVModel } from "@vueuse/core";
import AliPlayer from "@/components/ali-player/index.vue";
import { ref, watchEffect } from "vue";

const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
defineOptions({
  name: "LayoutVideo",
});
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
  visible: {
    type: Boolean,
    default: false,
    required: true,
  },
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
const playerRef = ref(null);
const fnSrc = (src) => {
  if (src.indexOf("http") !== -1 || src.indexOf("https") !== -1) return src;
  else return VITE_FILE_URL + src;
};
watchEffect(() => {
  if (visible.value) {
    playerRef.value && playerRef.value.play();
  } else {
    playerRef.value && playerRef.value.pause();
  }
});
</script>

<style scoped lang="scss"></style>
