<template>
    <div class="ems-dashboard-editor-container ems-third-menu-container" v-loading="loading">
      <el-menu
        class="ems-third-menu"
        :default-active="$route.name"
        background-color="#ffffff"
        text-color="#666666"
        active-text-color="#ffffff"
      >
        <el-menu-item :index="item.name" v-for="(item,index) in categoryRouter" :key="index+'dzjkChildrenRoute'">
          <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
            {{item.meta.title}}
          </router-link>
        </el-menu-item>
      </el-menu>
      <div class="ems-content-container ems-content-container-padding sbjk-ems-content-container">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
  </div>
</template>

<script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { dzjk } from '@/router/ems'
import {mapState} from "vuex";
const childrenRoute = ((dzjk[0]?.children || []).find(item=> item.name==='DzjkSbjk').children) || []//获取到单站监控-设备监控下面的字路由
export default {
  name:'DzjkSbjk',
  mixins:[getQuerySiteId],
  computed:{
    ...mapState({
      zdDeviceCategoryOptions: state => state.ems.zdDeviceCategoryOptions,
    }),
    locationSiteCategory(){
      return this.zdDeviceCategoryOptions[this.siteId] || []
    },
    categoryRouter(){
      const routeData =this.childrenRoute.filter(item=>this.locationSiteCategory.includes(item.meta.deviceCategory))
      if(this.siteId && routeData.length > 0 && this.locationSiteCategory && this.locationSiteCategory.length >1){
        const locationPageDeviceCategory = this.$route.meta?.deviceCategory || ''
        if(!routeData.some(item=> item.meta.deviceCategory===locationPageDeviceCategory)){
          this.$router.replace({path:'/dzjk/sbjk/ssyx',query:this.$route.query})
        }
      }
      return routeData
    }
  },
  data(){
    return {
      childrenRoute,
      activeMenu:'',
      loading:false,
    }
  },
  methods:{
    init(){
      this.loading=true
      this.$store.dispatch('getSiteDeviceCategory',this.siteId).finally(()=>this.loading=false)
    }
  }
}
</script>

<style scoped lang="scss">
.sbjk-ems-dashboard-editor-container {
  display: flex;
  background: #ffffff;
}
.sbjk-ems-content-container {
  margin-top: 0;
  padding-top: 0;
  padding-right: 0;
  flex: 1;
}
</style>
