<template>
    <views-shared-layout>
        <div class="row" style="padding-top:1rem;" v-if="model.organ">
            <div class="col-sm-2">
                <div class="card">
                    <div class="card-header">建筑列表</div>
                    <div class="card-body">
                        <a-tree ref="tree"
                                :tree-data="tree"
                                :auto-expand-parent="true"
                                :default-expanded-keys="expanded"
                                :replace-fields="{title:'name',key:'id'}"
                                block-node
                                show-line
                                @select="onSelect">
                        </a-tree>
                    </div>
                </div>
            </div>
            <div class="col-sm-10">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">
                            当前：{{model.building?model.building.building.name:model.organ.organ.name}}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="position-relative p-3 bg-gray">
                                    <div class="ribbon-wrapper">
                                        <div class="ribbon bg-primary">
                                            光照
                                        </div>
                                    </div>
                                    <p>
                                        最大值：
                                        <template v-if="model.building">
                                            {{model.building.maxLight}}
                                        </template>
                                        <template v-else>
                                            {{model.organ.maxLight}}
                                        </template>
                                        Lux
                                    </p>
                                    <p>
                                        最小值：
                                        <template v-if="model.building">
                                            {{model.building.minLight}}
                                        </template>
                                        <template v-else>
                                            {{model.organ.minLight}}
                                        </template>
                                        Lux
                                    </p>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="position-relative p-3 bg-gray">
                                    <div class="ribbon-wrapper">
                                        <div class="ribbon bg-primary">
                                            温度
                                        </div>
                                    </div>
                                    <p>
                                        最大值：
                                        <template v-if="model.building">
                                            {{model.building.maxTemperature}}
                                        </template>
                                        <template v-else>
                                            {{model.organ.maxTemperature}}
                                        </template>
                                        ℃
                                    </p>
                                    <p>
                                        最小值：
                                        <template v-if="model.building">
                                            {{model.building.minTemperature}}
                                        </template>
                                        <template v-else>
                                            {{model.organ.minTemperature}}
                                        </template>
                                        ℃
                                    </p>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="position-relative p-3 bg-gray">
                                    <div class="ribbon-wrapper">
                                        <div class="ribbon bg-primary">
                                            湿度
                                        </div>
                                    </div>
                                    <p>
                                        最大值：
                                        <template v-if="model.building">
                                            {{model.building.maxHumidity}}
                                        </template>
                                        <template v-else>
                                            {{model.organ.maxHumidity}}
                                        </template>
                                        RH%"
                                    </p>
                                    <p>
                                        最小值：
                                        <template v-if="model.building">
                                            {{model.building.minHumidity}}
                                        </template>
                                        <template v-else>
                                            {{model.organ.minHumidity}}
                                        </template>
                                        RH%"
                                    </p>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="position-relative p-3 bg-gray">
                                    <div class="ribbon-wrapper">
                                        <div class="ribbon bg-primary">
                                            用电
                                        </div>
                                    </div>
                                    <p>
                                        开：
                                        <template v-if="model.building">
                                            {{model.building.deviceOpenCount}}
                                        </template>
                                        <template v-else>
                                            {{model.organ.deviceOpenCount}}
                                        </template>
                                    </p>
                                    <p>
                                        关：
                                        <template v-if="model.building">
                                            {{model.building.deviceCloseCount}}
                                        </template>
                                        <template v-else>
                                            {{model.organ.deviceCloseCount}}
                                        </template>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card" v-if="scenes.length>0">
                    <div class="card-header">场景</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-1" v-for="item in scenes">
                                <div class="card bg-light p-2">
                                    <a class="card-body text-center" href="javascript:;" style="padding:0;" v-on:click="execScene(item.id)">
                                        <img class="card-img-top" :src="item.image" :alt="item.name" style="width:64px;height:64px;margin:0 auto;">
                                        <div>{{item.name}}</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card" v-if="devices.length>0">
                    <div class="card-header">设备</div>
                    <div class="card-body">
                        <div class="row">
                            <div v-for="item in devices" class="col device-container" :title="item.name+item.ioTProduct.template">
                                <component :device="item" :is="'devices-'+item.ioTProduct.template"></component>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </views-shared-layout>
