<template>
  <div>
    <el-dialog v-if="isDialog" v-model="visible" title="视频" :append-to-body="appendToBody">
      <app-ali-player
        ref="playerRef"
        :source="fnSrc(src)"
        :vid="vid"
        :play-auth="playAuth"
        :visible="visible"
        :cover="cover"
        :autoplay="autoplay"
        :show-progress="showProgress"
        :play-time="playTime"
        :is-live="isLive"
        :width="width"
        :height="height"
      />
    </el-dialog>
    <app-ali-player
      v-else
      ref="playerRef"
      :source="fnSrc(src)"
      :vid="vid"
      :play-auth="playAuth"
      :visible="visible"
      :cover="cover"
      :autoplay="autoplay"
      :show-progress="showProgress"
      :play-time="playTime"
      :is-live="isLive"
      :width="width"
      :height="height"
    />
  </div>
</template>

<script setup>
import { useTemplateRef, watchEffect } from "vue";
import { ElDialog } from "element-plus";
import "element-plus/es/components/dialog/style/css";
import AppAliPlayer from "../ali-player/index.vue";
import { getFileUrl } from "../../utils/index.js";

defineOptions({
  name: "AppVideo",
});
const props = defineProps({
  src: { type: String, default: "" },
  vid: { type: String, default: "" },
  playAuth: { type: String, default: "" },
  appendToBody: { type: Boolean, default: false },
  cover: { type: String, default: "" },
  autoplay: { type: Boolean, default: true },
  showProgress: { type: Boolean, default: true },
  playTime: { type: Number, default: 0 },
  isDialog: { type: Boolean, default: true },
  isLive: { type: Boolean, default: false },
  width: { type: String, default: "100%" },
  height: { type: String, default: "600px" },
});
const visible = defineModel("visible", {
  type: Boolean,
  required: false,
  default: false,
});
const playerRef = useTemplateRef("playerRef");
const fnSrc = (src) => {
  if (!src) return;
  if (src.indexOf("http") !== -1 || src.indexOf("https") !== -1) return src;
  else return getFileUrl() + src;
};
watchEffect(() => {
  if (props.isDialog) {
    if (visible.value) {
      playerRef.value && playerRef.value.play();
    } else {
      playerRef.value && playerRef.value.pause();
    }
  }
});
</script>

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