<template>
    <div id="loan-record">
        <br>
        <div class="top">
            <el-form :inline="true" :model="queryModel" class="demo-form-inline">

                <el-select v-model="bizGroup" placeholder="组类型">
                    <el-option v-for="item in userGroupList" :key="item.value"
                               :label="item.label" :value="item.value"></el-option>
                </el-select>

                <div class="btn">
                    <el-button @click="queryBatch" type="primary">查询</el-button>
                    <el-button v-if="$permissionUtils.btnPermission('insertGroupUser')" @click="addBankCard"
                               type="primary"><i
                            class="el-icon-plus"></i>新增用户
                    </el-button>
                    <!--<el-button v-if="$permissionUtils.btnPermission('allotReminder')" @click="allotReminder"
                               type="warning">提醒分配
                    </el-button>-->
                </div>
            </el-form>
        </div>

        <div>
            <div class="system-list">
                <el-table :data="records" stripe style="width: 100%">
                    <el-table-column type="index" width="60"></el-table-column>
                    <el-table-column prop="bizGroup" sortable label="业务组" :formatter="nullFormat"></el-table-column>
                    <el-table-column prop="userBean.userName" sortable label="用户名"></el-table-column>
                    <el-table-column prop="status" sortable label="是否请假" :formatter="useFlagFormat"></el-table-column>
                    <el-table-column label="操作">
                        <template 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>
        </div>


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

    </div>

</template>


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

    import * as moment from "moment";
    import addDutyManagementDialog from "../user/AddDutyManagementDialog";

    export default {

        name: "DutyManagement",
        components: {
            addDutyManagementDialog,
        },
        data() {
            return {
                openUserFlag: false,
                bizGroup: 'FOLLOW_BYH',
                queryModel: {},
                records: [],
                userGroupList:[],
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                ui: {
                    addDutyManagementDialog: {
                        visible: false,
                    }
                }
            }
        },
        mounted: function () {
            this.loadSearchData();
            // 获取当前用户组
            this.$$get('/group/getGroupList/')
            .then(res => {
                if (res.data.code == 1){
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg);
                        this.userGroupList = '';
                        return
                    }
                    this.userGroupList = res.data.data;
                }else{
                this.$message({message: res.data.msg, type: 'error'});
                }
            })
            .catch(err => this.$$msg.err(err))
        },
        methods: {
            addBankCard() {
                this.ui.addDutyManagementDialog = {
                    visible: true,
                };

            },
            queryBatch() {
                this.loadSearchData();
            },
            /** 加载搜索数据 */
            loadSearchData() {
                if (this.bizGroup == "") {
                    return
                }
                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))
            },
            handleCurrentChange() {
                this.loadSearchData();
            },
            importClients() {
                this.ui.clientDataUploadDialog = {
                    visible: true,
                };
            },

            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)
            },
            allotReminder(param) {
                this.$confirm('确认重新分配提醒？')
                    .then(_ => {
                        this.commonGet(`/loanRecord/allotReminder`)
                    })
                    .catch(_ => {
                    });
            },
            commonGet(url) {
                this.$$get(url)
                    .then(res => {
                        if (res.data.code < 1)
                            throw res.data.msg;
                        this.loadSearchData()
                    })
                    .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;
            }
        }
    }
</script>

