<template>
  <div>
    <!-- 标题 -->
    <div class="box-title">
      <div class="left-title">
        <span
          :style="{
            fontSize: props.dataStyle.videoTitleFontSize + 'px',
            color: props.dataStyle.videoTitleFontColor,
          }"
        >
          {{ props.title }}
        </span>
      </div>
      <div class="right-title">
        <n-button quaternary @click="closeVideo">
          <template #icon>
            <n-icon>
              <Close
                :style="{
                  width: props.dataStyle.closeVideoIconWidthAndHeight + 'px',
                  height: props.dataStyle.closeVideoIconWidthAndHeight + 'px',
                  fontSize: props.dataStyle.closeVideoIconWidthAndHeight + 'px',
                  color: props.dataStyle.closeVideoIconColor,
                }"
              />
            </n-icon>
          </template>
        </n-button>
      </div>
    </div>
    <!-- 视频 -->
    <video
      :id="'ZhiGan_SheXiangTouModal' + props.index + props.timestamp"
      class="TCPlayer-video-contaiiner"
      preload="auto"
      crossOrigin="anonymous"
      playsinline
      autoplay
      :loop="props.dataStyle.videoLoop"
      :muted="props.dataStyle.videoMuted"
      @click="clickThisVideo"
    />
    <!-- 控制栏 -->
    <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 { nextTick, onMounted, onUnmounted, watch, ref } from 'vue';
  import { ExpandOutlined } from '@ant-design/icons-vue';
  import { Close, Pause, CaretForward, VolumeHigh, VolumeMute } from '@vicons/ionicons5';

  const props = defineProps([
    'title',
    'videourl',
    'index',
    'width',
    'height',
    'timestamp',
    'dataStyle',
  ]);
  const emit = defineEmits(['changeThisVideo', 'closeThisVideo']);

  // 关闭此视频;
  function closeVideo() {
    closePlayerVideo();
    emit('closeThisVideo', props.index);
  }

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

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

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

  // 全屏
  function fullScreenClick() {
    txPlayer.requestFullscreen();
  }

  watch(
    () => props.videourl,
    () => {
      handlerPlayVideo();
    },
  );
  watch(
    () => props.width,
    () => {
      handlerPlayVideo();
    },
  );

  // 视频控件初始化
  let txPlayer: any = null;
  function handlerPlayVideo() {
    nextTick(function () {
      if (txPlayer) {
        txPlayer.src(props.videourl);
        txPlayer.width(props.width);
        txPlayer.height(props.height - 70);
      } else {
        txPlayer = TCPlayer('ZhiGan_SheXiangTouModal' + props.index + props.timestamp, {
          width: props.width,
          height: props.height - 70,
          controls: false,
        });
        txPlayer.src(props.videourl);
      }
    });
  }

  // 关闭此视频
  function closePlayerVideo() {
    if (txPlayer) {
      txPlayer.dispose();
      txPlayer = null;
    }
  }

  // 点击视频内容
  function clickThisVideo() {
    emit('changeThisVideo', props.index);
  }

  onMounted(() => {
    handlerPlayVideo();
    control_volume.value = props.videoMuted;
  });

  onUnmounted(() => {
    closePlayerVideo();
  });

  defineExpose({
    handlerPlayVideo,
    closePlayerVideo,
  });
</script>
<style lang="scss" scoped>
  .box-title {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    background: #000000;
    height: 35px;
    width: 100%;
    gap: 10px;
    position: relative;
  }

  .left-title {
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 100;
    width: 90%;
  }
  .right-title {
    position: absolute;
    top: -10%;
    right: 0%;
    z-index: 100;
  }
  video {
    display: block;
    object-fit: v-bind('props.dataStyle.videoFit');
  }

  ::v-deep .vjs-live-display {
    width: 40px !important;
  }

  ::v-deep .vjs-button {
    width: 20px !important;
  }

  .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>
