<template>
  <div>
    <title-bar title="网点查询" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>

    <!-- 百度地图-->
    <baidu-map class="bm-view" ak="FP7zWR4e8lhxZ6v0IicoG1R5" :center="{ lng: this.upoint.lng, lat: this.upoint.lat }" :zoom="12" @ready="mapReady">
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
    </baidu-map>
    <div class="list">
      <div class="list-top">
        <van-tabs v-model="active">
          <van-tab title="我的附近">
            <nearby></nearby>
          </van-tab>
          <van-tab title="区域查询">
            <Area></Area>
          </van-tab>
          <van-tab title="全部">
            <all-outlets></all-outlets>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { BaiduMap, BmScale } from "vue-baidu-map";
import AllOutlets from "@/components/workbench/company-common-functions/online-enquiry/AllOutlets.vue";
import Nearby from "@/components/workbench/company-common-functions/online-enquiry/Nearby.vue";
import Area from "@/components/workbench/company-common-functions/online-enquiry/Area.vue";
import { Tab, Tabs } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
/**
 * @Description 网点查询
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:30
 */
@Component({
  name: "OnlineEnquiry",
  components: {
    TitleBar,
    BaiduMap,
    BmScale,
    AllOutlets,
    Area,
    Nearby,
  },
})
export default class OnlineEnquiry extends Vue {
  pageTitle = ""; // 页面标题

  onClick() {
    console.log(111111);
  }
  mounted() {
    this.pageTitle = this.$route.meta?.name;
  }
  BMapGL: any = {};
  map: any = {};

  show = false;
  upoint: any = { lng: 104.080998, lat: 30.595452 };
  mapReady(bmap: any) {
    this.BMapGL = bmap.BMap;
    this.map = bmap.map;
  }
}
</script>

<style scoped>
.bm-view {
  position: absolute;
  right: 0;
  width: 71.8%;
  height: calc(100vh - 60px);
}
.list {
  height: calc(100vh - 60px);
  width: 28.2%;
  background-color: rgba(242, 242, 242, 1);
  border-right: 1px solid rgb(217, 207, 207);
}
.list-top {
  width: 100%;
  /*padding: 0 5%;*/
  padding-top: 2.5%;
  margin-bottom: 3%;
  background-color: white;
  display: flex;
  justify-content: space-around;
}
.list-top > * {
  font-size: 115%;
  color: #999999;
  padding: 3%;
}
::v-deep .van-tabs--line {
  width: 100%;
  background-color: #f2f2f2;
  padding: 0;
}
::v-deep .van-tab__text--ellipsis {
  font-size: 16px;
}
::v-deep .van-tab--active {
  color: #fd5065;
}
::v-deep .van-tabs__line {
  width: 25%;
}
::v-deep .van-tabs__wrap {
  margin-bottom: 3%;
}
</style>