<template>
    <div class="edit-view">
        <el-form label-position="top">
            <el-form-item :label="`${item}级审批人`" v-for="(item, index) in levels" :key="index">
                <el-tag
                    v-for="approver in approvers[index + 1]"
                    :key="approver.id"
                    closable
                    @close="remove(approver)"
                    style="margin-right:10px"
                >
                    {{ approver.name }}
                </el-tag>
                <div>
                    <el-select
                        v-model="approver[index]"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="搜索用户名"
                        :remote-method="remoteMethod"
                        :loading="loading"
                        value-key="id"
                        size="mini"
                    >
                        <el-option v-for="item in options" :key="item.id" :label="item.username" :value="item">
                        </el-option>
                    </el-select>
                    <el-button
                        style="margin-left:10px;"
                        size="mini"
                        @click="add(index + 1)"
                        :loading="(approver[index] || {}).loading"
                    >
                        添加
                    </el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            level: 1,
            options: [],
            loading: false,
            approver: [],
            approvers: [[], [], [], [], []],
            levels: ['一', '二', '三', '四', '五']
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.$http.get('/approver/all', { size: 10000 }).then(res => {
                let approvers = [];
                res.content.forEach(i => {
                    approvers[i.level] = approvers[i.level] || [];
                    approvers[i.level].push(i);
                });
                this.approvers = approvers;
            });
        },
        remoteMethod(query) {
            this.loading = true;
            this.$http
                .get('/user/all', { size: 30, search: query })
                .then(res => {
                    this.options = res.content;
                    this.loading = false;
                })
                .catch(e => {
                    this.loading = false;
                });
        },
        add(level) {
            if (this.approver[level - 1]) {
                console.log(this.approver[level - 1]);
                this.$set(this.approver[level - 1], 'loading', true);
                this.$http
                    .post(
                        '/approver/save',
                        { userId: this.approver[level - 1].id, name: this.approver[level - 1].username, level: level },
                        { body: 'json' }
                    )
                    .then(res => {
                        this.$set(this.approver[level - 1], 'loading', false);
                        this.$message.success('添加成功');
                        this.getData();
                    })
                    .catch(e => {
                        this.$set(this.approver[level - 1], 'loading', false);
                        this.$message.error(e.error || '添加失败');
                    });
            }
        },
        remove(item) {
            this.$msgbox({
                title: '提示',
                message: '确认删除吗？',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        // instance.confirmButtonLoading = true;
                        instance.showCancelButton = false;

                        this.$http
                            .post(`/approver/del/${item.id}`)
                            .then(res => {
                                done();
                                instance.confirmButtonLoading = false;
                                instance.showCancelButton = true;
                                this.getData();
                            })
                            .catch(e => {
                                instance.confirmButtonLoading = false;
                                instance.showCancelButton = true;
                                this.$message.error(e.error || '删除失败');
                            });
                    } else {
                        done();
                    }
                }
            }).then(action => {});
        }
    }
};
</script>
<style lang="less" scoped></style>
