<template>
  <div class="main_box">
    <div class="search-input">
      <!-- <van-search
        type="text"
        v-model="region"
        readonly
        left-icon=""
        right-icon="arrow-down"
        @click="showRegionPicker = true"
        style="width: 140px"
      /> -->
      <van-search
        type="text"
        v-model="address"
        placeholder="请输入地址,查询周围的公司"
        @search="getAddressInfo"
        @clear="clearAddress"
      />
      <div class="search_btn" @click="getAddressInfo">
        <van-icon name="search"></van-icon>
      </div>
    </div>
    <div class="search-box">
      <van-dropdown-menu active-color="#4682ff">
        <van-dropdown-item
          :title="dist | filterDist"
          ref="distItem"
          title-class="title-dist"
        >
          <div class="item-one">
            <div class="dist-box">
              <span
                :class="dist == '1' ? 'active' : ''"
                @click="toggleDist('1')"
                >1公里以内</span
              >
              <span
                :class="dist == '3' ? 'active' : ''"
                @click="toggleDist('3')"
                >3公里以内</span
              >
            </div>
            <div class="dist-box">
              <span
                :class="dist == '5' ? 'active' : ''"
                @click="toggleDist('5')"
                >5公里以内</span
              >
              <span
                :class="dist == '10' ? 'active' : ''"
                @click="toggleDist('10')"
                >10公里以内</span
              >
            </div>
          </div>
        </van-dropdown-item>
        <van-dropdown-item
          title="更多筛选"
          ref="moreRef"
          :title-class="moreSearch ? 'title-dist' : ''"
        >
          <div class="side-box">
            <van-sidebar v-model="activeKey">
              <van-sidebar-item
                title="所在行业"
                :class="belongBusinessList.length ? 'activeBar' : ''"
              ></van-sidebar-item>
              <van-sidebar-item
                title="成立年限"
                :class="startDateIntervalList.length ? 'activeBar' : ''"
              ></van-sidebar-item>
              <van-sidebar-item
                title="注册资本"
                :class="registCapiIntervalList.length ? 'activeBar' : ''"
              ></van-sidebar-item>
              <van-sidebar-item
                title="企业类型"
                :class="companyTypeList.length ? 'activeBar' : ''"
              ></van-sidebar-item>
              <van-sidebar-item
                title="联系电话"
                :class="isPhoneNumber != undefined ? 'activeBar' : ''"
              ></van-sidebar-item>
              <van-sidebar-item
                title="养老保险参保人数"
                :class="
                  businessInfoPenInsurIntervalList.length ||
                  minYl != undefined ||
                  maxYl != undefined
                    ? 'activeBar'
                    : ''
                "
              ></van-sidebar-item>
              <van-sidebar-item
                title="医疗保险参保人数"
                :class="
                  businessInfoMediInsurIntervalList.length ||
                  minYn != undefined ||
                  maxYn != undefined
                    ? 'activeBar'
                    : ''
                "
              ></van-sidebar-item>
              <van-sidebar-item
                title="进出口信息"
                :class="
                  businessInfoImExportFlag != undefined ? 'activeBar' : ''
                "
              ></van-sidebar-item>
            </van-sidebar>
            <div class="content">
              <van-row
                type="flex"
                justify="space-around"
                v-show="activeKey == 0"
                class="industryClass"
              >
                <van-col
                  span="11"
                  v-for="(item, index) in industryOptions"
                  :key="index"
                  class="item"
                  @click="handleClickItem(item, 'belongBusinessList')"
                  :class="
                    belongBusinessList.includes(item.value) ? 'active' : ''
                  "
                  :style="
                    item.value
                      ? { visibility: 'visible' }
                      : { visibility: 'hidden' }
                  "
                >
                  {{ item.value }}
                </van-col>
              </van-row>
              <van-row
                type="flex"
                justify="space-around"
                v-show="activeKey == 1"
              >
                <van-col
                  span="11"
                  v-for="(item, index) in yearOptions"
                  :key="index"
                  class="item"
                  @click="handleClickItem(item, 'startDateIntervalList')"
                  :class="
                    startDateIntervalList.includes(item.value) ? 'active' : ''
                  "
                  :style="
                    item.value
                      ? { visibility: 'visible' }
                      : { visibility: 'hidden' }
                  "
                >
                  {{ item.label }}
                </van-col>
              </van-row>
              <van-row
                type="flex"
                justify="space-around"
                v-show="activeKey == 2"
              >
                <van-col
                  span="11"
                  v-for="(item, index) in moneyOptions"
                  :key="index"
                  class="item"
                  @click="handleClickItem(item, 'registCapiIntervalList')"
                  :class="
                    registCapiIntervalList.includes(item.value) ? 'active' : ''
                  "
                >
                  {{ item.label }}
                </van-col>
              </van-row>
              <van-row
                type="flex"
                justify="space-around"
                v-show="activeKey == 3"
              >
                <van-col
                  span="11"
                  v-for="(item, index) in qiyeTypeList"
                  :key="index"
                  class="item"
                  @click="handleClickItem(item, 'companyTypeList')"
                  :class="companyTypeList.includes(item.value) ? 'active' : ''"
                  :style="
                    item.value
                      ? { visibility: 'visible' }
                      : { visibility: 'hidden' }
                  "
                >
                  {{ item.label }}
                </van-col>
              </van-row>
              <van-row
                type="flex"
                justify="space-around"
                v-show="activeKey == 4"
              >
                <van-col
                  span="11"
                  v-for="(item, index) in phoneArr"
                  :key="index"
                  class="item"
                  @click="handleClickItem(item, 'isPhoneNumber', 'single')"
                  :class="isPhoneNumber == item.value ? 'active' : ''"
                >
                  {{ item.label }}
                </van-col>
              </van-row>
              <van-row
                type="flex"
                justify="space-around"
                v-show="activeKey == 5"
              >
                <van-col
                  span="11"
                  v-for="(item, index) in baoxianOptions"
                  :key="index"
                  class="item"
                  @click="
                    handleClickItem(item, 'businessInfoPenInsurIntervalList')
                  "
                  :class="
                    businessInfoPenInsurIntervalList.includes(item.value)
                      ? 'active'
                      : ''
                  "
                  :style="
                    item.value
                      ? { visibility: 'visible' }
                      : { visibility: 'hidden' }
                  "
                >
                  {{ item.label }}
                </van-col>
                <van-col span="24">
                  <div class="baoxian-box">
                    <van-field
                      v-model="minYl"
                      placeholder="最低人数"
                      size="mini"
                      type="number"
                      @blur="blurPeople1"
                    ></van-field>
                    <span class="heng">-</span>
                    <van-field
                      v-model="maxYl"
                      placeholder="最高人数"
                      type="number"
                      @blur="blurPeople1"
                    ></van-field>
                    <span class="people">人</span>
                  </div>
                </van-col>
              </van-row>
              <van-row
                type="flex"
                justify="space-around"
                v-show="activeKey == 6"
              >
                <van-col
                  span="11"
                  v-for="(item, index) in baoxianOptions"
                  :key="index"
                  class="item"
                  @click="
                    handleClickItem(item, 'businessInfoMediInsurIntervalList')
                  "
                  :class="
                    businessInfoMediInsurIntervalList.includes(item.value)
                      ? 'active'
                      : ''
                  "
                  :style="
                    item.value
                      ? { visibility: 'visible' }
                      : { visibility: 'hidden' }
                  "
                >
                  {{ item.label }}
                </van-col>
                <van-col span="24">
                  <div class="baoxian-box">
                    <van-field
                      v-model="minYn"
                      placeholder="最低人数"
                      size="mini"
                      type="number"
                      @blur="blurPeople2"
                    ></van-field>
                    <span class="heng">-</span>
                    <van-field
                      v-model="maxYn"
                      placeholder="最高人数"
                      type="number"
                      @blur="blurPeople2"
                    ></van-field>
                    <span class="people">人</span>
                  </div>
                </van-col>
              </van-row>
              <van-row
                type="flex"
                justify="space-around"
                v-show="activeKey == 7"
              >
                <van-col
                  span="11"
                  v-for="(item, index) in businessInfoImExportFlagOptions"
                  :key="index"
                  class="item"
                  @click="
                    handleClickItem(item, 'businessInfoImExportFlag', 'single')
                  "
                  :class="
                    businessInfoImExportFlag == item.value ? 'active' : ''
                  "
                >
                  {{ item.label }}
                </van-col>
              </van-row>
            </div>
            <div class="footer">
              <van-button class="btn" @click="resetForm">重置</van-button>
              <van-button type="primary" class="btn" @click="submitForm"
                >确认</van-button
              >
            </div>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!-- 地图 -->
    <div class="map-box">
      <div ref="mapContainer" class="map" v-show="!showList"></div>
      <div class="right-icon-box" v-show="!showList">
        <div @click="backCurrentP">
          <van-image :src="focus_img" class="img" />
        </div>
        <div @click="showList = true">
          <van-image :src="list_img" class="img" />
        </div>
      </div>
      <div
        class="right-icon-box back"
        v-if="showList"
        @click="showList = false"
      >
        <van-image :src="back_img" class="img_back" />
        返回地图
      </div>
      <div class="qiye-list" :class="showList ? 'qiye-list-more' : ''">
        <div class="total-box">
          <span
            >为您找到<span class="total">{{ total }}</span
            >家企业</span
          >
          <span @click="togglePX" class="icon-box"
            >按成立日期排序
            <span class="icon-arrow">
              <i
                class="my-arrow1"
                :class="isActive && isAsc ? 'icon-active1' : ''"
              ></i>
              <i
                class="my-arrow2"
                :class="isActive && !isAsc ? 'icon-active2' : ''"
              ></i>
            </span>
          </span>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="onLoad"
          >
            <div class="grid_item" v-for="(item, index) in list" :key="index">
              <div class="qiye-title">
                <div class="title-left" @click="handleViewDetail(item)">
                  <span
                    class="title-j"
                    :class="item.special ? 'spec-title' : ''"
                    >{{ item.custName.slice(0, 2) }}</span
                  >
                  <span class="title-det">{{ item.custName }}</span>
                </div>
                <van-icon
                  v-if="item.isFavorite"
                  name="star"
                  color="#fcad0e"
                  @click="updateFavorite(item.id, item.isFavorite)"
                />
                <van-image
                  @click="updateFavorite(item.id, item.isFavorite)"
                  :src="star_img"
                  class="img_star"
                  v-if="!item.isFavorite"
                />
              </div>
              <div class="qiye-register">
                <span>{{ item.lpName }} | </span>
                <span>{{ item.registCapiShow }} | </span>
                <span>{{ item.startDate }} | </span>
                <span>{{ item.city }}</span>
              </div>
              <div class="qiye-address">
                <span class="dist-box">
                  <van-icon name="location-o" class="dist-icon" />距您{{
                    item.distance.toFixed(0)
                  }}m
                </span>
                <span class="address">{{ item.addressDetail }}</span>
                <span
                  class="goto"
                  v-if="item.addressDetail"
                  @click="goToAddress(item)"
                  >导航 <van-icon name="arrow"
                /></span>
              </div>
              <div class="phone-box">
                <van-icon
                  name="phone"
                  v-if="item.phoneNumber"
                  class="phone-icon"
                />
                <a :href="'tel:' + item.phoneNumber">{{ item.phoneNumber }}</a>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
    <van-popup v-model="showRegionPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="cityList"
        @cancel="showRegionPicker = false"
        @confirm="onConfirmRegion"
      />
    </van-popup>
    <van-popup v-model="showAddressPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="addressList"
        value-key="value"
        @cancel="showAddressPicker = false"
        @confirm="onConfirmAddress"
      />
    </van-popup>
  </div>
