﻿<template>
    <div class="card device-component">
        <div class="card-header">
            <h3 class="card-title">
                {{device.displayName}}
                <i v-if="device.isOnline" class="text-success ion ion-ios-wifi"></i>
                <i v-else class="text-danger ion ion-ios-wifi"></i>
            </h3>
        </div>
        <div class="card-body">
            <div class="row device-row">
                <div class="col-4 align-self-center">
                    <img class="device-image" :src="device.ioTProduct.image" />
                </div>
                <div class="col-8 align-self-center">
                    <div class="row">
                        <span :class="cls">
                            {{status}} {{unit}} {{desc}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['device'],
        computed: {
            status: function () {
                return getIoTDataValue(this.device, '光照度');
            },
            unit: function () {
                return getIoTDataUnit(this.device, '光照度');
            },
            desc: function () {
                return getIoTDataDescription(this.device, '光照度');
            },
            cls: function () {
                return this.desc === '适中' ? 'status text-success' : 'status text-danger';
            }
        }
    };
</script>