<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>
                <el-button type="success" @click="exc">项目预览</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 in project.content" :key="item.base_info.room_name" class="room-span"
                    @click="select_room(item)" :class="{
                    selectDiv:
                        item.base_info.room_name ===
                        current_room_info.base_info.room_name,
                }">
                    <span>{{ item.base_info.room_name }}</span>
                    <span>{{ item.base_info.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="current_room_info.base_info.room_name" placeholder="请输入房型名称" />
                    </div>
                    <div class="div300">
                        <span>房型数量：</span>
                        <el-input-number v-model="current_room_info.base_info.room_count" :min="1" :max="99999"
                            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 in lightArr" :key="item.label">
                        <p>{{ item.label }}</p>
                        <p>
                            <el-input-number v-model="current_room_info.light_info[item.key]" :min="0"
                                :max="999"></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="current_room_info.fcu_info.fcu_type">
                        <el-radio :value="item.value" :key="item.value" v-for="item in radioGroup1">{{ item.label
                            }}</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="current_room_info.fcu_info.pipe_type">
                        <el-radio :value="item.value" :key="item.value" v-for="item in radioGroup2">{{ item.label
                            }}</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="current_room_info.fcu_info.valve_type">
                        <el-radio :value="item.value" :key="item.value" v-for="item in radioGroup3">{{ item.label
                            }}</el-radio>
                    </el-radio-group>
                    <div>
                        <p>风机盘管数量</p>
                        <p>
                            <el-input-number v-model="current_room_info.fcu_info.fcu_count" :min="0"
                                :max="999"></el-input-number>
                        </p>
                    </div>
                    <div>
                        <p>温控器数量</p>
                        <p>
                            <el-input-number v-model="current_room_info.fcu_info.thermostat_count" :min="0"
                                :max="999"></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="current_room_info.panel_info.panel_type">
                        <el-radio :value="item.value" :key="item.value" v-for="item in radioGroup4">{{ item.label
                            }}</el-radio>
                    </el-radio-group>
                    <div>
                        <p>面板数量</p>
                        <p>
                            <el-input-number v-model="current_room_info.panel_info.panel_count" :min="0"
                                :max="999"></el-input-number>
                        </p>
                    </div>
                    <div>
                        <p>按钮数量</p>
                        <p>
                            <el-input-number v-model="current_room_info.panel_info.panel_button_count" :min="0"
                                :max="999"></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="current_room_info.curtain_info.curtain_type">
                        <el-radio :value="item.value" :key="item.value" v-for="item in radioGroup5">{{ item.label
                            }}</el-radio>
                    </el-radio-group>
                    <div>
                        <p>窗帘数量</p>
                        <p>
                            <el-input-number v-model="current_room_info.curtain_info.curtain_count" :min="0"
                                :max="999"></el-input-number>
                        </p>
                    </div>
                    <div>
                        <p>窗纱数量</p>
                        <p>
                            <el-input-number v-model="current_room_info.curtain_info.sheer_curtain_count" :min="0"
                                :max="999"></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 in otherArr" :key="item.label">
                            <p>{{ item.label }}</p>
                            <p>
                                <el-input-number v-model="current_room_info.other[item.key]" :min="0"
                                    :max="999"></el-input-number>
                            </p>
                        </div>
                    </div>
                </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="current_room_info.base_info.desc"></el-input>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script setup>
import { Delete } from "@element-plus/icons-vue";
import { onMounted, reactive } from "vue";
import { Plus } from "@element-plus/icons-vue";
import myApi from "@/api/myApi.js";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();

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

const addData = reactive({
    base_info: {
        room_name: "",
        room_count: 1,
        desc: "",
    },

    light_info: {
        // 灯光信息
        switching_circuit: 0,
        dimming_10v: 0,
        dimming_leading_edge: 0,
        dimming_trailing_edge: 0,
        DALI: 0,
    },
    fcu_info: {
        // 盘管信息
        fcu_type: 0,
        pipe_type: 0,
        valve_type: 0,
        fcu_count: 0,
        thermostat_count: 0,
    },
    panel_info: {
        // 面板信息
        panel_type: 0,
        panel_count: 0,
        panel_button_count: 0,
    },
    curtain_info: {
        // 窗帘信息
        curtain_type: 0,
        curtain_count: 0,
        sheer_curtain_count: 0,
    },
    other: {
        // 其他信息
        PIR: 0,
        PIR2: 0,
        Gate: 0,
        Window: 0,
        doorbell: 0,
        Housekeeping: 0,
    },
});

const current_room_info = reactive({
    base_info: {
        room_name: "",
        room_count: 1,
        desc: "",
    },

    light_info: {
        // 灯光信息
        switching_circuit: 0,
        dimming_10v: 0,
        dimming_leading_edge: 0,
        dimming_trailing_edge: 0,
        DALI: 0,
    },
    fcu_info: {
        // 盘管信息
        fcu_type: 0,
        pipe_type: 0,
        valve_type: 0,
        fcu_count: 0,
        thermostat_count: 0,
    },
    panel_info: {
        // 面板信息
        panel_type: 0,
        panel_count: 0,
        panel_button_count: 0,
    },
    curtain_info: {
        // 窗帘信息
        curtain_type: 0,
        curtain_count: 0,
        sheer_curtain_count: 0,
    },
    other: {
        // 其他信息
        PIR: 0,
        PIR2: 0,
        Gate: 0,
        Window: 0,
        doorbell: 0,
        Housekeeping: 0,
    },
});

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 (
            res.data.content &&
            Array.isArray(res.data.content) &&
            res.data.content.length > 0
        ) {
            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.base_info.room_name !== item.base_info.room_name;
    });
};
onMounted(() => {
    get_project();
});

