<template>
  <div class="airport-live">
    <div class="airport-title">
      <div class="title">机场直播</div>
      <div class="title-icon">
        <RedoOutlined @click="startLiveFun" />
        <!-- <a-divider type="vertical" style="border-color: #4e5778" /> -->
        <!-- <ExpandOutlined /> -->
        <a-divider type="vertical" style="border-color: #4e5778" />
        <PoweroffOutlined @click="closeLive" />
      </div>
    </div>
    <div class="player">
      <video
        id="player-container-id"
        width="414"
        height="270"
        preload="auto"
        playsinline
        webkit-playsinline
      >
      </video>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { RedoOutlined, ExpandOutlined, PoweroffOutlined } from '@ant-design/icons-vue';
  import { onMounted, onBeforeUnmount, watch } 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 } from '@/utils/debugging/remote';
  import { useMessage } from '@/hooks/web/useMessage';
  import { buildGUID } from '@/utils/uuid';

  const { createMessage } = useMessage();
  const props = defineProps({
    msgData: Object,
  });
  let player;
  watch(
    () => props.msgData,
    (val) => {
      if (val.topic == 'thing/product/8UUXN5400A079H/services_reply') {
        if (val.message.method == 'live_start_push') {
          console.log(val);
          if (val.message.data.result == 0) {
            createMessage.success('开始直播成功');
            player.src('http://175.27.168.120:6012/live/2.flv');
            player.play();
          } else if (val.message.data.result == 513003) {
            createMessage.success('直播已开启');
            player.src('http://175.27.168.120:6012/live/2.flv');
            player.play();
          } else {
            createMessage.error('开始直播失败');
          }
        } else if (val.message.method == 'live_stop_push') {
          if (val.message.data.result == 0) {
            createMessage.success('停止直播成功');
            if (player) {
              // player.dispose();
            }
          } else {
            createMessage.error('停止直播失败');
          }
        }
      }
    },
  );
  const startLiveFun = () => {
    const querys = {
      bid: buildGUID(),
      method: 'live_start_push',
      tid: buildGUID(),
      timestamp: new Date().getTime(),
      data: {
        url_type: 1, // 0 = 自适应；如需 RTMP 改为 1；GB28181 为 3；WebRTC 为 4
        url: 'rtmp://175.27.168.120:6019/live/2',
        //video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
        video_id: '8UUXN5400A079H/165-0-7/normal-0',
        video_quality: 1, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
      },
    };
    servicesTopic(querys);
    services_replyTopic();
    // const querys = {
    //   urlType: 1, // 0 = 自适应；如需 RTMP 改为 1；GB28181 为 3；WebRTC 为 4
    //   url: 'rtmp://175.27.168.120:6019/live/2',
    //   //video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
    //   videoId: '8UUXN5400A079H/165-0-7/normal-0',
    //   quality: 1, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
    // };
    // startLive(querys).then((res) => {
    //   console.log(res);
    //   player = TCPlayer('player-container-id', {
    //     width: 360,
    //     height: 200,
    //     sources: [
    //       {
    //         src: 'http://175.27.168.120:6012/live/2.flv', // 播放地址
    //       },
    //     ],
    //     licenseUrl: 'http://175.27.168.120:6012/live/2.flv', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
    //   });
    // });
  };
  const closeLive = () => {
    const querys = {
      bid: buildGUID(),
      method: 'live_stop_push',
      tid: buildGUID(),
      timestamp: new Date().getTime(),
      data: {
        video_id: '8UUXN5400A079H/165-0-7/normal-0',
      },
    };
    servicesTopic(querys);
    // endLive({
    //   videoId: '8UUXN5400A079H/165-0-7/normal-0',
    // }).then((res) => {
    //   console.log(res);
    //   player.dispose();
    // });
  };
  onMounted(() => {
    setTimeout(() => {
      startLiveFun();
      player = TCPlayer('player-container-id', {
        width: 360,
        height: 200,
        sources: [
          {
            src: 'http://175.27.168.120:6012/live/2.flv', // 播放地址
          },
        ],
        licenseUrl: 'http://175.27.168.120:6012/live/2.flv', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
        autoplay: true, // 是否自动播放
      });
    }, 1000);
  });
  // 销毁视频控件
  onBeforeUnmount(() => {
    player.dispose();
    player = null;
  });
</script>
<style lang="less" scoped>
  .airport-live {
    width: 400px;
    height: 248px;
    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 {
      height: 200px;
      #player-container-id-live {
        height: 100%;
      }
    }
  }
</style>
