<template>
  <div>
    <div id="player"></div>
    <el-form>
      <el-form-item label="当前选中摄像头">
        {{
          this.playUrlList.length > 0 && this.player
            ? this.playUrlList[this.player.currentWindowIndex].code
            : "--"
        }}
      </el-form-item>
      <el-form-item label="分屏">
        <el-radio-group v-model="splitNum" @change="arrangeWindow">
          <el-radio-button label="1">1x1</el-radio-button>
          <el-radio-button label="2">2x2</el-radio-button>
          <el-radio-button label="3">3x3</el-radio-button>
          <el-radio-button label="4">4x4</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="预览">
        <el-button id="btn-realplay" @click="realplay">开始预览</el-button>
        <el-button id="btn-realplay-stop" @click="stopPlay">停止预览</el-button>
        <el-button id="btn-stopall" @click="stopAllPlay"
          >停止全部窗口</el-button
        >
      </el-form-item>
      <el-form-item label="回放时间">
        <e-date-picker
          show-time
          placeholder="开始时间"
          format="YYYY-MM-DD HH:mm:ss"
          v-model="playback.startTime"
          :value-format="playback.valueFormat"
        >
        </e-date-picker>
        <e-date-picker
          show-time
          placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          v-model="playback.endTime"
          :value-format="playback.valueFormat"
        >
        </e-date-picker>
      </el-form-item>
      <el-form-item label="回放">
        <el-button id="btn-playback" @click="playbackQuery">开始回放</el-button>
        <el-button id="btn-playback-pause" @click="playbackPause"
          >暂停</el-button
        >
        <el-button id="btn-playback-sesume" @click="playbackResume"
          >恢复</el-button
        >
        <el-button id="btn-playback-stop" @click="stopPlay">停止回放</el-button>
      </el-form-item>
      <el-form-item label="抓图">
        <el-button id="btn-capture-jpeg" @click="capture('JPEG')"
          >抓取JPEG</el-button
        >
        <el-button id="btn-capture-bmp" @click="capture('BMP')"
          >抓取BMP</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource; // 是否支持mse