const select_room = (item) => {
    for (const key in item) {
        current_room_info[key] = item[key];
    }
};
const add_room = () => {
    if (!Array.isArray(project.content)) {
        project.content = [];
    }
    let target = JSON.parse(JSON.stringify(addData));
    target.base_info.room_name = "房型" + generateShortUUID();
    project.content.push(target);
};

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

const exc = async () => {
  const param = {
    action: 90001,
    data: project,
  };
  try {
    const res = await myApi.download(param);
    console.log(res);
    if (1) {
      // 文件下载成功
      const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = 'xx.xlsx'; // 设置下载的文件名
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);
      ElMessage({
        message: "保存成功",
        type: "success",
      });
    } else {
      // 下载失败，显示错误信息
      ElMessage({
        message: res.message + "[" + res.data + "]",
        type: "warning",
      });
    }
  } catch (error) {
    // 捕获并处理可能的错误
    console.error("Error downloading file:", error);
    ElMessage({
      message: "下载文件时发生错误",
      type: "error",
    });
  }
};

function generateShortUUID() {
    let uuid = "";
    const possible = "0123456789ABCDEF";

    for (let i = 0; i < 8; i++) {
        uuid += possible.charAt(Math.floor(Math.random() * possible.length));
    }

    return uuid;
}

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

const lightArr = reactive([
    {
        label: "开关回路",
        value: 0,
        key: "switching_circuit",
    },
    {
        label: "0-10V调光",
        value: 1,
        key: "dimming_10v",
    },
    {
        label: "前沿调光",
        value: 2,
        key: "dimming_leading_edge",
    },
    {
        label: "后沿调光",
        value: 3,
        key: "dimming_trailing_edge",
    },
    {
        label: "DALI灯",
        value: 4,
        key: "DALI",
    },
]);
const otherArr = reactive([
    {
        label: "红外",
        value: 0,
        key: "PIR",
    },
    {
        label: "双鉴红外",
        value: 1,
        key: "PIR2",
    },
    {
        label: "门磁",
        value: 2,
        key: "Gate",
    },
    {
        label: "窗磁",
        value: 3,
        key: "Window",
    },
    {
        label: "门铃",
        value: 4,
        key: "doorbell",
    },
    {
        label: "房务",
        value: 5,
        key: "Housekeeping",
    },
]);
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,
    },
]);
</script>
<style lang="scss" scoped>
.room-div {
    height: 800px;
    display: flex;
    justify-content: space-between;

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

        :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%;

        :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;
        }

        :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>
