import { render, h, nextTick } from 'vue';
import LivePlayer from '@liveqing/liveplayer-v3';
import { play } from '../views/vent/monitorManager/balancePressMonitor/balancePress.threejs';

export function toEchartsData(list, option) {
  option.legend['data'] = [];
  option.yAxis.length = list.length;
  option.yAxis.series = list.length;
  list.forEach((item: any, index) => {
    option.legend['data'].push(`${item['legend']}(${item['unit']})`);
    const yAxiObj = {
      type: 'value',
      position: item['yaxispos'],
      axisLabel: { formatter: `{value} ${item['unit']}` },
    };
    const serieObj = {
      name: `${item['legend']}(${item['unit']})`,
      type: item['linetype'],
      yAxisIndex: item['sort'],
    };
    if (!option.yAxis[index]) {
      option.yAxis[index] = yAxiObj;
    } else {
      Object.assign(option.yAxis[index], yAxiObj);
    }
    if (!option.series[index]) {
      option.series[index] = serieObj;
    } else {
      Object.assign(option.series[index], serieObj);
    }
  });
  return option;
}

export function formatNum(data) {
  return new Intl.NumberFormat('ja-JP', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(data);
}

export function cameraInit(dom, rtspUrl) {
  let webRtcServer = undefined;
  const ip = VUE_APP_URL.webRtcUrl;
  // const ip = '//192.168.183.216:8000';
  webRtcServer = new window['WebRtcStreamer'](dom, location.protocol + ip);

  if (webRtcServer) webRtcServer.connect(rtspUrl);
  return { webRtcServer };
}

export function deviceCameraInit(cameraAddrs, player: HTMLElement, webRtcServerList: any[] = []) {
  const webRtcServerLen = webRtcServerList.length;
  const playerDoms: HTMLElement[] = [];
  const cameraUrls: string[] = [];
  const webRtcServer: any[] = [];
  let livePlayerDiv: HTMLElement | null = document.getElementById('LivePlayerBox');
  if (livePlayerDiv) livePlayerDiv.remove();
  if (!livePlayerDiv) {
    const dom = document.createElement('div');
    dom.setAttribute('id', 'LivePlayerBox');
    livePlayerDiv = dom;
    player.appendChild(livePlayerDiv);
  }
  return new Promise((resolve) => {
    const playCamrea = () => {
      cameraAddrs.forEach((cameraUrl: string, index) => {
        if (cameraUrl.startsWith('rtsp://')) {
          const server = webRtcServerList.shift();
          if (server) {
            server.connect(cameraUrls[index]);
            webRtcServer.push(server);
          } else {
            const videoDom = document.createElement('video');
            videoDom.setAttribute('class', 'rtspVideo');
            videoDom.autoplay = true;
            player.appendChild(videoDom);
            playerDoms.push(videoDom);
            const server = new window['WebRtcStreamer'](videoDom, location.protocol + VUE_APP_URL.webRtcUrl);
            webRtcServer.push(server);
            if (server) server.connect(cameraUrl);
          }
        } else {
          render(h(LivePlayer, { class: 'player', muted: true, autoplay: true, live: true, videoUrl: cameraUrl }), livePlayerDiv);
        }
      });
      resolve(null);
    };
    playCamrea();
  }).then(() => {
    const players = livePlayerDiv?.getElementsByClassName('player');
    if (players && players.length) {
      for (let i = 0; i < players.length; i++) {
        debugger;
        const dom = players[i].getElementsByTagName('video')[0];
        if (dom) playerDoms.push(dom);
      }
    }
    debugger
    if (webRtcServerList.length > 0) {
      const rtspVideoList = player.getElementsByClassName('rtspVideo');
      for (let i = 0; i < webRtcServerList.length; i++) {
        webRtcServerList[i].disconnect();
        rtspVideoList[webRtcServerLen - webRtcServerList.length + i].remove()
      }
    }
    return { webRtcServer, playerDoms };
  });
}