<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs analysis-wrapper" :destroy-inactive-tab-pane="true">
    <TabPane tab="密闭墙内" key="in">
      <AnalysisChart class="h-740px" :checkbox-options="plainOptions" :legends-options="legendTitle"></AnalysisChart>
    </TabPane>

    <TabPane tab="密闭墙外" key="out">
      <AnalysisChart class="h-740px" :checkbox-options="plainOptionsOut" :legends-options="legendTitleOut"></AnalysisChart>
    </TabPane>
  </Tabs>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { plainOptions, legendTitle, plainOptionsOut, legendTitleOut } from './connectAnalysis.data';
  import AnalysisChart from './AnalysisChart.vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { useRoute } from 'vue-router';

  const route = useRoute();

  const activeTab = ref(route.query?.filterout ? 'out' : 'in');
</script>

<style lang="less" scoped>
  .analysis-wrapper {
    height: calc(100% - 16px);
    box-sizing: border-box;
  }
</style>
