<template>
    <div id="main">
        <div class="box-top">
            <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
            <div class="tunnel-title"></div>
            <manage-length class="tunnel-length"></manage-length>
            <div class="top-right">
                <div class="current-site">
                    当前站点：<span>{{ currentSite }}</span>
                    <el-dropdown trigger="click" @command="handleCommand">
                        <div class="toggle"></div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label
                                }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <div class="current-user">
                    上午好：<span>{{ currentUser }}</span>
                    <span>今天是：{{ currentDate }}</span>
                    <div class="logout" @click="handleLogout"></div>
                </div>
            </div>
        </div>
        <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
        <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" />
    </div>
</template>
<script setup>
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import ManageLength from "@/components/manageLength/index.vue";
import { dateFormat } from "@/utils/date.js";
import { getToken } from "@/utils/auth";
import { useAuthStore } from "@/store/userstore.js";
import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
import { ElMessageBox } from "element-plus";
import { getUserInfo } from "@/api/login";

const authStore = useAuthStore();
const router = useRouter();
const selectIndex = ref(-1);
const showFan = ref(false);
const drawerLeft = ref(true);
const drawerRight = ref(true);
const currentSite = ref("");
const siteList = ref([])
const currentUser = ref("");
const currentDate = ref(dateFormat());
const tunnelBtn = ref();
const tunnelList = ref([]);
const tunnelId = ref(0);
const routeList = ref([]);
let socket = reactive("");
const serialNumber = ref("SC00DY00GH00ELBT");
let token = getToken();
let send = {
    type: "ping",
};
const largeScreenData = ref(null);
const socketData = reactive({
    leftData: [],
    windPressure: [],
    sensor: [],
});

onMounted(() => {
    nextTick(() => {
        showFan.value = true;
    });
    getUser()
    getOtherInfo()

});

const getUser = () => {
    getUserInfo().then(res => {
        currentUser.value = res.data.user.userName
    })
}
const getOtherInfo = () => {
    getLargeScreenInfo().then((res) => {
        if (res?.code === 1000) {
            routeList.value = res.data.routeList
            currentSite.value = res.data.siteOption[0].label
            siteList.value = res.data.siteOption
            tunnelId.value = res.data.tunnelOption[0].value
            getTunnel(res.data.siteOption[0].value)
            getScreenInfo(tunnelId.value);
        }
    });
};
const getScreenInfo = async (id) => {
    await getLargeScreen(id).then((res) => {
        if (res?.code === 1000) {
            largeScreenData.value = res.data;
        }
    });
};
//根据站点id获取隧道信息
const getTunnel = (id) => {
    getTunnelBySiteId(id).then((res) => {
        if (res?.code === 1000) {
            tunnelList.value = res.data
            getScreenInfo(res.data[0].value)
        }
    });
}
const changeTunnel = (e) => {
    tunnelId.value = e
    let newObj = {}
    tunnelList.value.forEach((item, index) => {
        if (index === e) {
            newObj = item
        }
    })
    getScreenInfo(newObj.value)
    nextTick(() => {
        showFan.value = true;
    });
}
const manageSelect = (index) => {
    console.log("首页点击-", index);
    if (index === 0) {
        router.push("/site");
    } else if (index === 1) {
        router.push("/tunnel/1");
    } else if (index === 2) {
        router.push("/user");
    }
};
const handleCommand = (item) => {
    console.log('commads', item)
    currentSite.value = item.label
    getTunnel(item.value)
}
const closeLeft = () => {
    drawerLeft.value = !drawerLeft.value;
};
const closeRight = () => {
    drawerRight.value = !drawerRight.value;
};
const handleLogout = () => {
    ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        authStore.userLogout();
        router.push("/login");
    })
};
const previousBtn = () => {
    tunnelBtn.value.prev();
};
const nextBtn = () => {
    tunnelBtn.value.next();
};

const initWebSocket = () => {
    // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
    let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
    console.log(wsUrl);
    socket = new WebSocket(wsUrl);
    //连接发生错误的回调方法
    socket.onerror = function () {
        console.log("ws连接发生错误");
    };
    //连接成功建立的回调方法
    socket.onopen = function () {
        console.log("ws连接成功");
    };
    //接收到消息的回调方法
    socket.onmessage = function (event) {
        console.log("服务器返回的信息: ", JSON.parse(event.data));
        const type = JSON.parse(event.data).type;
        const data = JSON.parse(event.data).data;
        if (type === "equipment") {
            data.forEach((item) => {
                if (item.typeKey === "frequency") {
                    socketData.leftData = data;
                } else if (item.typeKey === "windPressure") {
                    socketData.windPressure = data;
                } else if (item.typeKey === "sensor") {
                    socketData.sensor = data;
                }
            });
        }
    };
    //连接关闭的回调方法
    socket.onclose = function () {
        console.log("ws连接关闭");
        // initWebSocket()
    };
    setInterval(() => {
        socket.send(JSON.stringify(send));
    }, 30000);
};
const closeSocket = () => {
    socket.close();
};
initWebSocket();
</script>
<style lang="scss">
.el-dropdown__popper.el-popper {
    background: transparent;
    //border: none;
    border: 1px solid #0E7DAA;
    border-radius: 10px;
}

.is-light {
    background: rgba(7, 35, 72, 0.9);
}

.el-popper {
    padding: 20px;
    margin-left: 50px;
    width: 150px;
    background: rgba(7, 35, 72, 0.9);

    .el-scrollbar__wrap {
        .el-dropdown__list {
            .el-dropdown-menu {
                background-color: rgba(7, 35, 72, 0.9);
                border-radius: 10px;
                padding: 5px;

                .el-dropdown-menu__item {
                    color: #FFFFFF;
                    //border:none;
                    padding: 5px;

                    border-bottom: 1px solid #05FEFF;

                    &:last-child {
                        border-bottom: none;
                    }
                }

                .el-dropdown-menu__item.hover,
                .el-dropdown-menu__item:hover {
                    background-color: transparent !important;
                    color: #F7B500;
                }
            }
        }
    }
}
</style>
<style lang="scss" scoped>
#main {
    height: 100%;
    width: 100%;
    background-color: #072348;

    #tunnel-box {
        height: 100%;
    }
}
</style>
  