<template>
    <div>
        <Panel title="用户管理">
            <template slot="buttons">
                <el-button title="查询" icon="el-icon-fa-search" class="blue" @click="queryUserData">查询</el-button>
                <el-button title="重置" icon="el-icon-fa-reply-all" class="yellow" @click="pageTable.handleReset()">重置</el-button>
            </template>
            <el-form label-position="top" :model="pageTable.param" ref="queryform">
                <el-row>
                    <el-col :lg='4' :sm='12'>
                        <el-form-item label="用户名称" prop="username">
                            <el-input v-model="pageTable.param.username" @keyup.native.enter="queryUserData"/>
                        </el-form-item>
                    </el-col>
                    <el-col :lg='4' :sm='12'>
                        <el-form-item label="账号状态" prop="userstat">
                            <el-select placeholder="状态" v-sys-code="'userstat'" v-model="pageTable.param.userstat" clearable>
                                <el-option v-for="item in sysCode.userstat" :key="item.key" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :lg='4' :sm='12'>
                        <el-form-item label="隶属机构" prop="orgId">
                            <Selector v-model="pageTable.param.orgId" :clearable="true" label-key="label" value-key="id"
                                      placeholder="隶属组织机构">
                                <SelectorTree tree-key="orgTree" searchField="ORG_NAME" rootLabel="组织机构"/>
                            </Selector>
                        </el-form-item>
                    </el-col>
                    <el-col :lg='4' :sm='12' v-if="!userType">
                        <el-form-item label="账号类型" prop="userType">
                            <SysCodePicker type="userType" v-model="pageTable.param.userType" :disabled="false"></SysCodePicker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg='4' :sm='12'>
                        <el-form-item label="电话号码" prop="userMobl">
                            <el-input v-model="pageTable.param.userMobl" @keyup.native.enter="queryUserData"/>
                        </el-form-item>
                    </el-col>
                    <el-col :lg='4' :sm='12'>
                        <el-form-item label="证件号码" prop="userCertNo">
                            <el-input v-model="pageTable.param.userCertNo" @keyup.native.enter="queryUserData"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </Panel>
        <Panel title="用户列表">
            <template slot="buttons">
                <el-button title="批量锁定" icon="el-icon-fa-lock" class="red" :disabled="!multipleSelection.length>0"
                           @click="lockAndOpenUsers(true)">锁定
                </el-button>
                <el-button title="批量解锁" icon="el-icon-fa-unlock" class="blue" :disabled="!multipleSelection.length>0"
                           @click="lockAndOpenUsers(false)">解锁
                </el-button>
                <el-button title="批量重置密码" icon="el-icon-fa-key" class="yellow" :disabled="!multipleSelection.length>0"
                           @click="resetUserPw">重置密码
                </el-button>
                <el-button title="新增" class="green" @click="doAdd()" icon="el-icon-fa-plus">新增</el-button>
            </template>

            <el-table border :data="pageTable.data" element-loading-spinner="el-icon-loading" v-loading="pageTable.isLoading" ref="table"
                      element-loading-text="数据加载中" height="calc(100vh - 280px)" @selection-change="handleSelectionChange">
                <el-table-column type="selection" align='center' width="55" fixed='left'/>
                <el-table-column prop="username" label="用户名称" show-overflow-tooltip/>
                <el-table-column prop="userid" label="登陆名称" show-overflow-tooltip/>
                <el-table-column prop="userstat" label="账号状态" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <SysCode type="userstat" :value="scope.row.userstat"/>
                    </template>
                </el-table-column>
                <el-table-column prop="orgname" label="隶属机构" show-overflow-tooltip/>
                <el-table-column prop="usertype" label="账号类型" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <SysCode type="userType" :value="scope.row.usertype"/>
                    </template>
                </el-table-column>
                <el-table-column prop="usermobl" label="电话号码" show-overflow-tooltip/>
                <el-table-column label="操作" fixed='right' :width="tableAction" align="center">
                    <template slot-scope="scope">
                        <slot name="table-action-buttons" :data="scope"/>
                        <el-button title="编辑" icon="el-icon-fa-edit" class="blue" @click="doEdit(scope.$index, scope.row)">
                            {{ tableActionEditLabel }}
                        </el-button>
                        <el-button title="登陆时间轴" icon="el-icon-location" class="blue" @click="showTimeLine(scope.row)">时间轴</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <export-ctrl class="pull-left" @export="pageTable.handleExport($event, $refs.table)"/>
            <el-pagination background :page-size.sync="pageTable.size" :current-page.sync="pageTable.curr" :total="pageTable.total"/>
        </Panel>

        <el-dialog close-on-press-escape append-to-body v-draggable :visible.sync="editor.show" title="用户管理" width="800px">
            <div class="dialog-button">
                <el-button title="保存" class="blue " icon="el-icon-fa-save" @click="doSubmit()" v-loading="editor.loading"
                           :disabled="editor.stat==='6' ||editor.stat==='9'">保存
                </el-button>
                <el-button title="重置密码" icon="el-icon-fa-key" class="yellow" @click="resetPwd()" v-loading="editor.loading"
                           :disabled="!editor.uuid||editor.stat!=='5'">重置密码
                </el-button>
                <!--5生效 6锁定 9注销-->
                <el-button title="注销" icon="el-icon-fa-trash" class="red" @click="doShut()" v-loading="editor.loading"
                           :disabled="!editor.uuid||editor.stat==='9'">注销
                </el-button>
                <el-button title="锁定" icon="el-icon-fa-lock" class="red" @click="doClose()" v-loading="editor.loading"
                           v-if="editor.uuid && editor.stat==='5'">锁定
                </el-button>
                <el-button title="解锁" icon="el-icon-fa-unlock" class="blue" @click="doOpen()" v-loading="editor.loading"
                           v-if="editor.uuid && editor.stat==='6'">解锁
                </el-button>
            </div>
            <UserEditor style="min-height:250px" v-if="editor.show" ref="userEditor" :uuid="editor.uuid" :userType="userType"
                        @submit="saveUser" v-loading="editor.loading" :editRole="editRole"/>
        </el-dialog>

        <el-dialog close-on-press-escape append-to-body v-draggable :visible.sync="timeLine.visible" title="用户登录时间轴" width="500px">
            <div v-if="timeLine.visible">
                <UserTimeLine @closeDia='timeLine.visible = false' :user-uuid='timeLine.uuid'/>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import UserEditor from "./UserEditor";
