<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head th:replace="components/vue/vue-list :: head('权限列表', 'list')"></head>
<body>
<div id="app">
    <template>
        <div style="margin-left: 6px;margin-bottom: 6px;">
            <el-form :inline="true" :model="searchForm" style="margin: 0; padding: 0;">
                <el-form-item label="日志等级">
                    <el-select size="small" v-model="searchForm.levelString" placeholder="请选择">
                        <el-option label="INFO" value="INFO"></el-option>
                        <el-option label="WARN" value="WARN"></el-option>
                        <el-option label="ERROR" value="ERROR"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" icon="el-icon-search" @click="doSearch"><span th:text="#{search}"></span></el-button>
                    <el-button size="mini" icon="el-icon-refresh" @click="doReset"><span th:text="#{reset}"></span></el-button>
                </el-form-item>
            </el-form>
            <el-button th:if="${#authorization.expression('hasAnyRole(''__${add}__'')')}" type="primary" size="mini" icon="el-icon-plus" @click="doAdd"><span th:text="#{add}"></span></el-button>
            <el-button type="primary" size="mini" icon="el-icon-upload2" @click="doImport"><span th:text="#{import}"></span></el-button>
            <el-button type="primary" size="mini" icon="el-icon-download" @click="doExport"><span th:text="#{export}"></span></el-button>
        </div>
        <el-table border stripe size="medium" height="356" :data="tableData" highlight-current-row
                  style="font-size: 12px"
                  v-loading="tableLoading" cell-style="padding:1px">
            <el-table-column align="center" type="index" :index="indexSerial" width="50"></el-table-column>
            <el-table-column align="center" prop="timestmp" label="时间" width="180"></el-table-column>
            <el-table-column align="center" prop="levelString" label="日志等级" width="180"></el-table-column>
            <el-table-column align="center" prop="formattedMessage" label="格式化信息" width="180"></el-table-column>
            <el-table-column align="center" prop="callerClass" label="调用类" width="180"></el-table-column>
            <el-table-column align="center" prop="callerMethod" label="调用方法" width="180"></el-table-column>
            <el-table-column align="center" prop="callerLine" label="调用行号" width="180"></el-table-column>
            <!--<el-table-column align="center" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button th:if="${#authorization.expression('hasAnyRole(''__${edit}__'')')}" size="mini" type="primary" icon="el-icon-edit"
                               @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button th:if="${#authorization.expression('hasAnyRole(''__${delete}__'')')}" size="mini" type="danger" icon="el-icon-delete"
                               @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>-->
        </el-table>
        <el-col class="toolbar" style="padding:10px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo"
                           :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total"
                           style="float:right"></el-pagination>
        </el-col>
    </template>
</div>
</body>
<script th:src="@{/js/vue/common.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    //Vue.http.options.emulateJSON = true;
    //Vue.http.options.emulateHTTP = true;
    var headerName = [[${_csrf.headerName}]];
    axios.defaults.headers.common[headerName] = [[${_csrf.token}]];

    //国际化
    international([[${session.locale}]]);

    var requestUrls = {
        list: "/api/loggingEvents/data"
    };

    var app = new Vue({
        el: '#app',
        data: {
            tableData: [],
            pageNo: 1,
            pageSize: 10,
            total: 1000,
            tableLoading: true,
            searchForm: {
                levelString: ""
            }
        },
        mounted: function () {
            this.loadData(this.pageNo, this.pageSize);
        },
        methods: {
            indexSerial(index) {
                return index + 1 + (this.pageNo - 1) * this.pageSize;
            },
            loadData(pageNo, pageSize) {
                if (!isNaN(pageNo)) {
                    this.pageNo = pageNo;
                }
                if (!isNaN(pageSize)) {
                    this.pageSize = pageSize;
                }
                var params_ = {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                };
                Object.assign(params_, this.searchForm);
                for (let key in params_) {
                    if (isArray(params_[key])) {
                        params_[key] = params_[key].join(',');
                    }
                }

                this.tableLoading = true;
                this.$http.get(requestUrls.list, {
                    params: params_
                }).then((response) => {
                    this.tableLoading = false;
                    this.total = parseInt(response.data.total);
                    this.tableData = [];
                    for (let key in response.data.rows) {
                        this.$set(this.tableData, key, response.data.rows[key]);
                    }
                }).catch((error) => {
                    this.tableLoading = false;
                    let errorMessage = "发生错误";
                    if (error.response) {
                        errorMessage = error.response.data.message;
                    }
                    parent.showError(errorMessage);
                });
            },
            //每页显示数据量变更
            handleSizeChange(val) {
                //清除上一次请求的缓存，不然字体图标有缓存
                this.tableData = [];

                this.pageSize = val;
                this.loadData(this.pageNo, this.pageSize);
            },
            //页码变更
            handleCurrentChange(val) {
                //清除上一次请求的缓存，不然字体图标有缓存
                this.tableData = [];

                this.pageNo = val;
                this.loadData(this.pageNo, this.pageSize);
            },
            doSearch(event) {
                this.tableData = [];
                this.pageNo = 1;
                this.loadData(this.pageNo, this.pageSize);
            },
            doReset(event) {
                for (let i in this.searchForm) {
                    this.searchForm[i] = null;
                }
                this.doSearch(event);
            },
            formatSex(row, column) {
                let list = [[${sexTypeList}]];
                for (let i = 0; i < list.length; i++) {
                    if (String(row.sex) === String(list[i]["typeCode"])) {
                        return list[i]["typeName"];
                    }
                }
                return row.sex;
            },
            formatEnabled(row, column) {
                let list = [[${enabledStatusList}]];
                for (let i = 0; i < list.length; i++) {
                    if (String(row.enabled) === String(list[i]["typeCode"])) {
                        return list[i]["typeName"];
                    }
                }
            },
            formatHeadPhoto(row, column) {
                let value = row.headPhoto;
                if (!value) {
                    return '';
                }
                return '<img class="image-thumb" src="' + [[${filePathPrefix}]] + value + '" alt="头像" width="30px">';
            },
            handleEdit(index, row) {
                parent.showWindow({
                    title: [[#{add}]],
                    content: requestUrls.edit + row.id
                });
            },
            handleDelete(index, row) {
                parent.showDelete(index, row);
            },
            doAdd(event) {
                parent.showWindow({
                    title: [[#{add}]],
                    content: requestUrls.add
                });
            },
            doEdit(event) {

            },
            doDelete(index, row) {
                this.$http.delete(requestUrls.delete + row.id)
                    .then((response) => {
                        parent.showSuccess("删除成功");
                        this.loadData(this.pageNo, this.pageSize);
                    }).catch((response) => {
                    console.error(response);
                });
            },
            doImport(event) {
                this.$http.get("/api/authorities/import", {}).then(function (response) {
                    this.$notify({
                        title: '提示',
                        message: response.data.message,
                        position: 'bottom-right',
                        duration: 2000
                    });
                }).catch(function (response) {
                    console.error(response);
                });
            },
            doExport(event) {
                window.open("/api/authorities/export");
            }
        }
    });

    function iframeMethond(index, row) {
        console.log('iframeMethond');
        app.doDelete(index, row);
    }

    function iframeUpdateList() {
        app.loadData(app.pageNo, app.pageSize);
    }

    /*]]>*/
</script>
</html>