<template>
  <div class="lt-container">
    <div class="left">
      <div class="left-content">
        <div class="speed-box">
          <div class="speed-value"> {{props.data.speed}} rpm</div>
        </div>
        <div class="speed-title">{{ tLang('message', '扫描速度') }}</div>
      </div>
    </div>
    <div class="right">
      <div class="right-item" v-for="item of devData">
        <div class="title">{{ item['label'] }}</div>
        <div class="right-item-content" v-if="item['type'] == 'status'">
          <div class="status-box" :style="{ background: statusList[item.value]['color'] }"></div>
          <div class="status-title">{{ statusList[item.value]['label'] }}</div>
        </div>
        <div class="right-item-content" v-else>
          {{ item['value'] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const { proxy } = getCurrentInstance();



let devData = computed(() => {
  return {
    status: { 'label': proxy.tLang('home', '设备状态'), 'value': props.data.state, type: 'status' },
    scansNum: { 'label': proxy.tLang('message', '扫描次数'), 'value': props.data.outputToday, type: '' },
    runTime: { 'label': proxy.tLang('device', '运行时长'), 'value': props.data.runTime + ' min', type: '' },
    consumption: { 'label': proxy.tLang('message', '耗电量'), 'value': props.data.electTotal + ' kW·h', type: '' },
    identifyState: { 'label': proxy.tLang('message', '识别状态'), 'value': props.data.visionState, type: 'status' },
    identifyNum: { 'label': proxy.tLang('message', '识别数量'), 'value': props.data.cutNum, type: '' },
    identifyTime: { 'label': proxy.tLang('message', '总识别时长'), 'value': props.data.totalTime + ' min', type: '' },
    ErrorNum: { 'label': proxy.tLang('message', '异常次数'), 'value': props.data.errorCount, type: '' },
  }
})

let statusList = {
  '0': { 'label': proxy.tLang('message', '停机中'), 'value': '1', 'color': '#cfcfcf' },
  '1': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#F59E0B' },
  '2': { 'label': proxy.tLang('message', '运行中'), 'value': '1', 'color': '#22C55E' },
  '3': { 'label': proxy.tLang('message', '故障中'), 'value': '1', 'color': '#ff6e76' },


}
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #cfcfcf;

}

.content {
  width: 100%;
  height: calc(100% - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.lt-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .left {
    width: 25%;
    height: 100%;

    .left-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .speed-box {
        width: 90px;
        height: 90px;
        background: url('./../image/u65.png') no-repeat;
        background-size: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;

      }
    }
  }

  .right {
    width: 75%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;

    .right-item {
      width: 23%;
      height: 46%;
      padding: 5px;
      box-sizing: border-box;
      background: #1F2937;

      .right-item-content {
        height: calc(100% - 20px);
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;

        .status-box {
          width: 1em;
          height: 1em;
          border-radius: 50%;
        }

        .status-title {
          font-size: 10px;
          color: #e7e7e7;
        }

      }
    }
  }
}
</style>
