@model IoT.Shared.Application.Domain.Entities.IoTDevice
@{
    var state = Model.Data.FirstOrDefault(o => o.Key == "State")?.Value;
    var isOpend = Model.Data.Any(o => o.Key == "State" && o.Value == "开");
    var electricity = Model.Data.FirstOrDefault(o => o.Key == "Electricity");
    var power = Model.Data.FirstOrDefault(o => o.Key == "Power");
}
<div class="col-sm-2">
    <div class="card bg-light">
        <div class="card-header">
            <h5 class="card-title">@(Model.DisplayName??Model.Name)</h5>
            <div class="card-tools">@state</div>
        </div>
        <div class="card-body device">
            @if (electricity == null && power == null)
            {
                <div class="row">
                    <img class="icon" src="@Url.Content2(Model.Product.Image)" />
                </div>
                <div class="row">
                    @if (isOpend)
                    {
                        <img class="pointer" onclick="execApi(device.number,'/Socket/Off')" src="@Url.Content2("/images/off.svg")" />
                    }
                    else
                    {
                        <img class="pointer" onclick="execApi(device.number,'/Socket/On')" src="@Url.Content2("/images/on.svg")" />
                    }
                </div>
            }
            else
            {
                <div class="row">
                    <div class="col">
                        <div class="row">
                            <img class="icon" src="@Url.Content2(Model.Product.Image)" />
                        </div>
                        <div class="row">
                            @if (isOpend)
                            {
                                <img class="pointer" onclick="execApi(device.number,'/Socket/Off')" src="@Url.Content2("/images/off.svg")" />
                            }
                            else
                            {
                                <img class="pointer" onclick="execApi(device.number,'/Socket/On')" src="@Url.Content2("/images/on.svg")" />
                            }
                        </div>
                    </div>
                    <div class="col" style="padding-top:24px;">
                        @if (electricity != null)
                        {
                            <div class="h24">@electricity.Name:@electricity.Value @electricity.Unit</div>
                        }
                        @if (power != null)
                        {
                            <div class="h24">@power.Name:@power.Value @power.Unit</div>
                        }
                    </div>
                </div>
            }
        </div>
    </div>
</div>