<template>
    <div class="addDdkzConfig">
        <el-form class="myForm" label-position="right" label-width="200px" :model="formData">
            <el-form-item label="演习标题">
                <el-input v-model="formData.nickname"></el-input>
            </el-form-item>
            <el-form-item label="演习主持人">
                <!-- <el-input v-model="formData.chatroomOwner"></el-input> -->
                <el-select v-model="formData.director" multiple placeholder="请选择" filterable>
                    <el-option v-for="item in allData" :key="item.account" :label="item.account" :value="item.account">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="演习内容">
                <el-input v-model="formData.conRemark"></el-input>
            </el-form-item>
            <el-form-item label="与会方">
                <div>
                    <el-button type="primary" @click="addTeam">增加与会方</el-button>
                </div>
                <el-form class="yhf" v-for="(item, index) in formData.teams" :key="index">
                    <el-form-item class="myTeamName" label="队伍名称" style="width: 100%;">
                        <el-input v-model="item.teamName" style="width: 80%;"></el-input>
                        <span class="myIcon el-icon-remove-outline" @click="removeTeam(index)"></span>
                    </el-form-item>
                    <!-- <el-form-item label="参会立场"> -->
                    <!-- <el-input v-model="formData.teamType"></el-input> -->
                    <!-- <el-select v-model="item.teamType" placeholder="请选择">
                            <el-option v-for="item in teamType" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select> -->
                    <!-- </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">
                        <el-select 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-form>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="createMeeting">创建演习</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { getUserList } from '@/api/user.js';
import { getTime_extent } from '@/util/http_util.js';
import { createChatRoom } from '@/api/chat/chatRoom.js';
export default {
    data() {
        return {
            formData: {
                chatroomOwner: null,
                conRemark: '',
                nickname: '',
                director: [],
                chatroomHeadPic: '',
                teams: []
            },
            value: [],
            teamType: [
                { value: 'DIRECTOR', label: '中立方' },
                { value: 'RED', label: '红方' },
                { value: 'BLUE', label: '蓝方' },
                { value: 'OTHER', label: '其他方' }
            ],
            // dataAll: [],
            allData: [],
            tmpArr: [],
            bgData: [
                {
                    invoking: {
                        checkedCities: [],
                        selected_num: 0,
                        isIndeterminate: false,
                        checkAll: false
                    },
                    parameter: {
                        isIndeterminate: false,
                        checkAll: false,
                        checkedCities: [],
                        selected_num: 0,
                        dataAll: []
                    },
                    wpinfo: []
                }
            ],
            userList: [],
            teamItem: {
                createTime: '',
                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
            }
        };
    },
    methods: {
        addTeam() {
            this.formData.teams.push(
                JSON.parse(JSON.stringify(this.teamItem))
            );
        },
        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
                }

            }

        },
        getUserList() {
            getUserList().then(res => {
                this.allData = res;
                this.tmpArr = res;
            })
        },
        createMeeting() {
            if (this.formData.director.length > 0) {
                this.formData.chatroomOwner = this.userInfo.account;
                this.formData.teams.forEach(item => {
                    item.createTime = getTime_extent(0).currentDate;
                    item.wpinfo.forEach(item1 => {
                        item.member.push(item1.account);
                    })
                });
                createChatRoom(this.formData).then(res => {
                    if (res == '创建成功') {
                        this.$message.success('聊天室创建成功！');
                        this.getUserList();
                        this.formData.teams = [];
                        this.formData.director = []
                    }
                }).catch(error => {
                    this.$message.error(error);
                })
            } else {
                this.$message.warning('导演部不能为空！');
            }
        },
        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('最后一组，不能移除！');
            }
        },
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { account: "" };
            }
        }
    },
    watch: {
        'formData.director'(newVal, oldVal) {
            let tmp = this.tmpArr.filter(item => { return oldVal.includes(item.account) });
            if (tmp.length > 0) {
                this.allData = this.allData.concat(tmp);
            }
            this.allData = this.allData.filter(item => { return newVal.includes(item.account) == false });
        }
    },
    mounted() {
        this.getUserList();
        // this.formData.teams.push(Object.assign({}, this.teamItem));
    }
}
</script>

<style lang="scss">
.addDdkzConfig {
    width: 100%;
    height: 100%;
    overflow-y: auto;

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

        .el-select {
            width: 40%;

            .el-input__inner {
                width: 100%;
            }
        }

    }

    .yhf {
        width: 48%;
        height: 570px;
        float: left;
        margin-top: 2%;
        margin-left: 1%;
        border: 1px solid #3a5f94c9;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 4px;


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

        // &>div:first-child {
        //     // margin-top: 10px;
        //     // display: flex;

        //     &>div:first-child {
        //         width: 150px;
        //     }

        //     .el-input__inner {
        //         width: 200px;
        //     }
        // }

        .el-transfer-panel {
            width: 170px !important;
        }

        .myTransfer {
            margin-top: 30px;
        }

        .ta-transfer {
            width: 100%;
            height: 300px;
            margin-bottom: 50px;
            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;
            }
        }
    }

    .el-form-item__label {
        color: white;
    }

    
}
</style>