<template>
  <div class="lt-container">
    <div class="left">
      <div class="title">
        {{ tLang('common', '状态') }}
      </div>
      <div class="left-content">
        <div class="status-box" :style="{'background-color':stateList[props.data.state].color}"></div>
        <div class="status-text">
          {{ stateList[props.data.state].text }}
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="top-item">
          <div class="title">{{ tLang('message', '检测裁片数') }}</div>
          <div class="content">
            {{ props.data.checkNum }}
          </div>
        </div>
        <div class="top-item">
          <div class="title">{{ tLang('device', '运行时长') }}</div>
          <div class="content">
            {{ props.data.runTime }} min
          </div>
        </div>
        <div class="top-item">
          <div class="title">{{ tLang('message', '耗电量') }}</div>
          <div class="content">
            {{ props.data.electTotal+ ' kw·h' }}
          </div>
        </div>
      </div>
      <div class="bottom">
        <span class="label">{{ tLang('message', '异常次数') }}</span>
        <span>{{ props.data.errorCount }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive } from 'vue';

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const { proxy } = getCurrentInstance();

let stateList = {
  0: {color:'#cfcfcf',text:'停机中'  },
  1: {color:'#F59E0B',text:'待机中'  },
  2: {color:'#22C55E',text:'运行中'  },
  3: {color:'#EF4444',text:'故障中'  },
}
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  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: calc(100% - 20px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .status-box {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }

      .status-text {
        margin-top: 10px;
        font-size: 14px;
      }
    }
  }

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

    .top {
      height: 62%;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .top-item {
        width: 30%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
        background: #1F2937;
      }
    }

    .bottom {
      height: 23%;
      width: 100%;
      padding: 5px;
      box-sizing: border-box;
      background: #1F2937;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .label {
        font-size: 14px;
        color: #cfcfcf;
      }
      span {
        margin: 0 20px;
      }
    }
  }
}
</style>
