import { addDialog, closeDialog } from "@/components/ReDialog";
// import { ref, h } from "vue";
import OurPlayer from "@/components/VideoPlayer/OurPlayer.vue";
// import dayjs from "dayjs";
// import { http } from "@/utils/http";

export function videoUtil() {
  // const currentPlayingIndex = ref(-1);
  function dataFormate(time) {
    const milliseconds = time * 1000;
    let sec = Math.floor(milliseconds / 1000);
    let min = Math.floor(sec / 60);
    const hour = Math.floor(min / 60);

    sec %= 60;
    min %= 60;

    return `${hour.toString().padStart(2, "0")}:${min
      .toString()
      .padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
  }
  const columns: TableColumnList = [
    {
      label: "视频内时间",
      prop: "relative_time",
      minWidth: 100,
      sortable: true,
      formatter: ({ relative_time }) => dataFormate(relative_time)
    },
    {
      label: "异常类型",
      prop: "exception_type",
      minWidth: 100,
      slot: "exception_type"
    },
    {
      label: "异常ID",
      prop: "abnormal_id",
      minWidth: 100
    },
    {
      label: "异常行为",
      prop: "abnormal_behavior",
      minWidth: 100,
      slot: "behavior"
    },
    {
      label: "异常关键帧",
      slot: "image"
    },
    {
      label: "异常视频定位",
      slot: "video"
    }
    // {
    //   label: "视频",
    //   slot: "video"
    // },
  ];
  function openDialog(title = "视频", row) {
    console.log(title);
    const highlights = [
      // 进度条时间点高亮
      {
        text: row.event_type,
        time: row.relative_time
      }
    ];
    sessionStorage.setItem("video_url", row.abnormal_video);
    sessionStorage.setItem("highlights", JSON.stringify(highlights));
    addDialog({
      // title: `${title}用户`,
      width: "40%",
      draggable: true,
      fullscreenIcon: true,
      closeOnClickModal: false,
      footerButtons: [
        {
          label: "取消",
          bg: true,
          btnClick: ({ dialog: { options, index }, button }) => {
            console.log(options, index, button);
            closeDialog(options, index);
          }
        },
        {
          label: "确认",
          bg: true,
          type: "primary",
          btnClick: ({ dialog: { options, index }, button }) => {
            console.log(options, index, button);
            closeDialog(options, index);
          }
        }
      ],
      contentRenderer: () => <OurPlayer></OurPlayer>
      // return h(
      //   "video",
      //   {
      //     controls: true,
      //     id: "video-" + index,
      //     onPlay: () => playVideo(row, index)
      //   },
      //   [h("source", { src: row.video_dir, type: "video/mp4" })]
      // );
    });
  }

  return {
    columns,
    openDialog
  };
}
