<template>
  <div class="box">
    <div class="box-container">
      <div :id="'root' + props.timestamp"></div>
    </div>
    <div class="box-controls">
      <div class="left-controls">
        <div>
          <n-button quaternary @click="playOrPauseClick">
            <template #icon>
              <n-icon>
                <Pause
                  v-if="control_playOrPause"
                  :style="{
                    fontSize: '20px',
                    color: '#ffffff',
                  }"
                />
                <CaretForward
                  v-if="!control_playOrPause"
                  :style="{
                    fontSize: '20px',
                    color: '#ffffff',
                  }"
                />
              </n-icon>
            </template>
          </n-button>
        </div>
        <div>
          <n-button quaternary @click="volumeClick">
            <template #icon>
              <n-icon>
                <VolumeHigh
                  v-if="!control_volume"
                  :style="{
                    fontSize: '20px',
                    color: '#ffffff',
                  }"
                />
                <VolumeMute
                  v-if="control_volume"
                  :style="{
                    fontSize: '20px',
                    color: '#ffffff',
                  }"
                />
              </n-icon>
            </template>
          </n-button>
        </div>
      </div>

      <div class="right-controls">
        <n-button quaternary @click="fullScreenClick">
          <template #icon>
            <n-icon>
              <ExpandOutlined
                :style="{
                  fontSize: '20px',
                  color: '#ffffff',
                }"
              />
            </n-icon>
          </template>
        </n-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, onUnmounted, watch, ref } from 'vue';
  import axios from 'axios';
  import { ExpandOutlined } from '@ant-design/icons-vue';
  import { Pause, CaretForward, VolumeHigh, VolumeMute } from '@vicons/ionicons5';

  let BASE_URL = 'http://111.17.207.220:9001/api';

  const props = defineProps([
    'deviceId',
    'channelId',
    'width',
    'height',
    'timestamp',
    'videoMuted',
  ]);
  let clPlayer: any = null;

  // 开始播放/暂停播放
  const control_playOrPause = ref(true);
  // 音量:true为静音
  const control_volume = ref(true);
  // 全屏
  const control_fullScreen = ref(false);

  // 开始播放/暂停播放方法
  function playOrPauseClick() {
    control_playOrPause.value = !control_playOrPause.value;
    if (control_playOrPause.value) {
      clPlayer.play();
    } else {
      clPlayer.pause();
    }
  }

  // 音量
  function volumeClick() {
    control_volume.value = !control_volume.value;
    if (control_volume.value) {
      clPlayer.volume(0);
    } else {
      clPlayer.volume(1);
    }
  }

  // 全屏
  function fullScreenClick() {
    clPlayer.fullScreen();
  }

  // 获取kitToken
  function getKitToken(deviceId, channelId) {
    axios({
      method: 'post',
      url: BASE_URL + '/Camera/getKitToken?deviceId=' + deviceId + '&channelId=0' + '&type=0',
    }).then((res) => {
      let kitToken = res.data.result.data.kitToken;
      loadMonitorVideo(deviceId, kitToken, channelId);
    });
  }

  // 开始
  function loadMonitorVideo(deviceId, kitToken, channelId) {
    // 结束上一个
    closeMonitorVideo();

    clPlayer = new imouPlayer({
      id: 'root' + props.timestamp,
      width: props.width,
      height: props.height - 35,
      deviceId: deviceId,
      token: kitToken,
      channelId: channelId,
      type: 1,
      streamId: 0,
      recordType: 'cloud',
      code: '',
      controls: true,
    });
    clPlayer.volume(0);
  }

  // 结束
  function closeMonitorVideo() {
    if (clPlayer != null) {
      clPlayer.destroy();
      clPlayer = null;
    }
  }

  watch(
    () => props.deviceId,
    () => {
      getKitToken(props.deviceId, props.channelId);
    },
  );

  onMounted(() => {
    getKitToken(props.deviceId, props.channelId);
    control_volume.value = props.videoMuted;
  });

  onUnmounted(() => {
    closeMonitorVideo();
  });
</script>

<style lang="less" scoped>
  .box {
    width: v-bind('`${props.width}px`');
    height: v-bind('`${props.height}px`');
    z-index: 99;
  }
  .box-container {
    width: v-bind('`${props.width}px`');
    height: v-bind('`${props.height-35}px`');
  }

  .box-controls {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    background: #000000;
    height: 35px;
    width: 100%;
    gap: 10px;
  }

  .left-controls {
    display: flex;
    justify-self: start;
  }

  .right-controls {
    justify-self: end;
  }
</style>