// import "@/static/js/h5player.min.js"
import {
  queryLivePreview,
  queryLiveBack,
} from "@/api/wirelessintrusion/wirelessintrusion";
export default {
  props: {
    list: {
      // cameraCode列表
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      player: null,
      playUrlList: [], //预览播放地址
      splitNum: 1,
      mseSupport: MSE_IS_SUPPORT,
      // tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
      tabActive: "decoder",
      urls: {
        realplay: "ws://10.19.147.22:559/EUrl/q2jQie4",
        talk: "wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S",
        playback:
          "wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S",
      },
      playback: {
        startTime: "2021-07-26T00:00:00",
        endTime: "2021-07-26T23:59:59",
        valueFormat: "",
        seekStart: "2021-07-26T12:00:00",
        rate: "",
      },
      muted: true,
      volume: 50,
      volumeOnSvg: {
        template:
          '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>',
      },
      volumeOffSvg: {
        template:
          '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>',
      },
      recordStartState: 0,
      recordStartText: "录像",
    };
  },
  created() {
    // 海康h5插件初始化
    setTimeout(() => {
      this.init();
      this.createPlayer();
      this.arrangeWindow();
    });
  },
  methods: {
    // 海康视频初始化加载
    init() {
      // 设置播放容器的宽高并监听窗口大小变化
      window.addEventListener("resize", () => {
        this.player.JS_Resize();
      });
    },
    createPlayer() {
      this.player = new window.JSPlugin({
        szId: "player",
        szBasePath: "/js/", //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
        iMaxSplit: 4,
        iCurrentSplit: 2,
        openDebug: true,
        oStyle: {
          borderSelect: "#FFCC00",
        },
      });
      let _this = this;
      // 事件回调绑定
      this.player.JS_SetWindowControlCallback({
        windowEventSelect: function (iWndIndex) {
          //插件选中窗口回调
          console.log("windowSelect callback: ", iWndIndex);
        },
        pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
          //插件错误回调
          console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
        },
        windowEventOver: function (iWndIndex) {
          //鼠标移过回调
          //console.log(iWndIndex);
        },
        windowEventOut: function (iWndIndex) {
          //鼠标移出回调
          //console.log(iWndIndex);
        },
        windowEventUp: function (iWndIndex) {
          //鼠标mouseup事件回调
          //console.log(iWndIndex);
        },
        windowFullCcreenChange: function (bFull) {
          //全屏切换回调
          console.log("fullScreen callback: ", bFull);
        },
        firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
          //首帧显示回调
          console.log(
            "firstFrame loaded callback: ",
            iWndIndex,
            iWidth,
            iHeight
          );
        },
        performanceLack: function () {
          //性能不足回调
          console.log("performanceLack callback: ");
        },
      });
      //   _this.realplay();
      this.queryLive();
    },
    arrangeWindow() {
      this.splitNum =
        this.list.length > 1
          ? 2
          : this.list.length > 4
          ? 3
          : this.list.length > 9
          ? 4
          : 4;
      const splitNum = this.splitNum;
      this.player.JS_ArrangeWindow(splitNum).then(
        () => {
          console.log(`arrangeWindow to ${splitNum}x${splitNum} success`);
        },
        (e) => {
          console.error(e);
        }
      );
    },
    // 初始化结束
    // 视频预览
    realplay(index, playUrl) {
      if (this.playUrlList.length === 0) {
        this.$message.warning("当前没有可播放的摄像头");
        return;
      }
      // this.mode = 0  //解码方式：0普通模式 1高级模式
      // const { player, mode, urls } = this,

      // index = player.currentWindowIndex
      // // playURL = this.realplay
      // console.log('playURL ==>',playURL,'mode ===>',mode,'index1 ===>',index1)
      // player.JS_Play(playURL, { playURL, mode }, index1).then(
      // () => {
      //     console.log('realplay success')
      // },
      // e => { console.error(e) }
      // )
      if (this.player === null) return;
      // let { mode, player } = this;
      //   let index = this.player.currentWindowIndex;
      let mode = 0;
      //   let playURL = this.playUrlList[player.currentWindowIndex].url;

      console.log(playURL, { playURL, mode }, index);
      this.player.JS_Play(playURL, { playURL, mode }, index).then(
        () => {
          // 播放成功回调
          console.log("播放成功");
        },
        (err) => {
          console.log("播放失败", err);
        }
      );
    },
    // 关闭所有视频
    stopAllPlay() {
      this.player.JS_StopRealPlayAll().then(
        () => {
          this.playback.rate = 0;
          console.log("stopAllPlay success");
          this.closeVideoTree();
        },
        (e) => {
          console.error(e);
        }
      );
    },
    // 关闭单个视频
    stopPlay() {
      this.player.JS_Stop().then(
        () => {
          this.playback.rate = 0;
          console.log("stop realplay success");
          // this.closeVideoTree()
          const index = this.player.currentWindowIndex;
          this.selectAisle(this.videoList[index], index);
        },
        (e) => {
          console.error(e);
        }
      );
    },
    capture(imageType) {
      let player = this.player,
        index = player.currentWindowIndex;

      player.JS_CapturePicture(index, "img", imageType).then(
        () => {
          console.log("capture success", imageType);
        },
        (e) => {
          console.error(e);
        }
      );
    },
    /**
     * 视频流查询
     */
    //实时监控播放地址查询
    queryLive() {
      console.log("视频流查询", this.list);
      let playUrlList = [];
      this.list.map((code, index) => {
        // console.log('code ===>',code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code)
        queryLivePreview({ cameraIndexCode: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code }).then((res) => {
          console.log('res ====>',res)
          if (res.data.code === 0 || res.data.code == 200) {
            playUrlList.push({ code: code, url: res.data.url });
            this.playUrlList = playUrlList;
            this.realplay(index, res.data.url);
          }
        });
      });
    },

    /* 回放 */
    playbackStart() {
      let { player, mode, playback } = this,
        index = player.currentWindowIndex,
        { startTime, endTime } = playback;
      let playUrl = this.playUrlList[index].playback;
      startTime += "Z";
      endTime += "Z";

      player
        .JS_Play(playURL, { playURL, mode }, index, startTime, endTime)
        .then(
          () => {
            console.log("playbackStart success");
            this.playback.rate = 1;
          },
          (e) => {
            console.error(e);
          }
        );
    },
    playbackPause() {
      this.player.JS_Pause().then(
        () => {
          console.log("playbackPause success");
        },
        (e) => {
          console.error(e);
        }
      );
    },
    playbackResume() {
      this.player.JS_Resume().then(
        () => {
          console.log("playbackResume success");
        },
        (e) => {
          console.error(e);
        }
      );
    },
    /* 回放 */
    playbackQuery() {
      if (this.playUrlList.length === 0) {
        this.$message.warning("当前没有可播放的摄像头");
        return;
      }
      if (
        this.playUrlList[this.player.currentWindowIndex].playback != undefined
      ) {
        this.playbackStart();
        return;
      }
      queryLiveBack({
        cameraIndexCode: this.playUrlList[this.currentWindowIndex].code,
        beginTime: this.playback.startTime,
        endTime: this.playback.endTime,
      }).then((res) => {
        if (res.data.code === 0 || res.data.code == 200) {
          this.playUrlList[this.player.currentWindowIndex].playback =
            res.data.url;
          this.playbackStart();
        }
      });
    },
  },
};
</script>

<style></style>
