<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import DeviceWorkStatus from '@/views/device-work-status/DeviceWorkStatus.vue';
import RealTimeMonitor from '@/views/real-time-monitor/RealTimeMonitor.vue';
import { useRefreshView } from '@/hooks/refresh-view';
import { useUserInfoStore } from '@/stores/user-info';
import { t } from '@/i18n';
import { ViewPermission } from '@/utils/permission-type';

import type { TabComponent } from '@/types';

const router = useRouter();
const route = useRoute();
const { booleanPermission } = useUserInfoStore();
const { renderView, refreshView } = useRefreshView();
const activeKey = ref('');

const deviceGroupId = computed(() => {
  return route.params.id as string;
});

const aiSmartCtrlTabs = computed<TabComponent[]>(() => {
  const realTimeMonitor = booleanPermission(ViewPermission.实时监测);
  const deviceWorkStatus = booleanPermission(ViewPermission.设备工况);
  const result: TabComponent[] = [];
  const data = [
    {
      key: 'realTimeMonitor',
      name: t('navigation.realTimeMonitor'),
      component: RealTimeMonitor,
    },
    {
      key: 'deviceWorkStatus',
      name: t('navigation.deviceWorkStatus'),
      component: DeviceWorkStatus,
    },
  ];

  if (realTimeMonitor) {
    result.push(data.find((item) => item.key === 'realTimeMonitor') as TabComponent);
  }

  if (deviceWorkStatus) {
    result.push(data.find((item) => item.key === 'deviceWorkStatus') as TabComponent);
  }

  return result;
});

watch(deviceGroupId, () => {
  refreshView();
});

watch(
  () => route.query.r,
  () => {
    setActiveKey();
    refreshView();
  },
);

onMounted(() => {
  setActiveKey();
  refreshView();
});

const setActiveKey = () => {
  activeKey.value = (route.query.tab as string) ?? aiSmartCtrlTabs.value[0].key;
};

const handleTabClick = (activeKey: string | number) => {
  router.replace({
    path: route.path,
    query: {
      ...route.query,
      tab: activeKey,
    },
  });

  refreshView();
};
</script>

<template>
  <div class="device-group-container">
    <ATabs
      class="device-group-tab"
      v-model:active-key="activeKey"
      @tab-click="handleTabClick"
      v-if="aiSmartCtrlTabs.length"
    >
      <ATabPane v-for="item in aiSmartCtrlTabs" :key="item.key" :tab="item.name">
        <component
          v-if="activeKey === item.key && renderView"
          :is="item.component"
          :device-group-id="Number(deviceGroupId)"
        />
      </ATabPane>
    </ATabs>
  </div>
</template>

<style lang="scss" scoped>
.device-group-container {
  height: 100%;
  overflow: hidden;
}

:deep(.device-group-tab) {
  height: 100%;
  font-weight: 500;
  line-height: 22px;

  .ant-tabs-content {
    height: 100%;
  }

  &.ant-tabs-top > .ant-tabs-nav {
    .ant-tabs-tab {
      padding: 8px 0;
      font-size: 16px;

      + .ant-tabs-tab {
        margin-left: 32px;
      }
    }

    &::before {
      border: none;
    }
  }
}
</style>
