<template>
  <!-- 水务资产 排水设施 左侧 -->
  <div class="DrainageFacilitiesLeft">
    <div class="moduleBox moduleBoxLeft">
      <div class="TOP_Title">
        <div class="flex_sbc p56 pbottom">
          <div class="top-title">排水设施</div>
          <div class="tabData flex">
            <div
              class="eachClick"
              :class="active == item.value ? 'active' : ''"
              v-for="item in rightTabArr"
              :key="item.value"
              @click="tabClick(item)"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
      <Rain v-if="active == 1" />
      <sewage v-if="active == 2" />
    </div>
  </div>
</template>
<script setup name="DrainageFacilitiesLeft">
import { ref, reactive, onMounted } from 'vue';
const { proxy } = getCurrentInstance();
import Rain from '@/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue';
import sewage from '@/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/sewage/index.vue';

const rightTabArr = ref([
  {
    label: '雨水',
    value: '1',
  },
  {
    label: '污水',
    value: '2',
  },
]);
const active = ref(1);

const tabClick = item => {
  active.value = item.value;
};
onMounted(() => {});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/WaterAssets.scss';
</style>