<template>
  <div :class="{'full-video': fullScreen}" ref="wrap">
    <div class="interact-wrap">
      <div
        class="cpt_video"
        :class="sizeClass"
        @click="onClickMove"
        v-if="showPlayer"
        ref="video"
        v-interact
      >
        <div class="video">
          <div class="name" v-clipboard:copy="vUrl.vUrl">{{ title }}</div>
          <div class="tr-info-box">
            <div class="tr-info tr-info--1" v-if="networkType">{{ networkType }}</div>
            <div class="tr-info tr-info--2">{{ streamName }}</div>
          </div>
          <div v-show="!fullScreen" class="close" @click="onClose()">关闭</div>
        </div>
        <el-tooltip
          content="模式切换"
          placement="bottom"
          v-if="playerCom !== 'QingLiuPlayer' && fpvUrl.vUrl"
        >
          <div
            class="fpv-switch iconfont icon-moshiqiehuan modelStyle pointer"
            @click="onChangeFPV"
          ></div>
        </el-tooltip>
        <components
          :is="playerCom"
          :fpvSmallWindow="fpvSmallWindow"
          :fullScreen="fullScreen"
          ref="player"
          :fpvUrl="fpvUrl"
          :data="vUrl"
          :raw_msg="raw_msg"
          @debugInfo="onDebugInfo"
        />
        <div class="info" v-if="showQingLiuInfo && playerCom == 'QingLiuPlayer'">
          <div class="de">
            <div class="title">bitrate:</div>
            <div class="detail">{{ raw_msg ? raw_msg/1000 : "0"}}kbps</div>
          </div>
          <div class="de">
            <div class="title">venc_avg:</div>
            <div class="detail">{{qoeinfo ? qoeinfo.venc_avg/1000 : "0"}}ms</div>
          </div>
          <div class="de">
            <div class="title">venc_last:</div>
            <div class="detail">{{qoeinfo ? qoeinfo.venc_last/1000 : "0"}}ms</div>
          </div>
          <div class="de">
            <div class="title">pushrtt_avg:</div>
            <div class="detail">{{qoeinfo ? qoeinfo.pushrtt_avg[0]/1000 : "0"}}ms</div>
          </div>
          <div class="de">
            <div class="title">pushrtt_last:</div>
            <div class="detail">{{qoeinfo ? qoeinfo.pushrtt_last[0]/1000 : "0"}}ms</div>
          </div>
          <div class="de">
            <div class="title">recvrtt_avg:</div>
            <div class="detail">{{qoeinfo ? qoeinfo.recvrtt_avg[0]/1000 : "0"}}ms</div>
          </div>
          <div class="de">
            <div class="title">recvrtt_last:</div>
            <div class="detail">{{qoeinfo ? qoeinfo.recvrtt_last[0]/1000 : "0"}}ms</div>
          </div>
          <div class="de">
            <div class="title">pushretrans_avg:</div>
            <div class="detail">{{qoeinfo ? (qoeinfo.pushretrans_avg[0]*0.1).toFixed(2) : "0"}}%</div>
          </div>
          <div class="de">
            <div class="title">pushretrans_last:</div>
            <div class="detail">{{qoeinfo ? (qoeinfo.pushretrans_last[0]*0.1).toFixed(2) : "0"}}%</div>
          </div>
          <div class="de">
            <div class="title">recvretrans_avg:</div>
            <div class="detail">{{qoeinfo ? (qoeinfo.recvretrans_avg[0]*0.1).toFixed(2) : "0"}}%</div>
          </div>
          <div class="de">
            <div class="title">recvretrans_last:</div>
            <div class="detail">{{qoeinfo ? (qoeinfo.recvretrans_last[0]*0.1).toFixed(2) : "0"}}%</div>
          </div>
          <div class="de">
            <div class="title">vdec:</div>
            <div class="detail">{{qoeinfo ? qoeinfo.vdec/1000 : "0"}}ms</div>
          </div>
          <div class="de">
            <div class="title">vbuffer:</div>
            <div class="detail">{{qoeinfo ? qoeinfo.vbuffer/1000 : "0"}}ms</div>
          </div>
        </div>
        <div class="play">
          <el-tooltip
            v-if="playerCom == 'QingLiuPlayer'"
            class="ql-info"
            content="信息"
            placement="bottom"
          >
            <div @click="switchQingLiuInfo">
              <img src="~./assets/info.png" alt />
            </div>
          </el-tooltip>
          <div v-else class="left ml24" style="margin-left: 124px; color: #fff;"></div>
          <div class="ctrl-items">
            <div class="ctrl-items-selects">
              <el-select
                class="video_type mr24"
                v-model="streamSelect"
                @change="fpvSmallWindow = true;"
                placeholder="切换源"
              >
                <el-option
                  v-for="(item, i) in _streamOptions"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select class="size_type" v-model="sizeSelect" placeholder="比例">
                <el-option
                  v-for="item in sizeOptions2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="pointer iconfont icon-gengxin" @click="onReset"></div>
            <div class="pointer iconfont icon-quanping" @click="onFullScreen"></div>
          </div>
        </div>
        <slot></slot>
        <Obstacle :obstacleData="obstacleData" v-if="obstacleData"></Obstacle>
      </div>
    </div>
  </div>
