<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 } from 'vue';
  import { startLive, endLive } from '@/api/workmanagement/airportMaintenance';
  import TCPlayer from 'tcplayer.js';
  import 'tcplayer.js/dist/tcplayer.min.css'; //引入插件和样式文件

  let player;
  const startLiveFun = () => {
    const querys = {
      urlType: 1, // 0 = 自适应；如需 RTMP 改为 1；GB28181 为 3；WebRTC 为 4
      url: 'rtmp://221.2.83.254:1935/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://221.2.83.254:7005/live/2.m3u8', // 播放地址
          },
        ],
        licenseUrl: 'http://221.2.83.254:7005/live/2.m3u8', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
      });
    });
  };
  const closeLive = () => {
    endLive({
      videoId: '8UUXN5400A079H/165-0-7/normal-0',
    }).then((res) => {
      console.log(res);
      player.dispose();
    });
  };
  onMounted(() => {
    startLiveFun();
  });
  // 销毁视频控件
  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;
      }
    }
  }
</style>
