<template>
  <div v-if="isplay" class="play">
    <el-button size="mini" type="primary" @click="start">
      {{ $t('defalult.bf') }}
    </el-button>
  </div>
  <div v-if="showVideo" class="hello-ezuikit-js">
    <div id="video-container" style="width: 600px; height: 400px"></div>
    <div>
      <el-button size="mini" type="primary" @click="stop">
        {{ $t('defalult.tz') }}
      </el-button>
      <el-button size="mini" type="primary" @click="play">
        {{ $t('defalult.bf') }}
      </el-button>
      <!--      <el-button size="mini" type="primary" @click="openSound">-->
      <!--        打开声音-->
      <!--      </el-button>-->
      <!--      <el-button size="mini" type="primary" @click="closeSound">-->
      <!--        关闭声音-->
      <!--      </el-button>-->
      <!--      <el-button size="mini" type="primary" @click="startSave">-->
      <!--        启动保存-->
      <!--      </el-button>-->
      <!--      <el-button size="mini" type="primary" @click="stopSave">-->
      <!--        停止保存-->
      <!--      </el-button>-->
      <el-button size="mini" type="primary" @click="capturePicture">
        {{ $t('defalult.bhtp') }}
      </el-button>
      <el-button size="mini" type="primary" @click="fullScreen">
        {{ $t('defalult.qpxs') }}
      </el-button>
      <!--      <el-button size="mini" type="primary" @click="getOSDTime">-->
      <!--        获取OSD时间-->
      <!--      </el-button>-->
      <!--      <el-button size="mini" type="primary" @click="ezopenStartTalk">-->
      <!--        开始对讲-->
      <!--      </el-button>-->
      <!--      <el-button size="mini" type="primary" @click="ezopenStopTalk">-->
      <!--        结束对讲-->
      <!--      </el-button>-->
      <!--      <el-button size="mini" type="primary" @click="destroy">销毁</el-button>-->
    </div>
  </div>
  <div v-if="!isplay && !showVideo" class="hello-ezuikit-js">
    <p style="text-align: center">{{ msg }}</p>
  </div>
</template>

<script>
import { getLiveAddr } from '@/api/monitor';
import EZUIKit from 'ezuikit-js';
let player = null;
export default {
  props: {
    deviceCode: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      videoData: [],
      queryForm: {
        deviceCode: '',
      },
      showVideo: true,
      isplay: true,
      msg: '',
    };
  },
  watch: {
    deviceCode: function (newVal, oldVal) {
      this.queryForm.deviceCode = newVal;
      this.isplay = true;
      this.showVideo = true;
      this.getVideoPath();
    },
  },
  created() {},
  methods: {
    showData(row) {
      this.queryForm.deviceCode = row.deviceCode;
      this.isplay = true;
      this.showVideo = true;
      this.getVideoPath();
    },
    start() {
      this.isplay = false;
      this.showVideo = true;
      this.getVideo();
    },
    async getVideoPath() {
      const { data, code, msg } = await getLiveAddr(this.queryForm);
      if (code == -1) {
        this.showVideo = false;
        this.isplay = false;
        this.msg = msg;
      } else {
        this.videoData = data;
        this.showVideo = false;
        this.isplay = true;
      }
    },
    getVideo() {
      const that = this;
      player = new EZUIKit.EZUIKitPlayer({
        id: 'video-container', // 视频容器ID
        autoplay: false,
        accessToken: that.videoData.accessToken,
        url: that.videoData.url,
        // simple - 极简版 pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放security - 安防版voice-语音版
        template: 'simple',
        plugin: ['talk'], // 加载插件，talk-对讲
        width: 700,
        height: 400,
      });
      window.player = player;
    },
    play() {
      const playPromise = player.play();
      playPromise.then(data => {
        console.log('promise 获取 数据', data);
      });
    },
    stop() {
      const stopPromise = player.stop();
      stopPromise.then(data => {
        console.log('promise 获取 数据', data);
      });
    },
    getOSDTime() {
      const getOSDTimePromise = player.getOSDTime();
      getOSDTimePromise.then(data => {
        console.log('promise 获取 数据', data);
      });
    },
    capturePicture() {
      const capturePicturePromise = player.capturePicture(
        `${new Date().getTime()}`
      );
      capturePicturePromise.then(data => {
        console.log('promise 获取 数据', data);
      });
    },
    openSound() {
      const openSoundPromise = player.openSound();
      openSoundPromise.then(data => {
        console.log('promise 获取 数据', data);
      });
    },
    closeSound() {
      const openSoundPromise = player.closeSound();
      openSoundPromise.then(data => {
        console.log('promise 获取 数据', data);
      });
    },
    startSave() {
      const startSavePromise = player.startSave(`${new Date().getTime()}`);
      startSavePromise.then(data => {
        console.log('promise 获取 数据', data);
      });
    },
    stopSave() {
      const stopSavePromise = player.stopSave();
      stopSavePromise.then(data => {
        console.log('promise 获取 数据', data);
      });
    },
    ezopenStartTalk() {
      player.startTalk();
    },
    ezopenStopTalk() {
      player.stopTalk();
    },
    fullScreen() {
      player.fullScreen();
    },
    destroy() {
      const destroyPromise = player.destroy();
      destroyPromise.then(data => {
        console.log('promise 获取 数据', data);
      });
    },
  },
};
</script>
<style>
.play {
  width: 100%;
  text-align: center;
  height: 200px;
  line-height: 200px;
}
</style>
