<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-15 14:26:52
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2025-01-14 10:27:27
 * @FilePath: src/views/screen/components/dataManagement/Terminal.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div class="containers">
    <div class="status">
      <el-button :class="buttonClass(1)" type="text" @click="changeData(1)">智能布控球</el-button>
      <el-button :class="buttonClass(2)" type="text" @click="changeData(2)">作业记录仪</el-button>
      <el-button :class="buttonClass(3)" type="text" @click="changeData(3)">智能安全帽</el-button>
    </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: 'Terminal',
  components: { Scroller },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    scrollerHeight: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      classOption:  {
        step: 0.3,
        limitMoveNum: 3,
      },
      type: 1,
      type_select: 'type_select',
      type_normal: 'type_normal',
      total: 10,
      online: 8,
      offline: 2,
    }
  },
  mounted() {
  },
  methods: {
    changeData(index) {
      this.type = index
      this.$emit('getVideoData', index)
    },
    buttonClass(index) {
      return this.type === index ? 'type_select' : 'type_normal';
    },
    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;
  justify-content: right;
  margin-right: 2rem;
}

.status1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  margin-right: 2rem;
  font-size: 1rem;

  span {
    margin: 0 10px;
    color: white;
  }
}

.type_normal{
  color: white;
  font-size: 1rem;
}


.type_select{
  color: rgb(75, 201, 234);
  font-size: 1rem;
}

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