<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 v-if="showFan"/>
        <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 v-if="showFan"/>
        <air-info v-if="showFan"/>
        <bad-gas-info v-if="showFan"/>
      </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">
        <div class="btn">
          <el-carousel-item v-for="(item,index) in tunnelList" :key="item.value">
            {{ item.name }}
          </el-carousel-item>
        </div>
      </el-carousel>
      <div class="arrow right" @click="nextBtn"></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'
import {onMounted} 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 currentSite = ref('松江站')
const currentUser = ref('admin')
const currentDate = ref(dateFormat())
const tunnelBtn = ref()
const tunnelList = ref([
  {
    value: 0,
    name: '一号隧道'
  }, {
    value: 1,
    name: '二号隧道'
  }, {
    value: 2,
    name: '三号隧道'
  }, {
    value: 3,
    name: '四号隧道'
  }, {
    value: 4,
    name: '五号隧道'
  }, {
    value: 5,
    name: '六号隧道'
  }, {
    value: 6,
    name: '七号隧道'
  },
])
onMounted(()=>{
  nextTick(()=>{
    showFan.value=true
  })
})
const manageSelect = () => {
  // getInfo();
};
const closeLeft = () => {
  drawerLeft.value = !drawerLeft.value
}
const closeRight = () => {
  drawerRight.value = !drawerRight.value
}
const handleLogout = () => {
  authStore.userLogout()
  router.push('/login')
}
const previousBtn = () => {
  tunnelBtn.value.prev()
}
const nextBtn = () => {
  tunnelBtn.value.next();
}
</script>

<style lang="scss" scoped>

</style>
