<template>
  <view class="list-item flex-row" @click="emit">
    <view class="left-section_2 flex-col items-start">
      <view v-if="hasCloudBox">
        <view class="text-wrapper_3 flex-col" v-show="deviceInfo.status == deviceStatus.WORKING">
          <text class="text_21">生产中</text>
        </view>
        <view class="text-wrapper_3 flex-col items-center view_16" v-show="deviceInfo.status == deviceStatus.FREE">
          <text class="text_21">空闲</text>
        </view>
      </view>
      <image class="avatar" :src="deviceInfo.licPicUrl || '/static/imgs/general/device-default.png'"></image>
    </view>
    <view class="right-group flex-col">
      <view class="top-group flex-row">
        <text class="name text-ellipsis">{{ deviceInfo.name }}</text>
        <image v-if="hasCamera" src="/static/imgs/digital-workshops/camera-icon.png" class="image_5" />
        <image v-if="hasCloudBox" src="/static/imgs/digital-workshops/cloudBox-icon.png" class="image_5" />
      </view>
      <view class="equal-division flex-row" v-if="hasCloudBox">
        <view class="equal-division-item flex-col">
          <text class="text_24">今日产能</text>
          <view class="bottom-group_1 flex-row">
            <text class="text_26">{{ deviceInfo.todayCapacity }}</text>
            <text class="text_28">件</text>
          </view>
        </view>
        <view class="equal-division-item_1 flex-col">
          <text class="text_30">今日时长</text>
          <view class="bottom-group_2 flex-row">
            <text class="text_32">{{ deviceInfo.todayWorkHour }}</text>
            <text class="text_34">h</text>
          </view>
        </view>
        <view class="equal-division-item_2 flex-col">
          <text class="text_36">开机率</text>
          <view class="bottom-group_3 flex-row">
            <text class="text_38">{{ deviceInfo.startupRate }}</text>
            <text class="text_40">%</text>
          </view>
        </view>
      </view>
      <view class="bottom-group_4 flex-row" v-if="hasCloudBox">
        <text>{{ translate(deviceInfo.latestWorkTime) }}</text>
        <text class="text_43">{{ deviceInfo.belongWorkshop || '' }}</text>
      </view>
      <view v-if="!hasCloudBox">
        <text class="text_59">未接入云盒，无更多数据</text>
      </view>
    </view>
  </view>
</template>

<script>
import { deviceStatus } from '@/enums/index'
export default {
  props: {
    deviceInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      deviceStatus: Object.freeze(deviceStatus)
    }
  },
  computed: {
    hasCloudBox() {
      return this.deviceInfo.cloudBoxId || false
    },
    hasCamera() {
      return this.deviceInfo.cameraId || false
    }
  },
  methods: {
    emit() {
      this.$emit('click', this.deviceInfo)
    },
    translate(time) {
      if (!time) {
        return ''
      }
      time = time.replace(/-/g, '/')
      let date = new Date(time)
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours()
      let minute = date.getMinutes()
      if (minute < 10) {
        minute = '0' + minute
      }
      return `最近开机 ${month}月${day}日 ${hour}:${minute}`
    }
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  padding: 20rpx 20rpx 20rpx 20rpx;
  background-color: rgba(237, 236, 252, 0.5);
  border-radius: 16rpx;
  &:last-of-type {
    margin-top: 20rpx;
  }
  .left-section_2 {
    color: rgb(255, 255, 255);
    font-size: 20rpx;
    font-weight: 500;
    line-height: 28rpx;
    white-space: nowrap;
    border-radius: 15rpx;
    width: 180rpx;
    height: 180rpx;
    position: relative;
    overflow: hidden;
    .text-wrapper_3 {
      position: absolute;
      top: 0;
      left: 0;
      padding-top: 4rpx;
      background-color: rgb(82, 196, 26);
      border-radius: 15rpx 0px 15rpx 0px;
      .text_21 {
        margin-left: 6rpx;
        margin-right: 7rpx;
      }
    }
    .view_16 {
      padding-top: initial;
      background-color: rgb(255, 72, 73);
      padding: 3rpx 0 2rpx;
      width: 73rpx;
    }
    .avatar {
      width: 100%;
      height: 100%;
    }
  }
  .right-group {
    margin-left: 5rpx;
    flex: 1 1 auto;
    .top-group {
      padding: 0 26rpx;
      color: rgb(0, 0, 0);
      font-size: 30rpx;
      font-weight: 500;
      line-height: 42rpx;
      white-space: nowrap;
      .name {
        max-width: 360rpx;
      }
      .image_5 {
        margin-left: 8rpx;
        width: 24rpx;
        height: 24rpx;
      }
    }
    .equal-division {
      margin-right: 24rpx;
      .equal-division-item {
        padding: 10rpx 13rpx 10rpx 26rpx;
        flex: 1 1 146rpx;
        .text_24 {
          color: rgb(24, 16, 89);
          font-size: 22rpx;
          line-height: 30rpx;
          white-space: nowrap;
        }
        .bottom-group_1 {
          margin-top: 4rpx;
          .text_26 {
            color: rgb(24, 16, 89);
            font-size: 32rpx;
            font-weight: 500;
            line-height: 45rpx;
            white-space: nowrap;
          }
          .text_28 {
            margin: 8rpx 0 6rpx 10rpx;
            color: rgb(24, 16, 89);
            font-size: 22rpx;
            line-height: 30rpx;
            white-space: nowrap;
          }
        }
      }
      .equal-division-item_1 {
        padding: 10rpx 23rpx 10rpx 36rpx;
        flex: 1 1 146rpx;
        .text_30 {
          color: rgb(24, 16, 89);
          font-size: 22rpx;
          line-height: 30rpx;
          white-space: nowrap;
        }
        .bottom-group_2 {
          margin-top: 4rpx;
          .text_32 {
            color: rgb(24, 16, 89);
            font-size: 32rpx;
            font-weight: 500;
            line-height: 45rpx;
            white-space: nowrap;
          }
          .text_34 {
            margin: 8rpx 0 6rpx 10rpx;
            color: rgb(24, 16, 89);
            font-size: 22rpx;
            line-height: 30rpx;
            white-space: nowrap;
          }
        }
      }
      .equal-division-item_2 {
        padding: 10rpx 24rpx 10rpx 26rpx;
        flex: 1 1 146rpx;
        .text_36 {
          color: rgb(24, 16, 89);
          font-size: 22rpx;
          line-height: 30rpx;
          white-space: nowrap;
        }
        .bottom-group_3 {
          margin-top: 4rpx;
          .text_38 {
            color: rgb(24, 16, 89);
            font-size: 32rpx;
            font-weight: 500;
            line-height: 45rpx;
            white-space: nowrap;
          }
          .text_40 {
            margin: 8rpx 0 6rpx 10rpx;
            color: rgb(24, 16, 89);
            font-size: 22rpx;
            line-height: 30rpx;
            white-space: nowrap;
          }
        }
      }
    }
    .bottom-group_4 {
      margin-top: 14rpx;
      padding: 0 26rpx;
      color: rgb(136, 136, 136);
      font-size: 20rpx;
      line-height: 28rpx;
      white-space: nowrap;
      .text_43 {
        margin-left: 11rpx;
      }
    }
  }
  .text_59 {
    margin-top: 23rpx;
    color: rgb(24, 16, 89);
    font-size: 26rpx;
    font-weight: 500;
    line-height: 37rpx;
    white-space: nowrap;
  }
}
</style>
