<template>
  <div v-drag-window class="content infoModal-content">
    <div class="content-title">
      <div class="drag-title">
        <div class="content-title-left">
          <img class="content-title-left-icon" :src="taskSrc">
          <div>
            无任务
          </div>
        </div>
      </div>
      <div>
        <span>{{ osdInfo.gateway_callsign }}</span>
      </div>
      <a class="fz16" style="color: white;" @click="() => osdInfo.visible = false">
        <CloseOutlined />
      </a>
    </div>
    <!-- 机场 -->
    <div class="content-dock">
      <div class="content-dock-left">
        <div class="content-dock-left-image">
          <a-image :src="dock2Src" :preview="false" />
        </div>
        <a-tooltip title="Dock 2">
          <div class="content-dock-left-image-text">
            Dock 2
          </div>
        </a-tooltip>
      </div>
      <div class="content-dock-info">
        <div class="content-dock-info-cell">
          <div class="content-dock-info-cell-style"
            :style="deviceInfo.dock && deviceInfo.dock.basic_osd?.mode_code !== EDockModeCode.Disconnected ? 'color:#00EE8B' : 'color:red'">
            {{ getTextByDockModeCode(deviceInfo.dock ? deviceInfo.dock.basic_osd?.mode_code
              : EDockModeCode.Disconnected) }}
          </div>
          <div class="content-dock-info-cell-status">
            <div v-if="hangarLogInfo">
              <span class="word-loop">
                {{ hangarLogInfo }}
              </span>
            </div>
            <div v-else>
              N/A
            </div>
          </div>
        </div>
        <div class="content-dock-info-cell">
          <div class="content-dock-info-cell-style">
            <div v-if="airworthiness">
              <img :src="weatherSrc">
              适合飞行
            </div>
            <div v-else>
              <img :src="weatherErrorSrc">
              <span style="color: #FF0000;">
                不适合飞行
              </span>
            </div>
          </div>
          <div class="content-dock-info-cell-row">
            <a-row>
              <a-col span="8">
                <a-tooltip title="温度">
                  <div style="display: flex;align-items: center;">
                    <img :src="temperatureSrc">
                    <span>
                      {{ deviceInfo.dock.basic_osd?.temperature }}
                    </span>
                    <span>
                      °C
                    </span>
                  </div>
                </a-tooltip>
              </a-col>
              <a-col span="8">
                <a-tooltip title="网速">
                  <div style="display: flex;align-items: center;">
                    <img :src="networkSrc">
                    <span>
                      {{ deviceInfo.dock.basic_osd?.network_state?.rate }}
                    </span>
                    <span>
                      kb/s
                    </span>
                  </div>
                </a-tooltip>
              </a-col>
              <a-col span="8">
                <a-tooltip title="文件上传">
                  <div style="display: flex;align-items: center;">
                    <img :src="uploadSrc">
                    <div>
                      {{ state.uploadQuantity }}/{{ state.uploadTotal }}
                    </div>
                  </div>
                </a-tooltip>
              </a-col>
            </a-row>
          </div>
        </div>
        <div class="content-dock-info-cell">
          <div class="content-dock-info-cell-button" @click="state.airportLiveVisible = !state.airportLiveVisible">
            <span class="openLiveButton" v-if="!state.airportLiveVisible">
              监控直播
            </span>
            <span class="openLiveButton" v-else>
              关闭直播
            </span>
          </div>
          <div class="content-dock-info-cell-icon">
            <a-tooltip title="操作">
              <img :src="actionSelectedSrc" @click="setDockControlPanelVisible(false)" v-if="dockControlPanelVisible">
              <img :src="actionSrc" @click="setDockControlPanelVisible(true)" v-else>
            </a-tooltip>
          </div>
        </div>
        <div class="content-aircraft-head-right-select">
          <div v-if="state.airportLiveVisible">
            <a-select style="width: 125px;margin-right: 5px;" placeholder="摄像头" v-model:value="airportLive.cameraValue">
              <a-select-option v-for="item in airportLive.cameraList" :key="item.value" :value="item.value"
                @click="onDockCameraSelect(item)">
                {{ item.label }}
              </a-select-option>
            </a-select>
            <a-select style="width: 125px;margin-right: 5px;" placeholder="清晰度"
              v-model:value="airportLive.clarityValue">
              <a-select-option v-for="item in clarityList" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            <a-tooltip title="播放">
              <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onDockStartLive" />
            </a-tooltip>
            <a-tooltip title="停止">
              <a-button :icon="h(PoweroffOutlined)" @click="onDockStopLive" />
            </a-tooltip>
          </div>
        </div>
        <LivePlayer :text="airportLive.playerText" :url="airportLive.playerUrl" v-if="state.airportLiveVisible" />
      </div>
    </div>
    <!--  飞机-->
    <div class="content-aircraft">
      <div class="content-aircraft-head">
        <div class="content-aircraft-head-icon">
          <div class="content-aircraft-head-icon-image">
            <a-image :src="M3tdSrc" :preview="false" v-if="osdInfo.model === 'M3TD'" />
            <a-image :src="M30Src" :preview="false" v-else />
          </div>
          <a-tooltip :title="osdInfo.model">
            <div class="content-aircraft-head-icon-text">
              {{ osdInfo.model }}
            </div>
          </a-tooltip>
        </div>
        <div class="content-aircraft-head-right">
          <div class="content-aircraft-head-right-top">
            <div class="content-aircraft-head-right-top-style"
              :style="deviceInfo.device && deviceInfo.device.mode_code !== EModeCode.Disconnected ? 'color:#00EE8B' : 'color:red'">
              {{ getTextByModeCode(deviceInfo.device ? deviceInfo.device.mode_code : EModeCode.Disconnected) }}
            </div>
            <div class="content-aircraft-head-right-top-status">
              <div v-if="aircraftLogInfo">
                <span class="word-loop">
                  {{ aircraftLogInfo }}
                </span>
              </div>
              <div v-else>
                N/A
              </div>
            </div>
          </div>
          <div class="content-aircraft-head-right-bottom">
            <div class="content-aircraft-head-right-bottom-button"
              @click="state.deviceLiveVisible = !state.deviceLiveVisible">
              <span class="openLiveButton" v-if="!state.deviceLiveVisible">
                开启直播
              </span>
              <span class="openLiveButton" v-else>
                关闭直播
              </span>
            </div>
            <div class="content-aircraft-head-right-bottom-icon">
              <a-tooltip title="操作">
                <img :src="aircraftSelectedSrc" @click="state.droneControlPanelVisible = false"
                  v-if="state.droneControlPanelVisible">
                <img :src="aircraftSrc" @click="state.droneControlPanelVisible = true" v-else>
              </a-tooltip>
            </div>
          </div>
          <div class="content-aircraft-head-right-select">
            <div v-if="state.deviceLiveVisible">
              <a-select style="width: 125px;margin-right: 5px;" placeholder="摄像头"
                v-model:value="deviceLive.cameraValue">
                <a-select-option v-for="item in deviceLive.cameraList" :key="item.value" :value="item.value"
                  @click="onDeviceCameraSelect(item)">
                  {{ item.label }}
                </a-select-option>
              </a-select>
              <a-select style="width: 125px;margin-right: 5px;" placeholder="清晰度"
                v-model:value="deviceLive.clarityValue">
                <a-select-option v-for="item in clarityList" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
              <a-tooltip title="播放">
                <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onDeviceStartLive" />
              </a-tooltip>
              <a-tooltip title="停止">
                <a-button :icon="h(PoweroffOutlined)" @click="onDeviceStopLive" />
              </a-tooltip>
            </div>
          </div>
        </div>
      </div>
      <LivePlayer :text="deviceLive.playerText" :url="deviceLive.playerUrl" v-if="state.deviceLiveVisible" />
      <div class="battery-slide">
        <div style="background: #535759;" class="width-100"></div>
        <div class="capacity-percent" :style="{ width: capacity + '%' }"></div>
      </div>
      <div class="content-aircraft-info">
        <a-row style="margin-bottom: 5px;">
          <a-col span="6">
            <div style="margin-top: -3px;" class="content-aircraft-info-item">
              <a-tooltip title="遥控器信号">
                <div style="display: flex;align-items: flex-end;">
                  <img style="margin-right: 5px;" :src="controllerSrc" v-if="controllerSignal > 0">
                  <img style="margin-right: 5px;" :src="controllerErrorSrc" v-else>
                  <div>
                    <img :src="signalThreeSrc" v-if="controllerSignal <= 3">
                    <img :src="signalFourSrc" v-else-if="controllerSignal === 4">
                    <img :src="signalFiveSrc" v-else-if="controllerSignal === 5">
                  </div>
                </div>
              </a-tooltip>
              <a-tooltip title="飞行器信号">
                <div style="display: flex;align-items: flex-end;">
                  <img style="width: 15px;margin-right: 5px;" :src="fourGSrc" v-if="aircraftSignal > 0">
                  <img style="width: 15px;margin-right: 5px;" :src="fourGErrorSrc" v-else>
                  <div>
                    <img :src="signalThreeSrc" v-if="aircraftSignal <= 3">
                    <img :src="signalFourSrc" v-else-if="aircraftSignal === 4">
                    <img :src="signalFiveSrc" v-else-if="aircraftSignal === 5">
                  </div>
                </div>
              </a-tooltip>
            </div>
          </a-col>
          <a-col span="6">
            <div class="content-aircraft-info-item">
              <a-tooltip title="RTK">
                <div style="display: flex;align-items: center;margin-right: 5px;">
                  <img style="width: 24px;margin-right: 5px;" :src="rtkSrc" v-if="RTK > 0">
                  <img style="width: 24px; margin-right: 5px;" :src="rtkErrorSrc" v-else>
                  <div>
                    {{ RTK }}
                  </div>
                </div>
              </a-tooltip>
              <a-tooltip title="GPS">
                <div style="display: flex;align-items: center;">
                  <img style="margin-right: 5px;" :src="gpsSrc" v-if="GPS > 0">
                  <img style="margin-right: 5px;" :src="gpsErrorSrc" v-else>
                  <div>
                    {{ GPS }}
                  </div>
                </div>
              </a-tooltip>
            </div>
          </a-col>
          <a-col span="6">
            <a-tooltip title="电量">
              <div class="content-aircraft-info-item">
                <div style="margin-right: 5px;">
                  <img :src="batteryOneSrc" v-if="capacity >= 75">
                  <img :src="batteryTwoSrc" v-else-if="capacity >= 50 && capacity < 75">
                  <img :src="batteryThreeSrc" v-else-if="capacity >= 25 && capacity < 50">
                  <img :src="batteryFourSrc" v-else-if="capacity < 25">
                </div>
                <div>
                  {{ capacity + '%' }}
                </div>
              </div>
            </a-tooltip>
          </a-col>
          <a-col span="6">
            <a-tooltip title="风向速度">
              <div class="content-aircraft-info-item">
                <img style="margin-right: 5px;" :src="windSrc">
                <div style="font-weight: bold;margin-right: 5px;">
                  {{ windDirection }}
                </div>
                <div>
                  {{ windSpeed }}
                </div>
              </div>
            </a-tooltip>
          </a-col>
        </a-row>
        <a-row>
          <a-col span="6">
            <a-tooltip title="海拔高度">
              <div class="content-aircraft-info-item">
                <div style="font-weight: bold;margin-right: 5px;">
                  ASL
                </div>
                <div>
                  {{ ASL }}
                </div>
              </div>
            </a-tooltip>
          </a-col>
          <a-col span="6">
            <a-tooltip title="离地高度">
              <div class="content-aircraft-info-item">
                <div style="font-weight: bold;margin-right: 5px;">
                  AGL
                </div>
                <div>
                  {{ AGL }}
                </div>
              </div>
            </a-tooltip>
          </a-col>
          <a-col span="6">
            <a-tooltip title="水平速度">
              <div class="content-aircraft-info-item">
                <div style="font-weight: bold;margin-right: 5px;">
                  H.S
                </div>
                <div>
                  {{ HS }}
                </div>
              </div>
            </a-tooltip>
          </a-col>
          <a-col span="6">
            <a-tooltip title="当前高度">
              <div class="content-aircraft-info-item">
                <img style="margin-right: 5px;" :src="homeSrc">
                <div>
                  {{ homeDistance }}
                </div>
              </div>
            </a-tooltip>
          </a-col>
        </a-row>
      </div>
    </div>
    <!-- 机场控制面板 -->
    <DockControlPanel :sn="osdInfo.gateway_sn" :deviceInfo="deviceInfo" @close-control-panel="onCloseControlPanel"
      v-if="dockControlPanelVisible" />
    <!-- 飞行指令 -->
    <DroneControlPanel :sn="osdInfo.gateway_sn" :deviceInfo="deviceInfo" :payloads="osdInfo.payloads"
      v-if="state.droneControlPanelVisible" />
  </div>
