<!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">
        <link rel="stylesheet" th:href="@{/static/css/example.css}" href="../static/css/example.css">
    </head>
    <body>
        <div class="container" id="app" style="display:flex;flex-direction:column;">
            <div class="page__hd">
                <h1 class="page__title" th:text="${device.aliasName}"></h1>
                <p class="page__desc">{{libName}}&gt;人员列表</p>
                <div class="right-corner">
                    <a class="weui-btn weui-btn_mini weui-btn_default" @click="gotoPeopleLibList()">返回</a>
                </div>
            </div>
            <div>
                <div class="weui-cells">
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__bd">
                            <input class="weui-input" placeholder="查询编号" v-model="personId">
                        </div>
                        <div class="weui-cell__ft">
                            <a class="weui-btn weui-btn_mini weui-btn_primary" @click="pageSearch(0)">
                                <i class="weui-loading" v-show="loading"></i>查询
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cells" style="flex:1;overflow:auto;">
                <a class="weui-cell"  v-for="(person,index) in list">
                    <div class="weui-cell__hd" style="width:60px;">
                        <div style="border-radius:50%;width:48px;height:48px;overflow:hidden;">
                            <template v-if="person.ImageList.length>0">
                                <img :src="'data:image/png;base64,' + person.ImageList[0].Data" style="object-fit:cover;" width="48" height="48"/>
                            </template>
                        </div>
                    </div>
                    <div class="weui-cell__bd">
                        <p v-html="(offset + index + 1) + '.' + person.PersonName"></p>
                    </div>
                    <div class="weui-cell__ft">
                        <button class="weui-btn weui-btn_mini weui-btn_primary" @click="deletePeople(person)">删除</button>
                    </div>
                </a>
            </div>
            <div v-if="total>0" class="flex-row">
                <a class="weui-btn weui-btn_mini weui-btn_default" @click="first()">首页</a>
                <a class="weui-btn weui-btn_mini weui-btn_default" @click="prev()">上一页</a>
                <a class="weui-btn weui-btn_mini weui-btn_default" @click="next()">下一页</a>
                <a class="weui-btn weui-btn_mini weui-btn_default" @click="last()">末页</a>
                <span style="flex:1;align:right;">共有：{{total}}条</span>
            </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 th:src="@{/static/js/weui.min.js}" src="../static/js/weui.min.js"></script>
        <script type="text/javascript" th:inline="javascript">
            var path = [[${#httpServletRequest.contextPath}]];
            var device = [[${device}]];
            var libId = [[${param.libId}]][0];
            var libName = [[${param.libName}]][0];
        </script>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data : {
                    list: [],
                    className: "",
                    libName: libName,
                    token:$.cookie('devOpsToken'),
                    loading: false,
                    personId: "",
                    total: 0,
                    offset: 0,
                    limit: 5
                },
                methods: {
                    gotoPeopleLibList(){
                        window.location.href = path + "/devOps/listOfPeopleLib?deviceId=" + device.id;
                    },
                    pageSearch(index) {
                        var self = this;
                        self.loading = true;

                        $.post(path + "/devOps/queryPeople",{
                            deviceNo : device.deviceNo,
                            libId : libId,
                            qryType: "27",
                            offset: index,
                            limit: this.limit,
                            qryData: this.personId
                        },
                        function(rs){
                            self.loading = false;

                            if(rs.result){
                                self.offset = index;
                                self.list = rs.data.Response.Data.PersonList.PersonInfoList;
                                self.total = rs.data.Response.Data.Total;
                            }else{
                                alert(rs.message);
                            }
                        }, "json");
                    },
                    delayAlert(msg) {
                        setTimeout(function(){
                            weui.alert(msg);
                        },500);
                    },
                    deletePeople(person) {
                        var self = this;

                        weui.confirm('是否确定删除' + person.PersonName + '？', function(){
                            $.post(path + "/devOps/deletePeople",{
                                deviceNo: device.deviceNo,
                                libId: libId,
                                personId : person.PersonID
                            },
                            function(rs){
                                if(rs.result){
                                    self.delayAlert("删除成功!");
                                    self.pageSearch(self.offset);
                                }else{
                                    self.delayAlert(rs.message);
                                }
                            },"json");
                        }, null);
                    },
                    first() {
                        this.pageSearch(0);
                    },
                    prev() {
                        if(this.offset>0){
                            this.pageSearch(this.offset - this.limit);
                        }
                    },
                    next() {
                        if(this.offset + this.limit<this.total){
                            this.pageSearch(this.offset + this.limit);
                        }
                    },
                    last() {
                        this.pageSearch(this.total - this.limit);
                    },
                },
                mounted: function() {
                    this.pageSearch(0);
                }
            });
        </script>
    </body>
</html>