<template>
  <div class="panel-box panel-left">
    <view-title height="50%" title="无人机信息">
      <div class="uav-data">
        <div class="uav-name">
          云航低空研训基地
          <div class="uav-state">待命</div>
        </div>
        <div class="uav-model">
          <div class="uav-model3d">
            <vue3dLoader
              :width="200"
              :height="200"
              :showFps="false"
              filePath="https://data.mars3d.cn/gltf/mars/wrj.glb"
              :backgroundAlpha="0"
              @load="onLoad()"
              :lights="lights"
              :cameraPosition="{ x: 1500, y: 1000, z: 500 }"
              :rotation="rotation"
            ></vue3dLoader>
          </div>
          <div class="model-bg"></div>
        </div>
        <div class="model-btn">
          <div class="active-btn">接管控制</div>
          <div>开始共享</div>
        </div>
      </div>
      <div class="uav-value">
        <div class="value-item">
          <div class="value-image">
            <img src="/src/assets/images/uav-value-icon1.png" alt="" />
          </div>
          <div class="value-data">
            <div class="data-name">站点编号</div>
            <div class="data-number">SKDIFISIA</div>
          </div>
        </div>
        <div class="value-item">
          <div class="value-image">
            <img src="/src/assets/images/uav-value-icon2.png" alt="" />
          </div>
          <div class="value-data">
            <div class="data-name">无人机编号</div>
            <div class="data-number">SJDJFKWKA</div>
          </div>
        </div>
        <div class="value-item">
          <div class="value-image">
            <img src="/src/assets/images/uav-value-icon3.png" alt="" />
          </div>
          <div class="value-data">
            <div class="data-name">型号</div>
            <div class="data-number">SKDIFISIA</div>
          </div>
        </div>
        <div class="value-item">
          <div class="value-image">
            <img src="/src/assets/images/uav-value-icon4.png" alt="" />
          </div>
          <div class="value-data">
            <div class="data-name">无人机状态</div>
            <div class="data-number" style="color: #13e052">在线</div>
          </div>
        </div>
      </div>
    </view-title>
    <view-title height="50%" title="无人机实时状态">
      <!-- 内容区 -->
      <div class="contain-grid">
        <div class="grid-item">
          <div class="grid-item-content">
            {{ uavStore.params.lng.toFixed(3) }}
          </div>
          <div class="grid-item-footer">
            经度 <span class="unit-name">(°)</span>
          </div>
        </div>
        <div class="grid-item">
          <div class="grid-item-content">
            {{ uavStore.params.lat.toFixed(3) }}
          </div>
          <div class="grid-item-footer">
            纬度 <span class="unit-name">(°)</span>
          </div>
        </div>
        <div class="grid-item">
          <div class="grid-item-content">
            {{ uavStore.params.altitude.toFixed(2) }}
          </div>
          <div class="grid-item-footer">
            高度 <span class="unit-name">(m)</span>
          </div>
        </div>
        <div class="grid-item">
          <div class="grid-item-content">
            {{ uavStore.params.heading.toFixed(2) }}
          </div>
          <div class="grid-item-footer">
            偏航角 <span class="unit-name">(°)</span>
          </div>
        </div>
        <div class="grid-item">
          <div class="grid-item-content">
            {{ uavStore.params.pitch.toFixed(2) }}
          </div>
          <div class="grid-item-footer">
            俯仰角 <span class="unit-name">(°)</span>
          </div>
        </div>
        <div class="grid-item">
          <div class="grid-item-content">
            {{ uavStore.params.roll.toFixed(2) }}
          </div>
          <div class="grid-item-footer">
            滚转角 <span class="unit-name">(°)</span>
          </div>
        </div>
        <div class="grid-item">
          <div class="grid-item-content">{{ uavStore.params.speed }}</div>
          <div class="grid-item-footer">
            速度 <span class="unit-name">km/h</span>
          </div>
        </div>
        <div class="grid-item">
          <div class="grid-item-content">100</div>
          <div class="grid-item-footer">
            电池电量 <span class="unit-name">%</span>
          </div>
        </div>
      </div>
    </view-title>
  </div>
</template>

<script setup>
import { ViewTitle } from "@/views/components/map";
import { vue3dLoader } from "vue-3d-loader";
import useUavStore from "@/store/modules/uav";
const uavStore = useUavStore();
const lights = ref();
lights.value = [
  {
    type: "AmbientLight",
    color: "#fff",
  },
];
const rotation = reactive({
  x: 0,
  y: 0,
  z: 0,
});

const onLoad = () => {
  rotate();
};

function rotate() {
  requestAnimationFrame(rotate);
  rotation.y -= 0.01;
}
</script>

<style lang="scss" scoped>
.panel-left {
  display: flex;
  flex-direction: column;
}
.uav-data {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.uav-name {
  position: relative;
  text-align: center;
  width: 195px;
  padding: 8px 0;
  font-size: 18px;
  color: #ffffff;
  font-weight: 400;
  background: url("../../../assets/images/introduce-cell-bg.png");
  background-size: 100% 100%;
  .uav-state {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -28px;
    font-size: 12px;
    color: #43ffad;
    width: 45px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    background: url("../../../assets/images/uav-state-bg.png");
    background-size: 100% 100%;
  }
}
.uav-model {
  position: relative;
  margin-top: 50px;
  width: 243px;
  height: 92px;

  background: url("../../../assets/images/uav-model-bg.png");
  background-size: 100% 100%;
  .uav-model3d {
    position: absolute;
    top: -110px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.model-btn {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 15px;
  & > div {
    cursor: pointer;
    height: 30px;
    width: 115px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    background: url("../../../assets/images/dafault-uav.png");
    background-size: 100% 100%;
    color: #86e0ff;
  }
  .active-btn {
    background: url("../../../assets/images/active-uav.png");
    background-size: 100% 100%;
    color: #f6f3f4;
  }
}
.uav-value {
  margin-top: 20px;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  .value-item {
    display: flex;
    align-items: center;
    height: 65px;
    gap: 6px;
    .value-image {
      position: relative;
      width: 57px;
      height: 35px;
      background: url("../../../assets/images/uav-value-bg.png");
      background-size: 100% 100%;
      img {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 25px;
        height: 21px;
      }
    }
    .data-name {
      font-size: 16px;
      color: #d2f3ff;
    }
    .data-number {
      font-size: 16px;
      color: #ffffff;
    }
  }
}

.contain-grid {
  height: 100%;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: url("../../../assets/images/state-bg.png");
  background-size: 100% 100%;
  .grid-item-content {
    font-size: 30px;
    color: #fff;
    font-family: "DINCondensed-Bold";
    font-weight: bold;
  }
  .grid-item-footer {
    font-size: 15px;
    color: #ffffff;
  }
  .unit-name {
    font-size: 13px;
    color: #a2cbea;
  }
}
.contain-foot {
  padding: 0.3rem 1rem;
  position: absolute;
  width: 79%;
  margin-left: -4.4%;
  background-color: #05192a;
  bottom: 2.4%;
  display: flex;
  justify-content: space-between;
}
.itemone {
  display: flex;
}
.itemone span:first-child {
  color: #bcdefc;
}
</style>
