@{
    HideBread = true;
}
<br />
<template v-if="model">
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>{{model.Name}}</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/">产品列表</a></li>
                <li class="breadcrumb-item active">{{model.Name}}</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" v-if="HasBatchCommand()">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <input type="checkbox" id="All" class="checkall" v-on:change="SelectDevice($event)" />
                        <label for="All" class="btn btn-sm btn-info" style="height:31px;margin-bottom:0;">全选</label>
                        <button class="btn btn-sm btn-info uncheck" v-on:click="SelectDevice($event)">反选</button>
                    </div>
                    <div class="card-tools">
                        <button class="btn btn-success" v-on:click="CallApiAll('On')">开</button>
                        <button class="btn btn-success" v-on:click="CallApiAll('Stop')" v-if="model.Name.indexOf('窗帘电机')>=0">停</button>
                        <button class="btn btn-success" v-on:click="CallApiAll('Off')">关</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2 col-sm-4 col-xs-6" v-for="item in GetDevices()">
            <div class="card" debug="12021508">
                <div class="card-header">
                    <h3 class="card-title">
                        <label style="font-weight:normal;"><input type="checkbox" name="numbers[]" class="item" :value="item.Number" v-if="HasBatchCommand()" v-on:change="SelectDevice($event)">{{item.Name}}</label>
                    </h3>
                    <template v-if="HasBatchCommand()">
                        <div class="card-tools"> {{GetDataValue(item.Number,'状态')}}</div>
                    </template>
                </div>
                <a class="card-body" :href="'/Home/Device?number='+item.Number+'&productNumber='+model.Number" style="display:block;text-align:center;">
                    <img :alt="item.Name" :src="model.Image" style="margin:0 auto;max-width:64px;" />
                </a>
                <!-- 设备信息 Start -->
                
                <div class="card-body" style="font-size: 12px;" v-if="item.Name === '温湿度传感器'">
                    <div class="row">
                        <div class="col-md-4">温度</div>
                        <div class="col-md-8">{{GetDataValue(item.Number,'温度')}} {{GetDeviceDataAttr(item.Number,'温度','Unit')}} {{GetDeviceDataAttr(item.Number,'温度','Description')}}</div>
                    </div>
                    <div class="row" >
                        <div class="col-md-4">湿度</div>
                        <div class="col-md-8">{{GetDataValue(item.Number,'湿度')}} {{GetDeviceDataAttr(item.Number,'湿度','Unit')}} {{GetDeviceDataAttr(item.Number,'湿度','Description')}}</div>
                    </div>
                </div>
                <!-- 设备信息 End -->
                <div class="card-footer">
                    {{item.Node.Name}}
                </div>
            </div>
        </div>
    </div>
</template>
@section scripts{
    <script src="/js/page.js"></script>
    <script src="/js/product.js"></script>
}