</template>

<script lang="ts" setup>
import { h, computed, reactive, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { CloseOutlined, PlaySquareOutlined, PoweroffOutlined } from '@ant-design/icons-vue'
import LivePlayer from '/@/components/livePlayer/index.vue';
import taskSrc from '../icons/info/task.svg';
import dock2Src from '../icons/info/dock2.png';
import M30Src from '../icons/info/m30.png';
import M3tdSrc from '../icons/info/m3td.png';
import weatherSrc from '../icons/info/weather.svg';
import weatherErrorSrc from '../icons/info/weatherError.svg';
import temperatureSrc from '../icons/info/temperature.svg';
import networkSrc from '../icons/info/network.svg';
import uploadSrc from '../icons/info/upload.svg';
import actionSrc from '../icons/info/action.svg';
import actionSelectedSrc from '../icons/info/action_selected.svg';
import aircraftSrc from '../icons/aircraft.svg';
import aircraftSelectedSrc from '../icons/aircraft_selected.svg';
import controllerSrc from '../icons/info/controller.svg';
import controllerErrorSrc from '../icons/info/controllerError.svg';
import fourGSrc from '../icons/info/fourG.svg';
import fourGErrorSrc from '../icons/info/fourGError.svg';
import signalThreeSrc from '../icons/info/signalThree.svg';
import signalFourSrc from '../icons/info/signalFour.svg';
import signalFiveSrc from '../icons/info/signalFive.svg';
import rtkSrc from '../icons/info/rtk.svg';
import rtkErrorSrc from '../icons/info/rtkError.svg';
import gpsSrc from '../icons/info/gps.svg';
import gpsErrorSrc from '../icons/info/gpsError.svg';
import batteryOneSrc from '../icons/info/batteryOne.svg';
import batteryTwoSrc from '../icons/info/batteryTwo.svg';
import batteryThreeSrc from '../icons/info/batteryThree.svg';
import batteryFourSrc from '../icons/info/batteryFour.svg';
import windSrc from '../icons/info/wind.svg';
import homeSrc from '../icons/info/home.svg';
import { getLiveCapacity, startLivestream, stopLivestream } from '/@/api/manage';
import DockControlPanel from '../../g-map/DockControlPanel.vue'
import DroneControlPanel from '../../g-map/DroneControlPanel.vue'
import { useDockControl } from '../../g-map/use-dock-control';
import { useMyStore } from '/@/store';
import { getTextByModeCode, getTextByDockModeCode, getWindDirection } from '/@/utils/index'
import EventBus from '/@/event-bus'
import { EModeCode, EDockModeCode } from '/@/types/device';

interface Props {
  osdInfo: any
  deviceInfo: any
};

const props = withDefaults(defineProps<Props>(), {

});

const store = useMyStore()

// 机场控制面板
const { dockControlPanelVisible, setDockControlPanelVisible, onCloseControlPanel } = useDockControl();

const hmsInfo = computed(() => store.state.hmsInfo);

// 适合飞行
const airworthiness = computed(() => {
  const info = props.deviceInfo?.dock?.basic_osd;
  if (info) {
    const { rainfall, wind_speed } = info;
    if (rainfall === 3) {
      return false;
    }
    if (wind_speed > 8) {
      return false
    }
    return true;
  } else {
    return true;
  }
})

// 飞行器告警信息
const aircraftLogInfo = computed(() => {
  const hmsList = hmsInfo.value[props.osdInfo.sn] || [];
  const info = hmsList[0];
  if (info) {
    return info.message_zh;
  } else {
    return '';
  }
})

// 机库告警信息
const hangarLogInfo = computed(() => {
  const hmsList = hmsInfo.value[props.osdInfo.gateway_sn] || [];
  const info = hmsList[0];
  if (info) {
    return info.message_zh;
  } else {
    return '';
  }
})

// 遥控器信号
const controllerSignal = computed(() => {
  const info = props.deviceInfo?.gateway;
  if (info && info.wireless_link) {
    return info.wireless_link['4g_gnd_quality'];
  } else {
    return 0;
  }
});

// 飞机信号
const aircraftSignal = computed(() => {
  const info = props.deviceInfo?.gateway;
  if (info && info.wireless_link) {
    return info.wireless_link['4g_uav_quality'];
  } else {
    return 0;
  }
});

const RTK = computed(() => {
  const info = props.deviceInfo?.device;
  if (info) {
    return info.position_state.rtk_number;
  } else {
    return 0;
  }
});

const GPS = computed(() => {
  const info = props.deviceInfo?.device;
  if (info) {
    return info.position_state.gps_number;
  } else {
    return 0;
  }
});

// 电池容量
const capacity = computed(() => {
  const info = props.deviceInfo?.device;
  if (info) {
    return info.battery.capacity_percent;
  } else {
    return 0;
  }
});

const windDirection = computed(() => {
  const info = props.deviceInfo?.device;
  if (info) {
    return getWindDirection(info.wind_direction);
  } else {
    return '';
  }
});

const windSpeed = computed(() => {
  const info = props.deviceInfo?.device;
  if (info) {
    if (info.wind_speed === '--') {
      return info.wind_speed;
    } else {
      return (info.wind_speed / 10).toFixed(2) + ' m/s';
    }
  } else {
    return '--';
  }
});

const ASL = computed(() => {
  const info = props.deviceInfo?.device;
  if (info) {
    if (info.height === '--') {
      return info.height;
    } else {
      return info.height.toFixed(2) + ' m';
    }
  } else {
    return '--';
  }
});

const AGL = computed(() => {
  const info = props.deviceInfo?.device;
  if (info) {
    if (info.elevation === '--') {
      return info.elevation;
    } else {
      return info.elevation.toFixed(2) + ' m';
    }
  } else {
    return '--';
  }
});

const HS = computed(() => {
  const info = props.deviceInfo?.device;
  if (info) {
    if (info.horizontal_speed === '--') {
      return info.horizontal_speed;
    } else {
      return info.horizontal_speed.toFixed(2) + ' m/s';
    }
  } else {
    return '--';
  }
});

const homeDistance = computed(() => {
  const info = props.deviceInfo?.device;
  if (info) {
    if (info.home_distance === '--') {
      return info.home_distance;
    } else {
      return info.home_distance.toFixed(2) + ' m';
    }
  } else {
    return '--';
  }
});

interface SelectOption {
  value: any,
  label: string,
  more?: any
}

const clarityList: SelectOption[] = [
  {
    value: 0,
    label: '自适应'
  },
  {
    value: 1,
    label: '流畅'
  },
  {
    value: 2,
    label: '标清'
  },
  {
    value: 3,
    label: '高清'
  },
  {
    value: 4,
    label: '超清'
  }
]

interface State {
  uploadQuantity: number,
  uploadTotal: number,
  airportLiveVisible: boolean,
  deviceLiveVisible: boolean,
  droneControlPanelVisible: boolean,
}

const state: State = reactive({
  uploadQuantity: 0,
  uploadTotal: 0,
  airportLiveVisible: false,
  deviceLiveVisible: false,
  droneControlPanelVisible: false,
})

interface AirportLive {
  cameraList: SelectOption[],
  cameraValue?: string,
  videoList: SelectOption[],
  videoValue?: string,
  clarityValue: number,
  videoId: string,
  playerText: string,
  playerUrl: string,
}

const airportLive: AirportLive = reactive({
  cameraList: [],
  cameraValue: undefined,
  videoList: [],
  videoValue: undefined,
  clarityValue: 0,
  videoId: '',
  playerText: '',
  playerUrl: '',
})

interface DeviceLive {
  cameraList: SelectOption[],
  cameraValue?: string,
  videoList: SelectOption[],
  videoValue?: string,
  clarityValue: number,
  videoId: string,
  playerText: string,
  playerUrl: string,
}

const deviceLive: DeviceLive = reactive({
  cameraList: [],
  cameraValue: undefined,
  videoList: [],
  videoValue: undefined,
  clarityValue: 0,
  videoId: '',
  playerText: '',
  playerUrl: '',
})

const fetchLiveCapacity = async () => {
  try {
    const res = await getLiveCapacity({});
    if (res.code === 0) {
      const dockInfo = res.data.filter((item: any) => item.sn === props.osdInfo.gateway_sn)[0];
      const deviceInfo = res.data.filter((item: any) => item.sn === props.osdInfo.sn)[0];
      const getDockCameraList = (list: any) => {
        const cameraList = list.map((item: any) => {
          return {
            label: item.name,
            value: item.index,
            more: item.videos_list
          }
        })
        airportLive.cameraList = cameraList;
      }
      const getDeviceCameraList = (list: any) => {
        const cameraList = list.map((item: any) => {
          return {
            label: item.name,
            value: item.index,
            more: item.videos_list
          }
        })
        deviceLive.cameraList = cameraList;
      }
      getDockCameraList(dockInfo.cameras_list || []);
      getDeviceCameraList(deviceInfo.cameras_list || []);
    }
  } catch (e: any) {
    console.error(e);
  }
}

function handleTaskWsEvent(payload: any) {
  if (!payload) {
    return
  }
  state.uploadQuantity = payload.uploaded_file_count;
  state.uploadTotal = payload.expected_file_count;
}

onMounted(async () => {
  EventBus.on('flightTaskWs', handleTaskWsEvent)
  await fetchLiveCapacity();
})

const onDockCameraSelect = (record: SelectOption) => {
  airportLive.cameraValue = record.value;
  if (!record.more) {
    return
  }
  const videoList = record.more.map((ele: any) => {
    return {
      label: ele.type,
      value: ele.index,
      more: ele.switch_video_types
    }
  })
  airportLive.videoList = videoList;
  if (videoList.length === 0) {
    return;
  }
  const firstVideo: SelectOption = videoList[0];
  airportLive.videoValue = firstVideo.value;
}

const onDockStartLive = async () => {
  const { cameraValue, videoValue } = airportLive;
  if (!cameraValue) {
    return message.warn('请选择摄像头');
  }
  const videoId = `${props.osdInfo.gateway_sn}/${cameraValue}/${videoValue || 'normal-0'}`;
  airportLive.videoId = videoId;
  try {
    const res = await startLivestream({
      protocol: location.protocol.slice(0, -1),
      video_id: videoId,
      url_type: 1,// RTMP 
      video_quality: airportLive.clarityValue
    });
    if (res.code !== 0) {
      airportLive.playerText = res.message;
    } else {
      const playerUrl = res.data.url;
      airportLive.playerText = '';
      airportLive.playerUrl = playerUrl;
      message.success('已开启直播');
    }
  } catch (e: any) {
    console.error(e);
  }
}

const onDockStopLive = async () => {
  const { cameraValue, videoValue } = airportLive;
  if (!cameraValue) {
    return message.warn('请选择摄像头');
  }
  const videoId = `${props.osdInfo.gateway_sn}/${cameraValue}/${videoValue || 'normal-0'}`;
  const res = await stopLivestream({
    video_id: videoId,
  });
  if (res.code === 0) {
    airportLive.videoId = '';
    airportLive.playerUrl = '';
    message.success('已停止直播');
  }
}

const onDeviceCameraSelect = (record: SelectOption) => {
  deviceLive.cameraValue = record.value;
  if (!record.more) {
    return
  }
  const videoList = record.more.map((ele: any) => {
    return {
      label: ele.type,
      value: ele.index,
      more: ele.switch_video_types
    }
  })
  deviceLive.videoList = videoList;
  if (videoList.length === 0) {
    return;
  }
  const firstVideo: SelectOption = videoList[0];
  deviceLive.videoValue = firstVideo.value;
}

const onDeviceStartLive = async () => {
  const { cameraValue, videoValue } = deviceLive;
  if (!cameraValue) {
    return message.warn('请选择摄像头');
  }
  const videoId = `${props.osdInfo.sn}/${cameraValue}/${videoValue || 'normal-0'}`;
  deviceLive.videoId = videoId;
  try {
    const res = await startLivestream({
      protocol: location.protocol.slice(0, -1),
      video_id: videoId,
      url_type: 1,// RTMP 
      video_quality: deviceLive.clarityValue
    });
    if (res.code !== 0) {
      deviceLive.playerText = res.message;
    } else {
      const playerUrl = res.data.url;
      deviceLive.playerText = '';
      deviceLive.playerUrl = playerUrl;
      message.success('已开启直播');
    }
  } catch (e: any) {
    console.error(e);
  }
}

const onDeviceStopLive = async () => {
  const { cameraValue, videoValue } = deviceLive;
  if (!cameraValue) {
    return message.warn('请选择摄像头');
  }
  const videoId = `${props.osdInfo.sn}/${cameraValue}/${videoValue || 'normal-0'}`;
  const res = await stopLivestream({
    video_id: videoId,
  });
  if (res.code === 0) {
    deviceLive.videoId = '';
    deviceLive.playerUrl = '';
    message.success('已停止直播');
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 420px;
  color: #fff;
  border-radius: 4px;
  overflow: visible;
  background-color: #232323;
  position: absolute;
  left: 10px;
  top: 10px;

  &-title {
    width: 100%;
    height: 40px;
    padding-right: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #535759;

    &-left {
      width: 80px;
      height: 40px;
      padding-left: 5px;
      background: #4a4d4e;
      display: flex;
      align-items: center;

      &-icon {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
  }

  &-dock {
    font-size: 12px;
    display: flex;
    border-bottom: 1px solid #535759;
    position: relative;

    &-left {
      width: 80px;
      padding: 5px;
      background: #3d3d3d;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &-image {
        width: 80%;
        margin-bottom: 10px;
      }

      &-text {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    &-info {
      flex: 1;
      padding: 5px;
      overflow: hidden;

      &-cell {
        display: flex;
        align-items: center;
        margin: 10px 0;

        &-style {
          width: 100px;
          border-right: 1px solid #535759;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: 5px;

          img {
            width: 14px;
            height: 14px;
            margin-right: 2px
          }
        }

        &-row {
          flex: 1;

          img {
            width: 14px;
            height: 14px;
            margin-right: 5px;
          }
        }

        &-status {
          flex: 1;
          padding-left: 5px;
          background: #4a4d4e;
          overflow: hidden;
        }

        &-button {
          flex: 1;
          height: 24px;
          padding: 2px 4px;
          border: 1.5px solid #535759;
          border-radius: 2px;
          cursor: pointer;
          margin-right: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        &-icon {
          width: 24px;
          height: 24px;
          padding: 2px 4px;
          border: 1.5px solid #535759;
          border-radius: 2px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 14px;
            height: 14px;
          }
        }
      }
    }
  }

  &-aircraft {
    font-size: 12px;

    &-head {
      display: flex;

      &-icon {
        width: 80px;
        padding: 5px;
        background: #3d3d3d;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &-image {
          width: 80%;
        }

        &-text {
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 5px
        }
      }

      &-right {
        flex: 1;
        padding: 5px;
        overflow: hidden;

        &-top {
          margin: 10px 0;
          display: flex;
          align-items: center;

          &-style {
            width: 100px;
            border-right: 1px solid #535759;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 5px;
          }

          &-status {
            flex: 1;
            padding-left: 5px;
            background: #4a4d4e;
            overflow: hidden;
          }
        }

        &-bottom {
          margin: 10px 0;
          display: flex;
          align-items: center;

          &-button {
            flex: 1;
            height: 24px;
            padding: 2px 4px;
            border: 1.5px solid #535759;
            border-radius: 2px;
            cursor: pointer;
            margin-right: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          &-icon {
            width: 24px;
            height: 24px;
            padding: 2px 4px;
            border: 1.5px solid #535759;
            border-radius: 2px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              width: 14px;
              height: 14px;
            }
          }
        }

        &-select {
          margin: 10px 0 5px;
        }
      }
    }

    &-info {
      padding: 5px;

      &-item {
        display: flex;
        align-items: center;

        img {
          width: 13px;
          height: 13px;
        }
      }
    }
  }
}

.battery-slide {
  width: 100%;

  .capacity-percent {
    background: #00ee8b;
  }

  .return-home {
    background: #ff9f0a;
  }

  .landing {
    background: #f5222d;
  }

  .battery {
    background: white;
    border-radius: 1px;
    width: 8px;
    height: 4px;
    margin-top: -3px;
  }
}

.battery-slide>div {
  position: relative;
  margin-top: -2px;
  min-height: 2px;
  border-radius: 2px;
  white-space: nowrap;
}

.word-loop {
  white-space: nowrap;
  display: inline-block;
  animation: 10s loop linear infinite normal;
}

@keyframes loop {
  0% {
    transform: translateX(20px);
    -webkit-transform: translateX(20px);
  }

  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
</style>

<style lang="scss">
.infoModal-content {

  // 修改按钮样式
  .ant-btn {
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #535759;

    &:hover {
      color: #fff;
      background-color: transparent;
      border-color: #535759;
    }

    &:focus {
      color: #fff;
      background-color: transparent;
      border-color: #535759;
    }
  }

  .ant-select-selector {
    color: #FFFFFF;
    background: transparent !important;
    border: 1px solid #535759 !important;
    box-shadow: none !important;
  }

  .ant-select-arrow {
    color: #fff;
  }

  .ant-select-dropdown {
    background-color: transparent;

    .ant-select-item {
      background-color: #000000 !important;
      color: #fff;

      &:hover {
        background-color: #4a4a4a !important;
      }
    }

    .ant-select-item-option-selected {
      background-color: #3a3a3a;
    }
  }
}
</style>