<template>
  <div class="cameraVideo">
    <video
        @loadstart="loadstart($event)"
        @canplay="canplay($event)"
        class="videoControl"
        muted
        :id="ownVideoData.oid"
    ></video>
    <div class="cameraTable">
      <el-table
          :data="tableData"
          height="100%"
          style="width: 100%;">
        <el-table-column show-overflow-tooltip align="center" prop="channelName" label="通道名称" width="60"/>
        <el-table-column show-overflow-tooltip align="center" prop="startTime" label="统计开始时间" width="80"/>
        <el-table-column show-overflow-tooltip align="center" prop="laneNum" label="车道号" width="45"/>
        <el-table-column show-overflow-tooltip align="center" prop="flowTypeDesc" label="车道类型" width="80"/>
        <el-table-column show-overflow-tooltip align="center" prop="vehicleCount" label="车道总流量" width="80"/>
        <el-table-column show-overflow-tooltip align="center" prop="straightCount" label="直行通道车辆数" width="90"/>
        <el-table-column show-overflow-tooltip align="center" prop="leftCount" label="左转通道车辆数" width="90"/>
        <el-table-column show-overflow-tooltip align="center" prop="rightCount" label="右转通道车辆数" width="90"/>
        <el-table-column show-overflow-tooltip align="center" prop="turnCount" label="掉头通道车辆数" width="90"/>
        <el-table-column show-overflow-tooltip align="center" prop="producer" label="厂商" width="50"/>
      </el-table>
    </div>
    <div class="pageContainer">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="paginationData.pageNum"
          :page-size="paginationData.pageSize"
          layout="prev, pager, next"
          :total="paginationData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {equip_camera, api_getCameraTable} from "../../dao/situation";
import Videojs from "video.js";
import "./videojs-flvjs-plugin";

export default {
  name: "cameraVideo",
  props: ["videoData"],
  watch: {},
  data() {
    return {
      distroyFlag: false,
      player: null,
      ownVideoData: {},
      tableData: [],
      paginationData: {
        total: 0,
        pageNum: 1,
        pageSize: 8,
      },
    };
  },
  methods: {
    handleCurrentChange(e) {
      this.paginationData.pageNum = e
      this.getCameraTable();
    },
    getCameraTable() {
      console.log(this.videoData);
      api_getCameraTable({
        "channelName": this.videoData.equipName,
        "pageNum": this.paginationData.pageNum,
        "pageSize": this.paginationData.pageSize
      }).then(res => {
        if (res.code == 200) {
          this.tableData = res.content.rows
          this.paginationData.total = res.content.total
        }
      })
    },
    canplay() {
      this.$emit("vidCanplay", this.ownVideoData);
    },
    loadstart() {
    },
    loadVideo() {
    },
    bindEvents() {
    },
    handleErr() {
    },
    pause() {
    },
    destroy() {
      this.distroyFlag = true
      if (this.player) {
        this.player.dispose();
        this.player = null;
      }
    },
  },

  mounted() {
    this.ownVideoData = this.videoData
    this.getCameraTable();
    // m3u8
    if (this.ownVideoData && this.ownVideoData.functionType == "99") {
      setTimeout(() => {
        // hls
        this.player = Videojs(document.getElementById(this.ownVideoData.oid), {
          autoplay: "muted", //自动播放
          controls: false, //用户可以与之交互的控件
          loop: true, //视频一结束就重新开始
          fill: true,
          techOrder: ["html5", "flvjs"], // 兼容顺序
          html5: {
            hls: {
              withCredentials: true,
            },
          },
          sources: [
            {
              src: `${this.ownVideoData.videoUrl}`,
              type: "application/x-mpegURL",
              // src: `111.mp4`,
            },
          ],
        });
        this.player.on("playing", () => {
          this.canplay();
        });
        this.player.on("error", (e) => {
          console.log("hls error", e);
          equip_camera().then((res) => {
            let allCameras = res.content;
            let targetCamera = allCameras.find((camera) => {
              return camera.oid == this.ownVideoData.oid;
            });
            // this.destroy();
            this.player.pause();
            // this.player = null;
            this.ownVideoData = targetCamera;
            setTimeout(() => {
              this.player.src([
                {
                  src: targetCamera.videoUrl,
                  type: "application/x-mpegURL",
                  // src: `111.mp4`,
                },
              ]);
              this.player.on("playing", () => {
                this.canplay();
              });
            }, 100);
          });
        });
      }, 100);
    }
    // flv
    else {
      setTimeout(() => {
        //flv
        this.player = Videojs(document.getElementById(this.ownVideoData.oid), {
          autoplay: "muted", //自动播放
          controls: false, //用户可以与之交互的控件
          loop: true, //视频一结束就重新开始4
          fill: true,
          techOrder: ["html5", "flvjs"], // 兼容顺序
          flvjs: {
            mediaDataSource: {
              isLive: false,
              cors: true,
              withCredentials: false,
            },
          },
          sources: [
            {
              src: this.ownVideoData.videoUrl,
              type: "video/x-flv"
              // src: `111.mp4`,
            }
          ],
        });
        this.player.on("playing", () => {
          this.canplay();
        });
      }, 0);
    }
  },
  computed: {},
  beforeDestroy() {
    this.destroy();
  },
};
</script>
<style>
video {
  width: 100% !important;
  height: 100% !important;
}
</style>
<style lang="less" scoped>
.loading-mask {
  border-radius: 4PX;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(8, 22, 35, 0.7);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fcfcfc;
}

