<template>
  <PageWrapper dense>
    <div style="margin: 20px; border-radius: 10px; background: #fff">
      <div class="tabBox">
        <a-tabs v-model:activeKey="activeKey" size="large">
          <a-tab-pane key="1" tab="水质变化">
            <secondTab :loading="loading" :title="secondTabTitle1"/>
          </a-tab-pane>
          <a-tab-pane key="2" tab="富营养状况变化">
            <singerAxis :loading="loading" />
          </a-tab-pane>
          <a-tab-pane key="3" tab="蓝藻水华变化">
            <secondTab :loading="loading":title="secondTabTitle3" />
          </a-tab-pane>
          <a-tab-pane key="4" tab="河流水质变化" >
            <singerBar :loading="loading" />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import secondTab from './secondTab.vue';
  import singerAxis from './singerAxis.vue';
  import singerBar from './singerBar.vue';

  const activeKey = ref<String>('1');
  const loading = ref(false);
  const secondTabTitle1 = ['COD','TP','TN','其他']
  const secondTabTitle3 = ['水体叶绿素a浓度年均变化','蓝藻富集重点水域水体叶绿素a浓度年均变化','多年蓝藻水华各月发生状况','其他']
</script>
<style lang="less">
  .tabBox {
    margin: 20px;
  }

  .title {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 550;
  }
</style>
