<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-length">
        <span>隧道总长度: {{ tunnelLength }}米</span>
        <span>当前施工长度: {{ constructionLength }}米</span>
        <span>隧道总长度: {{ tunnelLength }}米</span>
        <span>当前施工长度: {{ constructionLength }}米</span>
      </div>
      <div class="top-right">
        <div class="current-site">
          当前站点：<span>{{ currentSite }}</span>
          <el-dropdown trigger="click" @command="handleChangeSite">
            <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="false" /> -->
    <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
    <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->

    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
    <div class="left">
      <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
        :close-on-click-modal="false" :close-on-press-escape="false">
        <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
          :transducer-data="largeScreenData" />
        <!--        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
      </el-drawer>
      <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
      <div v-else class="shrink-left" @click="closeLeft"></div>
    </div>
    <div class="right">
      <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
        :close-on-click-modal="false" :close-on-press-escape="false">
        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" />
        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" />
      </el-drawer>
      <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
      <div v-else class="shrink-right" @click="closeRight"></div>
    </div>
    <div class="switch-btn">
      <div class="arrow" @click="previousBtn"></div>
      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" @change="changeTunnel">
        <div class="btn">
          <el-carousel-item v-for="item in tunnelList" :key="item.value">
            {{ item.label }}
          </el-carousel-item>
        </div>
      </el-carousel>
      <div class="arrow right" @click="nextBtn"></div>
    </div>
  </div>
</template>

<script setup>
import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue"
import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
import UsedEle from "@/components/content/usedEle/UsedEle.vue";
import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/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 { ElMessage, ElMessageBox } from "element-plus";
import { getUserInfo } from "@/api/login";
import { initSceneData } from "@/api/tunnelScene";
import { getSiteDetail } from "../../api/site";
import { nextTick, reactive } from "vue";

const authStore = useAuthStore();
const router = useRouter();
const selectIndex = ref(-1);
const showFan = ref(false);
const drawerLeft = ref(true);
const drawerRight = ref(true);
const currentSiteId = ref(0);
const currentSite = ref("");
const siteList = ref([])
const currentUser = ref("");
const currentUserId = ref(0);
const currentDate = ref(dateFormat());
const tunnelBtn = ref();
const tunnelList = ref([]);
const tunnelId = ref(0);
const tunnelLength = ref(0);
const constructionLength = 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
    currentUserId.value = res.data.user.userId
  })
}
const getDefaultSite = (siteId) => {
  const getDefaultSite = (siteId) => {
    // console.log('siteList.value',siteList.value)
    // getSiteDetail(siteId).then((res) => {
    //   console.log('res',res)
    // });
  }
  const getOtherInfo = () => {
    getLargeScreenInfo().then((res) => {
      if (res?.code === 1000) {
        routeList.value = res.data.routeList
        siteList.value = res.data.siteOption
        currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
        currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
        getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
        currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
        currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
        getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
      }
    });
  };
  const getScreenInfo = (id) => {
    if (id) {
      tunnelId.value = id
      getLargeScreen(id).then((res) => {
        if (res?.code === 1000) {
          largeScreenData.value = res.data;
        } else {
          ElMessage.warning(res.msg)
        }
      });
      initSceneData(id).then((res) => {
        tunnelLength.value = res.data.tunnelLength
        constructionLength.value = res.data.constructionLength
      })
    }
  };
  //根据站点id获取隧道信息
  const getTunnel = (id) => {
    getTunnelBySiteId(id).then((res) => {
      if (res?.code === 1000) {
        tunnelList.value = res.data
        getScreenInfo(res.data[0]?.value)
      }
    });
  }
  const changeTunnel = (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 == '站点管理') {
      if (currentUserId.value) {
        router.push("/site" + '/' + currentUserId.value);
      }
    } else if (index == '隧道管理') {
      if (currentSiteId.value && currentUserId.value) {
        router.push("/tunnel/" + currentSiteId.value + '/i' + '/' + currentUserId.value);
      }
    } else if (index == '用户管理') {
      if (currentSiteId.value) {
        router.push("/user/" + currentSiteId.value);
      }
    }
  };
  const handleChangeSite = (item) => {
    currentSite.value = item.label
    currentSiteId.value = item.value
    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();


  watch(
    () => tunnelId.value,
    (now) => {
      tunnelId.value = now
    },
    { deep: true }
  )
</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>
