<template>
  <!-- 流域水管理网 -->
  <div class="liuYuWater">
    <!-- 展开收起 -->
    <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="河道巡查">
          <RiverXc />
        </n-tab-pane>
        <n-tab-pane name="厂站运维" tab="厂站运维">
          <WaterOne />
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount } from 'vue';
import WaterOne from './changzhanYw.vue'; //厂站运维
import RiverXc from './riverXc.vue'; //河道巡查

export default {
  name: 'liuYuWater',
  components: {
    WaterOne,
    RiverXc,
  },
  setup() {
    const allData = reactive({
      ifExpand: true,
      tabName: '河道巡查',
    });
    // 展开收起
    const changeExpand = () => {
      allData.ifExpand = !allData.ifExpand;
    };
    const changeTab = (val) => {
      allData.tabName = val;
    };
    onMounted(() => {});
    onBeforeUnmount(() => {});
    return {
      ...toRefs(allData),
      changeExpand,
      changeTab,
    };
  },
};
</script>
<style lang="less">
.liuYuWater {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  .n-tabs-tab {
    font-size: 16px;
  }
  .n-tabs .n-tabs-tab-pad {
    width: 20px !important;
  }
}
</style>