<template>
  <div class="app-container">
    <div class="left">
      <div class="side-nav el-scrollbar" style="opacity: 1">
        <div class="nav-item" v-for="(item, index) in videoConfigList">
          <span
            :title="item.videoName"
            @click="handlePlay(item, index)"
            :class="{ bg_color: currentIndex == index }"
            :style="{
              '--bgColor':
                item.signalState == 1
                  ? 'green'
                  : item.signalState == 2
                  ? 'red'
                  : '#aaaaaa',
            }"
          >
            {{ item.videoName }}（{{ item.videoPassageCount }}/{{
              item.passagePassCount
            }}）</span
          >
        </div>
      </div>
    </div>
    <div class="right" v-if="showVideo">
      <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>
    </div>
  </div>
</template>

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

export default {
  name: "VideoPlay",
  data() {
    return {
      // 遮罩层
      loading: true,
      players: [],
      showVideo: true,
      // 视频配置表格数据
      videoConfigList: [],
      currentIndex: null,
      request:
        "http://111.21.209.230:7086/live/cameraid/1000064$0/substream/2.m3u8",
      videoPassageList: [],
      videoDvrNumber: null,
    };
  },
  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);
      }
    });
  },
  created() {
    this.initMenu();
  },
  methods: {
    /** 查询视频配置列表 */
    initMenu() {
      let param = {};
      listVideoView(param).then((response) => {
        this.videoConfigList = response.data;
      });
    },
    handlePlay(it, idx) {
      this.players.forEach((p) => {
        if (p) {
          try {
            p.stop();
          } catch (e) {}
        }
      });
      this.currentIndex = idx;
      this.showVideo = false;
      this.videoDvrNumber = it.videoDvrNumber;
      setTimeout(() => {
        this.initVideo(
        it.videoDvrNumber,
        this.request.replace("{{videoDvrNumber}}", it.videoDvrNumber)
      );
      },400)
    },
    //查询视频通道
    initVideo(videoDvrNumber, url) {
      let that = this;
      this.showVideo = true;
      this.players = [];
      getVideoPassage(videoDvrNumber).then((response) => {
        let data = response.data;
        this.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 themUrl = url.replace("{{passage}}", it.passageValue);
            that.players[idx].play(themUrl, 1);
          });
        },400);
      });
    },
    handleOnError0(error) {
      //this.showVideoView0 = false;
      //console.log("error: ", error);
      //this.updatePassageState(this.videoPassageList[0].id);
    },
    handleOnError1(error) {
      //this.showVideoView1 = false;
      //console.log("error: ", error);
      //this.updatePassageState(this.videoPassageList[1].id);
    },
    handleOnError2(error) {
      //this.showVideoView2 = false;
      //console.log("error: ", error);
      //this.updatePassageState(this.videoPassageList[2].id);
    },
    handleOnError3(error) {
      //this.showVideoView3 = false;
      //console.log("error: ", error);
      //this.updatePassageState(this.videoPassageList[3].id);
    },
    updatePassageState(id) {
      let param = {
        id: id,
        videoDvrNumber: this.videoDvrNumber,
        passageState: "2",
      };
      //editPassageState(param);
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .left {
    width: 250px;
    height: calc(100% - 45px);
    float: left;
    overflow: hidden;

    .side-nav {
      height: 820px;
      overflow-y: scroll;
      .nav-item {
        width: 230px;
        overflow: hidden;
        display: block;
        height: 40px;
        color: #444;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: 400;

        span {
          float: left;
          cursor: pointer;
        }
        .bg_color {
          color: #409eff;
        }
      }
      .nav-item :hover {
        color: #409eff;
      }
      .nav-item ::before {
        content: " ";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: block;
        float: left;
        margin-top: 6px;
        margin-right:5px;
        background-color: var(--bgColor);
      }
    }
  }
  .right {
    width: calc(100% - 270px);
    margin-left: 15px;
    height: 820px;
    float: left;
    .videoView {
      color: aliceblue;
      float: left;
      width: 50%;
      height: 50%;
    }
    .videoViewError {
      background-color: #575e65;
      text-align: center;
      line-height: 324px;
    }
  }
}
</style>
