<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>设备列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <link rel="stylesheet" th:href="@{/static/css/weui.css}" href="../static/css/weui.css">
    <style>
        .container{
            display:flex;
            flex-direction:column;
            position:absolute;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
        }

        .ball{
            border-radius:10px;
            width:20px;
            height:20px;
            margin-right:10px;
        }

        .green {
            background-color:lightgreen;
        }

        .gray{
            background-color:gray;
        }
    </style>
</head>
<body>
    <div class="container" id="app">
        <div>
            <div class="weui-cells__group weui-cells__group_form">
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">设备别名</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" placeholder="填写设备别名" v-model="aliasName">
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">设备编号</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" placeholder="填写设备编号" v-model="deviceNo">
                        </div>
                    </div>
                </div>
                <div style="margin-top:10px;">
                    <a class="weui-btn weui-btn_primary" @click="pageSearch()">
                        <i class="weui-loading" v-show="loading"></i>查询
                    </a>
                </div>
            </div>
        </div>
        <div style="flex:1;overflow:auto;">
            <div class="weui-cells__title"><h3>设备列表</h3></div>
            <div class="weui-cells" v-for="(device,index) in devices">
                <div class="weui-cell weui-cell_access" @click="gotoPeopleLibList(device)">
                    <div class="weui-cell__hd">
                        <div class="ball" :class="{green: device.isOnline, gray: !device.isOnline}"></div>
                    </div>
                    <div class="weui-cell__bd">
                        <p v-html="((pageIndex-1) * pageSize + index+1) + '.' + device.aliasName"></p>
                    </div>
                    <div class="weui-cell__ft">
                    </div>
                </div>
            </div>
        </div>
        <div style="display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
            <div>
                <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_default" @click="prevPage()">上一页</a>
            </div>
            <div>
                <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_default" @click="nextPage()">下一页</a>
            </div>
            <div>
                <span v-html="pagerInfo"></span>
            </div>
        </div>
    </div>
    <script th:src="@{/static/js/jquery.min.js}" src="../static/js/jquery.min.js"></script>
    <script th:src="@{/static/js/jquery.cookie.min.js}" src="../static/js/jquery.cookie.min.js"></script>
    <script th:src="@{/static/js/vue.js}" src="../static/js/vue.js"></script>
    <script type="text/javascript" th:inline="javascript">
        var path = [[${#httpServletRequest.contextPath}]];
    </script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data : {
                devices: [],
                token:$.cookie('devOpsToken'),
                aliasName: "",
                deviceNo: "",
                pageIndex: 1,
                pageSize: 20,
                totalPage: 0,
                recordsTotal: 0,
                loading: false
            },
            computed: {
                pagerInfo() {
                    return "当前："+  this.pageIndex + "页/共" + this.totalPage + "页,共:" + this.recordsTotal + "条";
                }
            },
            methods: {
                prevPage() {
                    if(this.pageIndex>1){
                        this.pageIndex--;
                    }

                    this.pageSearch();
                },
                gotoPeopleLibList(device){
                    window.location.href = path + "/devOps/listOfPeopleLib?deviceId=" + device.id;
                },
                nextPage() {
                    if(this.pageIndex<this.totalPage){
                        this.pageIndex++;
                    }

                    this.pageSearch();
                },
                remoteOpened(device){
                    if(confirm("是否确认开门?")){
                        $.post(path + "/devOps/remoteOpened",{
                            deviceId : device.id,
                            token : this.token
                        },
                        function(rs){
                            if(rs.result){
                                alert(rs.message);
                            }else{
                                alert(rs.message);
                            }
                        },"json");
                    }
                },
                pageSearch() {
                    var self = this;
                    self.loading = true;

                    $.post(path + "/devOps/listOfDevice",{
                        token : this.token,
                        aliasName: this.aliasName,
                        deviceNo : this.deviceNo,
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize
                    },
                    function(rs){
                        self.loading = false;

                        if(rs.result){
                            self.devices = rs.data.data;
                            self.totalPage = rs.data.totalPage;
                            self.recordsTotal = rs.data.recordsTotal;
                        }else{
                            alert(rs.message);
                        }
                    },"json");
                }
            },
            mounted: function() {
                this.pageSearch();
            }
        });
    </script>
</div>
</body>
</html>