</template>
<script>
import navbar from "../../components/navbar/navbar.vue";
import {
  searchCircleCount,
  searchCircleList,
  updateFavoriteList,
  getIndustryTree,
  getQiyeTree,
  queryAddressList,
  translateLocApi,
} from "@/service/api/myGrid.js";
import {
  Tab,
  Tabs,
  Icon,
  Button,
  Search,
  RadioGroup,
  Radio,
  List,
  PullRefresh,
  Dialog,
  Toast,
  DropdownMenu,
  DropdownItem,
  Sidebar,
  SidebarItem,
  Row,
  Col,
  Field,
  Image,
  Picker,
  Popup,
} from "vant";
export default {
  data() {
    return {
      focus_img: require("@/images/map/focus@3x.png"),
      list_img: require("@/images/map/show-list@3x.png"),
      marker_img: require("@/images/map/marker@3x.png"),
      star_img: require("@/images/map/ze-star@3x.png"),
      back_img: require("@/images/map/back-map@3x.png"),
      activeTab: 0,
      pageNum: 1,
      pageSize: 5,
      refreshing: false,
      list: [],
      loading: false,
      finished: false,
      currentPage: 1,
      list: [],
      showDialog: false,
      dist: "1",
      mapLoading: false,
      total: 0,
      showList: false,
      locationDef: {
        lat: 30.248307,
        lng: 120.25551,
      },
      location: {
        lat: 30.248307,
        lng: 120.25551,
      },
      markerList: [],
      values: {},
      isAsc: false,
      sf: 15,
      activeKey: 0,
      industryOptions: [],
      yearOptions: [
        {
          label: "3个月以内",
          value: "0-3",
        },
        {
          label: "半年以内",
          value: "0-6",
        },
        {
          label: "1年以内",
          value: "0-12",
        },
        {
          label: "1年以上",
          value: "12-",
        },
        {
          label: "1-5年",
          value: "12-60",
        },
        {
          label: "5-10年",
          value: "60-120",
        },
        {
          label: "10年以上",
          value: "120-",
        },
        {},
      ],
      moneyOptions: [
        {
          value: "0-100",
          label: "100万以内",
        },
        {
          value: "100-200",
          label: "100万-200万",
        },
        {
          value: "200-500",
          label: "200万-500万",
        },
        {
          value: "500-1000",
          label: "500万-1000万",
        },
        {
          value: "1000-5000",
          label: "1000万-5000万",
        },
        {
          value: "5000-65536",
          label: "5000万以上",
        },
      ],
      qiyeTypeList: [],
      phoneArr: [
        {
          value: 1,
          label: "有联系电话",
        },
        {
          value: 0,
          label: "无联系电话",
        },
      ],
      baoxianOptions: [
        {
          value: "1-50",
          label: "1-50人",
        },
        {
          value: "50-99",
          label: "50-99人",
        },
        {
          value: "100-499",
          label: "100-499人",
        },
        {
          value: "500-999",
          label: "500-999人",
        },
        {
          value: "1000-4999",
          label: "1000-4999人",
        },
        {
          value: "5000-9999",
          label: "5000-9999人",
        },
        {
          value: "10000-655360000",
          label: "10000人以上",
        },
        {},
      ],
      businessInfoImExportFlagOptions: [
        {
          value: 1,
          label: "有进出口信息",
        },
        {
          value: 0,
          label: "无进出口信息",
        },
      ],
      belongBusinessList: [],
      startDateIntervalList: [],
      registCapiIntervalList: [],
      companyTypeList: [],
      isPhoneNumber: undefined,
      businessInfoPenInsurIntervalList: [],
      businessInfoMediInsurIntervalList: [],
      businessInfoImExportFlag: undefined,
      minYl: undefined,
      maxYl: undefined,
      minYn: undefined,
      maxYn: undefined,
      isActive: false,
      moreSearch: false,
      cityList: [
        "杭州",
        "宁波",
        "温州",
        "嘉兴",
        "湖州",
        "绍兴",
        "金华",
        "衢州",
        "舟山",
        "台州",
        "丽水",
        "上海",
      ],
      region: "杭州",
      address: "",
      showRegionPicker: false,
      addressList: [],
      showAddressPicker: false,
      isHead: true,
    };
  },
  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,
    VanSidebar: Sidebar,
    VanSidebarItem: SidebarItem,
    VanRow: Row,
    VanCol: Col,
    VanField: Field,
    VanImage: Image,
    VanPopup: Popup,
    VanPicker: Picker,
  },

  created() {
    const str = sessionStorage.getItem("userInfo") || "{}";
    const userInfo = JSON.parse(str);
    if (
      userInfo.roles.includes("headAdmin") ||
      userInfo.roles.includes("headPublic") ||
      userInfo.roles.includes("headPrivate") ||
      userInfo.roles.includes("headOps")
    ) {
      this.isHead = true;
    } else {
      this.isHead = false;
    }
    this.searchIndustryTree();
    this.getQiYeTypeList();
  },
  mounted() {
    let that = this;
    if (window.wx) {
      wx.ready(() => {
        wx.getLocation({
          type: "gcj02",
          success: (res) => {
            console.log(res, "location", that);
            that.translateLocation({
              lat: res.latitude,
              lng: res.longitude,
            });
          },
          fail: (err) => {
            console.error("错误码：", err);
          },
        });
      });
    } else {
      this.initMap();
      this.getViewCircleCount({
        dist: this.dist,
        targetLat: this.location.lat,
        targetLng: this.location.lng,
        ...this.values,
      });
      this.queryList();
    }
  },
  methods: {
    // 坐标经纬度转百度坐标
    async translateLocation(params) {
      const res = await translateLocApi(params);
      console.log(res, res.code, res?.data[1], res?.data[0]);
      if (res.code == 200) {
        this.location = {
          lat: res?.data[1],
          lng: res?.data[0],
        };
        this.locationDef = this.location;
        this.initMap();
        this.getViewCircleCount({
          dist: this.dist,
          targetLat: this.location.lat,
          targetLng: this.location.lng,
          ...this.values,
        });
        this.queryList();
      }
    },
    // 导航
    goToAddress(item) {
      if (!window.wx) return;
      wx.openLocation({
        latitude: item.latitude,
        longitude: item.longitude,
        name: item.custName,
        address: item.addressDetail,
        scale: 15,
        success: () => {},
        fail: (err) => {
          console.error("错误码：", err);
        },
      });
    },
    clearAddress() {
      this.location = { ...this.locationDef };
      this.addDefaultOverlay(this.location);
      this.onSearch();
    },
    onConfirmRegion(value) {
      this.region = value;
      this.address = "";
      this.showRegionPicker = false;
    },
    onConfirmAddress(item) {
      console.log(item);
      this.location = item.location;
      this.address = item.value;
      this.showAddressPicker = false;
      this.addDefaultOverlay(this.location);
      this.onSearch();
    },
    // 查询地址信息
    async getAddressInfo() {
      if (!this.address) {
        Toast("请输入地址");
        return;
      }
      const res = await queryAddressList({
        // region: this.region,
        address: this.address,
      });
      if (res.code == 200) {
        this.addressList = res?.data?.map((item) => {
          return {
            value: item.name,
            location: item.location,
          };
        });
        this.showAddressPicker = true;
      }
    },
    // 确认
    submitForm() {
      const reg = /^(0|[1-9]\d*)$/;
      if (this.minYl && !reg.test(this.minYl)) {
        Toast({
          message: "请输入正确的养老保险人数",
          zIndex: 9999999,
        });
        return;
      }
      if (this.maxYl && !reg.test(this.maxYl)) {
        Toast({
          message: "请输入正确的养老保险人数",
          zIndex: 9999999,
        });
        return;
      }
      if (this.minYn && !reg.test(this.minYn)) {
        Toast({
          message: "请输入正确的医疗保险人数",
          zIndex: 9999999,
        });
        return;
      }
      if (this.maxYn && !reg.test(this.maxYn)) {
        Toast({
          message: "请输入正确的医疗保险人数",
          zIndex: 9999999,
        });
        return;
      }
      if (
        (this.minYl && this.minYl > 655360000) ||
        (this.maxYl && this.maxYl > 655360000)
      ) {
        Toast({
          message: "养老保险人数最大不能超过655360000",
          zIndex: 9999999,
        });
        return;
      }
      if (this.minYl && this.maxYl && Number(this.minYl) > Number(this.maxYl)) {
        Toast({
          message: "养老保险人数请输入正确的数值范围",
          zIndex: 9999999,
        });
        return;
      }
      if (
        (this.minYn && this.minYn > 655360000) ||
        (this.maxYn && this.maxYn > 655360000)
      ) {
        Toast({
          message: "医疗保险人数最大不能超过655360000",
          zIndex: 9999999,
        });
        return;
      }
      if (this.minYn && this.maxYn && Number(this.minYn) > Number(this.maxYn)) {
        Toast({
          message: "医疗保险人数请输入正确的数值范围",
          zIndex: 9999999,
        });
        return;
      }
      this.values.belongBusinessList = this.belongBusinessList;
      this.values.startDateIntervalList = this.startDateIntervalList.map(
        (item) => {
          const min = item.split("-")[0];
          const max = item.split("-")[1];
          return {
            min,
            max,
          };
        }
      );
      this.values.registCapiIntervalList = this.registCapiIntervalList.map(
        (item) => {
          const min = item.split("-")[0];
          const max = item.split("-")[1];
          return {
            min,
            max,
          };
        }
      );
      this.values.companyTypeList = this.companyTypeList;
      this.values.isPhoneNumber = this.isPhoneNumber;
      let arrYl = this.businessInfoPenInsurIntervalList.map((item) => {
        const min = item.split("-")[0];
        const max = item.split("-")[1];
        return {
          min,
          max,
        };
      });
      if (this.minYl !== undefined || this.maxYl !== undefined) {
        let min = this.minYl || 0;
        let max = this.maxYl || 2 ** 16 * 10000;
        arrYl.push({
          min,
          max,
        });
      }
      this.values.businessInfoPenInsurIntervalList = [...arrYl];
      let arrYn = this.businessInfoMediInsurIntervalList.map((item) => {
        const min = item.split("-")[0];
        const max = item.split("-")[1];
        return {
          min,
          max,
        };
      });
      if (this.minYn !== undefined || this.maxYn !== undefined) {
        let min = this.minYn || 0;
        let max = this.maxYn || 2 ** 16 * 10000;
        arrYn.push({
          min,
          max,
        });
      }
      this.values.businessInfoMediInsurIntervalList = [...arrYn];
      this.values.businessInfoImExportFlag = this.businessInfoImExportFlag;
      this.values.companyTypeInclude = 1;
      this.values.statusInclude = 1;
      if (
        this.values.belongBusinessList.length ||
        this.values.startDateIntervalList.length ||
        this.values.registCapiIntervalList.length ||
        this.values.companyTypeList.length ||
        this.values.isPhoneNumber != undefined ||
        this.values.businessInfoPenInsurIntervalList.length ||
        this.values.businessInfoMediInsurIntervalList.length ||
        this.values.businessInfoImExportFlag != undefined
      ) {
        this.moreSearch = true;
      } else {
        this.moreSearch = false;
      }
      this.$refs.moreRef.toggle();
      this.getViewCircleCount({
        dist: this.dist,
        targetLat: this.location.lat,
        targetLng: this.location.lng,
        ...this.values,
      });
      this.onRefresh();
    },
    // 重置
    resetForm() {
      this.belongBusinessList = [];
      this.startDateIntervalList = [];
      this.registCapiIntervalList = [];
      this.companyTypeList = [];
      this.isPhoneNumber = undefined;
      this.businessInfoPenInsurIntervalList = [];
      this.businessInfoMediInsurIntervalList = [];
      this.businessInfoImExportFlag = undefined;
      this.minYl = undefined;
      this.maxYl = undefined;
      this.minYn = undefined;
      this.maxYn = undefined;
      this.values = {};
      this.moreSearch = false;
      this.onRefresh();
    },
    // 校验人数
    blurPeople1() {
      const reg = /^(0|[1-9]\d*)$/;
      if (this.minYl && !reg.test(this.minYl)) {
        Toast({
          message: "请输入正确的养老保险人数",
          zIndex: 9999999,
        });
        return;
      }
      if (this.maxYl && !reg.test(this.maxYl)) {
        Toast({
          message: "请输入正确的养老保险人数",
          zIndex: 9999999,
        });
        return;
      }
      if (this.minYl && this.maxYl && Number(this.minYl) > Number(this.maxYl)) {
        Toast({
          message: "请输入正确的数值范围",
          zIndex: 9999999,
        });
        return;
      }
    },
    // 校验人数
    blurPeople2() {
      const reg = /^(0|[1-9]\d*)$/;
      if (this.minYn && !reg.test(this.minYn)) {
        Toast({
          message: "请输入正确的医疗保险人数",
          zIndex: 9999999,
        });
        return;
      }
      if (this.maxYn && !reg.test(this.maxYn)) {
        Toast({
          message: "请输入正确的医疗保险人数",
          zIndex: 9999999,
        });
        return;
      }
      if (this.minYn && this.maxYn && Number(this.minYn) > Number(this.maxYn)) {
        Toast({
          message: "请输入正确的数值范围",
          zIndex: 9999999,
        });
        return;
      }
    },
    // 查询行业
    async searchIndustryTree() {
      const res = await getIndustryTree();
      if (res.code == 200) {
        this.industryOptions = res.data.map((item) => {
          return {
            key: item.name,
            value: item.name,
          };
        });
        if (this.industryOptions.length % 2 == 1) {
          this.industryOptions.push({});
        }
      }
    },
    async getQiYeTypeList() {
      const res = await getQiyeTree();
      if (res.code == 200) {
        const newArr = res.data.filter((item) => item.value == "101");
        this.qiyeTypeList = newArr[0].children || [];
        if (this.qiyeTypeList.length % 2 == 1) {
          this.qiyeTypeList.push({});
        }
      }
    },
    // 处理大类选项
    handleClickItem(item, type, single) {
      if (single == "single") {
        if (!this[type] || this[type] != item.value) {
          this[type] = item.value;
        } else {
          this[type] = undefined;
        }
      } else {
        const index = this[type].findIndex((value) => value == item.value);
        if (index > -1) {
          this[type].splice(index, 1);
        } else {
          this[type].push(item.value);
        }
      }
    },
    // 初始化地图
    initMap() {
      this.mapLoading = true;
      this.map = new BMapGL.Map(this.$refs.mapContainer);
      console.log(this.map);
      this.map.centerAndZoom(this.location, 15);
      this.addDefaultOverlay(this.location);
      this.map.enableScrollWheelZoom();
      this.mapLoading = false;
    },
    // 坐标和半径搜索用户数量
    getViewCircleCount(params) {
      this.countLoading = true;
      searchCircleCount(params).then((res) => {
        if (res.code == 200) {
          this.total = res.data;
          this.countLoading = false;
        }
      });
    },
    // 当前tab地图默认添加物--圆形
    addDefaultOverlay(point) {
      this.map.clearOverlays();
      const marker = new BMapGL.Marker(point);
      // 在地图上添加点标记
      this.map.addOverlay(marker);
      // 添加圆形覆盖物
      const circle = new BMapGL.Circle(point, this.dist * 1000, {
        strokeColor: "#2094ff",
        fillColor: "#2094ff",
        strokeWeight: 2,
        fillOpacity: 0.3,
        strokeOpacity: 0.8,
      });
      this.map.addOverlay(circle);
      let sf = 15;
      if (this.dist == "1") {
        sf = 15;
      } else if (this.dist == "3") {
        sf = 14;
      } else if (this.dist == "5") {
        sf = 13;
      } else if (this.dist == "10") {
        sf = 12;
      }
      this.map.centerAndZoom(this.location, sf);
      this.sf = sf;
    },
    // 添加marker
    addMarkerOverlay(point) {
      //marker_img
      const myIcon = new BMapGL.Icon(this.marker_img, new BMapGL.Size(22, 30));

      const marker = new BMapGL.Marker(point, { icon: myIcon });
      this.markerList.push(marker);
      // 在地图上添加点标记
      this.map.addOverlay(marker);
    },
    // 切换距离
    toggleDist(v) {
      this.dist = v;
      this.$refs.distItem.toggle();
      this.addDefaultOverlay(this.location);
      this.getViewCircleCount({
        dist: this.dist,
        targetLat: this.location.lat,
        targetLng: this.location.lng,
        ...this.values,
      });
      this.onRefresh();
    },

    onSearch() {
      this.getViewCircleCount({
        dist: this.dist,
        targetLat: this.location.lat,
        targetLng: this.location.lng,
        ...this.values,
      });
      this.onRefresh();
    },
    onCancel() {
      this.getViewCircleCount({
        dist: this.dist,
        targetLat: this.location.lat,
        targetLng: this.location.lng,
        ...this.values,
      });
      this.onRefresh();
    },
    backCurrentP() {
      this.map.centerAndZoom(this.location, this.sf);
    },
    onClear() {
      this.getViewCircleCount({
        dist: this.dist,
        targetLat: this.location.lat,
        targetLng: this.location.lng,
        ...this.values,
      });
      this.onRefresh();
    },
    clearSearch() {
      this.list = [];
      this.finished = false; //解除上拉加载之后数据不能再次上拉
      this.currentPage = 1;
      this.pageNum = this.currentPage;
      this.dist = "1";
      this.values = {};
      this.isAsc = false;
      this.isActive = false;
      this.showList = false;
      this.getViewCircleCount({
        dist: this.dist,
        targetLat: this.location.lat,
        targetLng: this.location.lng,
        ...this.values,
      });
      this.queryList();
    },
    // 搜藏、取消搜藏
    async updateFavorite(id, isCurrentFavorite) {
      const res = await updateFavoriteList(id);
      if (res.code == 200) {
        this.list = this.list.map((item) => {
          if (item.id == id) {
            return {
              ...item,
              isFavorite: !isCurrentFavorite,
            };
          }
          return item;
        });
        Toast(isCurrentFavorite ? "取消收藏成功" : "收藏成功");
        // this.onRefresh();
      }
    },
    togglePX() {
      this.isActive = true;
      this.isAsc = !this.isAsc;
      this.onRefresh();
    },
    //下拉刷新
    onRefresh() {
      this.list = [];
      this.finished = false; //解除上拉加载之后数据不能再次上拉
      this.currentPage = 1;
      this.pageNum = this.currentPage;
      this.queryList();
    },
    //上拉加载
    onLoad() {
      console.log("上拉加载");
      this.pageNum = this.currentPage;
      this.queryList();
    },
    // 查询列表
    async queryList() {
      if (this.currentPage == 1) {
        this.list = [];
        this.markerList.forEach((item) => {
          this.map.removeOverlay(item);
        });
      }
      this.loading = true;
      const params = {
        dist: this.dist,
        targetLat: this.location.lat,
        targetLng: this.location.lng,
        isAsc: this.isAsc,
        num: this.pageNum,
        size: this.pageSize,
        ...this.values,
      };
      if (!this.isHead) {
        params.newCompanyFlag = true;
      }
      const res = await searchCircleList(params);
      console.log(res, "res");
      if (res.code == 200) {
        this.refreshing = false;
        this.loading = false;
        if (res.data) {
          this.list =
            params.num == "1" ? res.data : [...this.list, ...res.data];
          res.data.forEach((item) => {
            this.addMarkerOverlay({
              lat: item.latitude,
              lng: item.longitude,
            });
          });
          if (res.data.length < params.size) {
            this.finished = true;
          }
          if (this.list.length == this.total) {
            this.finished = true;
          }
          this.currentPage++;
        } else {
          this.finished = true;
        }
      }
    },
    // 跳转客户视图--企业/商户
    handleViewDetail(item) {
      const custId = "202" + item.socialCreditCode;
      if (!item.custType || (!item.id && !custId)) {
        Toast("客户类型或客户内码不存在");
        return;
      }
      const path =
        item.custType == "0"
          ? "/customePersonDetail"
          : item.custType == "1"
          ? "/customeCommercialDetail"
          : item.custType == "2"
          ? "/customerFirmDetails"
          : "";
      this.$router.push({
        path,
      });
      sessionStorage.setItem("custId", custId);
      sessionStorage.setItem("id", item.id);
      sessionStorage.setItem("newCompanyFlag", item.newCompanyFlag);
      sessionStorage.setItem("fromMap", "1");
      sessionStorage.setItem("activeMap", 0);
    },
  },
};
</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;
}

