<template>
    <div class="fullheight">
        <ht-table
            @load="loadData"
            :data="data"
            :pageResult="pageResult"
            :selection="true"
            :default-sorter="[{direction: 'DESC', property: 'updateTime'}]"
            quick-search-props="name,code"
            ref="groupTable"
            :show-custom-column="false"
            :show-export="false"
            @row-click="rowClick"
        >
            <template v-slot:toolbar>
                <el-button-group>
                    <el-button
                        size="small"
                        @click="showDialog()"
                        icon="el-icon-plus"
                        type='primary'
                        >添加</el-button
                    >
                    <ht-delete-button
                        pk="code"
                        parameter="codes"
                        requestMethod="post"
                        pureData
                        :url="groupDeleteUrl"
                        :htTable="$refs.groupTable"
                        :style="{marginLeft: '10px'}"
                        >删除</ht-delete-button
                    >
                </el-button-group>
            </template>
            <template>
                <ht-table-column
                    type="index"
                    width="50"
                    align="center"
                    label="序号"
                />
                <ht-table-column
                    prop="id"
                    label="主键"
                    :sortable="true"
                    hidden
                />
                <ht-table-column
                    prop="name"
                    label="名称"
                    :sortable="true"
                    :show-overflow-tooltip="true"
                >
                    <template v-slot="{row}">
                        <el-link
                            type="primary"
                            @click="showDialog(row)"
                            title="查看详情"
                            >{{ row.name }}</el-link
                        >
                    </template>
                </ht-table-column>
                <ht-table-column prop="code" label="编码" :sortable="true" />
                <ht-table-column prop="description" label="描述" />
                <ht-table-column width="150" label="操作">
                    <template v-slot="{row}">
                        <el-button size="mini" @click="handleUsers(row)">
                            <span> <i class="el-icon-user"></i>群组人员</span>
                        </el-button>
                    </template>
                </ht-table-column>
            </template>
        </ht-table>
        <ht-load-data
            ref="htLoadData"
            :url.sync="loadDataUrl"
            context="uc"
            @after-load-data="afterLoadData"
        ></ht-load-data>

        <ht-sidebar-dialog
            width="28%"
            title="添加群组"
            :visible="dialogVisible"
            :before-close="handleCloseDialog"
            append-to-body
        >
            <el-form v-model="group" data-vv-scope="editGroupForm">
                <ht-form-item label="群组名称" prop="name" label-width="100px">
                    <ht-input
                        v-model="group.name"
                        autocomplete="off"
                        :validate="{
                            required: true,
                            regex: {
                                exp: '^[\\s\\S]{1,21}$',
                                message: '内容超出输入限制',
                            },
                        }"
                        placeholder="请输入名称"
                    ></ht-input>
                </ht-form-item>
                <ht-form-item label="群组别名" prop="code" label-width="100px">
                    <ht-input
                        v-model="group.code"
                        v-pinyin="group.name"
                        autocomplete="off"
                        :validate="{
                            required: true,
                            alpha_dash: true,
                            regex: {
                                exp: '^[\\s\\S]{1,30}$',
                                message: '内容超出输入限制',
                            },
                        }"
                        placeholder="请输入别名"
                        :disabled="group.id ? true : false"
                    ></ht-input>
                </ht-form-item>
                <ht-form-item label="描述" label-width="100px">
                    <ht-input
                        type="textarea"
                        v-model="group.description"
                        placeholder="请输入描述"
                    />
                </ht-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <ht-submit-button
                    :url="saveRoleUrl"
                    :model="group"
                    :is-submit="isSubmit"
                    :request-method="requestMethod"
                    scope-name="editGroupForm"
                    @before-save-data="beforeSaveData"
                    @after-save-data="afterSaveData"
                    >{{ $t('eip.common.save') }}</ht-submit-button
                >
                <el-button @click="dialogCancle('dialogVisible')">{{
                    $t('eip.common.cancel')
                }}</el-button>
            </div>
        </ht-sidebar-dialog>

        <ht-sidebar-dialog
            width="28%"
            title="群组人员"
            :visible="personVisible"
            :before-close="handleClose"
            append-to-body
        >
            <el-button @click="openSelecter" type="primary" icon="el-icon-user"
                >管理成员</el-button
            >
            <el-table
                :data="groupData"
                style="width: 100%; margin-top: 20px"
                border
                max-height="380"
            >
                <el-table-column prop="fullname" label="成员名称">
                </el-table-column>
                <el-table-column prop="account" label="成员账号">
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCancle('personVisible')">{{
                    $t('eip.common.close')
                }}</el-button>
            </div>
            <select-type-dialog ref="selecter" @select="handleSelect"/>
        </ht-sidebar-dialog>
    </div>
