<template>
  <VueDragResize
    :w="width"
    :h="height"
    :x="left"
    :y="top"
    :z="zIndex"
    :isActive="true"
    :parentLimitation="true"
    @dragging="changeSize"
    @resizing="changeSize"
  >
    <div class="airport-live">
      <div class="airport-title">
        <div class="title">机场直播</div>
        <div class="title-icon">
          <PlayCircleOutlined title="开始直播" @click="startLiveFun" />
          <a-divider type="vertical" style="border-color: #4e5778" />
          <RedoOutlined title="刷新" @click="reloadLive" />
          <!-- <ExpandOutlined /> -->
          <a-divider type="vertical" style="border-color: #4e5778" />
          <PoweroffOutlined title="停止直播" @click="closeLive" />
        </div>
      </div>
      <div class="player" :style="{ height: height - 50 + 'px' }">
        <video
          id="player-container-id"
          :width="width"
          :height="height"
          preload="auto"
          playsinline
          webkit-playsinline
        >
        </video>
      </div>
    </div>
  </VueDragResize>
</template>
<script setup lang="ts">
  import { RedoOutlined, PlayCircleOutlined, PoweroffOutlined } from '@ant-design/icons-vue';
  import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
  import { startLive, endLive } from '@/api/workmanagement/airportMaintenance';
  import TCPlayer from 'tcplayer.js';
  import 'tcplayer.js/dist/tcplayer.min.css'; //引入插件和样式文件
  import {
    servicesTopic,
    services_replyTopic,
    errorName,
    setTopic,
  } from '@/utils/debugging/remote';
  import { useMessage } from '@/hooks/web/useMessage';
  import { buildGUID } from '@/utils/uuid';
  import { airPortStore } from '@/store/modules/airport';
  import { getClient } from '@/utils/mqtt';
  import VueDragResize from 'vue-drag-resize/src';

  const props = defineProps({
    msgData: Object,
    zIndex: Number,
  });
  const pageHeight = document.documentElement.clientHeight;
  const pageWidth = document.documentElement.clientWidth;
  const width = ref(500);
  const height = ref(348);
  const left = ref(pageWidth - 800);
  const top = ref(pageHeight - 460);
  const zIndex = ref(props.zIndex);
  const axisVal = ref('none');
  const airPortStoreVal = airPortStore();
  const live_info = airPortStoreVal.getLiveInfo;
  const airPort = airPortStoreVal.getAirport;
  const { createMessage } = useMessage();
  const emits = defineEmits(['changeAirportLive']);

  let player;
  const liveCode = ref('5');
  console.log(liveCode);
  watch(
    () => props.msgData,
    (val) => {
      // console.log(val);
    },
  );
  const startTid = buildGUID();
  const startLiveFun = () => {
    const querys = {
      bid: buildGUID(),
      method: 'live_start_push',
      tid: startTid,
      timestamp: new Date().getTime(),
      data: {
        url_type: 1, // 0 = 自适应；如需 RTMP 改为 1；GB28181 为 3；WebRTC 为 4
        url: live_info.rtmp + liveCode.value,
        //video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
        video_id: airPort.video_id,
        video_quality: 3, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
      },
    };
    console.log(querys);
    servicesTopic(querys);
    services_replyTopic();
  };
  const stopTid = buildGUID();
  const closeLive = () => {
    emits('changeAirportLive');
    const querys = {
      bid: buildGUID(),
      method: 'live_stop_push',
      tid: stopTid,
      timestamp: new Date().getTime(),
      data: {
        video_id: airPort.video_id,
      },
    };
    servicesTopic(querys);
  };
  const reloadLive = () => {
    player.src(live_info.url + liveCode.value + '.flv');
    player.play();
  };
  onMounted(() => {
    // const querys = {
    //   bid: buildGUID(),
    //   tid: buildGUID(),
    //   timestamp: new Date().getTime(),
    //   data: {
    //     air_transfer_enable: true,
    //   },
    // };
    // console.log(querys);
    // setTopic(querys);
    setTimeout(() => {
      startLiveFun();
      player = TCPlayer('player-container-id', {
        sources: [
          {
            src: live_info.url + liveCode.value + '.flv', // 播放地址
          },
        ],
        licenseUrl: live_info.url + liveCode.value + '.flv', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
        autoplay: true, // 是否自动播放
      });
      getClient().on('message', (topic, message) => {
        const rs = JSON.parse(message);
        if (rs.method == 'live_start_push' && rs.tid == startTid) {
          if (rs.data.result == 0) {
            createMessage.success('开始直播成功');
            player.src(live_info.url + liveCode.value + '.flv');
            player.play();
          } else if (rs.data.result == 513003) {
            createMessage.success('直播已开启');
            player.src(live_info.url + liveCode.value + '.flv');
            player.play();
          } else {
            createMessage.error('开始直播失败,' + errorName(rs.data.result));
          }
        } else if (rs.method == 'live_stop_push' && rs.tid == stopTid) {
          if (rs.data.result == 0) {
            createMessage.success('停止直播成功');
            if (player) {
              player.dispose();
            }
          } else {
            createMessage.error('停止直播失败,' + errorName(rs.data.result));
          }
        }
      });
    }, 1000);
  });
  const changeSize = (newRect) => {
    width.value = newRect.width;
    height.value = newRect.height;
  };
  // 销毁视频控件
  onBeforeUnmount(() => {
    if (player) {
      player.dispose();
      player = null;
    }
  });
</script>
<style lang="less" scoped>
  .video-js {
    width: 100%;
    height: 100%;
  }
  .airport-live {
    width: 100%;
    height: 100%;
    padding: 10px 20px;
    background: #0d0e15;
    box-shadow:
      0px 10px 30px 0px rgba(0, 0, 6, 0.15),
      inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
    border-radius: 6px;
    backdrop-filter: blur(3px);
    color: #fff;
    margin-top: 10px;
    .airport-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        border: 1px solid #3a57e8;
        background: #0d0e15;
        box-shadow:
          0px 10px 30px 0px rgba(0, 0, 6, 0.15),
          inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
        border-radius: 2px;
        padding: 4px 6px;
        font-size: 12px;
      }
      .title-icon {
        padding: 4px 6px;
        background: #0d0e15;
        box-shadow:
          0px 10px 30px 0px rgba(0, 0, 6, 0.15),
          inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
        border-radius: 2px;
        border: 1px solid #3a57e8;
      }
    }
    .player {
      #player-container-id-live {
        height: 100%;
      }
    }
  }
</style>
