<template>
  <div>
    <div
      v-show="showVideo"
      @mouseover="setHoveredItem"
      @mouseleave="resetHoveredItem"
      class="z-0 my-2 w-full bg-black flex items-center justify-center relative"
    >
      <video
        ref="videoPlayer"
        :src="options.src"
        :poster="options.poster"
        controls
        class="h-[400px]"
        muted
        @play="handlePlay"
        @pause="handlePause"
      ></video>
      <div
        v-show="showIcon"
        class="row items-center justify-evenly color-white absolute inset-0 z-10"
        style="background-color: rgba(0, 0, 0, 0.5)"
      >
        <span
          class="flex items-center justify-center text-4xl cursor-pointer"
          @click="openVideo"
        >
          <CaretRightOutlined />
        </span>
        <span
          class="flex items-center justify-center text-2xl cursor-pointer text-red-500"
          @click="deleteVideo"
        >
          <DeleteOutlined />
        </span>
      </div>
    </div>
    <n-upload
      v-show="!showVideo"
      multiple
      directory-dnd
      accept="video/*"
      :custom-request="customImageRequest"
      :max="1"
    >
      <n-upload-dragger class="flex flex-col items-center justify-center h-96">
        <div style="margin-bottom: 12px">
          <n-icon size="48" :depth="3">
            <ArchiveIcon />
          </n-icon>
        </div>
        <n-text style="font-size: 16px">
          点击或者拖动文件到该区域来上传
        </n-text>
      </n-upload-dragger>
    </n-upload>
  </div>
</template>

<script setup>
import { ArchiveOutline as ArchiveIcon } from "@vicons/ionicons5";
import { getArtistVideo, saveArtistVideo } from "@/api/personManage.js";
import { CaretRightOutlined, DeleteOutlined } from "@ant-design/icons-vue";
import {
  reactive,
  onBeforeMount,
  onMounted,
  ref,
  getCurrentInstance,
  watch,
  createVNode,
  nextTick,
} from "vue";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
const uploadUrl = `${import.meta.env.VITE_API_URL}upload/img`;
import { processError, processSuccess } from "@/utils/helper/message";

const props = defineProps({
  artistUid: {
    type: String,
    required: true,
  },
});
const state = reactive({
  fileList: [],
});
const isPlaying = ref(false);
const videoPlayer = ref(null);
const options = reactive({
  src: "", // 视频源
  poster: "", // 视频封面
});

const showIcon = ref(false);
const showVideo = ref(false);
const canEdit = ref(0);

const openVideo = () => {
  if (videoPlayer.value) {
    videoPlayer.value.play();
  }
  showIcon.value = false;
};

const deleteVideo = () => {
  options.src = "";
  showVideo.value = false;
  showIcon.value = false;
};

const getVideoUrl = async (val) => {
  const res = await getArtistVideo({ artistUid: val });
  if (res.data.videoUrl) {
    options.src = res.data.videoUrl;
    options.poster = res.data.cover_url;
    canEdit.value = 2;
    showVideo.value = true;
  }
};

watch(
  () => props.artistUid,
  (newVal) => {
    if (newVal) {
      getVideoUrl(props.artistUid);
    }
  },
  { immediate: true }
);

const setHoveredItem = () => {
  if (!isPlaying.value) {
    showIcon.value = true;
  }
};

const handlePlay = () => {
  isPlaying.value = true;
};

const handlePause = () => {
  isPlaying.value = false;
};

const resetHoveredItem = () => {
  showIcon.value = false;
};

const uploadParams = {
  source: "artist",
  mask: "",
  type: "video",
  action: "",
};
const customImageRequest = async (e) => {
  let { file } = e.file;
  let url = uploadUrl;
  let params = { file };
  Object.assign(params, uploadParams);
  $request.HTTP.components.uploadFormData(url, params).then((res) => {
    if (res.status === 0) {
      options.src = res.data.ori_url;
      options.poster = res.data.cover_url;
      showVideo.value = true;
      handleSaveData(res.data);
    } else {
      processError(res.msg || "操作失败!");
    }
  });
};
const handleSaveData = (resData) => {
  let url = "/api/artshow/broker/updateArtistVideoSupplement";
  const params = {
    artistUid: props.artistUid,
    videoUrl: resData.ori_url,
    videoCover: resData.cover_url,
  };
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        processSuccess("上传并保存成功");
      } else {
        processError(res.msg || "操作失败!");
      }
    },
    (err) => {
      processError(err.response.data.msg);
    }
  );
};
</script>
