<template>
  <div class="panel-box panel-left">
    <view-title height="50%" title="无人机信息">
      <!-- <model-collada
        @load="onLoad"
        src="src/assets/images/uav-model.dae"
        :rotation="rotation"
        :position="position"
        :height="100"
        :lights="lights"
        :backgroundAlpha="0"
        :controls-options="{
          enableRotate: true,  // 是否可旋转
          enableZoom: false,    // 是否可缩放
          enablePan: false      // 是否可移动（鼠标右键可以移动模型）
}"
      /> -->
    </view-title>
    <view-title height="50%" title="无人机实时状态">
      <!-- 内容区 -->
      <div class="contain-grid">
        <div v-for="item in gridItems" :key="item.id" class="grid-item">
          <div class="grid-item-content">{{ item.content }}</div>
          <div class="grid-item-footer">{{ item.footer }} <span class="unit-name">{{ item.unit }}</span></div>
        </div>
      </div>
    </view-title>

  </div>

</template>

<script setup>
import { ViewTitle } from "@/views/components/map";
import { ModelCollada } from "vue-3d-model";
// import { ModelCollada } from 'vue-3d-model';

// 定义数据
const gridItems = [
  { id: 1, content: '-20', footer: '经度',unit:'(°)' },
  { id: 2, content: '20', footer: '纬度' ,unit:'(°)'},
  { id: 3, content: '20', footer: '高度' ,unit:'(m)'},
  { id: 4, content: '20', footer: '偏航角' ,unit:'(°)'},
  { id: 5, content: '20', footer: '俯仰角',unit:'(°)' },
  { id: 6, content: '20', footer: '滚转角',unit:'(°)' },
  { id: 7, content: '20', footer: '速度',unit:'km/h' },
  { id: 8, content: '20', footer: '电池电量',unit:''},

]


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

function rotate() {
  requestAnimationFrame(rotate);
  rotation.y += 0.01;
}
const rotation = reactive({
  x: 0.5,
  y: 0,
  z: 0,
});
const position = {
  x: 0,
  y: 0,
  z: 0,
};

const lights = [
  {
    type: "HemisphereLight",
    position: { x: 0, y: 15, z: 50},
    skyColor: 0xffd700,
    groundColor: 0xffd700,
    intensity: 0.2,
  },
  {
    type: "DirectionalLight",
    position: { x: 0.2, y: 20, z: 1},
    color: 0xffffff,
    intensity: 0.8,
  },
];
</script>

<style lang="scss" scoped >
.panel-left {
  display: flex;
  flex-direction: column;
}

.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-weight: bold;
  }
  .grid-item-footer{
    font-size: 15px;
    color: #FFFFFF;
  }
  .unit-name{
    font-size: 13px;
    color: #A2CBEA;
  }
}
.contain-foot{
  padding: .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>