import SelectorTree from "@/common/SelectorTree";
import UserAPI from "@/api/base/usrm/UserAPI";
import UserTimeLine from "./UserTimeLine.vue";
import PageTable from "@/libs/PageTable";

export default {
    props: {
        userType: {type: String, default: null},
        tableAction: {type: String, default: '150',},
        tableActionEditLabel: {type: String, default: '编辑',},
        editRole: {type: String, default: "true"},
    },
    name: "UserMgr",
    components: {UserEditor, SelectorTree, UserTimeLine},
    data() {
        return {
            pageTable: new PageTable({
                autoLoad: false,
                doLoad: UserAPI.queryUser,
                param: {},
                log: false
            }),
            timeLine: {
                visible: false,
                uuid: "",
                username: '',
            },
            queryform: {
                usercode: null,
                username: null,
                userstat: null,
                orgId: null,
                startTime: null,
                endTime: null
            },
            table: {
                data: []
            },
            editor: {
                show: false,
                uuid: null,
                visible: false, // 编辑器-显示
                loading: false,
                stat: ""
            },
            multipleSelection: []
        };
    },
    mounted() {
        this.queryUserData();
    },
    methods: {
        //批量重置用户密码
        async resetUserPw() {
            await this.confirm();
            let uuids = [];
            this.multipleSelection.forEach((value, index) => {
                uuids.push(value.uuid);
            });
            if (uuids.length > 0) {
                await UserAPI.resetUserPw({uuids: uuids});
                await this.pageTable.handleLoad();
            }
        },
        //显示登陆时间轴
        showTimeLine(row) {
            this.timeLine.username = row.username;
            this.timeLine.uuid = row.uuid;
            this.timeLine.visible = true;
        },
        // 重置密码
        async resetPwd(data) {
            await this.confirm(null, "是否重置该用户密码");
            this.editor.loading = true;
            this.editor.error = {}; // 还原错误信息(必须先还原)
            await UserAPI.resetPwd(this.$refs.userEditor.data);
            await this.pageTable.handleLoad();
            this.cancelEditorLoading(); // 最终要取消loading
        },
        // 注销
        async doShut(data) {
            await this.confirm(null, "是否注销该用户");
            this.editor.loading = true;
            this.editor.error = {}; // 还原错误信息(必须先还原)
            await UserAPI.shutUser(this.$refs.userEditor.data);
            await this.pageTable.handleLoad(); // 查询数据
            this.cancelEditorLoading(); // 最终要取消loading
        },
        // 解锁
        async doOpen(data) {
            await this.confirm(null, "是否解锁该用户");
            this.editor.loading = true;
            this.editor.error = {}; // 还原错误信息(必须先还原)
            await UserAPI.openUser(this.$refs.userEditor.data);
            await this.pageTable.handleLoad(); // 查询数据
            this.cancelEditorLoading(); // 最终要取消loading
        },
        // 锁定
        async doClose(data) {
            await this.confirm(null, "是否锁定该用户");
            this.editor.loading = true;
            this.editor.error = {}; // 还原错误信息(必须先还原)
            await UserAPI.lockUser(this.$refs.userEditor.data);
            await this.pageTable.handleLoad(); // 查询数据
            this.cancelEditorLoading(); // 最终要取消loading
        },
        // 打开编辑页面
        doEdit(index, rowData) {
            this.editor.show = true;
            this.editor.uuid = rowData.uuid;
            this.editor.stat = rowData.userstat;
        },
        // 打开新建画面
        doAdd() {
            this.editor.show = true;
            this.editor.uuid = null;
            this.editor.stat = "";
        },
        async doSubmit() {
            await this.confirm();
            this.$refs.userEditor.submitForm();
        },
        async saveUser(data) {
            try {
                this.editor.loading = true;
                let resp = await UserAPI.saveUser(data)
                if (resp.newuser === "true") {
                    this.$alert("该用户的默认密码是: " + resp.password, {showConfirmButton: false, type: "info"});
                }
            } finally {
                this.editor.loading = false;
            }
            await this.pageTable.handleLoad(); // 查询数据
            this.cancelEditorLoading(); // 最终要取消loading
        },
        cancelEditorLoading() {
            this.editor.show = false;
            this.editor.loading = false;
        },
        queryUserData() {
            if (this.userType) {
                this.pageTable.param.userType = this.userType;
            }
            this.pageTable.handleLoad();
        },
        resetquery() {
            this.$refs.queryform.resetFields();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //批量解锁或锁定用户
        async lockAndOpenUsers(b) {
            await this.confirm();
            let uuids = [];
            this.multipleSelection.forEach((value, index) => {
                uuids.push(value.uuid);
            });
            if (uuids.length > 0)
                if (b) {
                    await UserAPI.lockAndOpenUsers({uuids: uuids, opType: "1"});
                    await this.pageTable.handleLoad();
                } else {
                    await UserAPI.lockAndOpenUsers({uuids: uuids, opType: "0"});
                    await this.pageTable.handleLoad();
                }
        }
    }
};
</script>
