<template>
    <div>
        <el-dialog
            title='提示'
            :visible.sync='dialogVisible'
            width='60%'>
            <el-row>
                <el-col :span='14'>
                    <!--                    <div class='handle-box'>
                                            <el-form :inline='true'>
                                                <el-form-item>
                                                    <el-input
                                                        v-model='searchForm.usernameShow'
                                                        placeholder='用户名称'
                                                        clearable>
                                                    </el-input>
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-input
                                                        v-model='searchForm.phone'
                                                        placeholder='手机号'
                                                        clearable>
                                                    </el-input>
                                                </el-form-item>

                                                <el-form-item>
                                                    <el-button @click='loadData'>搜索</el-button>
                                                </el-form-item>
                                            </el-form>
                                        </div>-->
                    <el-table
                        ref='userTable'
                        :data='tableData'
                        tooltip-effect='dark'
                        style='width: 100%'
                        size='mini'
                        border
                        stripe>
                        <el-table-column type='index' label='序号' width='50'>
                        </el-table-column>

                        <el-table-column prop='nickname' label='用户名称' :show-overflow-tooltip='true'>
                        </el-table-column>

                        <el-table-column prop='phone' label='用户手机号'>
                        </el-table-column>

                        <el-table-column prop='icon' width='200px' label='操作'>
                            <template slot-scope='scope'>
                                <el-button type='text' @click='addUser(scope.row)'>添加</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change='handleSizeChange'
                        @current-change='handleCurrentChange'
                        layout='total, sizes, prev, pager, next, jumper'
                        :page-sizes='[5, 10, 15, 20]'
                        :current-page='paging.current'
                        :page-size='paging.size'
                        :total='paging.total'>
                    </el-pagination>
                </el-col>
                <el-col :span='9' style='border-left: 1px solid #DCDFE6;margin-left: 8px;'>
                    <div style='margin-left: 8px;'>
                        群聊人员：
                        <el-card class='box-card'>
                            <el-tag
                                v-for='(tag,index) in groupUserList'
                                :key='index'
                                closable
                                :type='tagType[Math.round(Math.random()*5)]'
                                @close='removeTag(index)'>
                                {{ tag.nickname + ':' + tag.phone }}
                            </el-tag>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
            <div slot='footer' class='dialog-footer'>
                <el-button @click='dialogVisible=false'>取 消</el-button>
                <el-button type='primary' @click='save'>保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';//加载表格数据的时候用原生axios防止loading组件显示两次
import { Loading } from 'element-ui';

let loading;
let options = {};
export default {
    name: 'manageMember',
    watch: {
        //监听dialogVisible，关闭dialog时清空数据
        dialogVisible: function(newValue, oldValue) {
            if (!newValue) {
                this.paging = {
                    size: 5,
                    total: 0,
                    current: 1
                };
                this.groupUserList = [];
                this.searchForm = {
                    usernameShow: '',
                    phone: ''
                };
                this.tableData = [];
                this.removeGroupUserTemp = [];
            }
        }
    },
    data() {
        return {
            dialogVisible: false,
            searchForm: {
                usernameShow: '',
                phone: ''
            },
            groupData: {},
            tableData: [],
            tableDataAll: [],
            groupUserList: [],
            tagType: ['success', 'info', 'warning', 'danger', ''],
            removeGroupUserTemp: [],
            page: {
                cursor: '',//上次查询返回的游标，下次查询会查询本次查询后续的数据
                limit: 100//请求数据的大小
            },
            paging: {
                size: 5,
                total: 0,
                current: 1
            }
        };
    },
    created() {

    },
    methods: {
        show(data) {
            this.groupData = data;
            //不使用全局的加载loading组件,等到群组详情查询完成了再关闭
            loading = Loading.service(options);
            //回显群聊人员
            axios.get('/api/easemob/queryGroupUser?groupId=' + this.groupData.id).then(res => {
                axios.post('/api/easemob/getUpUserAttributeBath', {
                    targets: res.data.data.data.map(t => {
                        return t.member;
                    }),
                    properties: ['phone', 'nickname']
                }).then(res => {
                    let data = res.data.data.data;
                    for (let key in data) {
                        this.groupUserList.push({
                            phone: data[key].phone,
                            nickname: data[key].nickname,
                            username: key
                        });
                    }
                    //查询用户数据
                    this.loadData();
                });
            });
        },
        loadData() {
            //不使用全局的加载loading组件,等到群组详情查询完成了再关闭
            loading = Loading.service(options);
            axios.post('/api/easemob/queryUserPage', { params: this.page }).then(res => {
                this.loadDataDetails(res.data.data.entities.map(t => {
                    return t.username;
                }).filter(t => {
                    return t != 'admin';
                }));
            });
        },
        loadDataDetails(usernameList) {
            let _this = this;
            axios.post('/api/easemob/getUpUserAttributeBath', {
                targets: usernameList,
                properties: ['phone', 'nickname']
            }).then(res => {
                let data = res.data.data.data;
                this.tableDataAll = [];
                for (let key in data) {
                    this.tableDataAll.push({ phone: data[key].phone, nickname: data[key].nickname, username: key });
                }
                //设置真正的表格数据
                _this.tableData = _this.tableDataAll.slice((_this.paging.current - 1) * _this.paging.size, _this.paging.current * _this.paging.size);
                //回写数据条数
                _this.paging.total = _this.tableDataAll.length;
                this.dialogVisible = true;
                //关闭转loading
                loading.close();
            });
        },
        handleSizeChange(val) {
            this.paging.size = val;
            this.loadData();
        },
        handleCurrentChange(val) {
            this.paging.current = val;
            this.loadData();
        },
        addUser(data) {
            //判断是否重复添加
            let temp = this.groupUserList.filter(t => {
                return t.phone == data.phone;
            });
            if (temp.length > 0) {
                this.$notify({
                    showClose: true,
                    message: '已存在重复的数据【' + temp[0].nickname + ':' + temp[0].phone + '】',
                    type: 'error'
                });
                return;
            }
            this.groupUserList.push({ username: data.username, nickname: data.nickname, phone: data.phone });
        },
        removeTag(index) {
            this.removeGroupUserTemp.push(this.groupUserList[index].username);
            this.groupUserList.splice(index, 1);
        },
        save() {
            loading = Loading.service(options);
            let _this = this;
            let username = [];
            if (_this.groupUserList.length == 0) {
                _this.$notify({
                    showClose: true,
                    message: '请至少添加一个群聊用户',
                    type: 'error'
                });
                return;
            } else {
                username = _this.groupUserList.map(t => {
                    return t.username;
                });
            }
            //先移除需要移除的群成员
            axios.delete('/api/easemob/removeGroupUser/' + this.groupData.id + '?usernames=' + this.removeGroupUserTemp.join(','), {}).then(res => {
                //再添加群成员
                axios.post('/api/easemob/addGroupUser', {
                    chatgroupid: _this.groupData.id,
                    usernames: username
                }).then(res => {
                    _this.$notify({
                        showClose: true,
                        message: '恭喜你，操作成功',
                        type: 'success'
                    });
                    _this.$parent.loadData();
                    loading.close();
                    _this.dialogVisible = false;
                });
            });

        }
    }
};
</script>

<style scoped>
.el-tag {
    margin: 4px;
}

.el-card {
    min-height: 300px;
    margin: 10px;
}

</style>