<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="分组名称" prop="groupName">
                <el-input v-model="queryParams.groupName" placeholder="请输入分组名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="组长" prop="groupUserId">
                <el-select v-model="queryParams.groupUserId" placeholder="请选择组长" clearable filterable style="width: 140px"
                    size="small">
                    <el-option v-for="item in userAll" :key="item.id" :label="item.nickname" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="list" row-key="groupId">
            <el-table-column label="ID" prop="id" width="100px"></el-table-column>
            <el-table-column label="分组名称" prop="groupName"></el-table-column>
            <el-table-column label="组长" prop="nickname">
                <template slot-scope="scope">
                    <span>{{ scope.row.groupUserInfo ? scope.row.groupUserInfo.nickname : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120px" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="el-icon-copy-document"
                        @click="handleEdit(scope.row, 'copy')">复制</el-button>
                    <el-button type="text" size="mini" icon="el-icon-edit"
                        @click="handleEdit(scope.row, 'edit')">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <!-- 添加或修改菜单对话框 -->
        <el-dialog :title="dialogTitle" v-if="dialogVisible" :visible.sync="dialogVisible" width="610px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-col :span="24">
                    <el-form-item label="分组名称" prop="groupName">
                        <el-input v-model="form.groupName" placeholder="请输入分组名称" />
                    </el-form-item>
                    <el-form-item label="分组组长" prop="groupUserId">
                        <el-select v-model="form.groupUserId" filterable clearable>
                            <el-option v-for="user in userList" :key="user.id"
                                :label="user.remark ? user.name + ' - ' + user.remark : user.name" :value="user.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="组员" prop="memberUserIds">
                        <el-transfer class="transfer" filterable filter-placeholder="请输入组员" v-model="form.memberUserIds"
                            :titles="['所有人', '组员']" :data="data">
                        </el-transfer>
                    </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { allUser } from '@/api/system/user';
import { getList, addGroup, updateGroup, userGroupDetails } from '@/api/system/group';
export default {
    name: "index",
    data() {
        return {
            showSearch: true,
            // 查询参数
            queryParams: {
                groupName: '',
                groupUserId: '',
                pageNum: 1,
                pageSize: 10,
            },
            loading: false,
            total: 0,
            list: [],
            // 新增或修改的弹窗
            dialogTitle: '',
            dialogVisible: false,
            userList: [],
            form: {
                memberUserIds: []
            },
            // 表单校验
            rules: {
                groupName: [
                    { required: true, message: "分组名称不能为空", trigger: "blur" }
                ],
                groupUserId: [
                    { required: true, message: "请选择分组组长", trigger: "blur" }
                ],
            },
            data: [],
            userAll: [],
            editType: 'add'
        }
    },
    created() {
        this.getList();
        this.getUserList();
    },
    methods: {
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
        },
        getList() {
            this.loading = true;
            getList(this.queryParams).then(res => {
                this.total = res.data.total;
                this.list = res.data.records;
                this.loading = false;
            })
            allUser().then(response => {
                let data = response.data
                this.userAll = data.map((item) => {
                    return { id: item.userId, nickname: item.nickname }
                })
            })
        },
        getUserList() {
            allUser().then(res => {
                this.userList = res.data.map(item => ({
                    id: item.userId,
                    name: item.nickname,
                    remark: item.remark,
                }));
                let resData = res.data.filter(item => item.userId !== 1)
                this.data = resData.map(item => ({
                    key: item.userId,
                    label: item.nickname,
                }));
            })
        },
        handleAdd() {
            this.editType = 'add'
            this.form = {};
            this.dialogTitle = '新增分组';
            this.dialogVisible = true;
        },
        handleEdit(row, type) {
            this.editType = type
            userGroupDetails(row.id).then(res => {
                let { memberUserInfo } = res.data
                this.$set(this.form, 'memberUserIds', memberUserInfo.map(item => item.userId))
            })


            if (type === 'copy') {
                this.dialogTitle = '复制分组';
                this.form = {
                    groupName: row.groupName + '_Copy'
                };
            } else {
                this.dialogTitle = '修改分组';
                this.form = {
                    id: row.id,
                    groupName: row.groupName,
                    groupUserId: row.groupUserId,
                };
            }
            this.dialogVisible = true;
        },
        // 提交保存
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id && this.editType !== 'copy') {
                        // 修改
                        updateGroup(this.form.id, this.form).then(res => {
                            this.dialogVisible = false;
                            this.reset();
                            this.getList();
                        })
                    } else {
                        // 新增
                        addGroup(this.form).then(res => {
                            this.dialogVisible = false;
                            this.reset();
                            this.getList();
                        })
                    }
                }
            });
        },
        // 取消按钮
        cancel() {
            this.dialogVisible = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                groupName: undefined,
                groupUserId: undefined,
            };
            this.resetForm("form");
        },
    }
}
</script>

<style lang="scss">
.transfer {
    &>.el-transfer__buttons {
        display: inline-flex !important;
        flex-direction: column !important;
        padding: 0 10px !important;

        .el-button+.el-button {
            margin-left: 0;
        }
    }
}
</style>