</template>
<script>
    export default {
        data() {
            return {
                url: config.service('platform/api/v1/Site/GetOrgan'),
                model: {
                    organ: null,
                    building: null,
                    expanded: [],
                },
                events: [
                    'OrganEntityInserted',
                    'OrganEntityUpdated',
                    'OrganEntityDeleted',
                    'BuildingEntityInserted',
                    'BuildingEntityUpdated',
                    'BuildingEntityDeleted',
                    'IoTSceneEntityInserted',
                    'IoTSceneEntityUpdated',
                    'IoTSceneEntityDeleted',
                    'IoTDeviceEntityInserted',
                    'IoTDeviceEntityUpdated',
                    'IoTDeviceEntityDeleted',
                    'IoTDataEntityInserted',
                    'IoTDataEntityUpdated',
                    'IoTDataEntityDeleted',
                ]
            };
        },
        mounted: function () {
            this.subscribe();
            this.load();
        },
        beforeDestroy: function () {
            PubSub.unsubscribes(this.events);
        },
        methods: {
            subscribe: function () {
                var parent = this;
                PubSub.subscribes(this.events, function (method, data) {
                    if (method.indexOf('Statistic') !== -1 || method.indexOf('Organ') !== -1 || method.indexOf('Building') !== -1) {
                        parent.load();
                    }
                    else {
                        parent.updateItem(method, data);
                    }
                });
            },
            load: function () {
                var parent = this;
                axios.post(this.url).then(function (response) {
                    parent.model.organ = response.data;
                });
            },
            updateItem: function (method, data) {
                if (this.model.building) {
                    var item = JSON.parse(data.message);
                    var list;
                    if (method.indexOf('Device') !== -1)
                    {
                        var gateway = Enumerable.from(this.model.building.building.ioTGateways).where(o => o.id == item.ioTGatewayId).firstOrDefault();
                        if (gateway) {
                            list = gateway.devices;
                        }
                    }
                    else if (method.indexOf('Data') !== -1) {
                        var device = Enumerable.from(this.model.building.building.ioTGateways)
                            .selectMany(o => o.devices)
                            .firstOrDefault(function (o) { return o.id === item.ioTDeviceId; });
                        if (device) {
                            list = device.data;
                        }
                    }
                    else if (method.indexOf('Scene') !== -1) {
                        if (this.model.building && this.model.building.building.id === item.buildingId) {
                            list = this.model.building.building.scenes;
                        }
                    }
                    //
                    if (list) {
                        if (method.indexOf('Deleted') !== -1) {
                            removeById(list, item);
                        }
                        else {
                            updateById(list, item);
                        }
                    }
                }
            },
            onSelect: function (selectedKeys, info) {
                if (selectedKeys.length > 0) {
                    this.$refs.tree.selectedKeys = selectedKeys;
                    var parent = this;
                    var id = selectedKeys[0];
                    if (id === this.model.organ.organ.id) {
                        this.model.building = null;
                    }
                    else {
                        var url = config.service('platform/api/v1/Site/GetBuilding?id=' + id);
                        axios.post(url).then(function (response) {
                            parent.model.building = response.data;
                        });
                    }
                }
            },
            findBuildings: function (buildings, id) {
                for (var i in buildings) {
                    var item = buildings[i];
                    if (item.id == id) {
                        return item.children;
                    }
                    if (item.children.length > 0) {
                        return this.findBuildings(item.children, id);
                    }
                }
            }
        },
        computed: {
            tree: function () {
                var result = [];
                if (this.model.organ != null) {
                    result.push({
                        id: this.model.organ.organ.id,
                        name: this.model.organ.organ.name,
                        children: this.model.organ.organ.buildings
                    });
                }
                return result;
            },
            expanded: function () {
                var result = [];
                if (this.model.organ != null) {
                    result.push(this.model.organ.organ.id);
                }
                return result;
            },
            scenes: function () {
                var result = [];
                if (this.model.building) {
                    result = Enumerable.from(this.model.building.building.scenes).orderBy(o => o.order).toArray();
                }
                return result;
            },
            devices: function () {
                var result = [];
                if (this.model.building) {
                    result = Enumerable.from(this.model.building.building.ioTGateways)
                        .selectMany(o => o.devices)
                        .where(o => !o.disabled)
                        .orderBy(o => o.ioTProductId)
                        .toArray();
                }
                return result;
            }
        }
    };
</script>