<template>
    <el-dialog title="演习配置" :visible.sync="dialogVisible" width="40%" :before-close="handleClose" @open="handleDialogOpen">
        <div class="configExercise">
            <el-form class="yhf" v-for="(item, index) in formData.teams" :key="index" label-width="80px">
                <el-form-item label="队伍名称">
                    <el-input class="teamName" v-model="item.teamName" v-if="item.teamType != 'DIRECTOR'"></el-input>
                    <el-tag class="myTag" v-if="item.teamType == 'DIRECTOR'" type="success" effect="dark"
                        v-text="item.teamType == 'DIRECTOR' ? '导演组' : ''"></el-tag>
                    <span class="myIcon el-icon-remove-outline"
                        v-if="item.teamType != 'DIRECTOR' && formData.teams.length > 1" @click="removeTeam(index)"></span>
                </el-form-item>
                <el-form-item label="参会人员">
                    <div class="PackView_transfer">
                        <div class="ta-transfer">
                            <div class="ta-transfer_left">
                                <div class="transfer-view-head">
                                    <div class="head_left">
                                        <el-checkbox :indeterminate="item.invoking.isIndeterminate"
                                            :disabled='allData.length == 0' v-model="item.invoking.checkAll"
                                            @change="handleCheckAllChange($event, index, true)">人员列表</el-checkbox>
                                    </div>
                                    <div class="head_right">
                                        <span>{{ item.invoking.selected_num }}</span>
                                        <span>/</span>
                                        <span>{{ allData.length }}</span>
                                    </div>
                                </div>
                                <div class="transfer-view-main">
                                    <el-checkbox-group v-model="item.invoking.checkedCities"
                                        @change="handleCheckedCitiesChange($event, index, true)">
                                        <div class="transfer-view-item" v-for="(item1, index1) in allData">
                                            <el-checkbox :label="item1.id" :key="item1.account">{{ item1.account
                                            }}</el-checkbox>
                                        </div>
                                    </el-checkbox-group>
                                </div>
                            </div>

                            <div class="ta-transfer_btn">
                                <el-button type="primary" :disabled='item.parameter.selected_num == 0'
                                    @click="removePeopleFromMeeting(index)" icon="el-icon-arrow-left">离席</el-button>
                                <el-button type="primary" :disabled='item.invoking.selected_num == 0'
                                    @click='addPeopleToMeeting(index)'>参会
                                    <i class="el-icon-arrow-right el-icon--right"></i>
                                </el-button>
                            </div>

                            <div class="ta-transfer_right">
                                <div class="transfer-view-head">
                                    <div class="head_left">
                                        <el-checkbox :indeterminate="item.parameter.isIndeterminate"
                                            :disabled='item.wpinfo.length == 0' v-model="item.parameter.checkAll"
                                            @change="handleCheckAllChange($event, index)">
                                            参会人员
                                        </el-checkbox>
                                    </div>
                                    <div class="head_right">
                                        <span>{{ item.parameter.selected_num }}</span>
                                        <span>/</span>
                                        <span>{{ item.wpinfo.length }}</span>
                                    </div>
                                </div>
                                <div class="transfer-view-main">
                                    <el-checkbox-group v-model="item.parameter.checkedCities"
                                        @change="handleCheckedCitiesChange($event, index)">
                                        <div class="transfer-view-item" v-for="(item1, index1) in item.wpinfo">
                                            <el-checkbox :label="item1.id" :key="item1.account">{{ item1.account
                                            }}</el-checkbox>
                                        </div>
                                    </el-checkbox-group>
                                </div>
                            </div>
                        </div>

                    </div>
                </el-form-item>
                <el-form-item label="组长" v-if="item.wpinfo.length > 0 && item.teamType != 'DIRECTOR'">
                    <el-select class="mySelect" v-model="item.leader" placeholder="请选择组长">
                        <el-option v-for="item1 in item.wpinfo" :key="item1.account" :label="item1.account"
                            :value="item1.account">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-divider v-if="index != formData.teams.length - 1"></el-divider>
            </el-form>
            <div class="buttonDiv">
                <el-button type="primary" @click="addTeam">增加与会方</el-button>
                <el-button type="success" @click="submitExercisePeople">提交</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { getChatRoomMemberInfo, setMember } from "@/api/chat/chatRoom";
