<template>
  <!-- 清流融合 -->
  <div id="uavPlayerWrap" class="player" :class="big" v-interact>
    <div ref="video" class="video-wrap" @dblclick="screen">
      <div class="cpt_video" @click="lensControl" v-if="showPlayer">
        <Obstacle v-if="!isStatus"></Obstacle>
        <div class="video">
          <div class="name" v-clipboard:copy="vUrl.vUrl">{{ uav.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
          id="uavPlayer"
          :is="playerCom"
          :smallFPV="smallFPV"
          :isStatus="isStatus"
          ref="player"
          :LivePlayerInfor="false"
          :fpvUrl="fpvUrl"
          :data="vUrl"
          :device="uav"
          :controls="false"
          :className="'fkLivePlayer'"
          :infoflag="infoflag"
          :deviceName="uav.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"
          v-interact
        >
          <div class="title_box">
            <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="infop" @click="getInfo" alt />
          <div
            :class="type == 4 ? 'right17' : 'right23'"
            class="reset 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 menu-item" @click="reset"></div>
            <!-- FPV切换 -->
            <el-tooltip content="模式切换" placement="bottom">
              <div
                v-if="streamSelect.toUpperCase() !== 'QINGLIU'"
                class="iconfont icon-moshiqiehuan modelStyle menu-item"
                @click="change"
              ></div>
            </el-tooltip>
            <div class="pointer iconfont icon-quanping menu-item" @click="screen" v-if="!isStatus"></div>
          </div>
        </div>

        <div class="right-menu">
          <template v-if="uav.network === 2">
            <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>
          <AiList ref="aiList" @screenShot="onAiScreenShot"></AiList>
          <div class="menu-item" @click="startLinePoint" content="航点动作">
            <img src="./assets/images/point_small.svg" />
          </div>
        </div>
      </div>
      <PointList
        :uavRealTimeData="uavRealTimeData"
        :mountData="selectMount"
        v-if="showFlywayAction"
        @close="showFlywayAction = false"
        @dblclick.native.stop
      ></PointList>
    </div>
  </div>
</template>

<script>
import { ViewLibrary } from "../../../../api";
import dayjs from "dayjs";
import LiveNVRPlayer from "./components/livenvr/index.vue";
import QingLiuPlayer from "./components/qingliu";
import SRSPlayer from "./components/srs";
import { to_moveMount } from "../../../../utils/to_moveMount.js";
import Obstacle from "./components/obstacle";
import PointList from "./components/pointList";
import videoModelChange from "./components/videoModelChange";
import { mapState } from "vuex";
import AiList from "./components/aiList";

export default {
  name: "Player",
  components: {
    QingLiuPlayer,
    LiveNVRPlayer,
    PointList,
    Obstacle,
    SRSPlayer,
    videoModelChange,
    AiList,
  },
  inject: ["bus"],
  props: {},
  data() {
    return {
      backgroundStyle: {
        "background-position-y": 0,
      },
      ygisCenterFlag: false,
      ygValue: null,

      showCenter: false, //开启瞄准
      screenRecordingStatus: false, //是否录制中
      showInfo: false, //清流视频信息展示
      infoData: null, //清流信息
      raw_msg: 0,
      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,
      showFlywayAction: false, //显示航点动作
      aiTimeHandle: null, //ai执行定时句柄
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uav", [
      "uav",
      "selectMount",
      "isQingLiu",
      "airlineData",
    ]),
    /**
     * 播放器组件名
     */
    playerCom() {
      if (this.streamSelect) {
        if (this.vUrl.vUrl?.toLowerCase().includes("pzsp://")) {
          return "QingLiuPlayer";
        } else if (this.vUrl.vUrl?.toLowerCase().includes("srs://")) {
          return "SRSPlayer";
        } else {
          return "LiveNVRPlayer";
        }
      } else {
        return "LiveNVRPlayer";
      }
    },
    /**
     * 流类型名
     */
    streamName() {
      let find = this.streamOptions.find((item) => {
        return item.value === this.streamSelect;
      });
      return find?.label || "";
    },

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

      return name;
    },
    /**
     * 流选项
     * @returns [{
          value: "RTC",
          label: "低延迟"
        }]
     */
    streamOptions() {
      let streamOptions = [];
      let streamConfiguration = this.uav?.streamConfiguration.find(
        (item) => item.urlType === 0
      );

      if (streamConfiguration?.fluencyUrl) {
        // 流畅地址
        streamOptions.push({
          label: "流畅",
          value: "FLV",
          url: streamConfiguration?.fluencyUrl,
        });
      }

      if (streamConfiguration?.lowLatencyUrl) {
        // 低延迟地址
        streamOptions.push({
          label: "低延迟",
          value: "WEBRTC",
          url: streamConfiguration?.lowLatencyUrl,
        });
      }

      if (streamConfiguration?.originalUrl) {
        // 原画地址
        streamOptions.push({
          label: "原画",
          value: "QINGLIU",
          url: streamConfiguration?.originalUrl,
        });
      }
      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: {
    playerCom: {
      immediate: true,
      handler(newVal) {
        if (newVal === "QingLiuPlayer") {
          this.$store.commit("MMCFlightControlCenter/uav/setState", {
            key: "isQingLiu",
            value: true,
          });
        } else {
          this.$store.commit("MMCFlightControlCenter/uav/setState", {
            key: "isQingLiu",
            value: false,
          });
        }
      },
    },
    "uavRealTimeData.airlineProgress": {
      handler(newVal, oldVal) {
        //获取当前航线航点的ai, 进行ai操作
        if (newVal?.waypointIndex === oldVal?.waypointIndex) {
          return;
        }
        //清除上一个航点的执行定时器
        clearInterval(this.aiTimeHandle);

        let find = this.airlineData?.linePointSaveReqVOS?.find(
          (item, i) => i === newVal.waypointIndex
        );
        if (find) {
          let singleList = find.pointDetectorSaveReqVOS.filter(
            (item) => item.detectorValue === 0
          ); //汇总单点
          let manyList = find.pointDetectorSaveReqVOS.filter(
            (item) => item.detectorValue === 1
          ); //汇总多次

          //执行单点
          this.$nextTick(() => {
            singleList.forEach((item) => {
              this.$refs.aiList.aiIdentify(item.id);
            });
          });
          //定时执行
          this.aiTimeHandle = setInterval(() => {
            manyList?.forEach((item) => {
              this.$refs.aiList.aiIdentify(item.id);
            });
          }, 3000);
        }
      },
    },
    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,
    },
    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);
    clearInterval(this.aiTimeHandle);
  },
  methods: {
    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("当前高度不可创建航点动作！");
        this.$message.warning("当前高度创建航点动作可能不安全！");
        this.showFlywayAction = true;
      }
    },
    showCenterFn() {
      this.showCenter = !this.showCenter;
    },
    async VideoModelChange() {
      let res = await API.FCKERNEL.checkUseOperate({
        deviceId: this.uav.deviceId,
      });
      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.uav.deviceId);
    },
    //人流密度
    async frame() {
      this.flow(this.uav.deviceId);
    },
    /**
     * 截图
     */
    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", {
        isQingLiu: this.isQingLiu,
        videoID: 1, // 视频通道ID（需保持唯一）
        /*  dbID: "929", // 历史记录id
        name: "z30Pro", // 挂载名称（如果知道挂载名称，将传名称即可，通道号可以不用传）
        taskID: "", // 任务ID，可传可不传 */
        callback: (isOk) => {
          isOk && this.$message.success(`拍照完成`);
        },
      });
    },
    async photo() {
      let blob = this.$refs.player.screenShot();
      if (blob) {
        console.log(blob, window.URL.createObjectURL(blob));
        let formData = new FormData();
        formData.append("file", blob, `截图.jpeg`);
        let uploadRes = await ViewLibrary.uploadFile(formData);

        if (uploadRes.code === 0) {
          let res = await ViewLibrary.create({
            fileUrl: uploadRes.data,
            fileType: 0,
            deviceId: this.uav.deviceId,
          });
          if (res.code === 0) {
            this.$message.success("截屏成功");
          } else {
            this.$message.error(res.msg || "截屏失败");
          }
        } else {
          this.$message.error(uploadRes.msg || "截屏失败");
        }
        return;
      }
      this.$message.warning("截屏失败");
    },
    // 人脸车牌识别
    handle(command) {
      // this.getcanvas(command);
      this.getcanvasFaceCar(command, this.uav.deviceId, this.uav.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 { mountData } = this;
      // if mountStatus =1 代表启用 屏幕指点功能
      if (
        mountData.mountStatus == 1 &&
        this.uav.deviceId == mountData.deviceId &&
        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.uav.network === 2) {
            let topic = "PX4/OBTAIN/" + this.uav.deviceId;
            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.deviceId,
            };
            this.$store.dispatch("MMCGroundStation/publish", sendData);
          }
        }
      }
    },
    /**
     * ai截图事件
     */
    onAiScreenShot({ callback }) {
      let blob = this.$refs.player.screenShot();
      callback(blob);
    },
  },
};
</script>

<style lang="scss" scoped>
.player {
  z-index: 1;
  position: absolute;
  left: 35%;
  top: 20%;
  width: 718px;
  height: 450px;
}
.video-wrap {
  width: 100%;
  height: 100%;
}
.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::v-deep {
    z-index: 1;
    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;
    }
    .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::v-deep {
  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%;
    }
  }
}
</style>
