<template>
  <div class="live-preview">
    <div class="preview-title">
      <div class="title-select">
        <div class="title-select-item">
          <span>镜头:</span>
          <a-select
            ref="select"
            v-model:value="selectVal.camera"
            style="width: 60px"
            :options="optionsArr.cameraOptions"
            @change="cameraChange"
          />
        </div>
        <div class="title-select-item">
          <span>分辨率:</span>
          <a-select
            ref="select"
            v-model:value="selectVal.resolution"
            style="width: 80px"
            :options="optionsArr.resolutionOptions"
            @change="resolutionChange"
          />
        </div>
      </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="live-type">广角</div>
    <div class="player">
      <video
        id="player-container-id-live"
        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 { reactive, onMounted, ref, watch } from 'vue';
  import { buildGUID } from '@/utils/uuid';
  import { getClient, createConnection } from '@/utils/mqtt';
  import {
    startLive,
    endLive,
    setCameraVideo,
    exchangeCamera,
  } 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';

  const { createMessage } = useMessage();
  const props = defineProps({
    msgData: Object,
    uavLive: Boolean,
  });
  let player;
  watch(
    () => props.msgData,
    (val) => {
      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/4.flv');
          player.play();
        } else if (val.message.data.result == 513003) {
          createMessage.success('无人机直播已开启');
          player.src('http://175.27.168.120:6012/live/4.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('无人机停止直播失败');
        }
      } else if (val.message.method == 'live_set_quality') {
        if (val.message.data.result == 0) {
          createMessage.success('无人机设置清晰度成功');
          player.src('http://175.27.168.120:6012/live/4.flv');
          player.play();
        } else {
          createMessage.error('无人机设置清晰度失败');
        }
      } else if (val.message.method == 'live_lens_change') {
        if (val.message.data.result == 0) {
          createMessage.success('无人机设置直播镜头成功');
          player.src('http://175.27.168.120:6012/live/4.flv');
          player.play();
        } else {
          createMessage.error('无人机设置直播镜头失败');
        }
      }
    },
  );

  // watch(
  //   () => props.uavLive,
  //   (val) => {
  //     if (val) {
  //       console.log('开始无人机直播');
  //       startLiveFun();
  //     }
  //   },
  // );
  const selectVal = reactive({
    camera: 'normal',
    resolution: 1,
  });
  const optionsArr = reactive({
    cameraOptions: [
      {
        label: '红外',
        value: 'ir',
      },
      {
        label: '默认',
        value: 'normal',
      },
      {
        label: '广角',
        value: 'wide',
      },
      {
        label: '变焦',
        value: 'zoom',
      },
    ],
    resolutionOptions: [
      {
        label: '自适应',
        value: 0,
      },
      {
        label: '流畅',
        value: 1,
      },
      {
        label: '标清',
        value: 2,
      },
      {
        label: '高清',
        value: 3,
      },
      {
        label: '超清',
        value: 4,
      },
    ],
  });
  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/4',
        //video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
        video_id: '1581F8HGX254V00A0BUY/99-0-0/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://221.2.83.254:1935/live/3',
    //   url: 'rtmp://175.27.168.120:6019/live/3',
    //   //video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
    //   videoId: '1581F8HGX254V00A0BUY/99-0-0/normal-0',
    //   quality: 1, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
    // };
    // startLive(querys).then((res) => {
    //   console.log(res);
    //   playVideo();
    // });
  };
  const resolutionChange = (val: any) => {
    const querys = {
      bid: buildGUID(),
      method: 'live_set_quality',
      tid: buildGUID(),
      timestamp: new Date().getTime(),
      data: {
        video_id: '1581F8HGX254V00A0BUY/99-0-0/normal-0',
        video_quality: val, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
      },
    };
    servicesTopic(querys);
    // const querys = {
    //   videoId: '1581F8HGX254V00A0BUY/99-0-0/normal-0',
    //   videoQuality: val, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
    // };
    // setCameraVideo(querys).then((res) => {
    //   console.log(res);
    //   playVideo();
    // });
  };
  const cameraChange = (val: any) => {
    const querys = {
      bid: buildGUID(),
      method: 'live_lens_change',
      tid: buildGUID(),
      timestamp: new Date().getTime(),
      data: {
        video_id: '1581F8HGX254V00A0BUY/99-0-0/normal-0',
        video_type: val, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
      },
    };
    console.log(querys);
    servicesTopic(querys);
    // const requestData = {
    //   videoId: '1581F8HGX254V00A0BUY/99-0-0/normal-0',
    //   position: val, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
    //   camera: '99-0-0',
    // };
    // exchangeCamera(requestData).then((res) => {
    //   console.log(res);
    //   playVideo();
    // });
  };
  const data = reactive({
    playedTime: 0,
    currentTime: 0,
    maxTime: 0,
  });
  const playVideo = () => {
    player = TCPlayer('player-container-id-live', {
      width: 380,
      height: 180,
      sources: [
        {
          src: 'http://175.27.168.120:6012/live/4.flv', // 播放地址
        },
      ],
      licenseUrl: 'http://175.27.168.120:6012/live/4.flv', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
    });
  };
  const closeLive = () => {
    const querys = {
      bid: buildGUID(),
      method: 'live_stop_push',
      tid: buildGUID(),
      timestamp: new Date().getTime(),
      data: {
        video_id: '1581F8HGX254V00A0BUY/99-0-0/normal-0',
      },
    };
    servicesTopic(querys);
    // endLive({
    //   videoId: '1581F8HGX254V00A0BUY/99-0-0/normal-0',
    // }).then((res) => {
    //   console.log(res);
    // });
  };
  onMounted(() => {
    setTimeout(() => {
      startLiveFun();
      playVideo();
    }, 1000);
    // resolutionChange(1);
  });
</script>
<style lang="less" scoped>
  .live-preview {
    width: 400px;
    height: 248px;
    padding: 10px;
    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;
    .preview-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title-select {
        font-size: 12px;
        display: flex;
        align-items: center;
        .title-select-item {
          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-left: 4px;
          height: 38px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          cursor: pointer;
          font-size: 12px;
          ::v-deep .ant-select-selector {
            background: none;
            border: none;
            color: #f4ba19;
            font-size: 12px;
            padding: 0 0 0 2px;
            .ant-select-selection-placeholder {
              color: #fff;
            }
          }
          ::v-deep .ant-select-selection-item {
            padding: 0;
          }
          ::v-deep .ant-select-arrow {
            color: #fff;
          }
          &:last-child {
            margin-left: 4px;
          }
        }
      }
      .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;
      }
    }
    .live-type {
      width: 40px;
      height: 40px;
      background: #0a99eb;
      box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 0;
      top: 100px;
      z-index: 3;
    }
    .player {
      height: 180px;
      #player-container-id-live {
        height: 100%;
      }
    }
  }
</style>