import { getUserList } from '@/api/user.js';
export default {
    data() {
        return {
            dialogVisible: false,
            exerciseObj: {},
            formData: {
                id: '',
                director: [],
                teams: [
                    {
                        member: [],
                        teamName: '',
                        teamType: null,
                        invoking: {
                            checkedCities: [],
                            selected_num: 0,
                            isIndeterminate: false,
                            checkAll: false
                        },
                        parameter: {
                            isIndeterminate: false,
                            checkAll: false,
                            checkedCities: [],
                            selected_num: 0,
                            dataAll: []
                        },
                        wpinfo: [],
                        leader: null
                    }
                ]
            },
            allData: [],
            tmpArr: [],
            exerciseList: []
        }
    },
    props: {
        currentExercise: Object
    },
    methods: {
        handleClose() {
            this.dialogVisible = false;
        },
        showDialog() {
            this.dialogVisible = true;
        },
        getChatRoomMemberList(item) {
            getChatRoomMemberInfo(item.id, this.userInfo.account).then(res => {
                this.exerciseList = res;
                let tmpList = [];
                this.formData.teams = [];
                this.exerciseList.forEach((item, index) => {
                    let obj = {
                        member: [],
                        teamName: item.teamName,
                        teamType: item.teamType,
                        invoking: {
                            checkedCities: [],
                            selected_num: 0,
                            isIndeterminate: false,
                            checkAll: false
                        },
                        parameter: {
                            isIndeterminate: false,
                            checkAll: false,
                            checkedCities: [],
                            selected_num: 0,
                            dataAll: []
                        },
                        wpinfo: [],
                        leader: item.leader
                    };
                    item.teamMemberStateBOList.forEach((item1, index1) => {
                        obj.wpinfo.push(this.allData.filter(item2 => { return item2.account == item1.userId })[0]);
                    });
                    item.teamMemberStateBOList.forEach((item1, index1) => {
                        this.allData = this.allData.filter(item2 => { return item2.account != item1.userId });
                    });
                    tmpList.push(obj);
                })
                let index = tmpList.findIndex(item => item.teamType == 'DIRECTOR');
                if (index > 0) {
                    tmpList.unshift(tmpList.splice(index, 1)[0])
                }
                this.formData.teams = tmpList;
            }).catch(error => {
                this.$message.error(error);
            })
        },
        handleDialogOpen() {
            this.exerciseObj = this.$props.currentExercise;
            this.allData = this.tmpArr;
            this.getChatRoomMemberList(this.exerciseObj);
        },
        addTeam() {
            this.formData.teams.push(
                {
                    teamName: '',
                    member: [],
                    invoking: {
                        checkedCities: [],
                        selected_num: 0,
                        isIndeterminate: false,
                        checkAll: false
                    },
                    parameter: {
                        isIndeterminate: false,
                        checkAll: false,
                        checkedCities: [],
                        selected_num: 0,
                        dataAll: []
                    },
                    wpinfo: [],
                    leader: null
                }
            );
        },
        addPeopleToMeeting(index) { //参会
            let formData = this.formData.teams[index].invoking.checkedCities
            for (const key in formData) {
                for (const k in this.allData) {
                    if (this.allData[k].id == formData[key]) {
                        this.formData.teams[index].wpinfo.push.apply(this.formData.teams[index].wpinfo, this.allData.splice(k, 1))

                    }
                }
            }
            for (const key in this.formData.teams[index].wpinfo) {
                this.formData.teams[index].parameter.dataAll.push(this.formData.teams[index].wpinfo[key].id)
            }
            this.formData.teams[index].invoking.selected_num = 0
            this.formData.teams[index].invoking.isIndeterminate = false
            this.formData.teams[index].invoking.checkedCities = []
            this.formData.teams[index].invoking.checkAll = false
        },
        removePeopleFromMeeting(index) { //离席
            let formData = this.formData.teams[index].parameter.checkedCities
            for (const key in formData) {
                for (const k in this.formData.teams[index].wpinfo) {
                    if (this.formData.teams[index].wpinfo[k].id == formData[key]) {
                        this.allData.push.apply(this.allData, this.formData.teams[index].wpinfo.splice(k, 1))
                    }
                }
            }
            this.formData.teams[index].parameter.selected_num = 0
            this.formData.teams[index].parameter.isIndeterminate = false
            this.formData.teams[index].parameter.checkedCities = []
            this.formData.teams[index].parameter.checkAll = false

        },
        // ----------------------------
        handleCheckAllChange(val, index, falg) { //点击全选
            let tmpArr = [];
            this.allData.forEach(item => {
                tmpArr.push(item.id);
            });
            if (falg) {
                this.formData.teams[index].invoking.checkedCities = val ? tmpArr : [];
                this.formData.teams[index].invoking.selected_num = val ? tmpArr.length : 0
                this.formData.teams[index].invoking.isIndeterminate = false;
            } else {
                this.formData.teams[index].parameter.checkedCities = val ? this.formData.teams[index].parameter.dataAll : []
                this.formData.teams[index].parameter.selected_num = val ? this.formData.teams[index].parameter.dataAll.length : 0
                this.formData.teams[index].parameter.isIndeterminate = false;

            }

        },
        handleCheckedCitiesChange(value, index, falg) { //判断是否触发全选
            if (falg) {
                this.formData.teams[index].invoking.selected_num = value.length
                value.length >= 1 ? this.formData.teams[index].invoking.isIndeterminate = true : this.formData.teams[index].invoking.isIndeterminate = false
                if (this.allData.length == value.length) {
                    this.formData.teams[index].invoking.checkAll = true
                    this.formData.teams[index].invoking.isIndeterminate = false
                } else {
                    this.formData.teams[index].invoking.checkAll = false
                }
            } else {
                this.formData.teams[index].parameter.selected_num = value.length
                value.length >= 1 ? this.formData.teams[index].parameter.isIndeterminate = true : this.formData.teams[index].parameter.isIndeterminate = false
                if (this.formData.teams[index].wpinfo.length == value.length) {
                    this.formData.teams[index].parameter.checkAll = true
                    this.formData.teams[index].parameter.isIndeterminate = false
                } else {
                    this.formData.teams[index].parameter.checkAll = false
                }

            }

        },
        getUserListFn() {
            getUserList().then(res => {
                this.allData = res;
                this.tmpArr = res;
            })
        },
        removeTeam(index) {
            if (this.formData.teams.length > 1) {
                this.allData = this.allData.concat(this.formData.teams[index].wpinfo);
                this.formData.teams.splice(index, 1)
            } else {
                this.$message.warning('最后一组，不能移除！');
            }
        },
        submitExercisePeople() {
            let tmpArr = {
                id: this.exerciseObj.id,
                director: [],
                teams: []
            };
            this.formData.teams.forEach((item, index) => {
                if (item.teamType == 'DIRECTOR') {
                    this.formData.director = [];
                    item.wpinfo.forEach(item1 => {
                        this.formData.director.push(item1.account);
                    })
                    tmpArr.director = this.formData.director;
                } else {
                    item.member = [];
                    item.wpinfo.forEach(item1 => {
                        item.member.push(item1.account);
                    })
                    tmpArr.teams.push(item);

                }
            });
            if (tmpArr.teams.length > 0) {
                setMember(tmpArr).then(res => {
                    this.$message.success(res);
                }).catch(error => {
                    this.$message.error(error.message);
                })
            } else {
                this.$message.warning('除导演部外，不存在其他演习方，此演习不能修改！');
            }
        }
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { account: "" };
            }
        }
    },
    mounted() {
        this.getUserListFn();
    }
}
</script>

