<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">
                                            <a-date-picker :model="moment(model.start, dateFormat)" :format="dateFormat" @change="onChange1" />
                                        </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">
                                            <a-date-picker :model="moment(model.end, dateFormat)" :format="dateFormat" @change="onChange2" />
                                        </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>
                            </tr>
                            <tr v-for="(item,i) in model.list">
                                <td>{{i+1}}</td>
                                <td>{{model.query.name}}</td>
                                <td>{{getValue(item.value)}}</td>
                                <td>{{toDate(item.timestamp)}}</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/Influx/History'),
                dateFormat:'YYYY/MM/DD',
                model: {
                    number: this.$route.query.number,
                    key: this.$route.query.key,
                    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();
                });
            },
            toDate: function (value) {
                return moment(value).format('YYYY-MM-DD HH:mm:ss.SSS');
            },
            getValue(value) {
                var output;
                if (this.model.query.enumValues) {
                    return JSON.parse(this.model.query.enumValues)[value] || value;
                }
                return value;
            },
            onChange1: function (date, dateString) {
                this.model.start = dateString;
            },    
            onChange2: function (date, dateString) {
                this.model.end = dateString;
            }
        }
    }
</script>