</template>
<script>
import uc from '@/api/uc.js'
import utils from '@/hotent-ui-util.js'
import req from '@/request.js'
import SelectTypeDialog from '@/components/dialog/SelectTypeDialog'

export default {
    components: {SelectTypeDialog},
    computed: {
        groupDeleteUrl: function () {
            return (
                window.context.uc + '/api/userGroup/v1/userGroup/delUserGroup'
            )
        },
        saveRoleUrl: function () {
            let preUrl = window.context.uc + '/api/userGroup/v1/userGroup'
            if (this.group.id) {
                preUrl += '/updateUserGroup'
            } else {
                preUrl += '/addUserGroup'
            }
            return preUrl
        },
        requestMethod: function () {
            return this.group.id ? 'PUT' : 'POST'
        },
    },
    data() {
        return {
            dialogVisible: false,
            dialogVisibleMenuPerm: false,
            dialogImportVisible: false,
            fullscreenLoading: false,
            personVisible: false,
            group: {
                name: '',
                code: '',
            },
            isSubmit: false,
            data: [],
            pageResult: {
                page: 1,
                pageSize: 50,
                total: 0,
            },
            loadDataUrl: '',
            menuPerm: {},
            allowRoles: [],
            groupData: [],
            activeRow:{},
        }
    },
    mounted() {
        this.$validator = this.$root.$validator
    },
    methods: {
        handleSelect(data){
            let param = JSON.stringify(data);
            uc.addGroupMember(param, this.activeRow.code).then(res=>{
                this.$refs.selecter.closeDialog();
                this.handleUsers(this.activeRow);
            })
        },
        openSelecter() {
            this.$refs.selecter.showDialog(this.activeRow)
        },
        handleUsers(row) {
            this.activeRow = row;
            this.personVisible = true
            this.loadDataUrl = `/api/userGroup/v1/userGroup/getGroupUsers?code=${row.code}`
        },
        rowClick(row, column, event) {
            this.$refs.groupTable.$refs.htTable.toggleRowSelection(row)
        },
        handleCloseDialog(){
            this.dialogVisible = false
        },
        handleClose() {
            this.personVisible = false
            this.activeRow = {}
        },
        showDialog(row) {
            this.dialogVisible = true
            if (row) {
                // /api/userGroup/v1/userGroup/getUserGroup
                this.loadDataUrl = `/api/userGroup/v1/userGroup/getUserGroup?code=${row.code}`
            } else {
                this.group = {name: '', code: ''}
            }
        },
        dialogCancle(dialogVisible) {
            this[dialogVisible] = false
            this.activeRow = {}
        },
        loadData(param, cb) {
            uc.getUserGroupPage(param)
                .then((response) => {
                    this.data = response.rows
                    this.pageResult = {
                        page: response.page,
                        pageSize: response.pageSize,
                        total: response.total,
                    }
                })
                .finally(() => cb())
        },
        async beforeSaveData() {
            this.isSubmit = true
        },
        afterSaveData() {
            this.dialogVisible = false
            this.$refs.groupTable.load()
        },
        afterLoadData(data) {
            // 编辑群组
            if (this.dialogVisible) {
                this.group = data
                setTimeout(() => this.$validator.validateAll('editGroupForm'))
            }
            // 编辑群组
            if (this.personVisible) {
                this.groupData = data
            }
        },
    },
}
</script>
<style scoped>
div[aria-invalid='true'] >>> .el-input__inner,
div[aria-invalid='true'] >>> .el-input__inner:focus {
    border-color: #f56c6c;
}
</style>
