<template>
    <views-shared-layout>
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <div class="form-horizontal query">
                            <div class="row">
                                <div class="col-sm-3">
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">分类:</label>
                                        <div class="col-sm-9">
                                            <select class="form-control" v-model="model.categoryId">
                                                <option value="null">请选择</option>
                                                <option v-for="item in model.category" :value="item.value">{{item.text}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">建筑:</label>
                                        <div class="col-sm-9">
                                            <select class="form-control" v-model="model.buildingId">
                                                <option value="null">请选择</option>
                                                <option v-for="item in model.building" :value="item.value">{{item.text}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">名称:</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" v-model="model.name" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group row">
                                        <div class="col-sm-12">
                                            <button class="btn btn-primary" v-on:click="query">查询</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <tr>
                                <th>#</th>
                                <th>建筑</th>
                                <th>分类</th>
                                <th>名称</th>
                                <th>详情</th>
                            </tr>
                            <tr v-for="(item,i) in model.list">
                                <td>{{i+1}}</td>
                                <td>{{getBuildingName(item)}}</td>
                                <td>{{getCategoryName(item)}}</td>
                                <td>{{item.name}}</td>
                                <td>
                                    <router-link :to="'/components/views/areas/default/device.vue?id='+item.id">详情</router-link>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="card-footer">
                        <views-shared-pagination :index.sync="model.pageIndex" :size.sync="model.pageSize" :total="model.totalCount" :callback="load" />
                    </div>
                </div>
            </div>
        </div>

    </views-shared-layout>
</template>
<script>
    export default {
        data: function () {
            return {
                title: '设备中心',
                url: config.service('platform/api/v1/Device/GetDevices'),
                model: {
                    pageIndex: parseInt(this.$route.query.pageIndex) || 1,
                    pageSize: parseInt(this.$route.query.pageSize) || 20,
                }
            }
        },
        mounted: function () {
            this.subscribe();
            this.load();
        },
        beforeDestroy: function () {
            PubSub.unsubscribes(this.events);
        },
        methods: {
            query: function () {
                this.model.pageIndex = 1;
                this.load();
            },
            load: function () {
                var vm = this;
                this.model.list = [];
                axios.post(this.url,this.model).then(function (response) {
                    vm.model = response.data;
                });
            },
            subscribe:function() {
                var vm = this;
                PubSub.subscribes(this.events, function (method, data) {
                    parent.load();
                });
            },
            getBuildingName: function (device) {
                if (device.ioTGateway.building) {
                    return device.ioTGateway.building.name;
                }
                return '';
            },
            getCategoryName: function (device) {
                if (device.ioTProduct.ioTProductCategory) {
                    return device.ioTProduct.ioTProductCategory.name;
                }
                return '';
            }
        }
    }
</script>