<template xmlns="http://www.w3.org/1999/html">
    <div>
        <div style="position:relative;">
            <el-button v-if="$permissionUtils.btnPermission('insertGroupUser')" @click="addBizGroup"
                       type="primary" style="position:absolute;right:0;"><i
                    class="el-icon-plus"></i>新增用户
            </el-button>
            <el-button type="primary" @click="goBack" style="position:absolute;right:0;margin-right: 125px">返 回</el-button>
        </div>
        <div class="content-text">
            <el-table :data="records" stripe style="width: 80%">
                <el-table-column type="index" width="60"></el-table-column>
                <el-table-column prop="bizGroup" label="业务组" :formatter="nullFormat"></el-table-column>
                <el-table-column prop="userBean.userName" label="用户名"></el-table-column>
                <el-table-column prop="status" label="是否请假" :formatter="useFlagFormat"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="$permissionUtils.btnPermission('updateGroupUser')" type="text" size="small"
                                   @click="offGuard(scope.row)">休息
                        </el-button>
                        <el-button v-if="$permissionUtils.btnPermission('updateGroupUser')" type="text" size="small"
                                   @click="onGuard(scope.row)">取消
                        </el-button>
                        <el-button v-if="$permissionUtils.btnPermission('deleteGroupUser')" type="text" size="small"
                                   @click="deleteGuard(scope.row)">移出
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--窗口组件-->
        <template>
            <!--上传窗口-->
            <addDutyBizGroupDialog
                v-if="ui.addDutyBizGroupDialog.visible"
                :dialogVisible="ui.addDutyBizGroupDialog.visible"
                :dialogVisible.sync="ui.addDutyBizGroupDialog.visible"
                :bizGroup="ui.addDutyBizGroupDialog.bizGroup">
            </addDutyBizGroupDialog>
        </template>
    </div>
</template>

<script type="text/ecmascript-6">

    import addDutyBizGroupDialog from './AddDutyBizGroupDialog'

    export default {

        name: "DutyBizGroupsListDialog",
        components: {
            addDutyBizGroupDialog,
        },
        data() {
            return {
                flag: false,
                records: [],
                bizGroup:'',
                ui: {
                    addDutyBizGroupDialog: {
                        visible: false,
                        bizGroup:'',
                    }
                },
            }
        },
        mounted: function () {
            this.bizGroup = this.$route.query.bizGroup;
            this.loadData();

        },

        methods: {

            loadData(){
                this.$$get(`/group/select/${this.bizGroup}`)
                    .then(res => {
                        if (res.data.code < 1)
                            throw res.data.msg;
                        this.records = res.data.data;
                    })
                    .catch(err => this.$$msg.err(err))
            },

            addBizGroup() {
                this.ui.addDutyBizGroupDialog = {
                    visible: true,
                    bizGroup: this.bizGroup,
                };
            },

            onGuard(param) {
                var id = param.id;
                var url = `/group/onGuard/` + id;
                this.commonGet(url)

            },
            offGuard(param) {
                this.commonGet(`/group/offGuard/` + param.id)
            },
            deleteGuard(param) {
                this.commonGet(`/group/delete/` + param.id)
            },
            commonGet(url) {
                this.$$get(url)
                    .then(res => {
                        if (res.data.code < 1)
                            throw res.data.msg;
                        this.$message({message: res.data.msg, type: 'success'});
                        this.loadData();
                    })
                    .catch(err => this.$$msg.err(err))
            },
            useFlagFormat: function (row, column) {
                var status = row['status'];
                return status === 'NO' ? "休息" : " ";
            },
            nullFormat(row, column) {
                var param = row[column.property];
                if (param == null || param == '') {
                    return ' ';
                }
                return param;
            },

            goBack() {
                this.$router.push({
                    path: 'LendBankCardList',
                    query: {
                        flag: true,
                        searchContent: this.$route.query.searchContent,
                    }
                })
            },

            /** 关闭处理 */
            handleClose() {
                this.visible = false;
                setTimeout(() => {
                    this.$emit('update:dialogVisible', false)
                }, 300);
            },
        }
    }
</script>
