<template>
    <div class="fullheight">
        <ht-table
                @load="loadData(params)"
                :data="data"
                :selection="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="openAddPanl">新增</el-button>
            </template>
            <template>
                <ht-table-column prop="name" align="left" label="组名"/>

                <ht-table-column
                        prop="sn"
                        label="操作"
                        width="160"
                        :show-overflow-tooltip="true"
                >
                    <template v-slot="{ row }">
                        <el-dropdown
                                size="mini"
                                split-button
                                @command="handleCommond"
                                @click="handleCommond({ row: row, command: 'edit' })"
                        >
                            <span>
                                <i class="el-icon-edit"></i>编辑
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                        icon="el-icon-delete"
                                        :command="{ row: row, command: 'del' }"
                                >删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </ht-table-column>
            </template>
        </ht-table>
    </div>
</template>
<script>
    import uc from '@/api/instantMessag.js'

    export default {
        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,
                }
            }
        },
        mounted() {
            this.$validator = this.$root.$validator
            this.header = { 'Authorization': `Bearer ${this.$store.state.login.currentUser.token}` }
        },
        methods: {
            handleCommond(param) {
                switch (param.command) {
                    case "edit":
                        this.editRow(param.row);
                        break;
                    case "del":
                        console.log(param)
                        this.deleteRow(param.row.id);
                        break;
                }
            },
            editRow(row) {
                this.currentRow = row;
                this.openAddPanl();
            },
            deleteRow(id) {
                this.$confirm('是否删除该数据?', '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'danger'
                }).then(() => {
                    let data = new FormData();
                    data.append("id",id);
                    uc.deleteFgroupList(data).then(res => {
                        if(res.state) {
                            this.loadData(this.pageResult);
                            this.$message.success('数据已删除')
                        }

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

                });

            },
            openAddPanl() {
                this.$prompt('请输入分组名称', `${this.currentRow ? '编辑' : '新增'}名称`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputValue: this.currentRow?.name,
                    inputErrorMessage: '分组名称不能为空'
                }).then(({ value }) => {
                    const data = {
                        name: value,
                        id: this.currentRow?.id
                    },
                        text = this.currentRow ? '编辑' : '新增',
                        apiFun = this.currentRow ? 'editFgroupList' : 'addFgroupList';
                    uc[apiFun](data).then(res => {
                        if(res.state == true)
                            this.$message.success(`${text}分组完成`);
                            this.currentRow = null;
                            this.loadData(this.pageResult);
                    })
                }).catch(() => {
                    this.currentRow = null;
                })
            },
            loadData(param, cb) {
                uc.getFgroupList(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);
    }
</style>