<!-- 新增编辑视频 -->
<template>
  <div class="app-container">
    <div style="display: flex">
      <el-button type="primary" @click="formSubmit">保存</el-button>
      <el-button type="info" @click="videoView">视频预览</el-button>
      <el-button @click="returnList">取消</el-button>
    </div>
    <div class="border_box">
      <InteractiveVideoEditor
        ref="editorRef"
        :graphData="graphData"
        :videoSources="videoSources"
        :imageSources="imageSources"
      />
    </div>
    <el-dialog title="视频预览" v-model="videoViewOpen" width="1200">
      <XGVideoViewer
        :question="videoDetail.data.question"
        :options="videoDetail.data.optionsList"
        :videoUrl="videoDetail.data.url"
        :autoplay="true"
        :autoplayMuted="false"
        :poster="videoDetail.data.image"
        @onClickOption="onClickOption"
      />
    </el-dialog>
  </div>
</template>

<script setup name="VideoOperation">
import {
  interactionVideoUpdate,
  getInteractionVideoDetail,
  getMaterialInfoDetail,
} from "@/api/interactVideo/videoManage";
// 编辑器
import {
  transformGraphdata,
  transfromReturnGraphdata,
} from "@/hooks/transformGraphdata";
import InteractiveVideoEditor from "@/components/InteractiveVideoEditor";
import XGVideoViewer from "@/components/XGVideoViewer";
import { watchEffect } from "vue";

const { proxy } = getCurrentInstance();
const route = useRoute();
// 互动视频基本信息
const { interactionId } = route.query;
const interactionVideoInfo = ref({});
// 资源数据
const videoSources = ref([]);
const imageSources = ref([]);
// 组件实例
const editorRef = ref(null);
// 默认流程图数据
const graphData = ref({
  id: "0",
  type: "root-node",
  preNodeId: null,
  children: [],
  data: {
    name: "默认节点",
    image: "",
    url: "",
    materialId: "1",
    question: "",
    optionsList: [],
  },
});
/**
 * 视频ID变化，则获取相关素材以及节点数据
 */
watchEffect(() => {
  // 获取互动视频基本信息以及节点
  getInteractionVideoDetail(interactionId).then((res) => {
    if (res.code == 200) {
      interactionVideoInfo.value = res.data.interactionVideoInfo;
      graphData.value = transfromReturnGraphdata(res.data.rootNode);
    }
  });
  // 获取相关素材信息
  getMaterialInfoDetail(interactionId).then((res) => {
    // 素材类型 0 视频  1 图片
    videoSources.value = res.data.materialLibraryVOList
      .filter((i) => i.materialType == 0)
      .map((i) => {
        return {
          id: i.materialId,
          name: i.materialName,
          url: i.accessory?.url,
        };
      });
    imageSources.value = res.data.materialLibraryVOList
      .filter((i) => i.materialType == 1)
      .map((i) => {
        return {
          id: i.materialId,
          name: i.materialName,
          url: i.accessory?.url,
        };
      });
  });
});

// 关闭当前页签
function returnList() {
  proxy.$tab.closePage();
}

function formSubmit() {
  // 剧情节点信息
  const rootNode = transformGraphdata(graphData.value);
  interactionVideoUpdate({
    interactionVideoInfo: interactionVideoInfo.value,
    rootNode,
  }).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess(res.msg);
      returnList();
    }
  });
}

// 视频预览
const videoViewOpen = ref(false);
const videoDetail = ref({});

function videoView() {
  videoDetail.value = graphData.value;
  if (!videoDetail.value.data.url) {
    proxy.$modal.msgError("暂无可播放视频，可添加视频素材后预览");
    return;
  }
  videoViewOpen.value = true;
}
// 点击选中选项
const onClickOption = (option) => {
  videoDetail.value = graphData.value.children.filter(
    (i) => i.id == option.nodeId
  )[0];
};
</script>

<style>
.border_box {
  border: 1px solid #ccc;
  margin-top: 10px;
}
</style>