.cameraVideo {
  //position: relative;
  //width: 1000PX;
  //display: flex;
  //justify-content: space-between;
  .videoControl {
    width: 300PX;
    height: 200PX;
    margin: 0 auto;
    object-fit: fill;
  }
}

.cameraTable {
  //position: absolute;
  //left: 100% ;
  //top: 0;
  height: calc(100% - 230PX);
  //width:50%;
  overflow-x: auto;
  background: #0f2645;
  border-left: 1PX solid #037bb2;
  margin-left: 1PX;
  padding: 10PX 20PX;
  box-sizing: border-box;
  z-index: 1000;

  ::v-deep .el-table__body tr.hover-row > td.el-table__cell {
    background-color: transparent !important;
  }

  ::v-deep .el-table__body-wrapper {
    z-index: 6
  }

  ::v-deep .el-table {
    background: transparent;

    &::before {
      background: none;
      height: 0 !important;
    }

    tr:hover > td {
      background-color: transparent;
    }

    td.el-table__cell {
      border-bottom: 1PX solid rgba(255, 255, 255, .1) !important;
    }

    th {
      text-align: center;
    }

    th, td, tr {
      padding: 0;
      color: #fff;
      background: #0f2645;
    }

    .cell {
      padding-right: 0;
      padding-left: 5PX;
      color: #fff;
      font-size: 12PX;
    }
  }


}

.pageContainer {
  height: 30px;
  width: 100%;
  display: flex;
  justify-content: center;

  ::v-deep .el-pagination {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;

    button:disabled, .el-pager li, .btn-next, .btn-prev {
      background: transparent;
      color: rgba(255, 255, 255, .5);
      font-size: 12PX;
      width: 35PX;
      height: 28PX;
    }

    .btn-next .el-icon, .btn-prev .el-icon {
      font-size: 12PX;
    }

    .el-pager li.active {
      color: #409EFF !important;
    }
  }
}

::v-deep .el-icon-loading {
  position: absolute;
  left: 30%;
  top: -14PX;
  transform: translateX(-50%);
}

::v-deep .vjs-control-bar {
  display: none !important;
}

::v-deep .vjs-big-play-button {
  display: none !important;
}

::v-deep .vjs-control-text {
  display: none !important;
}

::v-deep .vjs-text-track-display {
  display: none !important;
}

::v-deep .vjs-modal-dialog {
  display: none !important;
}
</style>
