<template>
    <el-dialog
        title="管理群成员"
        :visible.sync="dialogVisible"
        @open="loadData"
    >
        <el-table
            :data="data"
            size="mini"    
        >
            <el-table-column prop="userName" align="left" width="160" label="成员">
                <template v-slot="{ row }">
                    {{row.userName}}（{{row.name}}）
                </template>
            </el-table-column>
            <el-table-column prop="autoGraph" align="left" width="300" label="个性签名" show-overflow-tooltip/>

            <el-table-column
                prop="sn"
                label="操作"
                align="left"
            >
                <template v-slot="{ row }">
                    <el-button  plain size="mini" class="row-button" @click="kickout( row )">
                        <i class="el-icon-remove-outline"></i> 踢出群
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addQgroup">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import uc from '@/api/instantMessag.js'
    import { mapState } from "vuex";

    export default {
        name: "mangeQgroupPersons",
        props: [ 'currentRow' ],
        data() {
            return {
                dialogVisible: false,
                data: []
            }
        },
        computed: {
            ...mapState({
                currentUser: state => state.login.currentUser
            })
        },
        methods: {
            kickout(row) {
                this.$confirm('是否将' + row.userName + '踢出群？', '提示', {
                    confirmButtonText: '踢出群',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const { id, userName} = row
                    let param = new URLSearchParams();
                    param.append('qGroutId', this.currentRow.id)
                    param.append('userName', userName)
                    uc.kickoutPer(param).then(res => {
                        if(res.state) {
                            this.loadData();
                            this.$message.success('已将' + userName + '踢出群')
                        }
                    })
                }).catch(() => {

                });
            },
            addQgroup() {},
            loadData() {
                let param = new URLSearchParams();
                param.append('groupId',this.currentRow.id)
                uc.queryQgroupPer(param)
                    .then((res) => {
                        this.data = res.filter(o => o.userName != this.currentUser.account)
                    })
                    .finally(() => cb())
            }
        }
    }
</script>

<style scoped>

</style>