<style lang="scss">
.el-dialog {
    padding: 20px;
    box-sizing: border-box;
    background-color: transparent;
    background-image: url(../../../assets/img/home/dialog.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .el-dialog__header {
        text-align: center;

        .el-dialog__headerbtn {
            top: 35px;

            .el-dialog__close {
                color: white;
            }
        }
    }

    .el-dialog__body {
        height: 600px;

        .configExercise {
            width: 100%;
            height: 94%;
            overflow-y: auto;

            .yhf {
                width: 98%;

                .teamName {
                    width: 200px;

                    .el-input__inner {
                        color: white !important;
                        background: none !important;
                        border: 1px solid #3a5f94c9 !important;
                        box-shadow: 0 0 10px #3a5f94c9;
                    }
                }

                .myTag {
                    margin-left: 20px;
                }

                .myIcon {
                    float: right;
                    color: red;
                    font-size: 20px;
                    margin-top: 8px;
                    cursor: pointer;
                }

                .mySelect {
                    .el-input__inner {
                        color: white !important;
                        background: none !important;
                        border: 1px solid #3a5f94c9 !important;
                        box-shadow: 0 0 10px #3a5f94c9;
                    }
                }

                .el-divider {
                    background-color: #3a5f94c9 !important;
                }

                .ta-transfer {
                    width: 98%;
                    height: 300px;
                    // margin-bottom: 50px;
                    margin-left: 1%;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .ta-transfer_left,
                    .ta-transfer_right {
                        width: 30%;
                        height: 100%;
                        background-color: #ffffff;
                        border: 1px solid #ebeef5;
                        border-radius: 5px;

                        .transfer-view-head {
                            width: 100%;
                            height: 50px;
                            background-color: #f5f7fa;
                            border-bottom: 1px solid #ebeef5;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 0 10px;
                            box-sizing: border-box;

                            .head_left {
                                display: flex;
                                width: 70%;
                                height: 100%;

                                .el-checkbox {
                                    display: flex;
                                    align-items: center;
                                    height: 100%;
                                    width: 100%;
                                }

                                .el-checkbox__label {
                                    font-size: 16px;
                                }
                            }

                            .head_right {
                                width: 30%;

                                span {
                                    font-size: 14px;
                                    color: #909399;
                                }
                            }
                        }

                        .transfer-view-main {
                            width: 100%;
                            height: calc(100% - 50px);
                            padding: 10px 10px 0 10px;
                            box-sizing: border-box;
                            overflow-y: auto;

                            .transfer-view-item {
                                margin-bottom: 10px;
                                width: 100%;
                                height: 20px;
                                // background-color: #c5c1c1;
                                display: flex;
                                align-items: center;

                                .el-checkbox {
                                    display: flex;
                                    align-items: center;
                                    width: 100%;
                                    height: 100%;

                                    .el-checkbox__label {
                                        color: #606266;
                                    }

                                    .el-checkbox__input.is-checked+.el-checkbox__label {
                                        color: #409eff;
                                    }
                                }

                                .el-checkbox:hover {
                                    .el-checkbox__label {
                                        color: #409eff;
                                    }
                                }
                            }
                        }
                    }

                    .ta-transfer_btn {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 30%;
                        height: 100px;
                    }
                }
            }

            .buttonDiv {
                text-align: center;
            }


        }
    }
}
</style>