<template>
  <el-card
    shadow="hover"
    class="device-card"
    :class="{ active, offline, disabled: offline }"
    @click.native="handleCardClick"
  >
    <div class="card-head">
      <span class="device-sn">SN {{ device.deviceSn || '-' }}</span>
      <el-tag size="mini" :type="device.lineStatus === 1 ? 'success' : 'info'">
        {{ device.lineStatus === 1 ? '已登录' : '未登录' }}
      </el-tag>
    </div>
    <div class="card-body">
      <div class="row"><span class="label">IMEI</span><span class="value">{{ device.imei || '-' }}</span></div>
      <div class="row"><span class="label">设备状态</span><span class="value">{{ deviceStatusText }}</span></div>
      <div v-if="device.lineStatus === 1" class="row">
        <span class="label">登录用户</span>
        <span class="value">{{ device.onlineUserName || '-' }}</span>
      </div>
      <div v-if="device.lineStatus === 1" class="row">
        <span class="label">心跳时间</span>
        <span class="value">{{ heartbeatText }}</span>
      </div>
    </div>
    <div v-if="!offline" class="card-foot">
      <el-button type="primary" size="mini" plain @click.stop="$emit('operate', device)">操作设备</el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'TsbDeviceCard',
  props: {
    device: { type: Object, required: true },
    active: { type: Boolean, default: false },
    offline: { type: Boolean, default: false }
  },
  computed: {
    deviceStatusText() {
      if (this.device.status === '0') {
        return '启用'
      }
      if (this.device.status === '1') {
        return '停用'
      }
      return '-'
    },
    heartbeatText() {
      if (!this.device.heartbeatTime) {
        return '-'
      }
      return this.parseTime(this.device.heartbeatTime)
    }
  },
  methods: {
    handleCardClick() {
      if (!this.offline) {
        this.$emit('operate', this.device)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.device-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: border-color 0.2s;
  &.active {
    border-color: #409eff;
  }
  &.disabled {
    cursor: default;
    opacity: 0.85;
  }
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.device-sn {
  font-weight: 600;
  font-size: 15px;
}
.card-body .row {
  display: flex;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.label {
  flex: 0 0 72px;
  color: #909399;
}
.value {
  flex: 1;
  word-break: break-all;
}
.card-foot {
  margin-top: 12px;
  text-align: right;
}
</style>
