<template>
  <div class="hello-ezuikit-js">
    <div id="video-container" style="width: 600px; height: 400px"></div>
    <div style="width: 100%; text-align: center">
      <el-button size="mini" type="primary" @click="stop">停止</el-button>
      <el-button size="mini" type="primary" @click="play">播放</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">
        捕获图片
      </el-button>
      <el-button size="mini" type="primary" @click="fullScreen">
        全屏显示
      </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>
</template>
<script>
import { getLiveAddr } from '@/api/fluorite';
import EZUIKit from 'ezuikit-js';
let player = null;
export default {
  name: 'FluoriteSensorData',
  components: {},
  data() {
    return {
      src: '',
      data: [],
      account: '',
      accessToken: '',
      deviceSerial: '',
      queryForm: {
        page: 1,
        size: 20,
        account: '',
        deviceSerial: '',
      },
    };
  },
  created() {
    this.queryForm.account = this.$route.query.account;
    this.queryForm.deviceSerial = this.$route.query.deviceSerial;
    this.fetchData();
  },
  methods: {
    async fetchData() {
      this.listLoading = true;
      const { data } = await getLiveAddr(this.queryForm);
      this.data = data;
      this.getVideo();
      setTimeout(() => {
        this.listLoading = false;
      }, 500);
    },
    getVideo() {
      const that = this;
      player = new EZUIKit.EZUIKitPlayer({
        id: 'video-container', // 视频容器ID
        accessToken: that.data.accessToken,
        url: that.data.url,
        // simple - 极简版 pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放security - 安防版voice-语音版
        template: 'simple',
        plugin: ['talk'], // 加载插件，talk-对讲
        width: 600,
        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 lang="scss" scoped>
.manage-container {
  width: 100%;
  .vab-query-form {
    margin-bottom: 30px;
    .el-input {
      width: 180px;
      margin-right: 20px;
    }
  }
}
</style>
