<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-15 14:26:52
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2025-01-02 14:46:48
 * @FilePath: src/views/screen/components/dataManagement/Drone.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div class="containers">
    <div class="status">
      <span>
        <el-badge is-dot class="item" type="primary" style="margin-top: 8px;">
          </el-badge>
         总数：{{data.length > 0 ?  data[0].totalNum : 0}}
       </span>
      <span>
         <el-badge is-dot class="item" type="success" style="margin-top: 8px;">
          </el-badge>
        在线：{{data.length > 0 ?  data[0].onlineNum : 0 }}
      </span>
      <span>
         <el-badge is-dot class="item" type="info" style="margin-top: 8px;">
          </el-badge>
        离线：{{ data.length > 0 ? data[0].offlineNum : 0 }}
      </span>
    </div>
    <Scroller :class-option="classOption"  :style="{ height: `${scrollerHeight}vh` }"  :data="data" v-on:open="open" type="无人机" />
  </div>
</template>

<script>
import Scroller from '@/views/screen/components/dataManagement/Scroller.vue'

export default {
  name: 'Drone',
  components: {
    Scroller,
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    scrollerHeight: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      classOption:  {
        step: 0.3,
        limitMoveNum: 3,
      },
      total: 10,
      online: 8,
      offline: 2,
      cameras: [],
    }
  },
  mounted() {
  },
  methods: {
    open(e) {
      this.$emit('open',e)
    }
  }
}
</script>

<style scoped lang="scss">
.containers {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 20px;
}

.title {
  display: flex;
  justify-content: center;
  width: 100%;
}

.status {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  margin-right: 2rem;
  font-size: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  span {
    margin: 0 10px;
    color: white;
  }
}

.online {
  color: whitesmoke;
}

::v-deep .el-badge__content.is-dot {
  height: 15px!important;
  width: 15px!important;
  padding: 0;
  right: 0;
  border-radius: 50%;
}
</style>
