<template>
  <!-- 清流融合 -->
  <div>
    <div ref="wrap">
      <div class="video-wrap" :class="big" @dblclick="screen" ref="video">
        <div class="cpt_video" @click="lensControl" v-if="showPlayer" v-interact>
          <Obstacle v-if="!isStatus"></Obstacle>
          <div class="video">
            <div class="name" v-clipboard:copy="vUrl.vUrl">{{ device.name }}</div>
            <!-- <div class="type" v-if="networkType">{{ networkType }}</div> -->
            <!-- <div class="types">{{ streamName }}</div> -->
            <div v-show="!isStatus" class="close" @click="close()">关闭</div>
          </div>

          <!--  <videoModelChange
            :data="data"
            v-if="streamSelect == 'QINGLIU' && !isStatus"
            class="cp pa cf modelStyle"
            @click="VideoModelChange"
            :uavRealTimeData="uavRealTimeData"
            :NXdata="NXdata"
          ></videoModelChange>-->

          <components
            :is="playerCom"
            :smallFPV="smallFPV"
            :isStatus="isStatus"
            ref="player"
            :LivePlayerInfor="false"
            :fpvUrl="fpvUrl"
            :data="vUrl"
            :device="device"
            :controls="false"
            :className="'fkLivePlayer'"
            :infoflag="infoflag"
            :deviceName="device.name"
            :raw_msg="raw_msg"
            :isInfoShow="isInfoShow"
            @close="infoflag = false"
          />
          <!-- @entryCross="entryCross" -->
          <div class="info" v-if="showInfo && streamSelect == 'QINGLIU'">
            <div class="de">
              <div class="title">bitrate:</div>
              <div class="detail">{{ raw_msg ? raw_msg / 1000 : "0" }}kbps</div>
            </div>
            <div class="de">
              <div class="title">venc_avg:</div>
              <div class="detail">{{ infoData ? infoData.venc_avg / 1000 : "0" }}ms</div>
            </div>
            <div class="de">
              <div class="title">venc_last:</div>
              <div class="detail">{{ infoData ? infoData.venc_last / 1000 : "0" }}ms</div>
            </div>
            <div class="de">
              <div class="title">pushrtt_avg:</div>
              <div class="detail">{{ infoData ? infoData.pushrtt_avg[0] / 1000 : "0" }}ms</div>
            </div>
            <div class="de">
              <div class="title">pushrtt_last:</div>
              <div class="detail">{{ infoData ? infoData.pushrtt_last[0] / 1000 : "0" }}ms</div>
            </div>
            <div class="de">
              <div class="title">recvrtt_avg:</div>
              <div class="detail">{{ infoData ? infoData.recvrtt_avg[0] / 1000 : "0" }}ms</div>
            </div>
            <div class="de">
              <div class="title">recvrtt_last:</div>
              <div class="detail">{{ infoData ? infoData.recvrtt_last[0] / 1000 : "0" }}ms</div>
            </div>
            <div class="de">
              <div class="title">pushretrans_avg:</div>
              <div class="detail">
                {{
                infoData ? (infoData.pushretrans_avg[0] * 0.1).toFixed(2) : "0"
                }}%
              </div>
            </div>
            <div class="de">
              <div class="title">pushretrans_last:</div>
              <div class="detail">
                {{
                infoData
                ? (infoData.pushretrans_last[0] * 0.1).toFixed(2)
                : "0"
                }}%
              </div>
            </div>
            <div class="de">
              <div class="title">recvretrans_avg:</div>
              <div class="detail">
                {{
                infoData ? (infoData.recvretrans_avg[0] * 0.1).toFixed(2) : "0"
                }}%
              </div>
            </div>
            <div class="de">
              <div class="title">recvretrans_last:</div>
              <div class="detail">
                {{
                infoData
                ? (infoData.recvretrans_last[0] * 0.1).toFixed(2)
                : "0"
                }}%
              </div>
            </div>
            <div class="de">
              <div class="title">vdec:</div>
              <div class="detail">{{ infoData ? infoData.vdec / 1000 : "0" }}ms</div>
            </div>
            <div class="de">
              <div class="title">vbuffer:</div>
              <div class="detail">{{ infoData ? infoData.vbuffer / 1000 : "0" }}ms</div>
            </div>
          </div>
          <div class="info_isStatus" v-if="showInfo && streamSelect == 'QINGLIU'&&isStatus">
            <div class="title_box" v-interact>
              <div class="title pl20">
                <img src="./assets/images/mount_head.png" />
                <div class="font">视频信息</div>
              </div>
              <div style="display: flex">
                <div class="icon-box"></div>
                <div class="cf ml20 mr10 c70d cp" @click="showInfo = false">关闭</div>
              </div>
            </div>
            <div class="content">
              <div class="de">
                <div class="title">bitrate:</div>
                <div class="detail">{{ raw_msg ? raw_msg / 1000 : "0" }}kbps</div>
              </div>
              <div class="de">
                <div class="title">venc_avg:</div>
                <div
                  class="detail"
                >{{ infoData&&infoData.venc_avg ? infoData.venc_avg / 1000 : "0" }}ms</div>
              </div>
              <div class="de">
                <div class="title">venc_last:</div>
                <div
                  class="detail"
                >{{ infoData&&infoData.venc_last ? infoData.venc_last / 1000 : "0" }}ms</div>
              </div>
              <div class="de">
                <div class="title">pushrtt_avg:</div>
                <div
                  class="detail"
                >{{ infoData&&infoData.pushrtt_avg ? infoData.pushrtt_avg[0] / 1000 : "0" }}ms</div>
              </div>
              <div class="de">
                <div class="title">pushrtt_last:</div>
                <div
                  class="detail"
                >{{ infoData&&infoData.pushrtt_last ? infoData.pushrtt_last[0] / 1000 : "0" }}ms</div>
              </div>
              <div class="de">
                <div class="title">recvrtt_avg:</div>
                <div
                  class="detail"
                >{{ infoData&&infoData.recvrtt_avg ? infoData.recvrtt_avg[0] / 1000 : "0" }}ms</div>
              </div>
              <div class="de">
                <div class="title">recvrtt_last:</div>
                <div
                  class="detail"
                >{{ infoData&&infoData.recvrtt_last ? infoData.recvrtt_last[0] / 1000 : "0" }}ms</div>
              </div>
              <div class="de">
                <div class="title">pushretrans_avg:</div>
                <div class="detail">
                  {{
                  infoData&&infoData.pushretrans_avg ? (infoData.pushretrans_avg[0] * 0.1).toFixed(2) : "0"
                  }}%
                </div>
              </div>
              <div class="de">
                <div class="title">pushretrans_last:</div>
                <div class="detail">
                  {{
                  infoData&&infoData.pushretrans_last ? (infoData.pushretrans_last[0] * 0.1).toFixed(2) : "0"
                  }}%
                </div>
              </div>
              <div class="de">
                <div class="title">recvretrans_avg:</div>
                <div class="detail">
                  {{
                  infoData&&infoData.recvretrans_avg ? (infoData.recvretrans_avg[0] * 0.1).toFixed(2) : "0"
                  }}%
                </div>
              </div>
              <div class="de">
                <div class="title">recvretrans_last:</div>
                <div class="detail">
                  {{
                  infoData&&infoData.recvretrans_last ? (infoData.recvretrans_last[0] * 0.1).toFixed(2) : "0"
                  }}%
                </div>
              </div>
              <div class="de">
                <div class="title">vdec:</div>
                <div class="detail">{{ infoData&&infoData.vdec ? infoData.vdec / 1000 : "0" }}ms</div>
              </div>
              <div class="de">
                <div class="title">vbuffer:</div>
                <div
                  class="detail"
                >{{ infoData&&infoData.vbuffer ? infoData.vbuffer / 1000 : "0" }}ms</div>
              </div>
            </div>
          </div>
          <!-- 瞄准 -->
          <div class="kedu" :style="backgroundStyle" v-if="showCenter">
            <div class="num">
              <div class="first">{{ num.one }}</div>
              <div class="first">{{ num.two }}</div>
              <div class="first">{{ num.three }}</div>
              <div class="first">{{ num.four }}</div>
              <div class="first">{{ num.five }}</div>
              <div class="first">{{ num.six }}</div>
              <div class="first">{{ num.seven }}</div>
            </div>
            <div class="center">
              <img src="./assets/images/center.png" alt />
            </div>
            <div class="longLine">
              <img src="./assets/images/line2.png" alt />
            </div>
            <!-- <img :style="{transform: `translateY(${uavRealTimeData && uavRealTimeData.gps ? uavRealTimeData.gps.relativeAlt : 120}%)`}" class="line" src="./assets/images/line.png" alt=""> -->
            <div class="text">
              <span class>
                {{
                uavRealTimeData && uavRealTimeData.rtk && uavRealTimeData.rtk.type == 19 && uavRealTimeData.rtk.isMainSensor ? uavRealTimeData.rtk.relativeAlt : uavRealTimeData && uavRealTimeData.gps ? uavRealTimeData.gps.relativeAlt : 0
                }}
              </span>
              <span class style="color: black">m</span>
            </div>
          </div>
          <div class="iconBG" v-if="isStatus">
            <div class="cp infop cf right50" @click="getInfo" alt />
            <div
              :class="type == 4 ? 'right17' : 'right23'"
              class="cp reset cf iconfont icon-gengxin"
              @click="reset"
            />
          </div>
          <div class="bottom-menu">
            <div class="left">
              <el-tooltip
                v-if="streamSelect.toUpperCase() == 'QINGLIU'"
                content="视频信息"
                placement="bottom"
                :style="isStatus ? 'margin-left:100px' : ''"
              >
                <img
                  class="menu-item"
                  src="./assets/images/info.png"
                  @click="getInfo"
                  style="transform: scale(1.4)"
                  alt
                />
              </el-tooltip>
              <el-tooltip content="是否启动瞄准镜" placement="bottom" v-if="!isStatus">
                <img class="menu-item" src="./assets/images/center.png" @click="showCenterFn" alt />
              </el-tooltip>
              <el-tooltip
                v-if="!isStatus"
                :content="
              ygisCenterFlag
                ? `摇杆位于中位 ${(ygValue && ygValue.toFixed(2)) || ''}`
                : `摇杆未在中位 ${(ygValue && ygValue.toFixed(2)) || ''}`
            "
                placement="bottom"
              >
                <img
                  :class="ygisCenterFlag ? '' : 'play_ymzw'"
                  src="./assets/images/ymzw.svg"
                  class="menu-item"
                />
              </el-tooltip>
            </div>

            <div class="right">
              <div class="search mr22" v-if="!isStatus">
                <el-select class="video_type mr24" v-model="streamSelect" placeholder="切换源">
                  <el-option
                    v-for="(item, i) in streamOptions"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-select
                  class="big_type"
                  v-model="sizeSelect"
                  placeholder="比例"
                  @change="changeBig"
                >
                  <el-option
                    v-for="item in sizeOptions2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
              <div class="pointer iconfont icon-gengxin cf f16 mr40 menu-item" @click="reset"></div>
              <!-- FPV切换 -->
              <el-tooltip content="模式切换" placement="bottom">
                <div
                  v-if="streamSelect.toUpperCase() !== 'QINGLIU'"
                  class="cp pa iconfont icon-moshiqiehuan cf modelStyle menu-item"
                  @click="change"
                ></div>
              </el-tooltip>
              <div
                class="pointer iconfont icon-quanping cf mr3 f16 menu-item"
                @click="screen"
                v-if="!isStatus"
              ></div>
            </div>
          </div>

          <div class="right-menu">
            <template v-if="device.network === 1">
              <el-tooltip content="拍照" placement="bottom">
                <div class="menu-item plate" @click="photojz">
                  <img src="./assets/images/ai.png" />
                </div>
              </el-tooltip>
              <el-tooltip v-if="!screenRecordingStatus" content="开始录像" placement="bottom">
                <div class="record menu-item" @click="getRecord">
                  <img src="./assets/images/record.png" />
                </div>
              </el-tooltip>
              <el-tooltip v-else content="停止录像" placement="bottom">
                <div class="record menu-item" @click="getRecord">
                  <img src="./assets/images/stop.png" />
                </div>
              </el-tooltip>
            </template>
            <el-tooltip content="截图" placement="bottom">
              <div class="photojz menu-item" @click="photo">
                <img src="./assets/images/photojz.svg" />
              </div>
            </el-tooltip>
            <el-tooltip content="AI识别" placement="bottom">
              <div class="menu-item">
                <img src="./assets/images/car1.png" @click="aiVisible = !aiVisible" />
                <div class="ai-list" v-if="aiVisible">
                  <el-tooltip
                    v-for="(item,index) in aiIdentifyList"
                    :key="index"
                    :content="item.title"
                    placement="bottom"
                  >
                    <div class="ai-item" @click="aiIdentifyType(item.aiType)">
                      <img class="img_src" :src="item.Img" />
                    </div>
                  </el-tooltip>
                  <el-tooltip content="人脸识别" placement="bottom">
                    <div class="ai-item" @click="handle('a')">
                      <img src="~./assets/images/faceAI2.png" />
                    </div>
                  </el-tooltip>
                  <el-tooltip content="车牌识别" placement="bottom">
                    <div class="ai-item" @click="handle('b')">
                      <img src="~./assets/images/carAI.png" />
                    </div>
                  </el-tooltip>
                  <el-tooltip content="人流识别" placement="bottom">
                    <div class="ai-item" @click="frame()">
                      <img src="~./assets/images/trafficAI.png" />
                    </div>
                  </el-tooltip>
                  <el-tooltip content="车流识别" placement="bottom">
                    <div class="ai-item" @click="carFrame()">
                      <img src="~./assets/images/carAI2.png" />
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </el-tooltip>
            <div class="menu-item" @click="startLinePoint" content="航点动作">
              <img src="./assets/images/point_small.svg" />
            </div>
          </div>
        </div>
        <PointList
          :uavRealTimeData="uavRealTimeData"
          :mountData="mountDatas"
          v-if="showFlywayAction"
          @close="showFlywayAction = false"
        ></PointList>
      </div>
    </div>
    <FaceAI v-if="faceAiShow" :uavId="pid" @closeface="faceAiShow = false" />
    <CarAI v-if="carAiShow" :uavId="device.hardId" :list="carList" @closecar="carAiShow = false" />
    <Traffic v-if="trafficShow" :trafficData="trafficData" @close="trafficShow = false" />
    <carTraffic
      v-if="cartrafficShow"
      :trafficData="cartrafficData"
      @close="cartrafficShow = false"
    />
  </div>
