<div id="AlarmHistoryDiv" class="tank_table_div">
    <form action="" method="post" class="tank_form_div">
        <div class="tank_form_head">
            <label style="width: 10%" class="tank_form_label">油罐</label>
            <label style="width: 10%" class="tank_form_label">油品</label>
            <label style="width: 21%" class="tank_form_label">警报描述</label>
            <label style="width: 28%" class="tank_form_label">发生时间</label>
            <label style="width: 28%" class="tank_form_label">解除时间</label>
        </div>
        <div v-for="(r, index) in tankAlarmFilter" :key="index" class="tank_form_body">
            <label style="width: 10%" class="tank_form_label">{{r.TankNumber}}号</label>
            <label style="width: 10%" class="tank_form_label">{{r.Id}}</label>
            <label style="width: 21%" class="tank_form_label">{{r.Type}}</label>
            <label style="width: 28%" class="tank_form_label">{{r.CreatedTimeStamp | formatDate}}</label>
            <label style="width: 28%" class="tank_form_label">{{r.ClearedTimeStamp | formatDate}}</label>
        </div>
    </form>
    <div class="config-right-navigation" :style="panelStyle">
        <div class="config-topright-tab">筛选查询</div>
        <div class="config-topright-settingselect">起始日期：</div>
        <input class="config-form-input" type="text" v-model="startDate" />
        @*<input class="config-form-date" type="date" v-model="startDate" />*@
        <div class="config-topright-settingselect">结束日期：</div>
        <input class="config-form-input" type="text" v-model="endDate" />
        @*<input class="config-form-date" type="date" v-model="endDate" />*@
        <div class="config-topright-settingselect">油罐选择：</div>
        <select class="config-form-select" v-model="tankNumber">
            <option v-for="(item, i) in tankArray" :key="i" :value="item.TankNumber">{{item.TankNumber}}号罐 {{item.Product.ProductLabel}}</option>
        </select>
        <div class="config-topright-settingselect">查询条件：</div>
        <div :class="currentTab == 'active' ? 'config-topright-rnav-image' : 'config-topright-rnav'" @@click="search('active')">活跃报警</div>
        <div :class="currentTab == 'history' ? 'config-topright-rnav-image' : 'config-topright-rnav'" @@click="search('history')">历史记录</div>
    </div>
    <div class="tank_filter_div" v-if="!showFilter" @@click="clickFilter()">
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#AlarmHistoryDiv',
        data: {
            tankAlarm: [],
            tankArray: [],
            showFilter: false,
            startDate: null,
            endDate: null,
            tankNumber: 1,
            tankAlarmFilter: [],
            currentTab: 'active',
            panelStyle: 'visibility: hidden;'
        },
        mounted() {
            let path = '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/'
            Publish2('[1, 10, 0, null]', path + 'GetTankAlarmAsync')
            Publish1(path + 'GetTanksAsync')
            this.startDate = this.toDateString(new Date())
            this.endDate = this.toDateString(new Date())
        },
        watch: {
            tankAlarm: {
                handler(newValue, oldValue) {
                    if (this.tankAlarmFilter.length <= 0) {
                        this.tankAlarmFilter = newValue
                        this.$forceUpdate()
                    }
                },
                deep: true
            }
        },
        filters: {
            formatDate(value) {
                let realVal = ''
                if (value !== null && typeof (value) !== 'undefined') {
                    realVal = value.substring(0, 16).replace('T', ' ')
                } else {
                    realVal = 'N/A'
                }
                return realVal
            }
        },
        methods: {
            search(tab) {
                this.showFilter = false
                this.currentTab = tab
                // this.tankAlarmFilter = this.tankAlarm.filter(item => item.TankNumber === this.tankNumber)
                let endDateHour = this.toDateString(new Date(this.endDate + ' 24:0:0'))
                this.tankAlarmFilter = this.tankAlarm.filter(item => item.CreatedTimeStamp >= this.startDate && item.CreatedTimeStamp < endDateHour)
                this.panelStyle = 'visibility: hidden;'
                this.$forceUpdate()
            },
            clickFilter() {
                this.showFilter = true
                this.panelStyle = 'visibility: visible;'
                this.$forceUpdate()
            },
            PrefixInteger(num, length) {
                return ('000' + num).substr(-length)
            },
            toDateString(date) {
                return date.getFullYear() + '-' + this.PrefixInteger(date.getMonth() + 1, 2) + '-' + this.PrefixInteger(date.getDate(), 2)
            }
        }
    })

    function OnReply(topic, jsonObj) {
        let path = '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/'
        if (topic === path + 'GetTankAlarmAsync_reply') {
            vm.tankAlarm = jsonObj
        } else if (topic === path + 'GetTanksAsync_reply') {
            vm.tankArray = jsonObj
        }
    }
</script>