<template>
  <div class="main_box">
    <navbar title="地图拓客"></navbar>
    <div class="wrapper">
      <van-tabs
        @change="tabChange"
        v-model="activeTab"
        class="content"
        type="line"
        color="#4682ff"
        title-active-color="#4682ff"
      >
        <van-tab title="搜周边">
          <MapCustomZB ref="zb"/>
        </van-tab>
        <van-tab title="查收藏">
           <MapCustomSC ref="sc"/>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import navbar from "../../components/navbar/navbar.vue";
import {} from "@/service/api/myGrid.js";
import MapCustomZB from './mapCustomZB.vue';
import MapCustomSC from './mapCustomSC.vue';
import {
  Tab,
  Tabs,
  Icon,
  Button,
  Search,
  RadioGroup,
  Radio,
  List,
  PullRefresh,
  Dialog,
  Toast,
  DropdownMenu,
  DropdownItem,
} from "vant";
export default {
  data() {
    return {
      activeTab: 0,
    };
  },
  filters: {
    filterDist(value) {
      return value == "1"
        ? "1公里以内"
        : value == "3"
        ? "3公里以内"
        : value == "5"
        ? "5公里以内"
        : value == "10"
        ? "10公里以内"
        : "";
    },
  },
  components: {
    navbar: navbar,
    VanTab: Tab,
    VanTabs: Tabs,
    VanIcon: Icon,
    VanButton: Button,
    VanSearch: Search,
    VanRadioGroup: RadioGroup,
    VanRadio: Radio,
    VanList: List,
    VanPullRefresh: PullRefresh,
    VanToast: Toast,
    [Dialog.Component.name]: Dialog.Component,
    VanDropdownMenu: DropdownMenu,
    VanDropdownItem: DropdownItem,
    MapCustomZB:MapCustomZB,
    MapCustomSC:MapCustomSC
  },

  created() {
    
  },
  mounted() {
    const activeMap = sessionStorage["activeMap"] || "";
    if(activeMap){
      this.activeTab = Number(activeMap);
      if(this.activeTab == 0){
        this.$refs.zb && this.$refs.zb.clearSearch();
      }else{
        this.$refs.sc && this.$refs.sc.clearSearch();
      }
    }
  },
  methods: {
    tabChange() {
      if(this.activeTab == 0){
        this.$refs.zb && this.$refs.zb.clearSearch();
      }else{
        this.$refs.sc && this.$refs.sc.clearSearch();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  padding-top: 46px;
  min-height: 100vh;
  font-size: 16px;
  padding-bottom: 60px;
}

.wrapper_top {
  background-color: #fff;
  padding: 15px 20px;
}

</style>