</template>

<script>
// import API from "@/api";

import LiveNVRPlayer from "./components/livenvr";
// import QingLiuPlayer from "./flv/index.vue";
import QingLiuPlayer from "./components/qingliu";
import FLVPlayer from "./components/flv";
import SRSPlayer from "./components/srs";
import WebRtcPlayer from './components/webrtc';
import { to_moveMount } from "../../lib/to_moveMount";
import Obstacle from "./components/obstacle";

export default {
  name: "MMCPlayer",
  components: {
    QingLiuPlayer,
    LiveNVRPlayer,
    FLVPlayer,
    SRSPlayer,
    WebRtcPlayer,
    Obstacle,
  },
  props: {
    //网络类型
    networkType: {
      type: String,
      default: () => "公网",
    },
    //流可选项， {value: "播放地址", label: '流名称', fpvUrl: '', brand: 'srs|fly|liveNVR|QingLiu|webrtc'}
    streamOptions: {
      type: Array,
      default: () => [],
    },
    //当前挂载的数据
    mountData: {
      type: Object,
      default: () => null,
    },
    title: {
      type: String,
      default: "",
    },
    obstacleData: {
      type: Object,
      default() {
        return null; /* { 
          distances: [], //array<int>（36个值每10度一个与障碍物的距离厘米）; 
          obsDistance: 0,  //int(避障警告距离米)}
        } */
      },
    },
    //是否居中显示
    isCenter: {
      type: Boolean,
      default: true
    },
    //默认大小, 默认为X2, 1: X1, 2:X2, 3:X3
    size: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      showQingLiuInfo: false, //清流视频信息展示
      qoeinfo: null, //清流信息
      raw_msg: 0, //清流信息
      showPlayer: true, //用于刷新播放器
      fpvSmallWindow: true, //fpv小窗口
      fullScreen: false, //全屏
      streamSelect: "", //选择的流
      scale: "", //窗口比例
      sizeSelect: 2, //选择的大小
      sizeOptions2: [
        //大小可选项
        {
          value: 1,
          label: "X1",
        },
        {
          value: 2,
          label: "X2",
        },
        {
          value: 3,
          label: "X3",
        },
      ],
    };
  },
  computed: {
    /**
     * 播放器大小对应的类名
     */
    sizeClass() {
      this.$nextTick(() => {
        this.isCenter && this.wrapCenter();
      });
      return "size_0" + this.sizeSelect;
    },
    /**
     * 播放器组件名
     */
    playerCom() {
      if (this.stream?.brand) {
        switch (this.stream.brand.toLowerCase()) {
          case "flv":
            return "FLVPlayer";

          case "srs":
            return "SRSPlayer";

          case "livenvr":
            return "LiveNVRPlayer";

          case "qingliu":
            return "QingLiuPlayer";

          case "webrtc":
            return "WebRtcPlayer";

          default:
            throw "不支持的播放器品牌！";
        }
      } else {
        if (this.vUrl.vUrl?.includes("pzsp://")) {
          return "QingLiuPlayer";
        } else {
          return "LiveNVRPlayer";
        }
      }
    },
    _streamOptions(){
      return this.streamOptions.map((item, i) => {
        item.value = i;
        return item;
      })
    },
    /**
     * 选择流选项
     */
    stream() {
      let find = this.streamOptions.find((item) => {
        return item.value === this.streamSelect;
      });
      return find;
    },
    /**
     * 流类型名
     */
    streamName() {
      return this.stream?.label || "";
    },
    /**
     * 播放的视频流
     */
    vUrl() {
      return {
        vUrl: this.stream?.url || "",
      };
    },
    fpvUrl() {
      return {
        vUrl: this.stream?.fpvUrl || "",
      };
    },
  },
  watch: {
    streamOptions: {
      handler: function () {
        console.log("streamOptions");
        //当流选项变化时，如果未选择流类型，则自动选择第一个流类型
        if (this._streamOptions.length > 0) {
          this.streamSelect = this._streamOptions[0].value;
        } else {
          this.streamSelect = ''
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.sizeSelect = this.size;
  },
  methods: {
    test() {
      alert("TEST");
    },
    /**
     * 切换展示清流调试信息
     */
    switchQingLiuInfo() {
      this.showQingLiuInfo = !this.showQingLiuInfo;
    },
    /**
     * 清流调试信息事件
     */
    onDebugInfo(data) {
      switch (data.type) {
        case "qoeinfo":
          this.qoeinfo = data.data;
          break;
        case "raw_msg":
          this.raw_msg = data.data;
          break;
      }
    },
    /**
     * 切换FPV为大窗口
     */
    onChangeFPV() {
      this.fpvSmallWindow = !this.fpvSmallWindow;
    },
    /**
     * 关闭事件
     */
    onClose() {
      this.$emit("close");
    },
    /**
     * 全屏事件
     */
    onFullScreen() {
      if (this.playerCom === "LiveNVRPlayer") {
        this.$refs.player.$refs["livePlayer"].toggleFullscreen();
      } else {
        this.$refs.player.fullScreen();
      }
    },
    /**
     * 调用播放（清流无效）
     */
    play() {
      if (this.playerCom === "LiveNVRPlayer") {
        this.$refs.player.$refs["livePlayer"].play();
      }
    },
    /**
     * 调用暂停（清流无效）
     */
    pause() {
      if (this.playerCom === "LiveNVRPlayer") {
        this.$refs.player.$refs["livePlayer"].pause();
      }
    },
    /**
     * 重置播放器
     */
    onReset() {
      this.showPlayer = false;
      this.$nextTick(() => {
        this.showPlayer = true;
      });
    },
    /**
     * 截图
     */
    screenShot() {
      return this.$refs.player.screenShot();
    },
    /**
     * 居中
     */
    wrapCenter() {
      this.$nextTick(() => {
        let width = this.$refs.video.clientWidth;
        let height = this.$refs.video.clientHeight;
        let fullWidth = window.innerWidth;
        let fullHeight = window.innerHeight - 100;

        let centerX = fullWidth / 2 - width / 2;
        let centerY = fullHeight / 2 - height / 2;
        this.$refs.wrap.setAttribute(
          "style",
          `position: fixed; top: ${centerY}px; left: ${centerX}px;`
        );
      });
    },
    /**
     * 视频指点
     */
    async onClickMove(el) {
      let { mountData } = this;
      if (!mountData) {
        return;
      }
      // if mountStatus =1 代表启用 屏幕指点功能
      if (mountData.mountStatus == 1 && mountData.moveType == "wrj") {
        let evt = window.event || el;
        var div = null;

        if (this.streamSelect == "QingLiu") {
          // div = document.getElementById("canvas_layer0") ;
          div = document.getElementsByClassName("qingliu")[0];
        } else {
          div = document.getElementsByClassName("vjs-tech")[0];
        }
        let data = {
          x: (evt.offsetX * 1920) / div.offsetWidth - 960,
          y: -((evt.offsetY * 1080) / div.offsetHeight) + 540,
          w: 1920,
          h: 1080,
        };
        let buffer = null;

        if (mountData.name == "MMC_Gimbal_Z30Pro") {
          // z30pro
          buffer = await to_moveMount.move_track_focus_ctrl(data.x, data.y);
        } else if (mountData.name == "MMC_Gimbal_Z40S") {
          //z40s
          buffer = await to_moveMount.move_or_focus_ctrl(data);
        } else {
          buffer = await to_moveMount.gcs_click_coordinates(data);
        }
        let mounteList = { data: buffer, ...mountData };
        if (buffer) {
          this.$emit("clickMove", mounteList);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cpt_video {
  cursor: default !important;
  border: 1px solid #fff;
  width: 730px;
  height: 450px;
  background: #333;
  position: fixed;

  .video {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    .name {
      position: absolute;
      top: 0;
      left: 0;
      // width: 122px;
      height: 26px;
      background: #000000;
      border-radius: 1px;
      opacity: 0.6;
      line-height: 26px;
      text-align: center;
      font-size: 16px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #ffffff;
    }

    //top right
    .tr-info-box {
      position: absolute;
      top: 0;
      right: 55px;
      display: flex;

      .tr-info {
        min-width: 56px;
        padding: 0 8px;
        height: 26px;
        text-align: center;
        line-height: 26px;
        border-radius: 13px;
        opacity: 0.58;
        backdrop-filter: blur(6.67px);
        font-size: 16px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #ffffff;

        &.tr-info--1 {
          background: #fc8959;
        }

        &.tr-info--2 {
          background: #4d9dff;
          margin-left: 10px;
        }
      }
    }
    .close {
      position: absolute;
      top: 0;
      right: 0;
      width: 46px;
      height: 26px;
      text-align: center;
      line-height: 26px;
      background: #000000;
      border-radius: 1px;
      opacity: 0.6;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #ffffff;
      cursor: pointer;
    }
  }
  .info {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    padding: 0 10px;
    padding-top: 30px;
    height: calc(100% - 75px);
    background: rgba($color: #000000, $alpha: 0.6);
    .de {
      margin-top: 8px;
      display: flex;
      color: #fff;
      font-size: 14px;
      .detail {
        margin-left: 8px;
      }
    }
  }
  .play {
    z-index: 1;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 46px;
    background: #000000;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      color: #fff;
      span {
        font-size: 20px;
      }
    }
  }
}
.size_01 {
  width: 416px;
  height: 274px;
}
.size_03 {
  width: 1000px;
  height: 600px;
}
.size_04 {
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
}
.ai {
  bottom: 60%;
  z-index: 1;
}
.full-video ::v-deep {
  transform: none !important;

  .interact-wrap {
    transform: translate(0px, -100px) !important;
  }

  .cpt_video {
    position: relative;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vw;
    z-index: 0 !important;

    .ai {
      top: 400px;
      right: 15px;
      height: 36px;
    }

    .faceAndcar {
      top: 407px;
      height: 22px;
    }
  }
}
.modelStyle {
  bottom: 45px;
  right: 12px;
  z-index: 3;
}
.faceAndcar {
  z-index: 1;
  width: 55px;
  bottom: 61%;
  display: flex;
  justify-content: space-between;
  .plan {
    margin-right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    padding: 0 5px;
    background: rgba(9, 32, 87, 0.7);
  }
}
.ql-info {
  color: #fff;
  margin-left: 24px;
}
.fpv-switch {
  position: absolute;
  cursor: pointer;
  color: #fff;
}
.ctrl-items {
  display: flex;
  font-size: 16px;
  align-items: center;
  color: #fff;

  > div {
    margin-right: 14px;
  }

  .ctrl-items-selects {
    display: flex;

    .video_type {
      width: 96px;
      height: 26px;
    }
    .size_type {
      width: 70px;
      height: 26px;
      margin-left: 14px;
    }
    ::v-deep .el-input--suffix {
      width: 100%;
      height: 100%;
      .el-input__inner {
        width: 100%;
        height: 100%;
      }
    }
    ::v-deep .el-input__suffix {
      display: flex;
      align-items: center;
    }
  }
}
.pointer {
  cursor: pointer;
}
</style>
