<template>
    <div>
        <el-card class="el-card">
            <el-form
                :inline="true"
                :model="queryParams"
                size="mini"
            >
                <el-form-item label="名称">
                    <el-input
                        v-model="queryParams.name"
                        size="mini"
                        placeholder="请输入名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select
                        v-model="queryParams.status"
                        placeholder="状态"
                    >
                        <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button-group>
                        <el-button
                            type="primary"
                            icon="el-icon-refresh"
                            @click="onReset"
                        ></el-button>
                        <el-button type="primary" icon="search" @click="onSubmit"
                        >查询
                        </el-button>
                        <el-button @click.native.stop="insert">新增</el-button>
                    </el-button-group>
                </el-form-item>

            </el-form>
            <el-table
                v-loading="loading"
                :data="list"
                style="width: 100%"
            >
                <el-table-column label="序号" type="index" />
                <el-table-column label="用户账号" prop="userName" />
                <el-table-column label="用户昵称" prop="nickName" />
                <el-table-column label="状态" prop="status">
                    <template slot-scope="scope">
                        <span>{{ getStatus(scope.row.status) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="角色" prop="status">
                    <template slot-scope="scope">
                        <span>{{ getRoleName(scope.row.roleId) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click.native.stop="update(scope.row.id)">修改</el-button>
                        <el-button type="text" size="small" @click.native.stop="deleteRow(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :current-page="queryParams.page"
                :page-size="queryParams.limit"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
            ></el-pagination>
        </el-card>
        <el-dialog :title="dialog.title"
                   :visible.sync="dialog.visible"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
        >
            <el-form :model="dialog.detail" label-position="left" label-width="100px">
                <el-form-item label="key" prop="userKey">
                    <el-input v-model="dialog.detail.userKey" readonly />
                </el-form-item>
                <el-form-item label="用户账号" prop="name">
                    <el-input v-model="dialog.detail.userName" />
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickName">
                    <el-input v-model="dialog.detail.nickName" />
                </el-form-item>
                <el-form-item label="密码" prop="sort">
                    <el-input v-model="dialog.detail.password" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio v-model="dialog.detail.status" label="1">启用</el-radio>
                    <el-radio v-model="dialog.detail.status" label="0">禁用</el-radio>
                </el-form-item>
                <el-form-item label="角色" prop="roleId">
                    <el-select
                        v-model="dialog.detail.roleId"
                        placeholder="角色"
                    >
                        <el-option
                            v-for="item in roleList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <!--  <el-form-item label="appId" prop="udplat_appId">
                      <el-input v-model="dialog.detail.udplat_appId"/>
                  </el-form-item>
                  <el-form-item label="userName" prop="udplat_userName">
                      <el-input v-model="dialog.detail.udplat_userName"/>
                  </el-form-item>
                  <el-form-item label="密钥" prop="sort">
                      <el-input v-model="dialog.detail.udplat_secretKey"/>
                  </el-form-item>-->

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { GetList, Insert, Update, Detail, Delete, GetRoleList } from "@/api/sys/sysUser";

export default {
    name: "sysUser",
    data() {
        return {
            loading: false,
            list: [],
            total: 0,
            statusOptions: [{ value: "", label: "全部" }, { value: "0", label: "禁用" }, { value: "1", label: "启用" }],
            roleList: [],
            queryParams: {
                page: 1,
                limit: 10,
                name: "",
                status: ""
            },
            dialog: {
                visible: false,
                title: "新增",
                detail: {}
            }
        };
    },
    created() {
        this.getList();
        this.getRoleList();
    },
    methods: {
        getRoleList() {
            GetRoleList().then(result => {
                this.roleList = result.data.list;
            });
        },
        getList() {
            this.loading = true;
            GetList(this.queryParams).then(res => {
                this.list = res.data.list;
                this.total = res.data.total;
                this.loading = false;
            });
        },
        handleCurrentChange(val) {
            this.queryParams.page = val;
            this.getList();
        },
        getStatus(status) {
            return this.selectDictLabel(this.statusOptions, status);
        },
        getRoleName(roleId) {
            for (const item of this.roleList) {
                if (item.id == roleId)
                    return item.name;
            }
            return "";
        },
        onReset() {
            this.$router.push({
                path: ""
            });
            this.queryParams = {
                page: 1,
                limit: 10,
                name: "",
                status: ""
            };
            this.getList();
        },
        onSubmit() {
            this.queryParams.page = 1;
            this.getList();
        },
        formRest() {
            this.dialog.detail = {
                id: 0,
                userKey: "",
                userName: "",
                nickName: "",
                password: "",
                status: "0",
                roleId: 0,
                udplat_appId: "",
                udplat_secretKey: "",
                udplat_userName: ""
            };
        },
        insert() {
            this.formRest();
            this.dialog.title = "新增";
            this.dialog.visible = true;
        },
        update(id) {
            this.formRest();
            this.dialog.title = "修改";
            Detail(id).then(res => {
                this.dialog.detail = res.data;
                this.dialog.visible = true;
            });
        },
        save() {
            let id = this.dialog.detail.id;
            if (id > 0) {
                Update(this.dialog.detail).then(res => {
                    if (res.code == 20000) {
                        this.$message.success("修改成功！");
                        this.dialog.visible = false;
                        this.getList();
                    }

                });
            } else {
                Insert(this.dialog.detail).then(res => {
                    if (res.code == 20000) {
                        this.$message.success("新增成功！");
                        this.dialog.visible = false;
                        this.getList();
                    }
                });
            }
        },
        deleteRow(id) {
            let _this = this;
            this.$confirm("确定删除该行数据，删除后将不可恢复?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    Delete(id).then(result => {
                        if (result.code == 20000) {
                            _this.$message.success("删除成功！");
                            _this.getList();
                        }
                    });

                })
                .catch(() => {

                    /* _this.$message({
                         type: 'error',
                         message:"发生错误！"
                     });*/
                });


        }
    }
};
</script>

<style scoped>

</style>
