<template>
  <div>
    <div class="box-top">
      <manage-btn v-model="selectIndex" @select="manageSelect"/>
      <div class="tunnel-title"></div>
      <div class="top-right">
        <div class="current-site">
          当前站点：<span>{{ currentSite }}</span>
          <div class="toggle"></div>
        </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"/>
    <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/>
        <transducer-list/>
        <used-ele/>
      </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/>
        <air-info/>
        <bad-gas-info/>
      </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"></div>
      <div class="btn">
        <div>一号隧道</div>
        <div>二号隧道</div>
        <div>三号隧道</div>
      </div>
      <div class="arrow right"></div>
    </div>
  </div>
</template>

<script setup>
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
import TransducerList from "@/components/content/transducerList/TransducerList.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 {useAuthStore} from '@/store/userstore.js'

const authStore = useAuthStore()
const router = useRouter()
const selectIndex=ref(1)
const drawerLeft = ref(true)
const drawerRight = ref(true)
const currentSite = ref('松江站')
const currentUser = ref('admin')
const currentDate = ref(dateFormat())

const manageSelect = () => {
  // getInfo();
};
const closeLeft = () => {
  drawerLeft.value = !drawerLeft.value
}
const closeRight = () => {
  drawerRight.value = !drawerRight.value
}
const handleLogout = () => {
  authStore.userLogout()
  router.push('/login')
}
</script>

<style lang="scss" scoped>

</style>
