<template>
  <!-- 全域感知 -->
  <div class="natureNet">
    <!-- 展开收起 -->
    <div :class="['rightBgPublic', 'animate__animated', ifExpand ? 'animate__fadeInRight' : 'goRightPublic']" @click="changeExpand"></div>
    <div :class="['rightContentPublic', 'animate__animated', ifExpand ? 'animate__fadeInRight' : 'animate__fadeOutRight']">
      <n-tabs type="bar" v-model:value="tabName" @update:value="changeTab" animated>
        <n-tab-pane name="降雨特征" tab="降雨特征">
          <NatureOne v-if="tabName == '降雨特征'" />
        </n-tab-pane>
        <n-tab-pane name="明渠水质监测" tab="明渠水质监测">
          <LiuYuOne v-if="tabName == '明渠水质监测'" />
        </n-tab-pane>
        <n-tab-pane name="临测水位流量" tab="临测水位流量">
          <LiuYuTwo v-if="tabName == '临测水位流量'" />
        </n-tab-pane>
        <n-tab-pane name="厂站工情" tab="厂站工情">
          <LiuYuThree v-if="tabName == '厂站工情'" />
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive } from 'vue';
import NatureOne from './rainTz.vue'; //降雨特征
import LiuYuOne from './mingquSz.vue'; //明渠水质监测
import LiuYuTwo from './linceSw.vue'; //临测水位流量
import LiuYuThree from './changzhanGq.vue'; //厂站工情

export default {
  name: 'natureNet',
  components: {
    NatureOne,
    LiuYuOne,
    LiuYuTwo,
    LiuYuThree,
  },
  setup() {
    const allData = reactive({
      ifExpand: true,
      tabName: '降雨特征',
    });
    // 展开收起
    const changeExpand = () => {
      allData.ifExpand = !allData.ifExpand;
    };
    const changeTab = (val) => {
      allData.tabName = val;
    };
    onMounted(() => {});
    return {
      ...toRefs(allData),
      changeExpand,
      changeTab,
    };
  },
};
</script>
<style lang="less">
.natureNet {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  .n-tabs-tab {
    font-size: 16px;
  }
}
</style>