</template>

<script>
import { Control_API } from "../../../../api";
import dayjs from "dayjs";
import FaceAI from "./components/faceai";
import CarAI from "./components/carai";
import Traffic from "./components/traffic";
import carTraffic from "./components/carTraffic";
import LiveNVRPlayer from "./components/livenvr/index.vue";
import QingLiuPlayer from "./components/qingliu";
import SRSPlayer from "./components/srs";
import { saveAs } from "file-saver";
import { to_moveMount } from "../../../../utils/to_moveMount.js";
import { newDate } from "../../../../utils/formatDate";
import Obstacle from "./components/obstacle";
import PointList from "./components/pointList";
import videoModelChange from "./components/videoModelChange";
import fkutils from "./methods/utils";
import svg1 from "./assets/images/车牌检测.svg";
import svg2 from "./assets/images/火焰烟雾.svg";
import svg3 from "./assets/images/异物检测.svg";
import svg4 from "./assets/images/跌倒检测.svg";
import svg5 from "./assets/images/游泳检测.svg";

export default {
  name: "Player",
  components: {
    QingLiuPlayer,
    LiveNVRPlayer,
    FaceAI,
    CarAI,
    Traffic,
    carTraffic,
    PointList,
    Obstacle,
    SRSPlayer,
    videoModelChange,
  },
  inject: ["bus"],
  props: {
    mountDatas: {
      type: Object,
      default: () => ({}),
    },
    NXdata: {
      type: Object,
      default: () => {},
    },
    device: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      backgroundStyle: {
        "background-position-y": 0,
      },
      aiIdentifyList: [
        {
          title: "车牌识别",
          aiType: 12,
          class: "right28 top40",
          Img: svg1,
        },
        {
          title: "车辆类型检测",
          aiType: 9,
          class: "right66 top40",
          Img: svg1,
        },
        {
          title: "火焰烟雾",
          aiType: 7,
          class: "right-88 top40",
          Img: svg2,
        },
        {
          title: "异物检测",
          aiType: 6,
          class: "right-11 top40",
          Img: svg3,
        },
        {
          title: "跌倒检测",
          aiType: 5,
          class: "right-50 top40",
          Img: svg4,
        },
        {
          title: "游泳检测",
          aiType: 4,
          class: " right66",
          Img: svg5,
        },
      ],
      ygisCenterFlag: false,
      ygValue: null,

      showCenter: false, //开启瞄准
      screenRecordingStatus: false, //是否录制中
      showInfo: false, //清流视频信息展示
      infoData: null, //清流信息
      raw_msg: 0,

      carList: [], //车牌识别结果
      aiVisible: false, //打开ai
      pid: null,
      faceAiShow: false,
      carAiShow: false,
      trafficShow: false,
      cartrafficShow: false,
      trafficData: {},
      cartrafficData: {},
      showPlayer: true, // 显示播放器, 用于刷新播放器
      smallFPV: true, // FPV小化显示
      isStatus: false,
      big: "",
      streamSelect: "", //选择的流
      sizeSelect: 2, //选择的大小
      sizeOptions2: [
        //大小可选项
        {
          value: 1,
          label: "X1",
        },
        {
          value: 2,
          label: "X2",
        },
        {
          value: 3,
          label: "X3",
        },
      ],
      infoflag: false,
      mountData: {},
      num: {
        one: 15,
        two: 10,
        three: 5,
        four: 0,
        five: -5,
        six: -10,
        seven: -15,
      },
      isInfoShow: false,
      openOSD: true, // 是否开启OSD
      showFlywayAction: false, //显示航点动作
    };
  },
  computed: {
    /**
     * 播放器组件名
     */
    playerCom() {
      if (this.streamSelect) {
        switch (this.streamSelect.toLowerCase()) {
          case "flv":
            return "LiveNVRPlayer";

          case "srs":
            return "SRSPlayer";

          case "livenvr":
            return "LiveNVRPlayer";

          case "qingliu":
            return "QingLiuPlayer";

          case "webrtc":
            // return "LiveNVRPlayer";
            return "SRSPlayer";

          default:
            return "LiveNVRPlayer";
        }
      } else {
        if (this.vUrl.vUrl?.includes("pzsp://")) {
          return "QingLiuPlayer";
        } else {
          return "LiveNVRPlayer";
        }
      }
    },
    /**
     * 流类型名
     */
    streamName() {
      let find = this.streamOptions.find((item) => {
        return item.value === this.streamSelect;
      });
      return find?.label || "";
    },

    /**
     * 网络类型
     * @returns 专网 | 公网
     */
    networkType() {
      // console.log('网络判断', this.device.videos)
      let name = "公网";

      return name;
    },
    /**
     * 流选项
     * @returns [{
          value: "RTC",
          label: "低延迟"
        }]
     */
    streamOptions() {
      let streamOptions = [];
      // this.streamSelect = "hlsUrl";
      this.device?.streamConfiguration?.forEach((item1) => {
        item1.streamUrlMessage.forEach((item2) => {
          let brand = item1.videoSource?.toUpperCase() || "";
          if (item2.streamType === "WEBRTC") {
            brand = "SRS";
          }
          streamOptions.unshift({
            label: item2.streamType,
            value: item2.streamType,
            brand,
            url: item2.streamUrl,
            // 只有liveNVR支持fpvUrl
            fpvUrl: "",
          });
        });
      });
      return streamOptions;
    },
    /**
     * 播放的视频流
     */
    vUrl() {
      let find = this.streamOptions.find(
        (item) => item.value === this.streamSelect
      );
      return {
        vUrl: find?.url || "",
      };
    },
    fpvUrl() {
      return {
        vUrl: "",
      };
    },
    // 无人机实时数据
    uavRealTimeData() {
      return this.$store.state.MMCFlightControlCenter.uav.uavRealTimeData;
    },
    // 健康监测数据
    healthData() {
      return this.uavRealTimeData.healthData;
    },
  },

  watch: {
    uavRealTimeData: function (newval) {
      let gps = null;
      if (
        newval &&
        newval.rtk &&
        newval.rtk.type == 19 &&
        newval.rtk.isMainSensor
      ) {
        gps = newval.rtk;
      } else {
        gps = newval.gps;
      }
      if (!gps) {
        return;
      }
      this.backgroundStyle = {
        "background-position-y": gps.relativeAlt + "px",
      };

      if (this.num) {
        this.num.one = Number(gps.relativeAlt.toFixed(0)) + 15;
        this.num.two = Number(gps.relativeAlt.toFixed(0)) + 10;
        this.num.three = Number(gps.relativeAlt.toFixed(0)) + 5;
        this.num.four = Number(gps.relativeAlt.toFixed(0)) + 0;
        this.num.five = Number(gps.relativeAlt.toFixed(0)) - 5;
        this.num.six = Number(gps.relativeAlt.toFixed(0)) - 10;
        this.num.seven = Number(gps.relativeAlt.toFixed(0)) - 15;
      }
    },
    streamOptions: {
      handler(value) {
        //当流选项变化时，如果未选择流类型，则自动选择第一个流类型
        if (this.streamSelect == "" && this.streamOptions.length > 0) {
          this.streamSelect = this.streamOptions[0].value;
        }
      },
      deep: true,
      immediate: true,
    },
    streamSelect: function (val) {},
    networkType() {
      let find = this.streamOptions.find((item) => {
        return item.value == this.streamSelect;
      });
      if (!find) {
        this.streamSelect = ""; //网络类型改变时，未有当前选择的流类型， 则重置
      }
    },
  },
  async mounted() {
    window.$uavPlayer = this;
    // this.wrapCenter();
    //视屏截图
    this.bus.$on("uavTakePhoto", ({ callback }) => {
      let blob = this.screenShot();
      callback && callback(blob);
    });
    window.addEventListener("resize", this.fullScreenChangeFn);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.fullScreenChangeFn);
  },
  methods: {
    ...fkutils,
    startLinePoint() {
      let gps = {};
      if (this.uavRealTimeData) {
        if (
          this.uavRealTimeData.rtk &&
          this.uavRealTimeData.rtk.type == 19 &&
          this.uavRealTimeData.rtk.isMainSensor
        ) {
          gps = this.uavRealTimeData.rtk;
        } else {
          gps = this.uavRealTimeData.gps;
        }
      }

      if (this.uavRealTimeData && gps && gps.relativeAlt > 20) {
        this.showFlywayAction = true;
      } else {
        this.$message.warning("当前高度不可创建航点动作！");
      }
    },
    async checkUseOperateFn(device) {
      // 查看是否有控制权限
      let res = await API.FCKERNEL.checkUseOperate({ hardId: device });
      if (res.code == 201) {
        this.$message.warning(res.msg);
        return false;
      } else {
        return true;
      }
    },
    showCenterFn() {
      this.showCenter = !this.showCenter;
    },
    async VideoModelChange() {
      let res = await API.FCKERNEL.checkUseOperate({
        hardId: this.device.hardId,
      });
      if (res.code == 201) {
        this.$message.warning(res.msg);
        return false;
      } else {
        console.log(1111);
      }
    },
    getInfo() {
      this.showInfo = !this.showInfo;
    },
    async change() {
      this.smallFPV = !this.smallFPV;
    },
    //监听屏幕是否全屏
    fullScreenChangeFn(e) {
      if (window.screen.height - window.document.body.offsetHeight > 5) {
        this.infoflag = false;
      } else {
        this.infoflag = true;
      }
    },
    close(data) {
      this.$emit("close");
    },
    screen() {
      if (this.playerCom === "LiveNVRPlayer") {
        this.infoflag = !this.infoflag;
        this.$refs.player.init(this.infoflag);
      } else {
        this.infoflag = !this.infoflag;
        this.$refs.player.fullScreen(this.infoflag);
      }
    },
    play() {
      if (this.playerCom === "LiveNVRPlayer") {
        this.$refs.player.$refs["livePlayer"].pause();
      }
    },
    pause() {
      if (this.playerCom === "LiveNVRPlayer") {
        this.$refs.player.$refs["livePlayer"].play();
      }
    },
    async reset() {
      this.showPlayer = false;
      this.$nextTick(() => {
        this.showPlayer = true;
      });
    },
    changeBig(id) {
      this.big = "big_0" + id;
      // this.wrapCenter();
    },
    //车流密度
    async carFrame() {
      this.carFlow(this.device.hardId);
    },
    //人流密度
    async frame() {
      this.flow(this.device.hardId);
    },
    /**
     * 截图
     */
    screenShot() {
      return this.$refs.player.screenShot();
    },
    /**
     * 录像
     */
    async getRecord() {
      if (this.healthData.NX.code !== "0x2110000") {
        return this.$message.error("录像失败，NX通信异常！");
      }
      this.screenRecordingStatus = !this.screenRecordingStatus;
      this.$store.dispatch("MMCFlightControlCenter/uav/videoTranscribe", {
        playerFormat: this.streamSelect,
        videoID: 1, // 视频通道ID（需保持唯一）
        dbID: "929", // 历史记录id
        name: "z30Pro", // 挂载名称（如果知道挂载名称，将传名称即可，通道号可以不用传）
        taskID: "", // 任务ID，可传可不传
        recordControl: this.screenRecordingStatus, // 录制开关、true为开启
        callback: (isOk) => {
          if (isOk) {
            this.$message.success(
              `${this.screenRecordingStatus ? "开始" : "结束"}录屏`
            );
          } else {
            this.$message.error(`${this.screenRecordingStatus ? "开始" : "结束"}录屏失败`);
            this.screenRecordingStatus = !this.screenRecordingStatus;
          }
        },
      });
    },
    /**
     * 拍照
     */
    async photojz() {
      if (this.healthData.NX.code !== "0x2110000") {
        return this.$message.error("拍照失败，NX通信异常！");
      }
      this.$store.dispatch("MMCFlightControlCenter/uav/takePhotos", {
        playerFormat: this.streamSelect,
        videoID: 1, // 视频通道ID（需保持唯一）
        dbID: "929", // 历史记录id
        name: "z30Pro", // 挂载名称（如果知道挂载名称，将传名称即可，通道号可以不用传）
        taskID: "", // 任务ID，可传可不传
        callback: (isOk) => {
          isOk && this.$message.success(`拍照完成`);
        },
      });
    },
    //游泳识别
    async aiIdentifyType(aiType) {
      const data = {
        hardId: this.device.hardId,
        mqttType: true,
        aiType,
        id: this.device.id,
      };
      this.aiIdentify(data, true);
    },
    async photo() {
      let blob = this.$refs.player.screenShot();
      if (blob) {
        console.log(blob, window.URL.createObjectURL(blob));
        const data = new FormData();
        data.append("addtime", dayjs().format("YYYY-MM-DD HH:mm:ss"));
        data.append("file", blob);
        data.append("hardId", this.device.hardId);
        data.append("name", this.device.name);
        data.append("imageType", 1);
        data.append("sortie", this.flightSortie || "");
        if (this.device?.locationCoordinate3D?.longitude) {
          data.append(
            "longitude",
            this.device?.locationCoordinate3D?.longitude
          );
          data.append("latitude", this.device?.locationCoordinate3D?.latitude);
        }
        const res = await Control_API.addPhoto(data);
        if (res.code === 200) {
          this.$message.success("截屏成功");
        } else {
          this.$message({
            type: "error",
            message: res.msg || "出错了",
            duration: 1000,
          });
        }
      } else {
        this.$message.success("截屏失败");
      }
    },
    // 人脸车牌识别
    handle(command) {
      // this.getcanvas(command);
      this.getcanvasFaceCar(command, this.device.hardId, this.device.id);
    },
    /**
     * 居中
     */
    wrapCenter() {
      console.log(this.$refs.video, "this.$refs.video");
      this.$nextTick(() => {
        let width = this.$refs.video.clientWidth;
        let height = this.$refs.video.clientHeight;
        let fullWidth = window.innerWidth;
        let fullHeight = window.innerHeight - 100;

        let centerX = fullWidth / 2 - width / 2;
        let centerY = fullHeight / 2 - height / 2;
        this.$refs.wrap.setAttribute("data-x", centerX);
        this.$refs.wrap.setAttribute("data-y", centerY);
        this.$refs.wrap.setAttribute(
          "style",
          `transform: translate(${centerX}px, ${centerY}px)`
        );
      });
    },
    /**
     * 挂载镜头控制
     */
    async lensControl(el) {
      // let mountData =this.$store.state.device.move_data
      let { device, mountData } = this;
      // if mountStatus =1 代表启用 屏幕指点功能
      if (
        mountData.mountStatus == 1 &&
        device.hardId == mountData.hardId &&
        mountData.moveType == "wrj"
      ) {
        let evt = window.event || el;
        var div = null;

        if (this.streamSelect == "QINGLIU") {
          // div = document.getElementById("canvas_layer0") ;
          div = document.getElementsByClassName("qingliu")[0];
        } else {
          div = document.getElementsByClassName("vjs-tech")[0];
        }
        let data = {
          x: (evt.offsetX * 1920) / div.offsetWidth - 960,
          y: -((evt.offsetY * 1080) / div.offsetHeight) + 540,
          w: 1920,
          h: 1080,
        };
        let buffer = null;
        // console.log(evt.offsetX,"fndata");
        if (mountData.name == "MMC_Gimbal_Z30Pro") {
          // z30pro
          buffer = await to_moveMount.move_track_focus_ctrl(data.x, data.y);
        } else if (mountData.name == "MMC_Gimbal_Z40S") {
          //z40s
          buffer = await to_moveMount.move_or_focus_ctrl(data);
        } else if (
          mountData.name == "MMC_Gimbal_Z60S" ||
          mountData.name == "MMC_Gimbal_ZT60R"
        ) {
          buffer = await to_moveMount.move_track_focus_ctrl(data.x, data.y, 3);
        } else if (mountData.name == "DJI_H20T") {
          // buffer = await to_moveMount.move_track_focus_ctrl(data.x, data.y, 3);
        } else {
          buffer = await to_moveMount.gcs_click_coordinates(data);
        }
        let mounteList = { data: buffer, ...mountData };
        if (buffer) {
          if (this.device.network === 1) {
            let topic = "PX4/OBTAIN/" + this.device.hardId;
            this.$store.dispatch("MMCMQTT/publish", {
              topic: topic,
              data: {
                type: 514,
                data: {
                  mountId: this.mounteList.mountId,
                  payload: mounteList.data,
                },
              },
              callback() {
                console.log("挂载镜头控制成功");
              },
            });
          } else {
            let sendData = {
              type: 200,
              data: {
                cmdControlType: 7000,
                cmdFunction: null,
                cmdState: null,
                cmdValue: null,
                cmdBuffer: mounteList.data.join(","),
                cmdName: mounteList.name,
              },
              deviceHardId: mounteList.hardId,
            };
            this.$store.dispatch("MMCGroundStation/publish", sendData);
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.video-wrap {
  z-index: 1;
  width: 718px;
  height: 450px;
  position: absolute;
  left: 35%;
  top: 20%;
}
.noStyle {
  opacity: 0.3;
}
.cpt_video {
  border: 1px solid #fff;
  width: 100%;
  height: 100%;
  background: #333;

  .video {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    .name {
      position: absolute;
      top: 0;
      left: 0;
      // width: 122px;
      height: 26px;
      border-radius: 1px;
      line-height: 26px;
      text-align: center;
      font-size: 16px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #69ceff;
      background: rgba(0, 0, 0, 0.4);
    }
    .type {
      position: absolute;
      top: 0;
      right: 112px;
      width: 56px;
      height: 26px;
      text-align: center;
      line-height: 26px;
      background: #fc8959;
      border-radius: 13px;
      opacity: 0.58;
      backdrop-filter: blur(6.7px);
      font-size: 16px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #ffffff;
    }
    .types {
      position: absolute;
      top: 0;
      right: 50px;
      width: 56px;
      height: 26px;
      text-align: center;
      line-height: 26px;
      background: #4d9dff;
      border-radius: 13px;
      opacity: 0.58;
      backdrop-filter: blur(6.67px);
      font-size: 16px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #ffffff;
    }
    .close {
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
      width: 46px;
      height: 26px;
      text-align: center;
      line-height: 26px;
      background: #000000;
      border-radius: 1px;
      opacity: 0.6;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #ffffff;
    }
  }
  .info {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    padding: 0 10px;
    padding-top: 30px;
    height: calc(100% - 75px);
    background: rgba($color: #000000, $alpha: 0.6);
    .de {
      margin-top: 8px;
      display: flex;
      color: #fff;
      font-size: 14px;
      .detail {
        margin-left: 8px;
      }
    }
  }
  .bottom-menu {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 46px;
    background: #000000;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .play_ymzw {
      opacity: 0.5;
    }
    .menu-item {
      cursor: pointer;
    }
    .left {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-left: 10px;
    }
    ::v-deep .right {
      display: flex;
      align-items: center;
      gap: 20px;
      color: #fff;
      padding-right: 20px;

      .search {
        display: flex;
        gap: 20px;
        .video_type {
          width: 96px;
          height: 26px;
        }
        .big_type {
          width: 70px;
          height: 26px;
        }
        .el-input--suffix {
          width: 100%;
          height: 100%;
          .el-input__inner {
            width: 100%;
            height: 100%;
          }
        }
        .el-input__suffix {
          display: flex;
          align-items: center;
        }

        .el-input__inner {
          background-color: #02173d;
          color: #00aacb;
          border: 1px solid #2b56b7;
        }
      }
    }
  }
}
.big_01 {
  width: 416px;
  height: 274px;
}
.big_03 {
  width: 1000px;
  height: 600px;
}
.big_04 {
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
}
.ai {
  bottom: 53%;
  z-index: 1;
}
.plate {
  bottom: 80%;
  z-index: 1;
}
.record {
  bottom: 71%;
  z-index: 1;
}
.photojz {
  bottom: 62%;
  z-index: 1;
  img {
    width: 36px;
    height: 36px;
  }
}
.point {
  // width: 50px;
  // height: 50px;
  // // padding: 10px 5px;
  // background: rgba(9, 32, 87, 0.7);
  // border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transform: scale(0.76);
  bottom: 43.4%;
  border-radius: 19px;
}

.full-video ::v-deep {
  transform: none !important;
  .interact-wrap {
    transform: translate(0px, -30px) !important;
  }
  .interact_wrap_full {
    transform: translate(0px, -144px) !important;
  }
  .cpt_video {
    // margin-top: 150px;
    position: relative;
    left: 0;
    top: 0;
    width: 100vw;
    // height: calc(100vh - 70px);
    height: 100vw;
    z-index: 0 !important;
  }
}
.modelStyle {
  bottom: 15px;
  right: 28px;
  z-index: 3;
  font-size: 13px;
}
// position: relative;
.faceAndcar {
  z-index: 1;
  width: 59px;
  bottom: 60%;
  display: flex;
  justify-content: space-between;
  .plan {
    // margin-right: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    // padding: 0 5px;
    background: rgba(9, 32, 87, 0.7);
  }
  .img_src {
    background: rgba(9, 32, 87, 0.7);
    width: 35px;
    height: 35px;
  }
}
.kedu {
  z-index: 1001;
  top: calc(50% - 25%);
  left: calc(50% - 25%);
  width: 50%;
  height: 50%;
  position: absolute;
  // background: yellow;
  background: url("~./assets/images/line.png");
  background-size: 100% 100%;
  transition: 0.5s;

  // overflow-y: hidden;
  .num {
    position: absolute;
    left: -30px;
    z-index: 1002;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .line {
    // transform: translateY(-250px);
    position: absolute;
    bottom: calc(50%);
    width: 100%;
    height: 100%;
  }
  .longLine {
    position: absolute;
    // top: calc(50% - 25px);
    // left: calc(50% - 25px);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    img {
      width: 100%;
    }
  }
  .text {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% + 25px);
    width: 75px;
    height: 25px;
    background: url("~./assets/images/textbg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 25px;
    color: red;
    font-weight: bold;
  }
  .center {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
  }
}
.iconBG {
  right: 300px;
  height: 35px !important;
  padding-top: 5px;
  position: fixed;
  bottom: 50%;
  padding-top: 5px;
  border-radius: 20px;
  width: 80px;
  display: flex;
  justify-content: space-evenly;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background: #409eff;
  .reset {
    width: 18px;
    height: 18px;
    margin-top: 7px;
    // background: url("./img/img3.png");
    // background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-left: 0px;
  }
  .infop {
    width: 20px;
    height: 20px;
    z-index: 4;
    margin-left: 0px;
    margin-top: 7px;
    background: url("./assets/images/info.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat;
  }
  .infop:hover {
    transform: scale(1.2);
  }
  .reset:hover {
    transform: scale(1.2);
  }
}
.info_isStatus {
  position: fixed;
  top: 20%;
  left: 32%;
  display: flex;
  background: rgba(9, 32, 87, 0.7);
  border-radius: 10px 10px 0 0;
  flex-direction: column;
  .title_box {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    background: linear-gradient(
      180deg,
      #9198ff 0%,
      rgba(45, 81, 153, 0.45) 40%,
      #05091a 100%
    );
    box-shadow: inset 0px 0px 10px 2px #3f9dff;
    border-radius: 10px 10px 0px 0px;
    border: 1px solid #427dff;

    .title {
      display: flex;
      align-items: center;
      .font {
        font-size: 20px;
        font-family: YouSheBiaoTiHei;
        color: #14faff;
        line-height: 26px;
        text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
        background: linear-gradient(
          135deg,
          #e3aa77 0%,
          #f5cda9 38%,
          #f9ecd3 58%,
          #fcdbb1 79%,
          #edb07a 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .icon-box {
      display: flex;
      align-items: center;
      cursor: pointer;

      .iconfont {
        font-size: 18px;
        color: #00ffff;
        margin-right: 4px;
      }

      .icon-text {
        font-family: MicrosoftYaHeiUI;
        font-size: 14px;
        color: #ccedff;
        font-weight: 400;
      }
    }
  }
  .content {
    padding: 16px;
    .de {
      margin-top: 8px;
      display: flex;
      color: #fff;
      font-size: 14px;
      .detail {
        margin-left: 8px;
      }
    }
  }
}

.right-menu {
  position: absolute;
  right: 10px;
  top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .menu-item {
    position: relative;
    cursor: pointer;
    width: 36px;
    > img {
      width: 100%;
    }

    .ai-list ::v-deep {
      z-index: 1;
      position: absolute;
      left: -124px;
      top: 0;
      width: 120px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .ai-item {
        cursor: pointer;
        width: 35px;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #02173d;
        color: #00aacb;
        border: 1px solid #2b56b7;
      }
    }
  }
}
</style>
