<template>
  <div class="home">
    <div class="flow-switch">
      <div class="inner">
        <div class="text-pre">隧道统计：</div>
        <el-switch v-model="showOverview" />
        <div class="text-aft">{{ showOverview ? '开' : '关' }}</div>
      </div>

      <div class="inner">
        <div class="text-pre">实时交通流：</div>
        <el-switch v-model="showFlow" />
        <div class="text-aft">{{ showFlow ? '开' : '关' }}</div>
      </div>

      <div class="inner">
        <Scales
          :isShowSceneMode="false"
          @plate-change="plateChange"
          v-model:useMaterial="useMaterial"
          class="scale-ctrls"
        />
      </div>
    </div>

    <!-- 隧道统计 -->
    <div class="overview-block" v-show="showOverview">
      <Overview @pack-up="handlePackUp" />
    </div>

    <!-- <div class="bef-block">
      <flow-chart v-if="showFlow" :direction="0" />
      <cameras ref="cameraRef1" v-else :direction="0" />
    </div> -->

    <!-- 车流 -->
    <Traffic ref="trafficRef" :showFlow="showFlow" :useMaterial="useMaterial" />

    <!-- <div class="aft-block">
      <flow-chart v-if="showFlow" :direction="1" />
      <cameras ref="cameraRef2" v-else :direction="1" />
    </div> -->

    <!-- 系统跳转 -->
    <div @click="toSystem" class="sys-trans" v-if="menus.includes(8)">
      <div class="icon"></div>
      <div class="text">隧道管控</div>
    </div>

    <!-- 实时事件 -->
    <real-time-events ref="realTimeEvents" @handle-event-alert="openEventAlert" />

    <!-- 事件告警弹窗 -->
    <event-alert-pop @update="handleEventAlert" ref="eventAlertPop" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import Traffic from './components/Traffic/index.vue'
// import Cameras from './components/Cameras/index.vue'
// import FlowChart from './components/FlowChart/index.vue'
import Overview from './components/Overview/index.vue'
import RealTimeEvents from './components/RealTimeEvents/index.vue'
import EventAlertPop from './components/EventAlertPop/index.vue'
import Scales from '@/views/traffic/components/Scales/index.vue'

import { useUserStoreWithOut } from '@/store/modules/user'
const userStore = useUserStoreWithOut()
import { getOrgainzations } from '@/api/system/role'
import { getDetails } from '@/api/system/role'
import { getLoginPath } from '@/api/system/user'
import { getState, setState } from '@/flash/Home'

// const showFlow = ref(false) // 模式切换开关
const cameraRef1 = ref<any>(null) // 上行摄像头
const cameraRef2 = ref<any>(null) // 下行摄像头
const showOverview = ref(true) // 隧道统计显示开关
const realTimeEvents = ref<InstanceType<typeof RealTimeEvents> | null>(null)
const eventAlertPop = ref<InstanceType<typeof EventAlertPop> | null>(null)
const useMaterial = ref<boolean>(true) // 是否使用贴图
const trafficRef = ref<InstanceType<typeof Traffic> | null>(null)
// 权限菜单
const menus = ref([])
// 模式切换开关
const showFlow = computed({
  get() {
    return getState()
  },
  set(e) {
    setState(e)
  }
})

const cameraChange = (xcamera, direction) => {
  if (direction === 0 && cameraRef1.value) {
    cameraRef1.value.cameraChange(xcamera)
  }

  if (direction === 1 && cameraRef2.value) {
    cameraRef2.value.cameraChange(xcamera)
  }
}

// 系统免登录
const toSystem = async () => {
  const freePath = await getLoginPath()
  window.open(freePath)
}

provide('cameraChange', cameraChange)

const a = [{}]
const setAuths = async () => {
  const role = userStore.getRoles[0]
  const res = await getOrgainzations({ code: role })
  const resList = await getDetails({ id: res.list[0].id || '' })
  menus.value = resList.menuIds || []
}

// 收起隧道统计
const handlePackUp = () => {
  showOverview.value = false
}

// 打开事件告警
const openEventAlert = (id: string) => {
  eventAlertPop.value?.open(id)
}

// 事件告警处置
const handleEventAlert = (isUpdate: boolean = false) => {
  if (isUpdate) {
    realTimeEvents.value?.search()
  }
}

// 名牌切换
const plateChange = (e: number) => {
  trafficRef.value?.plateChange(e)
}

onBeforeMount(() => {
  setAuths()
})
</script>

<style lang="scss" scoped>
$Common_Url: '@/assets/images/common/';

.flow-switch {
  color: white;
  font-size: 14px;
  z-index: 6;
  position: absolute;
  right: 10px;
  top: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 24px;
    .text-aft {
      margin-left: 6px;
    }
    .scale-ctrls {
      margin-right: 20px;
    }
  }

  :deep(.el-switch) {
    --el-switch-on-color: #007dfa;
    --el-switch-off-color: #203a60;
  }
}

.overview-block {
  margin: 33px 135px 30px;
  overflow: hidden;
}

.bef-block,
.aft-block {
  height: 220px;
  overflow: hidden;
}

.traffic {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.sys-trans {
  width: 104px;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: white;
  position: fixed;
  left: 0;
  bottom: 20px;
  background: rgba(34, 105, 169, 0.5);
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  .icon {
    width: 16px;
    height: 16px;
    background: url($Common_Url + 'sys-trans.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 5px;
  }
}
</style>
