<template>

<div class="home">
  
  <div class="flow-switch">

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

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

  <!-- 车流 -->
  <Traffic />

  <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>

</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 { 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 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 || []

}

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;
  justify-content: space-between;
  align-items: center;

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

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

}

.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>