@{
    HtmlTitle = "设备详情";
}
<div id="template">
    <style>
        h3 img {
            height: 32px;
            margin: -8px 8px -8px -8px;
        }

        .card-tools img, .card-body img {
            height: 32px;
            cursor: pointer;
        }

        .content-wrapper {
            /*background-color: lightblue;*/
        }

        input.switch {
            display: none;
        }

        label.switch {
            display: inline-block;
            width: 60px;
            height: 30px;
            border-radius: 30px;
        }

            label.switch.on {
                background-color: green;
            }

            label.switch.off {
                background-color: grey;
            }

            label.switch.on::before {
                content: '';
                display: block;
                width: 30px;
                height: 30px;
                border-radius: 30px;
                background-color: white;
                position: absolute;
                left: 0;
            }

            label.switch.off::after {
                content: '';
                display: block;
                width: 30px;
                height: 30px;
                border-radius: 30px;
                background-color: white;
                position: absolute;
                right: 0;
            }

        .ir label input {
            display: none;
        }

        .danger {
            color: red;
        }

        .normal {
            color: green;
        }

        .ptz {
            width: 100%;
        }

            .ptz td {
                text-align: center;
                height: 46px;
            }

        .ir td {
            width: 11%;
            text-align: center;
        }

        .keyboard {
            table-layout: fixed;
        }

        input[type='range'] {
            -webkit-appearance: none;
            outline: none;
            background: cadetblue;
            display: inline-block;
            width: 100%;
            height: 15px;
            margin: 10px 0;
        }

            input[type='range'].hue {
                background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,#00F 66.66%, #F0F 83.33%, #F00 100%);
            }

            input[type='range'].saturation {
                background: -webkit-linear-gradient(left, #fff 0%, green 100%);
            }

            input[type='range'].brightness {
                background: -webkit-linear-gradient(left, #000 0%, #fff 100%);
            }

            input[type='range']::-webkit-slider-thumb {
                -webkit-appearance: none;
                background-color: transparent;
                height: 30px;
                width: 30px;
                border: 15px solid rgba(230,230,230,0.8);
                border-radius: 50%;
            }

        canvas {
            width: 100%;
            height: 215px;
        }

        .ir label {
            margin: 2px 0 2px 2px;
        }

        .card-body button.btn {
            margin-right: 5px;
        }

        .card {
            margin-bottom: 20px;
        }
    </style>
    <template v-if="model">
        <!--折线图-->
        <div class="row" v-if="HasChart()">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">历史数据</h3>
                        <ul role="tablist" class="nav nav-tabs card-tools">
                            <li class="nav-item"><a href="#tab_11165f469-8f244804008d1500" data-toggle="tab" class="nav-link active" v-on:click="changeTime('1d')">24小时</a></li>
                            <li class="nav-item"><a href="#tab_21165f469-8f244804008d1500" data-toggle="tab" class="nav-link" v-on:click="changeTime('7d')">7日</a></li>
                            <li class="nav-item"><a href="#tab_31165f469-8f244804008d1500" data-toggle="tab" class="nav-link" v-on:click="changeTime('30d')">30日</a></li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <canvas class="chart" style="width:60%;max-width:100%;" :id="model.Number"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!--属性-->
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">{{model.Name}}</h3>
                    </div>
                    <div class="card-body" v-if="model.Data.length>0">
                        <div class="row" v-for="data in GetDatas()">
                            <div class="col-md-3">{{data.Name}}</div>
                            <div class="col-md-9">{{data.Value}}{{data.Unit}}{{data.Description}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" v-if="model.Commands.length">
            <!--命令-->
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"><img :src="iotCenter+model.Product.Image" />{{model.DisplayName}}</h3>
                        <div class="card-tools">命令</div>
                    </div>
                    <div class="card-body" v-if="model.Commands.length>0">
                        <button class="btn btn-success" v-for="command in GetCommands()" v-on:click="CallCommand(command.Id)">{{command.Name}}</button>
                    </div>
                </div>
            </div>
        </div>
        <template v-if="model.Product.Apis.length>0">
            <!--接口-->
            <div class="row" v-if="GetSimpleApis().length>0">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <button class="btn btn-success" v-for="api in GetSimpleApis()" v-on:click="CallApi(model.Number,api.Path+api.Command)">{{api.Name}}</button>
                        </div>
                    </div>
                </div>
            </div>
            <template v-if="model.Name!=='调色灯'">
                <div class="=row" v-for="api in Enumerable.from(model.Product.Apis).orderBy('o=>o.Name')" v-if="api.Parameters.length>1">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{{api.Name}}</h3>
                        </div>
                        <div class="card-body">
                            <form class="form-horizontal">
                                <input type="hidden" name="Number" :value="model.Number" />
                                <input type="hidden" name="Method" :value="api.Method" />
                                <div class="form-group" v-for="parameter in api.Parameters" v-if="parameter.Name!=='number'">
                                    <div>{{model.Name}}{{api.Name}}{{parameter.Name}}</div>
                                    <label :for="parameter.Name">{{parameter.Description}}:</label>
                                    <template v-if="model.Name==='网关'&&api.Name==='删掉制定设备'&&parameter.Name==='设备编号'">
                                    </template>
                                    <template v-else>
                                        <template v-if="parameter.Type==='string'">
                                            <input type="text" class="form-control" :name="parameter.Name" :value="GetDataValueByKey(parameter.Name)" />
                                        </template>
                                        <template v-else>
                                            <input type="text" class="form-control" :name="parameter.Name" :value="GetDataValueByKey(parameter.Name)" />
                                        </template>
                                    </template>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <button class="btn btn-success">确定</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </template>
        </template>
    </template>
</div>
@section scripts{
    <script src="/js/page.js"></script>
    <script src="/js/device.js"></script>
}