<template>
    <a-modal title="关联房间" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit"
        @cancel="handleCancel" cancelText="关闭" style="top:20px;">
        <a-spin :spinning="confirmLoading">
            <div class="relation-wrapper">
                <a-row>
                    <a-col :span="12" style="height: 500px;overflow-y:auto;">
                        <div class="wrapper-floor" v-for="item in roomTree" :key="item.id">
                            <div>{{ item.name }}</div>
                            <div class="wrapper-room">
                                <div @click="onRoomClick(room)" class="wrapper-room-item"
                                    :class="[selectedRooms.findIndex(s => s.id == room.id) > -1 ? 'selected-class' : '']"
                                    v-for="room in item.rooms" :key="room.id">
                                    {{ room.name }}
                                </div>
                            </div>
                        </div>
                    </a-col>

                    <a-col :span="12" style="height: 500px;overflow-y:auto;">
                        <div style="margin:10px;">已关联房间</div>
                        <div style="display: flex;flex-wrap: wrap;height: max-content;">
                            <div @click="delSelectedRoom(room)" class="wrapper-room-item-1" v-for="room in selectedRooms"
                                :key="room.id">
                                {{ room.name }}
                            </div>
                        </div>

                    </a-col>
                </a-row>
            </div>
        </a-spin>
    </a-modal>
</template>
  
<script>
import { putAction, getAction, postAction } from '@/api/manage'
import { min } from 'lodash'
export default {
    name: "UserRoomRelation",
    data() {
        return {
            confirmLoading: false,
            visible: false,
            roomTree: [],
            selectedRooms: [],
            userId: null
        }
    },
    created() {

    },

    methods: {
        delSelectedRoom(r) {
            let findIndex = this.selectedRooms.findIndex(s => s.id == r.id)
            if (findIndex > -1) {
                this.selectedRooms.splice(findIndex, 1)
            }
        },
        onRoomClick(r) {
            let findIndex = this.selectedRooms.findIndex(s => s.id == r.id)
            if (findIndex > -1) {
                this.selectedRooms.splice(findIndex, 1)
            } else {
                this.selectedRooms.push(r)
            }
        },
        show(userId) {
            this.userId = userId

            getAction(
                "/business/busRoomBookingOrders/rili-fangtai",
                { start: '2023-05-19', end: '2023-06-18' }
            ).then((res) => {
                if (res.success) {
                    this.roomTree = res.result.floorRoomVos;
                    getAction(
                        "/business/busUserRoomRelation/list",
                        { userId: userId }
                    ).then((res1) => {
                        if (res1.success) {
                            let seletedRooms = []
                            let res1Arr = res1.result
                            this.roomTree.forEach(l => {
                                l.rooms.forEach(t => {
                                    if (res1Arr.findIndex(f => f.roomId == t.id) > -1) {
                                        seletedRooms.push(t)
                                    }
                                })
                            })
                            this.selectedRooms = seletedRooms
                        }
                    });
                }
            });
            this.visible = true;
        },
        close() {
            this.$emit('close');
            this.visible = false;
        },
        handleSubmit() {
            // 触发表单验证
            let bodyData = this.selectedRooms.map(s => {
                return {
                    roomId: s.id,
                    userId: this.userId
                }
            })
            postAction("/business/busUserRoomRelation/add?userId=" + this.userId, bodyData).then(res => {
                if (res.success) {
                    this.$message.success("保存成功！")
                    this.visible = false
                }
            })
        },
        handleCancel() {
            this.close()
        },
    }
}
</script>
<style>
.wrapper-room {
    display: flex;
    flex-wrap: wrap;
}

.wrapper-room-item:hover {
    border: 1px solid #f00;
    color: #FFF;
    background-color: #fF000088;
}

.selected-class,
.wrapper-room-item-1 {
    border: 1px solid #f00 !important;
    color: #FFF !important;
    background-color: #fF000088 !important;
}

.wrapper-room-item,
.wrapper-room-item-1 {
    width: fit-content;
    padding: 5px 8px;
    border: 1px solid #1890FF;
    background-color: #1890FF88;
    margin-left: 10px;
    margin-top: 5px;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}
</style>