<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">
        <H265Player :url="url0" @on-error="handleOnError" />
      </div>
      <div class="videoView">
        <H265Player :url="url1" @on-error="handleOnError" />
      </div>
      <div class="videoView">
        <H265Player :url="url2" @on-error="handleOnError" />
      </div>
      <div class="videoView">
        <H265Player :url="url3" @on-error="handleOnError" />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getVideoPassage } from "@/api/video/videoConfig";
import H265Player from "vue-h265-player";

export default {
  name: "videoPlay",
  components: {
    H265Player,
  },
  props: {
    formData: {
      videoDvrNumber: String,
    },
  },
  data() {
    return {
      request:
        "http://111.21.209.230:7086/live/cameraid/{{videoDvrNumber}}${{passage}}/substream/2.m3u8",
      url0: "",
      url1: "",
      url2: "",
      url3: "",
    };
  },
  computed: {},
  watch: {
    formData: {
      handler(value) {
        this.formData = value;
        this.request = this.request.replace(
          "{{videoDvrNumber}}",
          this.formData.videoDvrNumber
        );
        this.initVideo();
      },
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    onOpen() {},
    onClose() {},
    handleOnError(error) {
      console.log("error: ", error);
    },
    //查询视频通道
    initVideo() {
      getVideoPassage(this.formData.videoDvrNumber).then((response) => {
        let data = response.data;
        data.forEach((it, idx) => {
          if (idx == 0) {
            this.url0 = this.request.replace("{{passage}}", it.passageValue);
          }
          if (idx == 1) {
            this.url1 = this.request.replace("{{passage}}", it.passageValue);
          }
          if (idx == 2) {
            this.url2 = this.request.replace("{{passage}}", it.passageValue);
          }
          if (idx == 3) {
            this.url3 = this.request.replace("{{passage}}", it.passageValue);
          }
        });
      });
    },
  },
};
</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%;
}
</style>
