<template>
    <div class="room-div">
        <el-card>
            <div>
                <el-button type="primary" @click="goHome">项目管理</el-button>
                <el-button type="success" @click="save_room">项目预览</el-button>
            </div>
            <div class="ptoject-info">
                <div class="title">{{ project.name }}</div>
                <div>{{ project.description }}</div>
            </div>
            <el-divider />
            <div>
                <el-button type="primary" class="add-btn" :icon="Plus" @click="add_room">新建</el-button>
            </div>
            <div class="room-list">
                <div v-for="(item, index) in project.content" :key="index" class="room-span" @click="select_room(item)"
                    :class="{ 'selectDiv': item.room_name === currentRoom.room_name }">
                    <span>{{ item.room_name }}</span>
                    <span>{{ item.room_count }}</span>
                    <el-button :icon="Delete" circle @click="delet_room(item)"/>
                </div>
            </div>
        </el-card>
        <el-card>
            <div class="div-1">
                <span class="name name1">房型信息</span>
                <div class="flex-center bar">
                    <div class="div300">
                        <span>房型名称：</span>
                        <el-input v-model="currentRoom.room_name" placeholder="请输入房型名称" />
                    </div>
                    <div class="div300">
                        <span>房型数量：</span>
                        <el-input-number v-model="currentRoom.room_count" :min="1" :max="10"
                            label="描述文字"></el-input-number>
                    </div>
                </div>
            </div>
            <div class="div-2">
                <span class="name name2">灯光信息</span>
                <div class="flex-center bar">
                    <div v-for="(item, i) in lightArr" :key="item.label">
                        <p>{{ item.label }}</p>
                        <p>
                            <el-input-number v-model="currentRoom['lightNum'+ item.value]" :min="1" :max="100"></el-input-number>
                        </p>
                    </div>
                </div>
            </div>
            <div class="div-3">
                <span class="name name3">空调信息</span>
                <div class="flex-center bar">
                    <div>盘管类型</div>
                    <el-radio-group v-model="currentRoom.type1">
                        <el-radio :value="item.value" :key="item.value" v-for="(item, index) in radioGroup1">{{ item.label
                        }}</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="currentRoom.type2">
                        <el-radio :value="item.value" :key="item.value" v-for="(item, index) in radioGroup2">{{ item.label
                        }}</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="currentRoom.type3">
                        <el-radio :value="item.value" :key="item.value" v-for="(item, index) in radioGroup3">{{ item.label
                        }}</el-radio>
                    </el-radio-group>
                    <div>
                        <p>温控器数量</p>
                        <p>
                            <el-input-number v-model="currentRoom.num1" :min="1" :max="100"></el-input-number>
                        </p>
                    </div>
                </div>
            </div>
            <div class="div-4">
                <span class="name name4">面板信息</span>
                <div class="flex-center bar">
                    <div>面板类型</div>
                    <el-radio-group v-model="currentRoom.type4">
                        <el-radio :value="item.value" :key="item.value" v-for="(item, index) in radioGroup4">{{ item.label
                        }}</el-radio>
                    </el-radio-group>
                    <div>
                        <p>面板数量</p>
                        <p>
                            <el-input-number v-model="currentRoom.mbnum" :min="1" :max="100"></el-input-number>
                        </p>
                    </div>
                    <div>
                        <p>按钮数量</p>
                        <p>
                            <el-input-number v-model="currentRoom.btnnum" :min="1" :max="100"></el-input-number>
                        </p>
                    </div>
                </div>
            </div>
            <div class="div-5">
                <span class="name name5">窗帘信息</span>
                <div class="flex-center bar">
                    <div>窗帘类型</div>
                    <el-radio-group v-model="currentRoom.type5">
                        <el-radio :value="item.value" :key="item.value" v-for="(item, index) in radioGroup5">{{ item.label
                        }}</el-radio>
                    </el-radio-group>
                    <div>
                        <p>窗帘数量</p>
                        <p>
                            <el-input-number v-model="currentRoom.chlnum" :min="1" :max="100"></el-input-number>
                        </p>
                    </div>
                    <div>
                        <p>窗纱数量</p>
                        <p>
                            <el-input-number v-model="currentRoom.chshnum" :min="1" :max="100"></el-input-number>
                        </p>
                    </div>
                </div>
            </div>
            <div class="div-6">
                <span class="name name6">其他信息</span>
                <div class="con-div">
                    <div class="flex-center bar">
                        <div v-for="(item, i) in otherArr" :key="item.label">
                            <p>{{ item.label }}</p>
                            <p>
                                <el-input-number v-model="currentRoom['otherNum'+ item.value]" :min="1" :max="100"></el-input-number>
                            </p>
                        </div>

                    </div>
                    <el-checkbox-group v-model="currentRoom.checkone" class="rules-label">
                        <el-checkbox v-for="(item, i) in checkList" :label="item.label" :key="item.value"
                            :value="item.value">
                            {{ item.label }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>

            </div>
            <div class="div-7">
                <span class="name name7">备注</span>
                <div class="con-div100">
                    <div class="flex-center bar">
                        <el-input type="textarea" v-model="currentRoom.desc"></el-input>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script setup>
import { Delete } from '@element-plus/icons-vue'
import { onMounted, ref, reactive } from 'vue'
import { usrRoomStore } from '../store/project'
import { Plus } from '@element-plus/icons-vue'
import myApi from "@/api/myApi.js";
import { useRoute, useRouter } from 'vue-router'
import { ElMessage,ElMessageBox } from "element-plus";
const router = useRouter()
const route = useRoute()

const project = reactive({
    name: "",
    description: "",
    content: [],
});

const room_info = reactive({
    room_name: '',
    room_count: 1,
    lightNum0: 1, // 开关回路
    lightNum1: 1,//0-10V调光
    lightNum2: 1,//前沿调光
    lightNum3: 1,//后沿调光
    lightNum4:1, //DALI灯
    type1: 0,// 盘管类型
    type2: 0,
    type3: 0,
    num1: 1, // 温室器数量
    type4: 0,// 面板类型
    type5: 0,// 窗帘类型
    mbnum: 0,// 面板数量
    btnnum: 0,// 按钮数量
    chlnum: 0,// 窗帘数量
    chshnum: 0,// 窗纱数量
    checkone: [0,1],// 其他信息
    desc: '', // 备注,
    otherNum0: 1,
    otherNum1: 1,
    otherNum2: 1,
    otherNum3: 1,
    otherNum4: 1

})


var currentRoom = ref({});
const get_project = async () => {
    const param = {
        action: 100,
        data: {
            name: route.query.project_name,
        }
    }
    const res = await myApi.getProjects(param);
    if (res.code === 0) {
        project.name = res.data.name;
        project.description = res.data.description;
        if (Array.isArray(res.data.content)) {
            project.content = res.data.content;
        } else {
            add_room();
        }
        select_room(project.content[0]);
    } else {
        ElMessage({
            message: res.message,
            type: "warning",
        });
    }
}
const delet_room = (item) => {
    if(project.content.length === 1) {
        ElMessage.warning('至少保留一个。。')
        return;
    }
    project.content = project.content.filter(ele => {
        return ele.room_name !== item.room_name;
    })
    save_room();
}
onMounted(() => {
    get_project();
});

const select_room = (item) => {
    currentRoom.value = item;
}
const add_room = () => {
    if (!Array.isArray(project.content)) {
        project.content = []
    }
    let target=JSON.parse(JSON.stringify(room_info));
    target.room_name = "房型" + (project.content.length + 1);
    project.content.push(target);
    console.log(1, project.content);
}

const save_room = async () => {
    const param = {
        action: 1021,
        data: project
    }
    const res = await myApi.getProjects(param);
    console.log(res);
    if (res.code === 0) {
        ElMessage({
            message: "更新成功",
            type: "success",
        });
        get_project();
    } else {
        ElMessage({
            message: res.message + '[' + res.data + ']',
            type: "warning",
        });
    }
}

const goHome = () => {
    save_room();
    router.push('home');
}


const lightArr = reactive([{
    label: '开关回路',
    value: 0,
}, {
    label: '0-10V调光',
    value: 1,
}, {
    label: '前沿调光',
    value: 2,
}, {
    label: '后沿调光',
    value: 3,
}, {
    label: 'DALI灯',
    value: 4,
}])
const otherArr = reactive([{
    label: '红外',
    value: 0,
}, {
    label: '双鉴红外',
    value: 1,
}, {
    label: '门磁',
    value: 2,
}, {
    label: '窗磁',
    value: 3,
}, {
    label: '门铃',
    value: 4,
}])
const radioGroup1 = reactive([{
    label: '普通三速风机',
    value: 0,
}, {
    label: '直流无刷风机',
    value: 1,
}, {
    label: '三方协议风机',
    value: 2,
}])
const radioGroup2 = reactive([{
    label: '两管制',
    value: 0,
}, {
    label: '四管制',
    value: 1,
}])
const radioGroup3 = reactive([{
    label: '两通阀',
    value: 0,
}, {
    label: '调节阀',
    value: 1,
}])
const radioGroup4 = reactive([{
    label: '普通面板(无背光)',
    value: 0,
}, {
    label: '普通面板(带背光)',
    value: 1,
}, {
    label: '协议面板',
    value: 10,
}])
const radioGroup5 = reactive([{
    label: '干接点电机',
    value: 0,
}, {
    label: '485电机',
    value: 1,
}])
const checkList = reactive([{
    label: 'DND',
    value: 0,
}, {
    label: 'MUR',
    value: 1,
}, {
    label: 'SOS',
    value: 2,
}])
</script>
<style lang="scss" scoped>
.room-div {
    height: 800px;
    display: flex;
    justify-content: space-between;

    >div:first-child {
        width: 20%;

        ::v-deep .el-card__body {
            display: flex;
            flex-direction: column;
            height: 95%;

            >div {
                margin: 10px 0;
            }

            .add-btn {
                width: 100%;
            }

            .room-span {
                padding: 10px 5px;
                border: 1px solid #409eff;
                margin: 10px 0;
                border-radius: 4px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;

                >span {
                    width: 30%;
                }
            }
            .title {
                line-height: 48px;
                font-size: 24px;
                font-weight: 500;
            }
            .el-divider{ 
                background-color:#409eff;
            }
        }

    }

    >div:nth-child(2) {
        width: 79%;

        ::v-deep .el-card__body {
            display: flex;
            flex-direction: column;
            height: 95%;
            justify-content: space-between;

            >div {
                border: 1px solid #ddd;
                display: flex;
                border-radius: 8px;

                .name {
                    width: 50px;
                    color: #fff;
                    font-size: 18px;
                    justify-content: center;
                    display: flex;
                    align-items: center;
                }

                .name1 {
                    background: #de868f;
                }

                .name2 {
                    background: #e99d42;
                }

                .name3 {
                    background: #cba43f;
                }

                .name4 {
                    background: #bfbf3d;
                }

                .name5 {
                    background: #54bcbd;
                }

                .name6 {
                    background: #e99d42;
                }

                .name7 {
                    background: #cd42e9;
                }
            }

            .div-1 {
                height: 10%;
            }

            .div-2 {
                height: 12%;
            }

            .div-3 {
                height: 12%;
            }

            .div-4 {
                height: 12%;
            }

            .div-5 {
                height: 12%;
            }

            .div-6 {
                height: 20%;
            }

            .div-7 {
                height: 15%;
            }

            .el-radio-group {
                width: 160px !important;
                display: flex;

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

        .con-div {
            display: flex;
            justify-content: space-around;
            flex-direction: column;
        }

        .con-div100 {
            width: 96%;
            height: 100%;
            padding: 5px;
        }

        ::v-deep .el-textarea__inner {
            height: 80px !important;
        }

        p {
            margin: 8px;
        }

        .bar {
            width: 100%;
            padding: 10px;

            >div {
                margin-right: 10px;
            }
        }

        .div300 {
            width: 300px;
            display: flex;
            align-items: center;

            span {
                flex-shrink: 0;
            }
        }
    }

    .selectDiv {
        background: #409eff;
        color: #fff;
    }

}</style>