<template>
  <div class="page-observe-fckernel-uav">
    <Header
      :uav-data="uav.control.data"
    ></Header>
    <div class="fckernelVideos_leftBox">
      <div class="dib wih100 h54">
        <img class="dib wih100 h54" src="~mmc/assets/images/observe/fckernel/titelefkvideos.png" alt />
      </div>
      <div class="uav-search">
        <el-input
          class="uav-search__input"
          clearable
          placeholder="请输入无人机名称/机构名称"
          v-model="uavSearchContent"
          v-on:keyup.enter.native="onUavSearch"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            style="color: rgba(123, 181, 213, 1);"
          ></i>
        </el-input>
        <el-button class="uav-search__btn" @click="onUavSearch">搜索</el-button>
      </div>
      <div class="uav-search">
        <el-input class="uav-search__input" clearable="" placeholder="请输入无人机名称/机构名称" v-model="uavSearchContent" v-on:keyup.enter.native="onUavSearch">
          <i slot="suffix" class="el-input__icon el-icon-search" style="color: rgba(123, 181, 213, 1);"></i>
        </el-input>
        <el-button class="uav-search__btn" @click="onUavSearch">搜索</el-button>
      </div>
      <UavList
        @videoChange="videoChange"
        :containerStyle="{
          width: '463',
          height: '538',
        }"
        :list="uav.list"
        @fn="uav_fn"
        style="box-sizing: border-box; padding-left: 10px;"
        @refresh="onUavSearch"
      />
      <pitchyaw :uav-data="uav.control.data" class="pitchyaw w429 ml16"></pitchyaw>
    </div>
    <!-- videoFlag &&  -->
    <div v-if="uav.videos.length > 0" class="videoBox">
      <FloatPlayer
        class="player"
        :device="uav.control.device"
        v-for="(video, index) in uav.videos"
        :uav-data="uav.control.data"
        :key="index"
        :data="video"
      />
    </div>

    <!-- 接管记录 -->
    <TakeOver @exit="uav.TakeOverFlag = false" v-if="uav.TakeOverFlag"></TakeOver>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UavList from "./components/list";
import FloatPlayer from "./components/float-playerfk";
import data from "./data";
import methods from "./methods";
import Header from "./components/header/index";
import TakeOver from "./components/takeOver";
import pitchyaw from "./components/pitchyaw";

console.log('data', data())

export default {
  components: {
    UavList,
    FloatPlayer,
    Header,
    TakeOver,
    pitchyaw,
  },
  inject: ["g_cesium_layer"],
  provide() {
    return {
      uav_This: this,
      findList: (search) => {
        if (search) {
          this.uav_list(search);
        } else {
          this.uav_list(search);
          // this.uav_mountList(data.name);
        }
      },
    };
  },
  data() {
    return {
      ...data(),
      videoFlag: true,
      uavSearchContent: "", //无人机搜索内容
    };
  },

  computed: {
    ...mapGetters(["user_info"]),

    uav_mounts() {
      let { mounts } = this.uav.control;
      return mounts
        .map((item) => {
          let find_item = this.mount.list.find(
            (m) => m.name === item.gimbalName
          );
          return find_item || undefined;
        })
        .filter((item) => item);
    },
  },
  mounted() {
    document.title = "视频墙";
    this.uav_list();
    this.$store.commit("mapmanage/SET_MAP_IS_STATUSl", {
      flag: true,
      type: "fkVideo",
    });
    this.mqtt_init();
  },
  beforeDestroy() {
    this.uav.control.device = null;
    this.uav.control.device = null;
    this.uav.control.data = null;
    this.uav.control.battery = null;
    this.uav.control.mount = null;
    this.uav.control.mounts = [];
    this.uav.control.mounts = [];
    this.$store.commit("mapmanage/SET_MAP_IS_STATUSl", {
      flag: false,
      type: "fkVideo",
    });
    this.uav.videos = [];
    if (this.mqtt.client) {
      this.mqtt.client.end();
      this.mqtt.client = null;
    }
  },
  methods: {
    ...methods,
    cesium_layer_change_mode(fn, modes) {
      // fn(modes.GLOBE);
      window.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          120.218241,
          33.165767,
          21812.321476599747
        ),
        orientation: {
          heading: 0.006918732929549698,
          pitch: -0.6928665494487145,
          roll: 7.638334409421077e-14,
        },
        time: 5,
      });
    },
    videoChange() {
      this.videoFlag = !this.videoFlag;
    },
    /**
     * 无人机搜索
     */
    onUavSearch() {
      this.uav_list({
        search: this.uavSearchContent,
      });
    },
  },

  inject: ["g_cesium_layer"],
};
</script>

<style lang="scss" scoped>
.page-observe-fckernel-uav {
  height: 100%;

  .fckernelVideos_leftBox {
    background-image: linear-gradient(180deg, #1e4d8a 0%, #132148 100%);
    border: 1px solid #70daf9;
    position: fixed;
    height: calc(100% - 57px);
    top: 70px;
    left: 0;
    z-index: 10;
    .pitchyaw {
      position: fixed;
      top: 57%;
    }
  }

  .videoBox {
    width: calc(100% - 465px);
    margin-left: 465px;
    position: fixed;
    top: 65px;
    padding-bottom: 10px;
    z-index: 1;
    height: calc(100vh - 80px);
    display: flex;
    flex-wrap: wrap;

    &::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, 0);
      height: 100%;
      width: 2px;
      background-color: #fff;
      z-index: 1;
    }

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      height: 2px;
      width: 100%;
      background-color: #fff;
      z-index: 1;
    }

    .player {
      flex-grow: 0;
      flex-basis: 50%;
      position: relative;
      transform: translateY(3px) !important;
      overflow: hidden;

      &::v-deep {
        .qingliu {
          left: -144px;
          top: -43px;

          canvas {
            width: initial !important;
          }
        }

        .livenvr-player {
          width: 890px;
          transform: translateX(-70px);
        }
      }
    }
  }

  .uav-search {
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;

    .uav-search__input ::v-deep {
      width: 317px;
      height: 32px;
      box-shadow: 0px 2px 4px 0px rgba(28, 94, 124, 0.5),
        inset 0px 0px 3px 0px #00b6ff;
      border-radius: 4px;

      .el-input__icon {
        line-height: 32px;
      }

      input {
        height: 32px;
        background: rgba(0, 0, 0, 0);
        color: #43deff;
        border: 1px solid #00b6ff;

        &::placeholder {
          font-size: 12px;
          color: #7bb5d5;
        }
      }
    }

    .uav-search__btn {
      padding: 7px 27px 9px 28px;
      background: rgba(23, 70, 216, 0.2);
      box-shadow: 0px 2px 4px 0px rgba(23, 33, 60, 0.5),
        inset 0px 0px 16px 0px rgba(33, 137, 255, 0.4),
        inset 0px 0px 4px 0px #00a7ff;
      border-radius: 4px;
      border: 1px solid;
      font-size: 12px;
      color: #00ffff;
    }
  }
}
</style>