<template>
  <div class="cpt-observe-mspace-dashboard" :class="{ collapse }">
    <div class="hd-title" @click="collapse = !collapse">
      <!-- <el-select
            class="search-input"
            v-model="typeNet"
            clearable
            placeholder=""
            @change="onchange"
          >
            <el-option label="1.4G" :value="1"> </el-option>
            <el-option label="5G/4G" :value="2"> </el-option>
            <el-option label="自动" :value="0"> </el-option>
          </el-select> -->
      <div class="w230 dib tc">
        <div :title="title" class="hd-title_tc  w230">
          {{ title || "入云龙001" }}  
        </div>
      </div>
    </div>
     <span
      class="ml14 cp cfc iconfont pa top20 "
      style="z-index:20;left:55%"
      :class="flag ? 'icon-jiesuo2' : 'icon-jiesuosuozhu'"
      @click="flag = !flag"
    />
    <Stat :data="stat" />
    <div class="bd-content">
      <Battery :data="battery" />
      <Speed :data="speed" />
      <Pitchyaw :data="pitchyaw" />
      <Airway :async_airway_drd="async_airway_drd" @upload-airway="(args) => $emit('upload-airway', args)"
        @fn="(e) => $emit('fn', e)" />
      <Control :flag='flag' :uavcontrol='uavcontrol'  @fn="(e) => $emit('fn', e)" />
      <Mount @change="(e)=>$emit('change', e)" :mounts='mounts'></Mount>
      <!-- {{mounts}} -->
    </div>
  </div>
</template>

<script>
  import Stat from "./stat";
  import Battery from "./battery";
  import Speed from "./speed";
  import Pitchyaw from "./pitchyaw";
  import Prevent from "./prevent";
  import Airway from "./airway";
  import Control from "./control";
  import Mount from "./mount";
  export default {
    props: {
      data: {
        type: Object,
        default: () => ({}),
      },
      batteryData: {
        type: Object,
        default: () => ({}),
      },
      title: {
        type: String,
        default: "",
      },
      async_airway_drd: {
        type: Function,
        default: () => () => { },
      },
      uavcontrol:{
        type:Object,
        default: () => ({}),

      },
      mounts: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        collapse: true,
        flag:false,
        typeNet: 0,
      };
    },
    mounted() {
      setTimeout(() => (this.collapse = false), 10);
    },
    components: {
      Stat,
      Battery,
      Speed,
      Pitchyaw,
      Prevent,
      Airway,
      Control,
      Mount,
    },
    computed: {
      stat() {
        let { data } = this;
        return {
          altitude: data && data.gps ? data.gps.absoluteAlt : 0,
          height: data && data.gps ? data.gps.relativeAlt : 0,
          flyTime: data ? ((data.flyTime || 0.1) / 1000).toFixed(2) : 0,
          flyDistance: data ? data.flyDistance : 0,
          distanceToHome: data ? data.distanceToHome : 0,
        };
      },
      battery() {
        return this.batteryData;
      },
      speed() {
        let { data } = this;
        return {
          airSpeed: data ? data.airspeed : 0,
          groundSpeed: data ? data.groundSpeed : 0,
        };
      },
      height() {
        let { data } = this;
        return {
          altitude: data && data.gps ? Math.abs(data.gps.absoluteAlt) : 0,
          height: data && data.gps ? Math.abs(data.gps.relativeAlt) : 0,
        };
      },
      pitchyaw() {
        let { data } = this;
        return {
          yaw: data && data.attitude ? data.attitude.yaw : 0,
          roll: data && data.attitude ? data.attitude.roll : 0,
          pitch: data && data.attitude ? data.attitude.pitch : 0,
          climbRate: data ? data.velocityZ : 0,
        };
      },
    },
    methods:{
      onchange(val){
        let data = {
          data: val,
          type:770
        }
        this.$emit('fn',data)
      }
    }
  };
</script>

<style lang="scss" scoped>
  .cpt-observe-mspace-dashboard {
    background: url("~mmc/assets/images/observe/home/dashboardv3.png") no-repeat;
    background-size: 100% 100%;
    height: 269px;
    position: absolute;
    bottom: -10px;
    left: 510px;
    transform: translateY(0);
    transition: 0.3s;

    &.collapse {
      transform: translateY(calc(100% - 50px));
    }

    .hd-title {
      font-family: Microsoft YaHei Bold;
      font-size: 16px;
      color: #3df1ff;
      letter-spacing: 1px;
      text-align: center;
      text-shadow: 0 2px 8px #0067ff;
      font-weight: 700;
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;

      .hd-title_tc {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .bd-content {
      height: calc(100% - 50px - 45px - 10px);
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
    }
  }
</style>