<script lang='ts' setup>

import { getTunnelBasics } from '@/api/system'
import { useTunnelStoreWithOut } from '@/store/modules/tunnel'
import { enableFacility, disEnableFacility } from '@/api/system'

import { sleep } from '@/utils'
import bus from '@/utils/eventBus'

const tunnelStore = useTunnelStoreWithOut()

const stations = [
  { key: '01', name: '新岭隧道管理所' }
]

const tunnels = ref([])
const stationAct = ref('01') // 选中救援站
const isOpen = ref(false) // 展开关闭
const tempId = ref<any>(null) // 瞬时缓存

const tunnelAct = computed(() => tempId.value || tunnelStore.getTunnelId)

// 展开
const triggerSet = () => {
  isOpen.value = !isOpen.value
}

// 隧道切换
const tunnelChange = async (id) => {

  if (id === tunnelAct.value) {
    return
  }

  await disEnableFacility({ id: tunnelAct.value })
  await enableFacility({ id })
  ElMessage.success('启用成功！')
  tempId.value = id

  await sleep(500)
  window.location.reload()

}

const sortList = computed(() => {

  const el = tunnels.value.find(item => item.id === tunnelAct.value)
  if (el) {
    return [el, tunnels.value.filter(item => item.id !== el.id)].flat()
  }

  return tunnels.value

})

const getTunnels = async () => {

  const res = await getTunnelBasics({
    pageNo: 1,
    pageSize: 100
  })

  tunnels.value = res.list

}

onBeforeMount(async () => {

  getTunnels()
  
  bus.on('tunnel-updated', () => {
    getTunnels()
  })
  
})

</script>

<template>

<div class="tunnel-bar">

  <el-select
    :teleported="false"
    popper-class="define-select"
    v-model="stationAct"
  >
    <el-option
      v-for="({ key, name }) in stations"
      :key
      :value="key"
      :label="name"
    >
      <div class="def-option">{{ name }}</div>
    </el-option>
  </el-select>

  <span class="gap">/</span>

  <div :class="['tunnel-box', { open: isOpen }]">
    <div
      v-for="({ id, tunnelName }) in sortList"
      @click="tunnelChange(id)"
      :key="id"
      :class="['x-span', { act: id === tunnelAct }]"
    >
      {{ tunnelName }}
    </div>
  </div>

  <div @click="triggerSet" class="sums">

    <div class="inner">
      共 {{tunnels.length}} 座 <Icon icon="ep:arrow-down" :size="18"  />
    </div>

  </div>

</div>

</template>

<style lang='scss' scoped>

.tunnel-bar {
  display: flex;
  margin: 0 45px;
  position: relative;
  z-index: 5;
  .gap {
    color: white;
    line-height: 32px;
    padding: 0 10px;
  }
  .tunnel-box {
    display: flex;
    width: 380px;
    flex-wrap: wrap;
    max-height: 32px;
    overflow: hidden;
    transition-property: all;
    transition-duration: 0.5s;

    &.open {
      max-height: 150px;
    }

    .x-span {
      color: white;
      padding: 4px 12px;
      background: rgba(0, 125, 250, 0.15);
      border-radius: 4px;
      cursor: pointer;
      margin-right: 6px;
      margin-bottom: 6px;
      &.act {
        border: 1px solid #7CD5FF;
        background: rgba(124, 213, 255, 0.15);
      }
    }
  }
  .sums {
    overflow: hidden;
    .inner {
      color: white;
      margin-left: 12px;
      margin-top: 5px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
  .def-option {
    color: white;
  }
}

</style>

<style lang="scss">

.tunnel-bar {
  .el-select {
    width: 240px;
    border-radius: 2px;
    .el-select__wrapper {
      border-radius: 2px;
      background: rgba(0, 125, 250, 0.3);
      box-shadow: 0 0 0 0;
      .el-select__selected-item {
        color: white;
      }
    }
  }
  .define-select {
    background: rgba(38, 67, 106);
    border: none;
    color: white;
    .el-popper__arrow::before {
      background: rgba(38, 67, 106);
      border: none;
    }
  }
  .el-select-dropdown__item {
    &.is-hovering {
      background-color: rgb(54, 89, 128);
    }
  }
}

</style>