<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:t="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 th:label="#{oauthUser.username}">
                    <el-input size="small" v-model="searchForm.username" th:placeholder="#{pleaseInput} + #{oauthUser.username}" clearable></el-input>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.enabled}">
                    <el-select size="small" v-model="searchForm.enabled" th:placeholder="#{pleaseChoose}">
                        <el-option th:label="#{pleaseChoose}" value=""></el-option>
                        <el-option
                                v-for="item in enabledStatusList"
                                :key="item.typeCode"
                                :label="item.typeName"
                                :value="item.typeCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.phone}">
                    <el-input size="small" v-model="searchForm.phone" th:placeholder="#{pleaseInput} + #{oauthUser.phone}" clearable></el-input>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.email}">
                    <el-input size="small" v-model="searchForm.email" th:placeholder="#{pleaseInput} + #{oauthUser.email}" clearable></el-input>
                </el-form-item>
                <el-form-item th:label="#{oauthUser.sex}">
                    <el-select size="small" v-model="searchForm.sex" th:placeholder="#{pleaseChoose}">
                        <el-option th:label="#{pleaseChoose}" value=""></el-option>
                        <el-option
                                v-for="item in sexTypeList"
                                :key="item.typeCode"
                                :label="item.typeName"
                                :value="item.typeCode">
                        </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-upload
                    class="upload-demo"
                    action="/api/oauthUsers/import"
                    :show-file-list="false"
                    :on-success="handleImportSuccess"
                    :on-error="handleImportError"
                    :before-upload="beforeImportUpload"
                    :file-list="importList">
                <el-button type="primary" size="mini" icon="el-icon-upload2"><span th:text="#{import}"></span></el-button>
            </el-upload>
            <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="320" :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="id" label="id" width="180"></el-table-column>
            <!--<el-table-column align="center" prop="createUser" label="创建人" width="180"></el-table-column>
            <el-table-column align="center" prop="createDate" label="创建时间" width="180"></el-table-column>
            <el-table-column align="center" prop="updateUser" label="更新人" width="180"></el-table-column>
            <el-table-column align="center" prop="updateDate" label="更新时间" width="180"></el-table-column>-->
            <el-table-column align="center" prop="username" th:label="#{oauthUser.username}" width="180"></el-table-column>
            <!--<el-table-column align="center" prop="password" label="密码" width="200"
                             :show-overflow-tooltip="true"></el-table-column>-->
            <el-table-column align="center" prop="enabled" th:label="#{oauthUser.enabled}" :formatter="formatEnabled"
                             width="180"></el-table-column>
            <el-table-column align="center" prop="areaCode" th:label="#{oauthUser.areaCode}" width="180"></el-table-column>
            <el-table-column align="center" prop="phone" th:label="#{oauthUser.phone}" width="180"></el-table-column>
            <el-table-column align="center" prop="email" th:label="#{oauthUser.email}" width="180"></el-table-column>
            <el-table-column align="center" prop="address" th:label="#{oauthUser.address}" width="180"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="age" th:label="#{oauthUser.age}" width="180"></el-table-column>
            <el-table-column align="center" prop="birth" th:label="#{oauthUser.birth}" width="180" sortable></el-table-column>
            <el-table-column align="center" prop="headPhoto" th:label="#{oauthUser.headPhoto}" width="180" padding="0px"
                             :show-overflow-tooltip="true">
                <!--<template slot-scope="scope">
                    <img :src="scope.row.headPhoto" alt="图片加载中" style="width: 36px; height: 36px;padding: 0; margin: 0">
                </template>-->
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="right">
                        <img :src="scope.row.headPhoto" th:alt="#{loading}" style="width: 120px; height: 120px;">
                        <div slot="reference" class="name-wrapper">
                            <img :src="scope.row.headPhoto" th:alt="#{loading}"
                                 style="width: 24px; height: 24px;padding: 0; margin: 0">
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="personBrief" th:label="#{oauthUser.personBrief}" width="180"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="sex" th:label="#{oauthUser.sex}" :formatter="formatSex" width="180"></el-table-column>
            <el-table-column align="center" prop="visitCard" th:label="#{oauthUser.visitCard}" width="180"></el-table-column>
            <el-table-column align="center" prop="loginType" th:label="#{oauthUser.loginType}" width="180"></el-table-column>
            <el-table-column align="center" prop="loginStatus" th:label="#{oauthUser.loginStatus}" width="180"></el-table-column>
            <el-table-column align="center" prop="loginDate" th:label="#{oauthUser.loginDate}" width="180"></el-table-column>
            <el-table-column align="center" fixed="right" th:label="#{operation}" 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;
    //console.log([[${_csrf.headerName}]] + ':' + [[${_csrf.token}]]);
    var headerName = [[${_csrf.headerName}]];
    axios.defaults.headers.common[headerName] = [[${_csrf.token}]];

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

    var requestUrls = {
        list: "/api/oauthUsers/data",
        add: "/api/oauthUsers/add",
        edit: "/api/oauthUsers/edit?id=",
        delete: "/api/oauthUsers/ids/",
        import: "/api/oauthUsers/import",
        export: "/api/oauthUsers/export"
    };

    var app = new Vue({
        el: '#app',
        data: {
            importList: [],
            tableData: [],
            pageNo: 1,
            pageSize: 10,
            total: 1000,
            tableLoading: true,
            searchForm: {
                username: '',
                enabled: null,
                phone: '',
                email: '',
                sex: null
            },
            enabledStatusList: [[${enabledStatusList}]],
            sexTypeList: [[${sexTypeList}]]
        },
        mounted: function () {
            this.loadData(this.pageNo, this.pageSize);
        },
        methods: {
            handleImportPreview(file) {
                console.log(file);
            },
            handleImportSuccess(res, file) {
                parent.closeLoading();
                this.$message({
                    message: [[#{importSuccess}]],
                    type: 'success'
                });
            },
            handleImportError(error, file, fileList) {
                parent.closeLoading();
                let errorMessage = [[#{requestError}]];
                if (error.response) {
                    errorMessage = error.response.data.message;
                }
                this.$message.error(errorMessage);
            },
            beforeImportUpload(file) {
                let filename = file.name;
                let fileSuffix = filename.substr(filename.lastIndexOf("."));
                if(".xls" != fileSuffix && ".xlsx" != fileSuffix) {
                    this.$message.error([[#{pleaseChooseExcelFile}]]);
                    return false;
                }
                parent.openLoading();
                return true;
            },
            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 = [[#{requestError}]];
                    if (error.response) {
                        errorMessage = error.response.data.message;
                    }
                    parent.showError(errorMessage);
                });
            },
            //每页显示数据量变更
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadData(this.pageNo, this.pageSize);
            },
            //页码变更
            handleCurrentChange(val) {
                this.pageNo = val;
                this.loadData(this.pageNo, this.pageSize);
            },
            doSearch(event) {
                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: [[#{edit}]],
                    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([[#{deleteSuccess}]]);
                        this.loadData(this.pageNo, this.pageSize);
                    }).catch((error) => {
                    let errorMessage = [[#{deleteFailed}]];
                    if (error.response) {
                        errorMessage = error.response.data.message;
                    }
                    parent.showError(errorMessage);
                });
            },
            doImport(event) {
                parent.openLoading();
                this.$http.get(requestUrls.import, {}).then((response) => {
                    parent.closeLoading();
                    parent.showSuccess([[#{importSuccess}]]);
                }).catch((error) => {
                    parent.closeLoading();
                    let errorMessage = [[#{importFailed}]];
                    if (error.response) {
                        errorMessage = error.response.data.message;
                    }
                    parent.showError(errorMessage);
                });
            },
            doExport(event) {
                window.open(requestUrls.export);
            }
        }
    });

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

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

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