<template>
  <div class="app-container">
    <el-drawer
      v-bind="$attrs"
      v-if="onOpen"
      v-on="$listeners"
      @opened="onOpen"
      @close="onClose"
      style="padding-left: 20px"
    >
      <div class="videoView">
        <div id="vd01"></div>
      </div>
      <div class="videoView">
        <div id="vd02"></div>
      </div>
      <div class="videoView">
        <div id="vd03"></div>
      </div>
      <div class="videoView">
        <div id="vd04"></div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getVideoPassage, editPassageState } from "@/api/video/videoConfig";

export default {
  name: "videoPlay",
  props: {
    formData: {
      videoDvrNumber: String,
    },
  },
  data() {
    return {
      players: [],
      request:
        "https://szgc.jhncidg.com/video/live/cameraid/{{videoDvrNumber}}${{passage}}/substream/2.m3u8",
    };
  },
  computed: {},
  watch: {
    formData: {
      handler(value) {
        this.formData = value;
        this.request = this.request.replace(
          "{{videoDvrNumber}}",
          this.formData.videoDvrNumber
        );
        this.initVideo();
      },
      immediate: true,
    },
  },
  created() {},
  beforeDestroy() {
    console.log("-----beforeDestroy------>");
    this.players.forEach((p) => {
      if (p) {
        try {
          p.stop();
        } catch (e) {}
      }
    });
  },
  mounted() {
    this.$nextTick(() => {
      for (let i = 1; i <= 4; i++) {
        let player = new WasmPlayer(null, "vd0" + i, null, {
          Height: true,
        });
        this.players.push(player);
      }
    });
  },
  methods: {
    onOpen() {},
    onClose() {
      this.players.forEach((p) => {
        if (p) {
          try {
            p.stop();
          } catch (e) {}
        }
      });
    },
    handleOnError0(error) {
      //this.showVideoView0 = false;
      //console.log("error: ", error);
      //this.url0 = this.request.replace("192.168.25.2","111.21.209.230").replace("{{passage}}", "0");
      //this.updatePassageState(this.videoPassageList[0].id);
    },
    handleOnError1(error) {
      //this.showVideoView1 = false;
      //console.log("error: ", error);
      //this.url1 = this.request.replace("192.168.25.2","111.21.209.230").replace("{{passage}}", "1");
      //this.updatePassageState(this.videoPassageList[1].id);
    },
    handleOnError2(error) {
      //this.showVideoView2 = false;
      //console.log("error: ", error);
      //this.url2 = this.request.replace("192.168.25.2","111.21.209.230").replace("{{passage}}", "2");
      //this.updatePassageState(this.videoPassageList[2].id);
    },
    handleOnError3(error) {
      //this.showVideoView3 = false;
      //console.log("error: ", error);
      //this.url3 = this.request.replace("192.168.25.2","111.21.209.230").replace("{{passage}}", "3");
      //this.updatePassageState(this.videoPassageList[3].id);
    },
    //查询视频通道
    initVideo() {
      this.players.forEach((p) => {
        if (p) {
          try {
            p.stop();
          } catch (e) {}
        }
      });
      this.players = [];
      let that = this;
      getVideoPassage(that.formData.videoDvrNumber).then((response) => {
        let data = response.data;
        that.videoPassageList = data;
        data.forEach((it, idx) => {
          let player = new WasmPlayer(null, "vd0" + (idx + 1), null, {
            Height: true,
          });
          that.players.push(player);
        });
        setTimeout(() => {
          that.videoPassageList.forEach((it, idx) => {
          let url = that.request.replace("{{passage}}", it.passageValue);
          that.players[idx].play(url, 1);
        });
          },400);
      });
    },
    updatePassageState(id) {
      // let param = {
      //   id: id,
      //   videoDvrNumber: this.formData.videoDvrNumber,
      //   passageState: "2",
      // };
      //editPassageState(param);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";

::v-deep .el-drawer__header {
  display: none;
}
.videoView {
  color: aliceblue;
  float: left;
  width: 50%;
  height: 50%;
}
.videoViewError {
  background-color: #575e65;
  text-align: center;
  line-height: 324px;
}
</style>
