<template>
    <el-dialog
        v-loading="saving"
        @close="closeDialog"
        title="分配评委"
        center
        :visible.sync="dialogVisible"
        width="800px"
    >
        <div class="edit-view">
            <el-form
                :model="formData"
                :rules="rules"
                ref="form"
                label-width="110px"
                label-position="right"
                size="small"
                style="max-width: 680px;"
            >
                <el-form-item prop="expertMemberUserId" label="分配评委">
                    <div class="subform">
                        <div style="margin-bottom: 20px">
                            <el-select
                                v-model="userId"
                                style="width: 82.5%; margin-right: 10px;"
                                multiple
                                filterable
                                clearable
                                placeholder="请选择评委"
                            >
                                <el-option
                                    v-for="item in expert"
                                    :key="item.value"
                                    :value="item.value"
                                    :label="item.label"
                                >
                                </el-option>
                            </el-select>
                            <el-button @click="chooseEmp">添加</el-button>
                        </div>
                        <el-table :data="emps">
                            <el-table-column prop="nickname" label="姓名"></el-table-column>
                            <el-table-column prop="phone" label="手机号"></el-table-column>
                            <el-table-column prop="artType" label="专业"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="{ row }">
                                    <el-button @click="remove(row)" type="danger" size="mini" plain>移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-form-item>
            </el-form>
            <!-- <el-form-item> -->
            <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
            <!-- </el-form-item> -->
            <!-- <div class="btn">
                <el-button @click="$router.go(-1)">返回</el-button>
            </div> -->
        </div>
    </el-dialog>
</template>
<script>
export default {
    props: ['dialogVisible', 'tableData'],
    data() {
        return {
            saving: false,
            formData: {},
            rules: {},
            emps: [],
            id: '',
            userId: '',
            userIds: [],
            dateRange: [],
            audits: [],
            grading: [],
            artTypes: [],
            readonly: true,
            collaborates: [],
            expert: [],
            loading: false
        };
    },
    created() {},
    methods: {
        closeDialog() {
            this.$emit('close');
        },
        remove(row) {
            // console.log(row);
            this.emps.pop(row);
            this.userIds.pop(this.userId);
        },
        onSave() {
            let ids = this.id;
            // console.log(this.id instanceof Array);
            if (this.id instanceof Array) {
                ids = this.id.join(',');
            }
            if (this.userIds.length > 0) {
                this.$http
                    .post('/arrangeJudge/assignJudge', { arranges: ids, experts: this.userIds.join(',') })
                    .then(res => {
                        this.$message.success('添加成功');
                        this.dialogVisible = false;
                        setTimeout(() => {
                            this.$parent.getData();
                        }, 1000);
                        // console.log(res);
                    });
            }
        },
        chooseEmp() {
            if (this.userId.length > 0) {
                this.userId.forEach(index => {
                    console.log(index);
                    if (this.userIds.indexOf(index) < 0) {
                        this.emps.push(
                            this.users.find(item => {
                                return item.id === index;
                            })
                        );
                        this.userIds.push(index);
                    } else {
                        console.log('重复自动取消');
                    }
                });
                this.userId = '';
            }
        },
        init(row) {
            this.id = row;
            this.expert = [];
            this.$http
                .post('/user/all1', { query: { del: false }, size: 1000, sort: '' }, { body: 'json' })
                .then(res => {
                    this.users = res.content;
                    res.content.forEach(item => {
                        let nickname = item.nickname;
                        if (nickname.length < 3) {
                            nickname = nickname.slice(0, 1) + '　' + nickname.slice(1);
                        }
                        this.expert.push({
                            label: nickname + '--' + item.phone + '--' + item.artType,
                            value: item.id
                        });
                    });
                })
                .catch(e => {
                    console.log(e);
                });
        }
    }
};
</script>
<style lang="less" scoped>
.edit-view {
    // padding-left: 20%;
    .add-con {
        // background-color: #f7f7f7;
        width: 100%;
        // margin-bottom: 10px;
    }
}
.btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    height: 50px;
    line-height: 50px;
    z-index: 999;
    margin-left: -40px;
    padding-left: 20px;
}
.subform {
    padding: 16px 16px 16px 16px;
    background: #f7f7f7;
    border-radius: 5px;
    border: 1px solid #eee;
    margin-bottom: 10px;
}
.parameters1 {
    display: flex;
    align-items: center;
    // margin-top: 23px;
}
.el-divider__text {
    left: 0;
    font-size: 18px;
}
.el-divider--horizontal {
    margin: 32px 0;
}
/deep/ .el-input.is-disabled .el-input__inner {
    background-color: #ffffff;
    color: #606266;
}
/deep/ .el-range-editor.is-disabled input {
    background-color: #ffffff;
    color: #606266;
}
/deep/ .el-range-editor.is-disabled {
    background-color: #ffffff;
}
/deep/ .el-range-editor.is-disabled .el-range-separator {
    color: #606266;
}
</style>
