<template>
  <div :class="isChoice ? 'showVideo' : 'closeVideo'">
    <div class="videoTitle">
      <span style="margin-left: 15px; color: #334d6e">
        <img
          src="@/assets/images/camera.png"
          alt="fold"
          style="width: 18px; height: 18px"
        />
        {{ videoName }}
      </span>
      <el-button
        v-if="videoName != ''"
        type="text"
        size="medium"
        style="margin-left: 8px"
        @click="closeVideo"
        >关闭</el-button
      >
      <el-dropdown
        @command="videoSetting"
        trigger="click"
        style="float: right; margin-right: 15px"
      >
        <span class="el-dropdown-link">
          <img
            src="@/assets/images/setting.png"
            alt="fold"
            style="width: 18px; height: 18px"
          />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">全屏 </el-dropdown-item>
          <el-dropdown-item command="2">抓图(.JPEG) </el-dropdown-item>
          <el-dropdown-item command="3">抓图(.BMP) </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div :id="playId" class="videoContent"></div>
    <div class="mask" @dblclick="fullScreen"></div>
    <div v-if="ytAt" class="yuntai" @click="ytShowClick">
      <img :src="yt" alt="" />
    </div>
    <Direction :code="cameraIndexCode" :visible.sync="ytShow" />
  </div>
</template>

<script>
import { getPreviewURLs } from "@/api/video/artemis";
import Direction from "./Direction";
import yt from "@/assets/images/Video/yt.png";

const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设备
export default {
  name: "play-video",
  components: {
    Direction,
  },
  props: {
    playId: {
      type: String,
    },
    isChoice: {
      type: Boolean,
      default: false,
    },
    ytAt:{
      type:Boolean,
      default:false,
    }
  },
  data() {
    return {
      showVideoNum: 1,
      player: null,
      cameraIndexCode: "",
      videoName: "",
      ytShow: false,
      yt,
    };
  },
  created() {
    // console.log(this.playId,"gagaga")
  },
  mounted() {
    if (!window.JSPlugin) {
      this.loadScript("/h5player/h5player.min.js").then(() => {
        this.createPlayer();
        this.init();
      });
    } else {
      this.createPlayer();
      this.init();
    }
  },
  methods: {
    init() {
      // 设置播放容器的宽高并监听窗口大小变化
      window.addEventListener("resize", () => {
        this.player.JS_Resize();
      });
    },
    createPlayer() {
      this.player = new window.JSPlugin({
        szId: this.playId,
        szBasePath: "/h5player",
        iMaxSplit: 1,
        iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
        openDebug: true,
        oStyle: {
          borderSelect: IS_MOVE_DEVICE ? "#000" : "#FFCC00",
        },
      });
    },
    loadScript(src) {
      return new Promise((reslove) => {
        let scpritE1 = document.createElement("script");
        scpritE1.type = "text/javascript";
        scpritE1.src = src;
        scpritE1.onload = () => {
          reslove();
        };
        document.body.appendChild(scpritE1);
      });
    },
    playVideo(data) {
      this.videoName = data.videoName;
      this.cameraIndexCode = data.videoResource;
      getPreviewURLs({ cameraIndexCode: data.videoResource }).then((response) => {
        if (response.data.code == "0") {
          this.videoOpenNum++;
          let url = response.data.data.url;
          this.player.JS_Play(url, { playURL: url, mode: 0 }, 0).then(
              () => {
                console.log("realplay success");
            },
            (e) => {
              console.error(e);
            }
          );
        }
      });
    },
    videoSetting(val) {
      if (val == "1") {
        this.fullScreen();
      }
      if (val == "2") {
        this.capture("'JPEG'");
      }
      if (val == "3") {
        this.capture("'BMP'");
      }
    },
    //分屏设置自适应
    fit() {
      this.player.JS_Resize();
    },
    //全屏
    fullScreen() {
      this.player.JS_FullScreenDisplay(true).then(
        () => {
          console.log(`wholeFullScreen success`);
        },
        (e) => {
          console.error(e);
        }
      );
    },
    //抓图
    capture(imageType) {
      this.player.JS_CapturePicture(0, "img", imageType).then(
        () => {
          console.log("capture success", imageType);
        },
        (e) => {
          console.error(e);
        }
      );
    },
    //关闭视频
    closeVideo() {
      this.player.JS_Stop().then(
        () => {
          this.videoName = "";
          console.log("stop realplay success");
        },
        (e) => {
          console.error(e);
        }
      );
    },
    ytShowClick() {
      console.log(this.cameraIndexCode)
      if (this.cameraIndexCode) {
        this.ytShow = true;
      } else {
        this.msgError("请打开摄像头后再继续操作");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.showVideo {
  border: 2px solid #334d6e;
  height: 100%;
  position: relative;
  border-radius: 5px;
  box-shadow: 6px 0px 18px 1px rgba(0, 0, 0, 0.06);
}

.closeVideo {
  //border: 1px solid blue;
  height: 100%;
  position: relative;
  border-radius: 5px;
  box-shadow: 6px 0px 6px 6px rgba(0, 0, 0, 0.06);
}

.videoTitle {
  //border: 1px solid darkgreen;
  height: 40px;
  line-height: 36px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #f5f7fa;
}

.el-dropdown-link {
  cursor: pointer;
  font-size: 20px;
  color: blue;
}

.videoContent {
  height: 100%;
  padding: 40px 0px 0px 0px;
}

.mask {
  position: absolute;
  top: 40px;
  bottom: 0;
  width: 100%;
}

.el-button--text {
  color: #334d6e;
}
.yuntai {
  position: absolute;
  right: 40px;
  top: 7px;
  height: 20px;
  width: 20px;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