.search-input {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.search_btn {
  background-color: rgb(24, 144, 255);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 20px;
}

/deep/ .van-search {
  width: 100%;
  padding: 5px 8px;
}

.radio_box {
  display: flex;
  align-items: center;
  margin: 15px 0 15px 15px;
}

.btn_box {
  padding: 8px 16px;
  background-color: #fff;
}

.isChecked {
  background-color: rgb(35, 114, 235);
  color: #fff;
  border-radius: 4px;
}
.grid_item_top {
  display: flex;
  align-items: center;
}
.icon_box {
  background-color: rgb(35, 114, 235);
  border-radius: 4px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.middle_num {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
}
.middle_title {
  font-size: 12px;
}
.line {
  width: 1px;
  height: 30px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(218, 220, 224);
}
.bottom_item_left {
  color: rgb(140, 140, 140);
}
.myDialog {
  .content {
    padding: 5px 15px;
    .my-title {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
    }
    .item {
      margin: 8px 0;
      .index {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: rgba(22, 132, 252, 1);
        color: #fff;
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
        line-height: 16px;
      }
      .branch-name {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        margin-left: 5px;
      }
    }
  }
  ::v-deep .van-button__content {
    color: #666;
  }
}
.search-box {
  position: relative;
  z-index: 999;
  .item-one {
    padding: 17px 17px 1px 17px;
  }
  .dist-box {
    display: flex;
    justify-content: space-between;
    span {
      width: 171px;
      height: 32px;
      background: rgba(244, 245, 251, 1);
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      line-height: 32px;
      border-radius: 4px;
      text-align: center;
      margin-bottom: 16px;
    }
  }
  ::v-deep .title-dist {
    color: #4682ff !important;
    &::after {
      border-color: transparent transparent #4682ff #4682ff !important;
    }
  }
  .active {
    background: rgba(231, 237, 252, 1) !important;
    color: rgba(70, 130, 255, 1) !important;
  }
  ::v-deep .van-sidebar-item--select::before {
    display: none !important;
  }
  ::v-deep .van-sidebar {
    width: 100px !important;
  }
  ::v-deep .van-sidebar-item {
    padding: 12px !important;
  } // }
  .side-box {
    position: relative;
    // height: 515px;
    .content {
      position: absolute;
      width: calc(100% - 100px);
      top: 7px;
      left: 100px;
      height: 384px;
      overflow: scroll;
      // .box {
      // display: flex;
      .item {
        // width: 171px;
        height: 36px;
        background: rgba(244, 245, 251, 1);
        color: rgba(0, 0, 0, 0.85);
        font-size: 12px;
        // line-height: 32px;
        border-radius: 4px;
        text-align: center;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
      }
      .baoxian-box {
        display: flex;
        align-items: center;
        padding: 0 6px;
        ::v-deep .van-cell {
          background: #f4f5fb !important;
          padding: 5px;
          width: 110px;
          border-radius: 5px;
        }
        .heng {
          display: inline-block;
          margin: 0 2px;
          margin-bottom: 2px;
        }
        .people {
          margin-left: 5px;
        }
      }
      // }
    }
    .industryClass {
      // padding-bottom: 50px;
    }
    .footer {
      position: fixed;
      // bottom: 108px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      background: #fff;
      padding: 10px 10px;
      border-radius: 0 0 5px 5px;
      .btn {
        border-radius: 5px;
        width: 80px;
        &:first-child {
          margin-right: 15px;
          width: 120px;
        }
        &:last-child {
          width: 240px;
        }
      }
    }
  }
}
.map-box {
  position: relative;
  .map {
    width: 100%;
    height: 300px;
  }
  .right-icon-box {
    position: absolute;
    right: 16px;
    top: 160px;
    z-index: 300;
    div {
      width: 40px;
      height: 40px;
      // background: #fff;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      &:last-child {
        margin-top: 20px;
      }
      .img {
        background: #fff;
        border-radius: 4px;
        padding: 5px;
      }
    }
  }
  .back {
    position: fixed;
    top: 77vh;
    right: 0px;
    z-index: 999;
    width: 113px;
    height: 48px;
    background: #fff;
    border-radius: 8px 0px 0px 8px;
    text-align: center;
    line-height: 48px;
    font-size: 14px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-around;
    .img_back {
      width: 25px;
      height: 25px;
      margin-top: 0 !important;
    }
  }
}
.qiye-list {
  background: #f7f7f7;
  position: absolute;
  width: 100%;
  padding: 16px;
  top: 333px;
  z-index: 500;
  .total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #595959;
    .total {
      color: #1fba5c;
    }
    .icon-box {
      display: flex;
    }
    .icon-arrow {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .my-arrow1 {
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid #595959;
        margin-bottom: 3px;
      }
      .my-arrow2 {
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #595959;
      }
      .icon-active1 {
        border-bottom-color: #4682ff;
      }
      .icon-active2 {
        border-top-color: #4682ff;
      }
    }
  }
  .grid_item {
    margin-top: 8px;
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 4px;
    .qiye-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title-left {
        display: flex;
        align-items: center;
      }
      .title-j {
        display: inline-block;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #f4f5fb;
        border-radius: 4px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        margin-right: 8px;
      }
      .spec-title {
        background: #e94033;
        color: #fff;
      }
      .title-det {
        font-size: 14px;
        color: #262626;
        font-weight: 600;
      }
    }
    .qiye-register {
      color: rgba(0, 0, 0, 0.85);
      font-size: 10px;
      margin: 6px 0;
    }
    .qiye-address {
      margin-bottom: 6px;
      font-size: 12px;
      display: flex;
      align-items: center;
      .dist-box {
        color: rgba(0, 0, 0, 0.45);
        .dist-icon {
          width: 16px;
          height: 16px;
          line-height: 16px;
          text-align: center;
        }
      }
      .address {
        display: inline-block;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 10px;
        color: #4682ff;
      }
      .goto {
        margin-left: 10px;
        color: #4682ff;
      }
    }
    .phone-box {
      font-size: 12px;
      color: #4682ff;
      .phone-icon {
        margin-right: 3px;
      }
    }
    .img_star {
      width: 16px;
      height: 16px;
    }
  }
}
.qiye-list-more {
  top: 0;
}
.activeBar {
  color: #4682ff;
}
</style>