<template>
  <!-- 规划引领 -->
  <div class="sheHuiNet animate__animated  animate__InRight">
    <!-- 展开收起 -->
    <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="value"
              @update:value="changeTab"
              animated>
        <n-tab-pane name="阶段一靶向治理"
                    tab="阶段一靶向治理">
          <div class="publicTitle">流域概况</div>
          <SHOne v-if="value=='阶段一靶向治理'" />
        </n-tab-pane>
        <n-tab-pane name="阶段二区域治理"
                    tab="阶段二区域治理">
          <div class="publicTitle">区域治理阶段</div>
          <SHTwo v-if="value=='阶段二区域治理'" />
        </n-tab-pane>
        <n-tab-pane name="阶段三系统治理"
                    tab="阶段三系统治理">
          <div class="publicTitle">系统治理阶段</div>
          <SHThree v-if="value=='阶段三系统治理'" />
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount } from "vue";
import SHOne from './sheHuiOne.vue'
import SHTwo from "./sheHuiTwo.vue"
import SHThree from './sheHuiThree.vue'



export default {
  name: "sheHuiNet",
  components: {
    SHOne,
    SHTwo,
    SHThree,
  },
  setup() {
    const allData = reactive({
      ifExpand: true,
      value: "阶段一靶向治理",
    })
    // 展开收起
    const changeExpand = () => {
      allData.ifExpand = !allData.ifExpand;
    }
    // 切换tab
    const changeTab = (val) => {
      allData.value = val;
    }
    onMounted(() => {
      if (mapbox._map.getLayer("kriging_layer")) {
        mapbox._map.removeLayer("kriging_layer")
        mapbox._map.removeLayer("marker_kriging_layer")
        mapbox._map.removeSource("kriging_source")
        mapbox._map.removeSource("marker_kriging_source")
      }
    });
    onBeforeUnmount(() => {

    })
    return {
      ...toRefs(allData),
      changeExpand,
      changeTab,
    };
  },
};
</script>
<style lang="less">
.sheHuiNet {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;

  .n-tabs-nav-scroll-content {
    width: 377px;
    height: 60px;
    background: url("@/assets/newImgs/tabBg.png") no-repeat center;
    background-size: 100% 100%;
  }
  .n-tabs .n-tabs-tab-wrapper {
    width: 135px;
    justify-content: center;
    .n-tabs-tab {
      font-size: 16px;
    }
  }
  .n-tabs .n-tab-pane {
    height: 805px;
  }
}
</style>