<template>
    <div class="fullheight">
        <ht-table
                @load="loadData(params)"
                :data="data"
                :selectable="false"
                :pageResult="pageResult"
                :show-export="false"
                :show-custom-column="false"
                ref="htTable"
        >
            <template v-slot:toolbar>
                <el-button size="small" icon="el-icon-plus" type="primary" @click="$refs.addOrUpdate.dialogVisible = true">新增</el-button>
            </template>
            <template>
                <ht-table-column prop="name" align="left" label="群" width="300" show-overflow-tooltip>
                    <template v-slot="{ row }">
                        <div class="flexs">
                            <el-image>
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <span style="vertical-align: middle">{{ row.name }}</span>
                        </div>

                    </template>
                </ht-table-column>
                <ht-table-column prop="userName" align="center" width="160" label="群主"/>
                <ht-table-column prop="ctime" align="center" width="160" label="创建时间"/>

                <ht-table-column
                        prop="sn"
                        label="操作"
                        align="left"
                        :show-overflow-tooltip="true"
                >
                    <template v-slot="{ row }">
                        <el-dropdown
                                v-if="row.userName == currentUser.account"
                                class="row-eldown"
                                size="mini"
                                split-button
                                @command="handleCommond"
                                @click="handleCommond({ row: row, command: 'mange_per' })"
                        >
                            <span>
                                <i class="el-icon-user"></i> 管理成员
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                        icon="el-icon-chat-line-square"
                                        :command="{ row: row, command: 'mange_log' }"
                                >管理聊天记录</el-dropdown-item>
                                <el-dropdown-item
                                        icon="el-icon-edit"
                                        :command="{ row: row, command: 'edit' }"
                                >编辑</el-dropdown-item>
                                <el-dropdown-item
                                        icon="el-icon-remove-outline"
                                        :command="{ row: row, command: 'del' }"
                                >解散群</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-button v-else plain size="mini" class="row-button">
                            <i class="el-icon-remove-outline"></i> 退出该群
                        </el-button>
                    </template>
                </ht-table-column>
            </template>
        </ht-table>

        <addAndUpdateQgroup ref="addOrUpdate" :currentRow="currentRow" @onSuccess="subSuccess"/>
        <mangeQgroupPersons ref="mange_per" :currentRow="currentRow"/>
        <mangeHismsg ref="mange_his" :currentRow="currentRow"/>

    </div>
</template>
<script>
    import uc from '@/api/instantMessag.js'
    import { mapState } from "vuex";
    import addAndUpdateQgroup from "./module/addAndUpdateQgroup"
    import mangeQgroupPersons from "./module/mangeQgroupPersons"
    import mangeHismsg from "./module/mangeHismsg"
    export default {
        name: "massesGroupMange",
        components: { addAndUpdateQgroup, mangeQgroupPersons, mangeHismsg },
        data() {
            return {
                loadings: {
                    updAcutasLoading: false,
                    sequence: false,
                },
                data: [],
                currentRow: null,
                params : {
                    "pageBean": {
                        "page": 1,
                        "pageSize": 10,
                        "showTotal": true
                    },
                    "params": {},
                },
                pageResult: {
                    page: 1,
                    pageSize: 50,
                    total: 0,
                }
            }
        },
        computed: {
            ...mapState({
                currentUser: state => state.login.currentUser
            })
        },
        mounted() {
            this.$validator = this.$root.$validator
            this.header = { 'Authorization': `Bearer ${this.$store.state.login.currentUser.token}` }
        },
        methods: {
            subSuccess() {
                this.currentRow = null;
                this.loadData(this.pageResult);
            },
            handleCommond(param) {
                this.currentRow = param.row;
                switch (param.command) {
                    case "mange_per":
                        this.$refs.mange_per.dialogVisible = true
                        break;
                    case "mange_log":
                        this.$refs.mange_his.dialogVisible = true
                        break;
                    case "edit":
                        this.$refs.addOrUpdate.dialogVisible = true
                        break;
                    case "del":
                        this.deleteRow(param.row);
                        break;
                }
            },
            deleteRow(row) {
                this.$confirm('是否解散 '+row.name+' ?', '提示', {
                    confirmButtonText: '解散',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = new FormData();
                    data.append("qGroutId",row.id);
                    uc.deleteQgroup(data).then(res => {
                        if(res.state) {
                            this.loadData(this.pageResult);
                            this.$message.success('群 '+row.name+' 已解散')
                        }

                    })
                }).catch(() => {

                });

            },
            loadData(param, cb) {
                uc.getQgroupList(param)
                    .then((res) => {
                        this.data = res.rows
                        this.pageResult = {
                            page: res.page,
                            pageSize: res.pageSize,
                            total: res.total,
                        }
                        this.$refs.htTable.loading = false
                    })
                    .finally(() => cb())
            }
        },
    }
</script>

<style lang="scss" scoped>
    .sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
        height: calc(100% - 170px);
    }

    .flexs {
        display: flex;
        justify-items: left;
        align-items: center;
        >span {
            margin-left: 10px;
        }
    }

    .avatar-uploader .avatar-uploader-icon,{
        font-size: 16px;
        color: #8c939d;
        text-align: center;
    }

    .el-upload img {
        width: 100%;
    }

    >>>.el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 50px;
        height: 50px;
        padding: 5px;
        line-height: 40px;
        text-align: center;
        box-sizing: border-box;
    }

    >>>.el-button--mini.row-button {
        /*width: 124px;*/
    }
</style>