<template>
    <div>
        <div class="top-box flex-align">
            <div>
                <a-button type="primary" style="margin-right: 24px;" @click="showModal('add')">创建用户</a-button>
                <a-button type="primary" @click="_UserDeleteList">删除</a-button>
            </div>
            <a-input-search style="width:400px;" placeholder="搜索用户" enter-button @search="onSearch" />
        </div>
        <a-table :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :columns="columns"
            :loading="loading" :dataSource="data" size="small" :rowKey="record => record.id" :pagination="pagination"
            @change="handleChange">
            <template slot="userDisciplines" slot-scope="text">
                <template v-if="text.length>0">{{subjectText(text)}}</template>
                <template v-else><span :style="{color:'#ffe58f'}">未分配</span></template>
            </template>
            <template slot="displayNames" slot-scope="text">
                {{text.length>0?text.join(','):'普通用户'}}
            </template>
            <template slot="isActive" slot-scope="text">
                <span :style="{color:text?'green':'red'}">{{text?'已启用':'已禁用'}}</span>
            </template>
            <template slot="action" slot-scope="text,record">
                <a class="m-r8" @click="_AssignRoles(record)">分配角色</a>
                <a class="m-r8" @click="_UserDiscipline(record)">分配学科</a>
                <a class="m-r8" @click="showModal('edit',record)">修改</a>
                <a class="m-r8" v-if="!record.isActive" @click="_UserActivate(record,true)">启用</a>
                <a class="m-r8" v-if="record.isActive" @click="_UserActivate(record,false)">禁用</a>
                <a class="m-r8" @click="_resetPwd(record)">重置密码</a>
                <a class="m-r8" @click="_UserDelete(record)">删除</a>
            </template>
        </a-table>
        <EditUser ref="EditUser" />
        <ResetPwd ref="ResetPwd" />
        <UserDiscipline ref="UserDiscipline" />
        <AssignRoles ref="AssignRoles" />
    </div>
</template>
<script>
    const columns = [
        {
            title: "名称",
            dataIndex: "fullName",
            key: "fullName",
            scopedSlots: { customRender: "fullName" },
            ellipsis: true,
            width: 100
        },
        {
            title: "用户名",
            dataIndex: "userName",
            key: "userName",
            scopedSlots: { customRender: "userName" },
            ellipsis: true,
            width: 100
        },
        {
            title: "手机号码",
            dataIndex: "phoneNumber",
            key: "phoneNumber",
            scopedSlots: { customRender: "phoneNumber" },
            ellipsis: true,
            width: 80
        },
        {
            title: "学科",
            dataIndex: "userDisciplines",
            key: "userDisciplines",
            scopedSlots: { customRender: "userDisciplines" },
            ellipsis: true,
            width: 100
        },
        {
            title: "所属角色",
            dataIndex: "displayNames",
            key: "displayNames",
            scopedSlots: { customRender: "displayNames" },
            ellipsis: true,
            width: 100
        },
        {
            title: "状态",
            dataIndex: "isActive",
            key: "isActive",
            scopedSlots: { customRender: "isActive" },
            ellipsis: true,
            width: 60
        },
        {
            title: "操作",
            key: "action",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            width: 160,
        },
    ]
    import { myPagination } from '@/mixins/myPagination.js'
    import EditUser from './EditUser.vue'
    import ResetPwd from './ResetPwd.vue'
    import UserDiscipline from './UserDiscipline.vue'
    import AssignRoles from './AssignRoles.vue'
    import { UserGetAll, UserActivate, UserDelete, UserDeleteList } from '@/api/api'
    export default {
        mixins: [myPagination],
        components: {
            EditUser,
            ResetPwd,
            UserDiscipline,
            AssignRoles
        },
        data() {
            return {
                columns,
                loading: false,
                data: [],
                selectedRowKeys: [],
                KeyWord: '',
                IsActive: ''
            }
        },
        computed: {
            subjectText() {
                return (data) => {
                    let str = '', arr = []
                    data.forEach(item => {
                        arr.push(item.educationCategory + item.discipline)
                    })
                    str = arr.toString();
                    return str
                }
            }
        },
        mounted() {
            this._UserGetAll()
        },
        methods: {
            //分配角色
            _AssignRoles(record) {
                this.$refs.AssignRoles.showModal(record)
            },
            //分配学科
            _UserDiscipline(record) {
                this.$refs.UserDiscipline.showModal(record)
            },
            _resetPwd(record) {
                console.log(record, 'record666')
                this.$refs.ResetPwd.showModal(record)
            },
            //批量删除用户
            _UserDeleteList() {
                console.log(this.selectedRowKeys, 'selectedRowKeys')
                if (this.selectedRowKeys.length == 0) {
                    this.$message.error('请选择需要删除的用户');
                    return;
                }
                let _this = this;
                this.$confirm({
                    mask: false,
                    okText: '确认',
                    cancelText: '取消',
                    title: `您确认要删除"${_this.selectedRowKeys.length}"位用户吗?`,
                    onOk() {
                        _this.loading = true;
                        let data = {
                            userIdList: _this.selectedRowKeys
                        }
                        UserDeleteList(data).then(res => {
                            _this.$message.success('删除成功！');
                            _this._UserGetAll();
                        }).catch(err => {
                            _this.loading = false;
                        })
                    }
                });
            },
            //删除用户
            _UserDelete(record) {
                let _this = this;
                this.$confirm({
                    mask: false,
                    okText: '确认',
                    cancelText: '取消',
                    title: `您确认要删除"${record.fullName}"用户吗?`,
                    onOk() {
                        _this.loading = true;
                        let data = {
                            id: record.id
                        }
                        UserDelete(data).then(res => {
                            _this.$message.success('删除成功！');
                            _this._UserGetAll();
                        }).catch(err => {
                            _this.loading = false;
                        })
                    }
                });
            },
            //改变用户状态
            _UserActivate(record, type) {
                console.log(record, 'record');
                let data = {
                    userId: record.id,
                    isActive: type
                }
                UserActivate(data).then(res => {
                    this.$message.success('操作成功！');
                    this._UserGetAll();
                })
            },
            getStr(obj, name) {
                let str = "";
                obj.forEach(item => {
                    str = str + item[name] + ' '
                })
                return str
            },
            //用户列表
            _UserGetAll() {
                this.loading = true;
                let data = {
                    IsActive: this.IsActive,
                    KeyWord: this.KeyWord,
                    SkipCount: (this.pagination.current - 1) * this.pagination.pageSize,
                    MaxResultCount: this.pagination.pageSize,
                }
                UserGetAll(data).then(res => {
                    console.log(res, '用户列表')
                    this.data = res.items;
                    this.pagination.total = res.totalCount;
                    this.loading = false;
                }).catch(err => {
                    this.loading = false;
                })
            },
            showModal(type, record = {}) {
                this.$refs.EditUser.showModal(type, record)
            },
            onSearch(val) {
                this.KeyWord = val;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._UserGetAll();
            },
            //表格选项选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            //表格change
            handleChange(pagination, filters, sorter) {
                const pager = { ...this.pagination };
                pager.current = pagination.current;
                this.pagination = pager;
                this._UserGetAll();
            },
        }
    }
</script>
<style scoped>
    .top-box {
        height: 64px;
        padding: 0 24px;
    }
</style>