<template>
  <div class="map-box">
    <div class="map-grid" ref="mapContainer" v-loading="mapLoading"></div>
    <div class="content">
      <div class="card-title">
        <el-tabs v-model="active" type="card" @tab-click="handleClick">
          <el-tab-pane name="0" label="当前位置"></el-tab-pane>
          <!-- <el-tab-pane name="1" label="总分支行" disabled></el-tab-pane> -->
          <el-tab-pane name="2" label="自定义网格"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="current_tab">
        <div class="header" v-if="active == '0'">
          <div class="left">
            <el-tooltip effect="dark" placement="bottom">
              <div slot="content" class="custom-tooltip" style="width: 250px">
                {{ curLocationNm }}
              </div>
              <span class="left-title">{{ curLocationNm }}</span>
            </el-tooltip>
            <span @click="openEditMap" class="edit-btn">
              <i class="el-icon-edit-outline"></i>
              <span>修改</span>
            </span>
          </div>
          <div class="right">
              <span class="dist-box">
                <span class="unit"
                  >范围:{{ distance }}km<i class="el-icon-arrow-down"></i
                ></span>
                <span class="select">
                  <el-select
                    placeholder=""
                    @change="toggleItem"
                    size="mini"
                    style="width:120px"
                    v-model="cust_dist"
                    popper-class="custom-select-dropdown"
                  >
                    <el-option
                      v-for="item in distanceList"
                      :key="item.key"
                      :value="item.key"
                      :label="item.value"
                      ></el-option
                    >
                    <span style="visibility:hidden">-</span>
                    <el-input-number
                      style="width: 70px"
                      placeholder="请输入"
                      v-model="customDist"
                      :controls="false"
                      :min="0"
                      size="small"
                      @change="handleKeyEnter"

                    ></el-input-number
                    > km
                  </el-select>
                </span>
              </span>
          </div>
        </div>
        <div class="grid" v-if="active == '0'" v-loading="countLoading">
          <div class="grid-title">可视区域共找到:</div>
          <div class="grid-type">
            <div
              class="item"
              @click="handleClickView(1, qiye, '')"
              :class="activeView == '1' ? 'activeView' : ''"
              v-if="!isBranchAdmin && !isOutletAdmin && !isCommonManager"
            >
              <span
                ><span class="num">{{
                  qiye > 10000 ? (Number(qiye) / 10000).toFixed(0) : qiye
                }}</span>
                <span v-if="qiye > 10000" class="unit">万</span></span
              >
              <span class="name">企业</span>
            </div>
            <!-- <div class="item"  @click="handleClickView(2)">
              <span><span class="num">5</span><span class="unit">万</span></span>
              <span class="name">新商机</span>
            </div> -->
            <div
              class="item"
              @click="handleClickView(3, cunke, 0)"
              :class="activeView == '3' ? 'activeView' : ''"
              v-if="!isBranchAdmin && !isOutletAdmin && !isCommonManager"
            >
              <span>
                <span class="num">{{
                  cunke > 10000 ? (Number(cunke) / 10000).toFixed(0) : cunke
                }}</span>
                <span v-if="cunke > 10000" class="unit">万</span></span
              >
              <span class="name">存量客户</span>
            </div>
            <div
              class="item"
              @click="handleClickView(4, xinzeng, 1)"
              :class="activeView == '4' ? 'activeView' : ''"
            >
              <span
                ><span class="num">{{
                  xinzeng > 10000
                    ? (Number(xinzeng) / 10000).toFixed(0)
                    : xinzeng
                }}</span>
                <span v-if="xinzeng > 10000" class="unit">万</span></span
              >
              <span class="name">非存量客户</span>
            </div>
            <!-- <div class="item"  @click="handleClickView(5)">
              <span><span class="num">89</span></span>
              <span class="name">园区</span>
            </div>
            <div class="item"  @click="handleClickView(6)">
              <span><span class="num">54</span></span>
              <span class="name">协会</span>
            </div> -->
          </div>
        </div>
        <div class="my-custom-grid" v-if="active == '2' && !viewTab">
          <div class="search-box">
            <el-form size="small" class="myForm">
              <el-form-item style="width: 250px">
                <el-select
                  v-model="region"
                  placeholder="请选择"
                  @change="toggleCity"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item"
                    :value="item"
                    >{{ item }}</el-option
                  >
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-autocomplete
                  v-model="address"
                  clearable
                  @clear="handleSearch"
                  placeholder="请输入详细地址"
                  suffix-icon="el-icon-search"
                  :fetch-suggestions="querySearch"
                  :trigger-on-focus="false"
                  @select="handleSelect"
                  :debounce="800"
                  @focus="handleFocus"
                >
                </el-autocomplete>
              </el-form-item>
            </el-form>
          </div>
          <div class="operate-box">
            <div
              class="item"
              @click="startDrawing('1')"
              :class="drawType == '1' ? 'activeMode' : ''"
            >
              <i class="el-icon-share"></i>
              <span>绘制区域</span>
            </div>
            <div
              class="item"
              @click="startDrawing('2')"
              :class="drawType == '2' ? 'activeMode' : ''"
            >
              <i class="el-icon-time"></i>
              <span>精准点位半径</span>
            </div>
            <!-- <div  class="item">
              <i class="el-icon-school"></i>
              <span>园区地图</span>
            </div> -->
          </div>
        </div>
        <span class="backBox" v-if="active == '2' && viewTab">
          <i class="el-icon-back"></i>
          <span @click="goToLast">返回上一层</span>
        </span>
        <div class="search-box-current" v-if="!!viewTab">
          <el-select
            v-model="startDateIntervalList"
            :multiple="true"
            style="width: 100px"
            placeholder=""
            @change="toggleYear"
          >
            <template slot="prefix">
              <span
                class="prefix-text"
                :class="startDateIntervalList.length ? 'activeClass' : ''"
                >成立年限 <i class="el-icon-arrow-down"
              /></span>
            </template>
            <el-option
              v-for="item in yearOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span class="myCascader">
            <span
              class="trade-title"
              :class="belongBusinessList.length ? 'activeClass' : ''"
            >
              所在行业 <i class="el-icon-arrow-down" />
            </span>
            <el-cascader
              style="width: 100px"
              placeholder=""
              v-model="belongBusinessList"
              :options="industryOptions"
              :props="{ multiple: true, checkStrictly: true }"
              ref="myCascader"
              class="myCascader-input"
              @change="toggleHangYe"
            >
            </el-cascader>
          </span>
          <el-select
            v-model="money"
            :multiple="true"
            style="width: 100px"
            placeholder=""
            class="register-money"
            @change="toggleMoney"
          >
            <template slot="prefix">
              <span
                class="prefix-text"
                :class="money.length ? 'activeClass' : ''"
                >注册资本 <i class="el-icon-arrow-down"
              /></span>
            </template>
            <span>
              <span style="visibility: hidden">-</span>
              <el-input-number
                style="width: 80px"
                placeholder="最小值"
                v-model="money1"
                :controls="false"
                :min="0"
                @blur="toggleMoney"
              />
              <span>-</span>
              <el-input-number
                style="width: 80px"
                placeholder="最大值"
                v-model="money2"
                :controls="false"
                :min="0"
                @blur="toggleMoney"
              />
              万
              <span style="visibility: hidden">-</span>
            </span>
            <el-option
              v-for="item in moneyOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
            <!-- <div
              class="money-footer"
              style="
                display: flex;
                justify-content: right;
                cursor: pointer;
                font-size: 16px;
              "
            >
              <span @click="resetMoney">重置</span>
              <span>|</span>
              <span class="ok" @click="okMoney" style="color: #1a53ff"
                >确定</span
              >
            </div> -->
          </el-select>
          <span class="more" @click="goToSearchMore">
            更多筛选 <i class="el-icon-search"></i>
          </span>
        </div>
        <!-- 企业列表展示 -->
        <div class="table-box" v-if="!!viewTab">
          <div class="table-title" v-loading="countLoading">
            <span
              >共有<span class="num">{{ total }}</span
              >家企业</span
            >
            <span class="paixu-box" @click="handleCaret">
              <!-- <el-dropdown @command="toggleMoneyLevel"> -->
              <!-- <span> -->
              <span class="money-level">{{ moneyLevelName }}</span>
              <!-- <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1"
                      >按注册资本排序</el-dropdown-item
                    >
                    <el-dropdown-item command="2"
                      >按成立日期排序</el-dropdown-item
                    >
                  </el-dropdown-menu> -->
              <!-- </span> -->
              <!-- </el-dropdown> -->
              <span class="caret-box">
                <i
                  class="el-icon-caret-top"
                  :style="activeTop ? { color: '#1a53ff' } : ''"
                ></i>
                <i
                  class="el-icon-caret-bottom"
                  :style="activeBottom ? { color: '#1a53ff' } : ''"
                ></i>
              </span>
            </span>
          </div>
          <div>
            <el-table
              v-loading="tableLoading"
              :data="tableData"
              class="common-table-cnt"
              @selection-change="handleSelectChange"
              ref="tableRef"
              key="4"
              max-height="400"
            >
              <el-table-column type="selection" width="35"></el-table-column>
              <el-table-column prop="componey" label="选择本页" width="350px">
                <template slot-scope="scope">
                  <div class="row-box">
                    <div class="row-componey">
                      <span class="componey-box">
                        <span class="city">{{
                          scope.row.custName ? scope.row.custName[0] : ""
                        }}</span>
                        <span class="componey" @click="openDialog('202'+scope.row.socialCreditCode,scope.row.custType)">{{ scope.row.custName }}</span>
                      </span>
                      <span v-if="scope.row.num"
                        ><span class="num">{{ scope.row.num }}</span
                        >条商机</span
                      >
                    </div>
                    <div class="row-register">
                      <span>{{ scope.row.lpName || "-" }}|</span>
                      <span
                        >{{
                          scope.row.registCapiShow
                            ? scope.row.registCapiShow
                            : "-"
                        }}|</span
                      >
                      <span>{{ scope.row.startDate }}|</span>
                      <span>{{ scope.row.province }}{{ scope.row.city }}</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              style="margin-bottom: 30px; margin-top: -3px"
              layout="sizes,pager"
              v-if="total > 0"
              :total="total"
              :page.sync="num"
              :limit.sync="size"
              @pagination="handleCurrentChange"
              :page-sizes="[5, 10, 20, 50, 100]"
            />
          </div>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="footer-btn" v-if="!!viewTab">
        <!-- <el-button
          icon="el-icon-plus"
          :disabled="selection.length == 0"
          size="medium"
          >关注企业</el-button
        > -->
        <el-dropdown @command="toggleDownload">
          <span>
            <el-button icon="el-icon-download" size="small">导出企业</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1" :disabled="selection.length == 0"
                >导出所选</el-dropdown-item
              >
              <el-dropdown-item command="2">导出前1万条</el-dropdown-item>
            </el-dropdown-menu>
          </span>
        </el-dropdown>
        <!-- <el-dropdown @command="toggleYX">
          <span>
            <el-button icon="el-icon-folder-opened" size="medium"
              >营销<i class="el-icon-caret-bottom"
            /></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1" :disabled="selection.length == 0"
                >加入所选</el-dropdown-item
              >
              <el-dropdown-item command="2">加入前3万条</el-dropdown-item>
            </el-dropdown-menu>
          </span>
        </el-dropdown>
        <el-dropdown @command="toggleSend">
          <span>
            <el-button icon="el-icon-position" size="medium"
              >推送数据</el-button
            >
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1" :disabled="selection.length == 0"
                >推送已选</el-dropdown-item
              >
              <el-dropdown-item command="2">推送前3万条</el-dropdown-item>
            </el-dropdown-menu>
          </span>
        </el-dropdown> -->
      </div>
    </div>
    <!-- 修改地址 -->
    <div>
      <el-dialog
        :visible.sync="dialogVisible"
        :title="curLocationNm"
        width="800"
      >
        <div class="search-box">
          <el-form size="small" class="myForm">
            <el-form-item style="width: 250px">
              <el-select
                v-model="region"
                placeholder="请选择"
                @change="toggleCity"
              >
                <el-option v-for="item in cityList" :key="item" :value="item">{{
                  item
                }}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-autocomplete
                v-model="address"
                clearable
                @clear="handleSearch"
                placeholder="请输入详细地址"
                suffix-icon="el-icon-search"
                :fetch-suggestions="querySearch"
                :trigger-on-focus="false"
                @select="handleSelect"
                :debounce="800"
                @focus="handleFocus"
                style="width:500px"
              >
              </el-autocomplete>
            </el-form-item>
          </el-form>
        </div>
        <div class="mapModal" ref="mapModal"></div>
        <div class="modal-footer">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="submitEdit">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- <div v-show="formLoading" v-loading="formLoading" class="formLoading"  element-loading-text="表单数据重置中,请稍后..."></div> -->
    <!-- 更多筛查 -->
    <MoreSearchModal
      ref="moreSearch"
      :deptOptions="deptOptions"
      :industryOptions="industryOptions"
      :moneyTypeList="moneyTypeList"
      :qiyeTypeList="qiyeTypeList"
      @getCurrentMoreSearch="getCurrentMoreSearch"
      @clearYearList="clearYearList"
      @clearIndustryList="clearIndustryList"
      @clearRegisterMoneyList="clearRegisterMoneyList"
      v-if="showMoreForm"
    />
  </div>
</template>
<script>
import { Message,Loading } from "element-ui";
import { queryAddressList } from "@/api/grid/draw-area";
import WKT from "terraformer-wkt-parser";
import MoreSearchModal from "./components/moreSearchModal.vue";
import { getAddressTree } from "@/api/grid/list/gridlist";
import { getIndustryTree } from "@/api/system/listByRetailKeywords.js";
import {
  getUserDefaultLoc,
  searchCircleCount,
  searchCircleList,
  searchPolygonCount,
  searchPolygonList,
  downloadCircleList,
  downloadPolygonList,
  getMoneyTypeList,
  downloadSelectList,
  getQiYeTypeList,
} from "@/api/customRadar/customRadar.js";
import { downloadFiles } from "@/utils";
import { mapGetters } from 'vuex'

const polygonOptions = {
  strokeColor: "#5E87DB",
  strokeWeight: 3,
  strokeOpacity: 1,
  fillColor: "#5E87DB",
  fillOpacity: 0.2,
};
const labelOptions = {
  backgroundColor: "rgba(0, 0, 0, 0.7)",
  borderRadius: "4px",
  color: "#fff",
  padding: "8px 16px",
  fontSize: "12px",
  fontWeight: "normal",
  border: "none",
};

export default {
  components: { MoreSearchModal },
    computed: {
        ...mapGetters(['roles', 'userName']),
        // 支行
        isBranchAdmin() {
            return this.roles.includes('branchAdmin')
        },
        // 客户经理
        isCommonManager() {
            return this.roles.includes('commonManager')
        },
        // 网点主任
        isOutletAdmin() {
            return this.roles.includes('outletAdmin')
        },
    },
  data() {
    return {
      mapLoading: false,
      active: "0",
      distance: "5",
      customDist: undefined,
      startDateIntervalList: [],
      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-",
        },
      ],
      belongBusinessList: [],
      isDropdownVisible: false,
      money: [],
      moneyOptions: [
        {
          key: "0-100",
          value: "100万以内",
        },
        {
          key: "100-200",
          value: "100万-200万",
        },
        {
          key: "200-500",
          value: "200万-500万",
        },
        {
          key: "500-1000",
          value: "500万-1000万",
        },
        {
          key: "1000-5000",
          value: "1000万-5000万",
        },
        {
          key: "5000-",
          value: "5000万以上",
        },
      ],
      money1: undefined,
      money2: undefined,
      moneyLevel: "1",
      moneyLevelName: "按成立日期排序",
      selection: [],
      tableData: [],
      total: 0,
      num: 1,
      size: 10,
      tableLoading: false,
      viewTab: "",
      dialogVisible: false,
      cityList: [
        "杭州",
        "宁波",
        "温州",
        "嘉兴",
        "湖州",
        "绍兴",
        "金华",
        "衢州",
        "舟山",
        "台州",
        "丽水",
        "上海",
      ],
      region: "",
      address: "",
      cityCenter: "",
      options: [],
      addressList: [],
      func: () => {},
      drawingManager: null, // 绘制管理器
      isDrawing: false,
      currentPolygon: {},
      hasToggle: false,
      deptOptions: [],
      deptId: [],
      industryOptions: [],
      activeTop: false,
      activeBottom: false,
      curLocation: { lat: "", lng: "" },
      curLocationNm: "",
      curCity:'',
      location: { lat: "", lng: "" },
      locationNm: "",
      circle: {}, // 自定义绘制圆心
      radius: "", // 自定义绘制半径
      newCompanyFlag: "",
      activeView: "",
      qiye: 0,
      cunke: 0,
      xinzeng: 0,
      contentLoading: false,
      values: {
        isAsc: true,
        newCompanyFlag: "",
      },
      markerList: [],
      drawType: "",
      wkt: "",
      drawingMode: "",
      moneyTypeList:[],
      distanceList:[
        {
          key:'1',
          value:'1km'
        },
        {
          key:'2',
          value:'2km'
        },
        {
          key:'3',
          value:'3km'
        },
        {
          key:'4',
          value:'4km'
        },
        {
          key:'5',
          value:'5km'
        },
        {
          key:'10',
          value:'10km'
        },
        {
          key:'20',
          value:'20km'
        },
      ],
      cust_dist:"5",
      registCapiIntervalList:[],
      qiyeTypeList:[],
      countLoading:false,
      showMoreForm:true,
    };
  },

  created() {
    getAddressTree().then((res) => {
      if (res.code == 200) {
        const arr = [res.data];
        // this.deptOptions = this.handleDeptTreeData(arr)
        this.deptOptions = arr;
      }
    });
    getIndustryTree().then((res) => {
      if (res.code == 200) {
        this.industryOptions = res.data.map(item=>{
          return {
            value:item.name,
            label:item.name,
          }
        });
      }
    });
    getMoneyTypeList().then(res=>{
      if(res.code == 200){
        this.moneyTypeList=res.data.map(item=>{
          return {
            key:item.dictLabel,
            value:item.dictLabel
          }
        })
      }
    });
    getQiYeTypeList().then(res=>{
      if(res.code == 200){
        const newArr = res.data.filter(item=>item.value=='101');
        this.qiyeTypeList = newArr[0].children;
      }
    })
  },

  mounted() {
    this.initMap();
  },
  methods: {
    // 跳转企业视图
    openDialog(custId,custType) {
      if(custType == '2'){
        this.$router.push({
          path: '/360charts/firm',
          query: {
              custId,
              active:this.active
          }
        })
      }else if(custType == '1'){
        this.$router.push({
          path: '/360charts/commercial',
          query: {
              custId,
              active:this.active
          }
        })
      }
    },
     handleDeptTreeData(arr) {
      return arr.map((item) => {
        if (item.children) {
          return {
            value: item.label,
            label: item.label,
            children: this.handleTreeData(item.children),
          };
        }
        return {
          value: item.label,
          label: item.label,
        };
      });
    },
    handleTreeData(arr) {
      return arr.map((item) => {
        if (item.industryTrees) {
          return {
            value: item.code,
            label: item.name,
            children: this.handleTreeData(item.industryTrees),
          };
        }
        return {
          value: item.code,
          label: item.name,
        };
      });
    },

    // 坐标和半径搜索用户数量
    getViewCircleCount(params) {
      this.countLoading = true;
      searchCircleCount(params).then((res) => {
        if (res.code == 200) {
          if (params.newCompanyFlag === "") {
            this.qiye = res.data;
            if (this.activeView == "1") {
              this.total = res.data;
            }
          } else if (params.newCompanyFlag === 0) {
            this.cunke = res.data;
            if (this.activeView == "3") {
              this.total = res.data;
            }
          } else if (params.newCompanyFlag === 1) {
            this.xinzeng = res.data;
            if (this.activeView == "4") {
              this.total = res.data;
            }
          } else {
            this.total = res.data;
          }
          this.countLoading = false;
        }
      });
    },
    // 坐标和半径查询用户列表
    getViewCircleList(params) {
      this.tableLoading = true;
      this.mapLoading = true;
      searchCircleList({...params,newCompanyFlag:this.newCompanyFlag}).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
          this.markerList.forEach((item) => {
            this.map.removeOverlay(item);
          });
          this.tableData.forEach((item) => {
            this.myCustomLabel(
              {
                lat: item.latitude,
                lng: item.longitude,
              },
              item.custName
            );
          });
          this.tableLoading = false;
          this.mapLoading = false;
        }
      });
    },

    // 多边形搜索用户数量
    getViewPolygonCount(params) {
      this.countLoading = true;
      searchPolygonCount(params).then((res) => {
        if (res.code == 200) {
          this.total = res.data;
          this.countLoading = false;
        }
      });
    },
    // 多边形查询用户列表
    getViewPolygonList(params) {
      this.tableLoading = true;
      this.mapLoading = true;
      searchPolygonList(params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
          this.markerList.forEach((item) => {
            this.map.removeOverlay(item);
          });
          this.tableData.forEach((item) => {
            this.myCustomLabel(
              {
                lat: item.latitude,
                lng: item.longitude,
              },
              item.custName
            );
          });
          this.tableLoading = false;
          this.mapLoading = false;
        }
      });
    },

    goToLast() {
      this.viewTab = "";
      this.size = 10;
      this.num = 1;
      this.values = {};
      this.map.clearOverlays();
      this.markerList = [];
      this.drawType='';
      this.drawingMode='';
      this.wkt='';
    },

    // 初始化地图
    initMap() {
      this.mapLoading = true;
      this.map = new BMapGL.Map(this.$refs.mapContainer);
      getUserDefaultLoc().then((res) => {
        if (res.code == 200) {
          this.curLocation = {
            lat: res?.data?.lat || 30.248307,
            lng: res?.data?.lng || 120.25551,
          };
          this.curLocationNm = res?.data?.address || '浙江农商联合银行科技大楼';
          this.curCity = res?.data?.city || '杭州';
          this.map.centerAndZoom(this.curLocation, 15);
          this.addDefaultOverlay(this.curLocation, this.curLocationNm);
          this.mapLoading = false;
          this.contentLoading = true;
          this.getViewCircleCount({
            dist: this.distance,
            targetLat: this.curLocation.lat,
            targetLng: this.curLocation.lng,
            newCompanyFlag: "",
          });
          this.getViewCircleCount({
            dist: this.distance,
            targetLat: this.curLocation.lat,
            targetLng: this.curLocation.lng,
            newCompanyFlag: 0,
          });
          this.getViewCircleCount({
            dist: this.distance,
            targetLat: this.curLocation.lat,
            targetLng: this.curLocation.lng,
            newCompanyFlag: 1,
          });
        }
      });
      this.map.enableScrollWheelZoom();
      // this.mapLoading = false;
      // 初始化绘制管理器
      this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
        isOpen: false, // 是都开启绘制模式
        enableDrawingTool: false, // 是否添加绘制工具
        confirmVisable: true,
        enableSorption: true, // 是否开启吸附功能
        drawingToolOptions: {
          anchor: BMAP_ANCHOR_TOP_RIGHT,
          offset: new BMapGL.Size(5, 5),
        },
        polygonOptions: polygonOptions, // 多边形样式
        circleOptions: polygonOptions, // 圆形样式
        labelOptions: labelOptions, // 提示语样式
      });
      // 监听绘制完成事件
      this.drawingManager.addEventListener("overlaycomplete", (e) => {
        console.log("完成绘制", e);
        this.isDrawing = false;
        if (this.currentPolygon) {
          this.map.removeOverlay(this.currentPolygon);
        }
        this.currentPolygon = e.overlay;
        this.currentPolygonType = "add";
        this.drawingManager.close();
        this.visible = true;
        this.infoType = "ADD";
        this.getWKT(this.currentPolygon, e.drawingMode);
        // this.currentPolygon.addEventListener("click", () => {
        //   if (this.isDrawing) return;
        //   this.currentPolygon = e.overlay;
        //   this.currentPolygonType = "add";
        //   this.visible = true;
        //   this.infoType = "ADD";
        // });
      });

      // 监听绘制取消事件
      this.drawingManager.addEventListener("overlaycancel", (e) => {
        console.log("取消绘制");
        this.isDrawing = false;
        if (this.currentPolygon) {
          this.map.removeOverlay(this.currentPolygon);
        }
        this.currentPolygon = null;
        this.currentPolygonType = "";
      });
    },

    // 当前tab地图默认添加物--圆形
    addDefaultOverlay(point, name) {
      this.map.clearOverlays();
      const marker = new BMapGL.Marker(point);
      // 在地图上添加点标记
      this.map.addOverlay(marker);
      const opts = {
        // position:new BMapGL.Point(30.248166,120.256004),
        position: point,
        offset: new BMapGL.Size(-100, 5),
      };
      const str = "当前位置:" + name;
      const html = `<div style="white-space:pre-wrap;word-wrap:break-word;">${str}</div>`;
      const label = new BMapGL.Label(html, opts);
      label.setStyle({
        borderRadius: "5px",
        color: "#fff",
        background: "#393a51",
        textAlign: "center",
        zIndex: 1000,
        // height:'30px',
        borderColor: "#393a51",
        padding: "10px",
        width: "200px",
      });
      this.map.addOverlay(label);
      // 添加圆形覆盖物
      const circle = new BMapGL.Circle(point, this.distance * 1000, {
        strokeColor: "#2094ff",
        fillColor: "#2094ff",
        strokeWeight: 2,
        fillOpacity: 0.3,
        strokeOpacity: 0.8,
      });
      this.map.addOverlay(circle);
      // 5--15
      let sf = 15;
      if(this.distance == 1){
        sf = 17
      }else if(this.distance == 2){
        sf = 16.5
      }else if(this.distance == 3){
        sf = 16
      }else if(this.distance == 4){
        sf = 15.5
      }
      if(this.distance<5){
        sf = 15 + (5-this.distance)*0.5
      }
      if(this.distance>5 && this.distance<15){
        sf = 15 - (this.distance-5)*0.2
      }
      if(this.distance==15){
        sf = 13
      }
      if(this.distance>15){
        sf = 15 - (this.distance-5)*0.1
      }
      this.map.centerAndZoom(point,sf);
      // this.map.setViewport([point]);
    },

    openEditMap() {
      this.dialogVisible = true;
      this.region = this.curCity;
      this.address = this.curLocationNm;
      this.location = this.curLocation;
      this.locationNm = this.curLocationNm;
      setTimeout(() => {
        this.map2 = new BMapGL.Map(this.$refs.mapModal);
        // const point = { lat: 30.248166, lng: 120.256004 };
        this.map2.centerAndZoom(this.curLocation, 15);
        this.map2.enableScrollWheelZoom();
      }, 300);
    },
    // 切换tab
    handleClick() {
      this.viewTab = "";
      this.address = "";
      this.addressList = [];
      this.region = "";
      this.num = 1;
      this.size = 10;
      this.tableData=[];
      this.values = {};
      this.drawingMode='';
      this.activeView='';
      this.startDateIntervalList=[];
      this.belongBusinessList=[];
      this.money=[];
      this.money1=undefined;
      this.money2=undefined;
      this.moreKey = String(Number(this.moreKey) + 1);
      this.newCompanyFlag = '';
      this.showMoreForm=false;
      this.$nextTick(() => {
        this.showMoreForm=true;
      });
      // this.refs.moreSearch.clearForm();
      this.map.clearOverlays();
      if (this.active == "0") {
        this.isDrawing = false;
        this.currentPolygon = {};
        this.addDefaultOverlay(this.curLocation, this.curLocationNm);
        this.getViewCircleCount({
            dist: this.distance,
            targetLat: this.curLocation.lat,
            targetLng: this.curLocation.lng,
            newCompanyFlag: "",
          });
          this.getViewCircleCount({
            dist: this.distance,
            targetLat: this.curLocation.lat,
            targetLng: this.curLocation.lng,
            newCompanyFlag: 0,
          });
          this.getViewCircleCount({
            dist: this.distance,
            targetLat: this.curLocation.lat,
            targetLng: this.curLocation.lng,
            newCompanyFlag: 1,
          });
      } else if (this.active == "2") {
      }
      console.log(this.active);
    },
    // 切换距离
    toggleItem(v) {
      this.distance = v;
      this.viewTab = "";
      this.tableData = [];
      this.total = 0;
      this.size = 10;
      this.num = 1;
      this.activeView = "";
      this.values = {};
      this.addDefaultOverlay(this.curLocation, this.curLocationNm);
      this.getViewCircleCount({
        dist: this.distance,
        targetLat: this.curLocation.lat,
        targetLng: this.curLocation.lng,
        newCompanyFlag: "",
      });
      this.getViewCircleCount({
        dist: this.distance,
        targetLat: this.curLocation.lat,
        targetLng: this.curLocation.lng,
        newCompanyFlag: 0,
      });
      this.getViewCircleCount({
        dist: this.distance,
        targetLat: this.curLocation.lat,
        targetLng: this.curLocation.lng,
        newCompanyFlag: 1,
      });
    },
    // 输入距离
    handleKeyEnter(e) {
      console.log(1111,e,this.customDist)
      if (this.customDist > 20) {
        Message.warning("仅支持1~20km范围输入");
      } else {
        this.distance = this.customDist;
        this.cust_dist = '';
        this.toggleItem(this.distance);
      }
    },
    handleCaret() {
      if (this.activeTop) {
        this.activeTop = false;
        this.activeBottom = true;
        this.values.isAsc = false;
      } else {
        this.activeTop = true;
        this.activeBottom = false;
        this.values.isAsc = true;
      }
      this.num=1;
      this.size=10;
      if (this.active == "0") {
        // 当前位置
        this.getViewCircleList({
          num: this.num,
          size: this.size,
          dist: this.distance,
          targetLat: this.curLocation.lat,
          targetLng: this.curLocation.lng,
          ...this.values,
        });
      } else {
        // 自定义网格
        if (this.drawingMode == "circle") {
          this.getViewCircleList({
            num: this.num,
            size: this.size,
            dist: this.radius,
            targetLat: this.circle.lat,
            targetLng: this.circle.lng,
            ...this.values,
          });
        } else {
          this.getViewPolygonList({
            num: this.num,
            size: this.size,
            wkt: this.wkt,
            ...this.values,
          });
        }
      }
    },
    resetMoney() {
      this.money = [];
      this.money1 = undefined;
      this.money2 = undefined;
    },
    okMoney() {
      if (this.money1 > this.money2) {
        Message.warning("请输入正确的数值范围");
        return;
      }
    },
    toggleMoneyLevel(v) {
      this.moneyLevel = v;
      this.moneyLevelName = v == "1" ? "按注册资本排序" : "按成立日期排序";
    },
    handleSelectChange(val) {
      this.selection = val;
    },
    handleCurrentChange(obj) {
      if (obj.sizeChange) {
        this.num = 1;
        this.size = obj.limit;
      } else {
        this.num = obj.page;
      }
      if (this.active == "0") {
        // 当前位置
        this.getViewCircleList({
          num: this.num,
          size: this.size,
          dist: this.distance,
          targetLat: this.curLocation.lat,
          targetLng: this.curLocation.lng,
          ...this.values,
        });
      } else {
        // 自定义网格
        if (this.drawingMode == "circle") {
          this.getViewCircleList({
            num: this.num,
            size: this.size,
            dist: this.radius,
            targetLat: this.circle.lat,
            targetLng: this.circle.lng,
            ...this.values,
          });
        } else {
          this.getViewPolygonList({
            num: this.num,
            size: this.size,
            wkt: this.wkt,
            ...this.values,
          });
        }
      }
    },
    toggleDownload(v) {
      if(v == '1'){
        const ids = this.selection.map(item=>item.id);
        downloadSelectList(ids).then(res=>{
          downloadFiles(res,`客户雷达数据_${new Date().getTime()}.xlsx`);
            Message.success('下载成功');
        })
      }else{
        let params = {...this.values,total:10000};
        if(this.active == '0'){
          params.dist = this.distance;
          params.targetLat = this.curLocation.lat;
          params.targetLng = this.curLocation.lng;
        }else if(this.drawingMode == 'circle'){
          params.dist = this.radius;
          params.targetLat = this.circle.lat;
          params.targetLng = this.circle.lng;
        }else{
          params.wkt = this.wkt;
        }
        console.log(params)
        let Api = (this.active == '0' || this.drawingMode == 'circle')?downloadCircleList:downloadPolygonList;
        Api(params).then(res=>{
          if(res.code == 200){
            Message.success(`${res.msg},请稍后前往下载中心下载`);
          }
        })
      }
    },
    toggleYX(v) {},
    toggleSend(v) {},
    handleClickView(v, num, newCompanyFlag) {
      this.viewTab = v;
      this.activeView = v;
      this.total = num;
      this.num = 1;
      this.size = 10;
      this.tableData=[];
      this.newCompanyFlag=newCompanyFlag;
      this.values = {
        ...this.values,
        isAsc: true,
      };
      if (this.active == "0") {
        this.getViewCircleList({
          num: this.num,
          size: this.size,
          dist: this.distance,
          targetLat: this.curLocation.lat,
          targetLng: this.curLocation.lng,
          ...this.values,
        });
      }
    },
    handleFocus() {
      if (this.address && this.addressList.length > 0) {
        this.func(this.addressList);
      }
    },
    querySearch(queryString, cb) {
      this.func = cb;
      console.log(queryString, 1111);
      if (!queryString) {
        cb([]);
        return;
      }
      // this.debounce(()=>{
      queryAddressList({
        region: this.region,
        address: this.address,
      }).then((res) => {
        if (res.code == 200) {
          const addressList = res?.data?.map((item) => {
            return {
              value: item.name,
              location: item.location,
            };
          });
          this.addressList = addressList;
          cb(addressList || []);
        }
      });
      // },1000)
    },
    handleSelect(v) {
      console.log(v, this.address);
      this.location = v.location;
      this.locationNm = v.value;
      if(this.active!= '0'){
        this.map.centerAndZoom(v.location, 14);
      }else{
        this.map2.centerAndZoom(v.location, 14);
      }
    },
    toggleCity() {
      this.address = "";
      this.addressList = [];
      if(this.active!= '0'){
        this.map.centerAndZoom(this.region, 14);
      }else{
        this.map2.centerAndZoom(this.region, 14);
      }
    },
    handleSearch() {
      if(this.active!= '0'){
        this.map2.centerAndZoom(this.region, 14);
      }else{
        this.map2.centerAndZoom(this.region, 14);
      }
    },
    // 自定义覆盖物--企业
    myCustomLabel(point, text) {
      const opts = {
        position: point,
        className: "custom-label",
        offset:new BMapGL.Size(-10,20)
      };
      const div = `<div style="white-space:pre-wrap;word-wrap:break-word;">${text}</div>`;
      const label = new BMapGL.Label(div, opts);
      label.setStyle({
        borderRadius: "5px",
        color: "#fff",
        background: "#5382ff",
        textAlign: "center",
        zIndex: 1000,
        // height:'30px',
        borderColor: "#5382ff",
        padding: "10px",
        width: "200px",
      });
      label.addEventListener("mouseover", function (e) {
        // e.currentTarget.domElement.classList.add("custom-label2");
        label.setStyle({
          background: "#f5573e",
          borderColor: "#f5573e",
        });
      });
      label.addEventListener("mouseout", function (e) {
        // e.currentTarget.domElement.classList.remove("custom-label2");
        label.setStyle({
          background: "#5382ff",
          borderColor: "#5382ff",
        });
      });
      this.markerList.push(label);
      this.map.addOverlay(label);
      // label.domElement.classList.add("custom-label1");
      // this.$refs.mapContainer.querySelector('.BMapLabel').
    },
    // 开始绘制
    startDrawing(type) {
      this.num=1;
      this.size=10;
      this.tableData=[];
      this.drawType = type;
      const mode = type == "1" ? BMAP_DRAWING_POLYGON : BMAP_DRAWING_CIRCLE;
      if (this.currentPolygon && this.currentPolygonType === "add") {
        // 移除监听和已经绘制完成的覆盖物，一次只能绘制一个覆盖物
        this.map.removeOverlay(this.currentPolygon);
        this.currentPolygon = null;
      }
      this.isDrawing = true;
      this.drawingManager.setDrawingMode(mode); // 默认多边形绘制模式
      this.drawingManager.open();
    },
    getWKT(polygon, drawingMode) {
      this.drawingMode = drawingMode;
      this.viewTab = "custom";
      if (this.currentPolygon || polygon) {
        const currentPolygon = polygon || this.currentPolygon;
        if (drawingMode == "circle") {
          this.circle = currentPolygon.latLng;
          this.radius = currentPolygon.radius / 1000;
          const marker = new BMapGL.Marker(this.circle);
          this.map.addOverlay(marker);
          this.getViewCircleCount({
            dist: this.radius,
            targetLat: this.circle.lat,
            targetLng: this.circle.lng,
          });
          this.getViewCircleList({
            num: this.num,
            size: this.size,
            dist: this.radius,
            targetLat: this.circle.lat,
            targetLng: this.circle.lng,
            ...this.values,
          });
        } else {
          const path = currentPolygon.getPath();
          const coordinates = path
            .map((point) => `${point.lng} ${point.lat}`)
            .join(",");
          const wkt = `POLYGON((${coordinates}))`;
          this.wkt = wkt;
          this.getViewPolygonCount({
            wkt,
          });
          this.getViewPolygonList({
            num: this.num,
            size: this.size,
            wkt,
            ...this.values,
          });
        }
      }
    },
    // 当前位置编辑
    // 取消
    cancelEdit() {
      this.dialogVisible = false;
    },
    // 确定
    submitEdit() {
      this.toggleTab=false;
      this.curLocation = this.location;
      this.curLocationNm = this.locationNm;
      this.curCity = this.region;
      this.dialogVisible = false;
      this.viewTab = "";
      this.tableData = [];
      this.total = 0;
      this.size = 10;
      this.num = 1;
      this.activeView = "";
      this.values = {};
      this.map.centerAndZoom(this.curLocation, 15);

      this.addDefaultOverlay(this.curLocation, this.curLocationNm);
      this.getViewCircleCount({
        dist: this.distance,
        targetLat: this.curLocation.lat,
        targetLng: this.curLocation.lng,
        newCompanyFlag: "",
      });
      this.getViewCircleCount({
        dist: this.distance,
        targetLat: this.curLocation.lat,
        targetLng: this.curLocation.lng,
        newCompanyFlag: 0,
      });
      this.getViewCircleCount({
        dist: this.distance,
        targetLat: this.curLocation.lat,
        targetLng: this.curLocation.lng,
        newCompanyFlag: 1,
      });
    },
    goToSearchMore() {
      // this.showMoreForm=true;
      this.$refs.moreSearch.openModal();
    },
    getCurrentMoreSearch(formValues) {
      console.log(formValues, 222222,);
      let newValues = {...formValues};
      if(formValues.startYear && formValues.endYear && Number(formValues.startYear)>Number(formValues.endYear)){
        Message.warning('请设定正确的年限范围');
        return;
      }
      if(formValues.startYear || formValues.endYear){
        let arrYear=[];
        arrYear[0] = formValues.startYear || '1900';
        arrYear[1] = formValues.endYear || new Date().getFullYear();
        newValues.cusStartDateInterval = arrYear;
      }
      if(formValues.minRegiterMoney!=undefined && formValues.maxRegiterMoney!=undefined && formValues.minRegiterMoney>formValues.maxRegiterMoney){
        Message.warning('请输入正确的金额范围');
        return;
      }
      if(formValues.minGiveMoney!=undefined && formValues.maxGiveMoney!=undefined && formValues.minGiveMoney>formValues.maxGiveMoney){
        Message.warning('请输入正确的金额范围');
        return;
      }
      if(formValues.minYL!=undefined && formValues.maxYL!=undefined && formValues.minYL>formValues.maxYL){
        Message.warning('请输入正确的人数范围');
        return;
      }
      if(formValues.minYN!=undefined && formValues.maxYN!=undefined && formValues.minYN>formValues.maxYN){
        Message.warning('请输入正确的人数范围');
        return;
      }
      // 行业
      if(!this.belongBusinessList.length){
        newValues.belongBusinessList = formValues.belongBusinessList.map(item=>item[0]);
      }
      if(!this.startDateIntervalList.length){
        newValues.startDateIntervalList = formValues.startDateIntervalList.map(item=>{
          const min = item.split('-')[0];
          const max = item.split('-')[1] || 9999;
          return {
            min,
            max
          }
        })
      }
      if(newValues?.cusStartDateInterval?.length){
        let currentYear = new Date().getFullYear();
        let currentMonth = new Date().getMonth()+1;
        let max = (currentYear - newValues.cusStartDateInterval[0])*12+currentMonth-1;
        let min=0;
        if(newValues.cusStartDateInterval[1] == currentYear){
          min=0;
        }else{
          min = (currentYear - newValues.cusStartDateInterval[1]-1)*12 + currentMonth;
        }
        newValues.startDateIntervalList.push({
          min,
          max
        })
      }
      newValues.statusList = formValues.statusList.concat(formValues.otherJYStatus);
      // 注册资本拼接
      if(!this.registCapiIntervalList.length){
          let arr = [];
        let money1 = formValues.minRegiterMoney;
        let money2 = formValues.maxRegiterMoney;
        arr = formValues.registerAll.map(item=>{
          const min = Number(item.split('-')[0]);
          const max = Number(item.split('-')[1] || 2*16);
          return {
            min,
            max
          }
        })
        if(money1!==undefined || money2!==undefined){
          arr.push({
            min:formValues.registerUnit == '2'? (money1 || 0)*10000:(money1 || 0),
            max:formValues.registerUnit == '2'?(money2 || 2**16)*10000:(money2 || 2**16)
          })
        }
        if(arr[0]>2**16 || arr[1]>2**16){
          Message.warning('注册资本最大不能超过65536万');
          return;
        }
        newValues.registCapiIntervalList = arr;
      }
      // 实缴资本拼接
       let arr2 = [];
      let money12 = formValues.minGiveMoney;
      let money22 = formValues.maxGiveMoney;
      arr2 = formValues.giveAll.map(item=>{
        const min = Number(item.split('-')[0]);
        const max = Number(item.split('-')[1] || 2**16);
        return {
          min,
          max
        }
      })
      if(money12!==undefined || money22!==undefined){
        arr2.push({
          min:formValues.giveUnit == '2'?(money12 || 0)*10000:(money12 || 0),
          max:formValues.giveUnit == '2'?(money22 || 2**16)*10000:(money22 || 2**16)
        })
      }
      if(arr2[0]>2**16 || arr2[1]>2**16){
          Message.warning('实缴资本最大不能超过65536万');
          return;
        }
      newValues.recCapIntervalList = arr2;
      let companyTypeList = newValues.companyTypeList;
      // 企业处理
      if(formValues?.companyType?.length){
        let newCompanyType = formValues.companyType.map(item=>item[item.length-1]);
        companyTypeList = companyTypeList.concat(newCompanyType);
      }
      // 事业单位处理
      if(formValues?.SYStatus?.length){
        let newSYStatus = formValues.SYStatus.map(item=>item[0]);
        companyTypeList = companyTypeList.concat(newSYStatus);
      }
      newValues.companyTypeList = companyTypeList;
      // 养老保险
      let arrYl = [];
      let yl1 = formValues.minYL;
      let yl2 = formValues.maxYL;
      arrYl = formValues.businessInfoPenInsurIntervalList.map(item=>{
        const min = Number(item.split('-')[0]);
        const max = Number(item.split('-')[1] || 2**16*10000);
        return {
          min,
          max
        }
      })
      if(yl1!==undefined || yl2!==undefined){
        let min = yl1 || 0;
        let max = yl2 || 2**16*10000;
        if(min>2**16*10000 || max>2**16*10000){
          Message.warning('养老保险参保人数最大不能超过65536万');
          return;
        }
        arrYl.push({
          min,
          max
        })
      }
      newValues.businessInfoPenInsurIntervalList = arrYl;
      // 医疗保险
      let arrYn = [];
      let yn1 = formValues.minYN;
      let yn2 = formValues.maxYN;
      arrYn = formValues.businessInfoMediInsurIntervalList.map(item=>{
        const min = Number(item.split('-')[0]);
        const max = Number(item.split('-')[1] || 2**16*10000);
        return {
          min,
          max
        }
      })
      if(yn1!==undefined || yn2!==undefined){
        let min = yn1 || 0;
        let max = yn2 || 2**16*10000;
        if(min>2**16*10000 || max>2**16*10000){
          Message.warning('医疗保险参保人数最大不能超过65536万');
          return;
        }
        arrYn.push({
          min,
          max
        })
      }
      newValues.businessInfoMediInsurIntervalList = arrYn;
      // 省市区划
      newValues.province = formValues.origonNm[0] || ''
      newValues.city = formValues.origonNm[1] || ''
      newValues.county = formValues.origonNm[2] || ''
      newValues.street = formValues.origonNm[3] || ''
      newValues.community = formValues.origonNm[4] || ''
      this.values = {...newValues};
      this.searchCurrentList();
    },
    // 筛选触发--可视区域和列表数据
    searchCurrentList() {
      if (this.active == "0") {
        // 当前位置
        this.getViewCircleCount({
          ...this.values,
          dist: this.distance,
          targetLat: this.curLocation.lat,
          targetLng: this.curLocation.lng,
          newCompanyFlag: "",
        });
        this.getViewCircleCount({
          ...this.values,
          dist: this.distance,
          targetLat: this.curLocation.lat,
          targetLng: this.curLocation.lng,
          newCompanyFlag: 0,
        });
        this.getViewCircleCount({
          ...this.values,
          dist: this.distance,
          targetLat: this.curLocation.lat,
          targetLng: this.curLocation.lng,
          newCompanyFlag: 1,
        });
        this.getViewCircleList({
          ...this.values,
          num: this.num,
          size: this.size,
          dist: this.distance,
          targetLat: this.curLocation.lat,
          targetLng: this.curLocation.lng,
        });
      } else {
        // 自定义网格
        if (this.drawingMode == "circle") {
          this.getViewCircleCount({
            dist: this.radius,
            targetLat: this.circle.lat,
            targetLng: this.circle.lng,
            ...this.values,
          });
          this.getViewCircleList({
            num: this.num,
            size: this.size,
            dist: this.radius,
            targetLat: this.circle.lat,
            targetLng: this.circle.lng,
            ...this.values,
          });
        } else {
          this.getViewPolygonCount({
            wkt: this.wkt,
            ...this.values,
          });
          this.getViewPolygonList({
            num: this.num,
            size: this.size,
            wkt: this.wkt,
            ...this.values,
          });
        }
      }
    },
    // 成立年限切换
    toggleYear(){
      const newYearList = this.startDateIntervalList.map(item=>{
        const min = item.split('-')[0];
        const max = item.split('-')[1] || 9999;
        return {
          min,
          max
        }
      })
      this.values.startDateIntervalList=newYearList;
      this.searchCurrentList();
    },
    // 切换行业
    toggleHangYe(){
      console.log(this.belongBusinessList)
      this.values.belongBusinessList = this.belongBusinessList.map(item=>{
        return item[0]
      });
      this.searchCurrentList();
    },
    // 注册资本
    toggleMoney(){
      // registCapiIntervalList
      console.log(this.money)
      let arr = [];
      let money1 = this.money1;
      let money2 = this.money2;
      if(money1!==undefined && money2!==undefined && money1>money2){
        Message.warning('请输入正确的金额范围');
        return;
      }
      if(money2!==undefined && money2>2**16 || money1!==undefined && money1>2**16 ){
        Message.warning('注册资本最大不能超过65536万');
        return;
      }
      arr = this.money.map(item=>{
        const min = Number(item.split('-')[0]);
        const max = Number(item.split('-')[1] || 2**16);
        return {
          min,
          max
        }
      })
      if(money1!==undefined || money2!==undefined){
        arr.push({
          min:money1 || 0,
          max:money2 || 2**16
        })
      }
      this.values.registCapiIntervalList = arr;
      this.registCapiIntervalList=arr;
      this.searchCurrentList();
      console.log(this.registCapiIntervalList)
    },
    // 清除筛选--年限/行业/注册资本
    clearYearList(){
      this.startDateIntervalList=[];
     this.values.startDateIntervalList=[];
    },
    clearIndustryList(){
      this.belongBusinessList=[];
       this.values.belongBusinessList=[];
    },
    clearRegisterMoneyList(){
      this.money = [];
      this.money1=undefined;
      this.money2=undefined;
      this.registCapiIntervalList=[];
      this.values.registCapiIntervalList = [];
    },
  },
};
</script>
<style lang="scss" scoped>
.map-box {
  position: relative;
  width: 100%;
  height: 100%;
  .map-grid {
    width: 100%;
    height: calc(100vh - 130px);
    margin: 0;
    padding: 0;
  }
  .formLoading{
    position: absolute;
    height: calc(100vh);
    width: 1125px;
    right: -31px;
    top:-138px;
    z-index: 99999999999;
  }
  .content {
    position: absolute;
    background: #fff;
    width: 430px;
    top: 5px;
    left: 5px;
    z-index: 1000;
    // height: calc(100vh - 130px);
    .card-title {
      ::v-deep .el-tabs__item {
        width: 214px;
        text-align: center;
      }
    }
    .current_tab {
      padding: 0 10px;
      padding-bottom: 10px;
      // height: calc(100vh - 180px);
      // overflow-y: scroll;
      .header {
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          .left-title {
            display: inline-block;
            max-width: 260px;
            color: #000;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .el-icon-edit-outline {
            color: #1a53ff;
          }
          .edit-btn {
            cursor: pointer;
          }
        }
        .right {
          .unit {
            font-size: 16px;
          }
          cursor: pointer;
        }
        border-bottom: 1px solid #ddd;
        padding-bottom: 5px;
        margin-bottom: 5px;
      }
      .grid {
        // position:relative;
        .grid-title {
          font-size: 12px;
          color: #76788b;
          margin-bottom: 5px;
        }
        .grid-type {
          display: flex;
          justify-content: space-between;
          .item {
            width: 120px;
            height: 45px;
            background: #f4f5fc;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            &:hover {
              background-color: #e5eeff;
              border: 1px solid #e5eeff;
            }
            .num {
              font-weight: 600;
              font-size: 14px;
            }
            .unit {
              font-size: 12px;
              color: #393a51;
            }
            .name {
              font-size: 12px;
              color: #393a51;
            }
            &:nth-child(1) .num {
              color: rgb(17, 179, 202);
            }
            &:nth-child(2) .num {
              color: rgb(152, 67, 242);
            }
            &:nth-child(3) .num {
              color: rgb(238, 132, 21);
            }
            // &:nth-child(2) .num {
            //   color: rgb(26, 83, 255);
            // }
            // &:nth-child(5) .num {
            //   color: rgb(147, 102, 0);
            // }
            // &:nth-child(6) .num {
            //   color: rgb(20, 90, 30);
            // }
          }
          .activeView {
            border: 1px solid rgb(22, 132, 252);
          }
        }
      }
      .search-box-current {
        ::v-deep .el-select .el-input__inner {
          border: none !important;
        }
        ::v-deep .el-select .el-select__tags {
          display: none !important;
        }
        ::v-deep .el-select .el-input .el-input__suffix {
          // right: 15px;
          display: none;
        }
        .prefix-text {
          color: #393a51;
          line-height: 36px;
          cursor: pointer;
        }
        .activeClass {
          color: #1a53ff !important;
        }
        .myCascader {
          position: relative;
          margin-right: 23px;
          .trade-title {
            // position: absolute;
            color: #393a51;
            line-height: 36px;
            cursor: pointer;
            z-index: 100;
            font-size: 14px;
          }
          .myCascader-input {
            position: absolute;
            left: 0;
          }
          ::v-deep .el-cascader .el-input .el-input__inner {
            border: none !important;
            background: transparent;
          }
          ::v-deep .el-input .el-input__suffix {
            display: none;
          }
          ::v-deep .el-cascader .el-cascader__tags {
            display: none !important;
          }
        }
        .more {
          display: inline-block;
          font-size: 13px;
          padding: 4px 12px;
          border-radius: 12px;
          background-color: #e5eeff;
          cursor: pointer;
          color: #1a53ff;
          margin-left: 16px;
        }
        // .register-money{

        // }
      }
      .table-box {
        margin-bottom: 60px;
        .table-title {
          background-color: #f4f5fc;
          display: flex;
          justify-content: space-between;
          color: #76788b;
          font-size: 13px;
          padding: 4px 12px;
          align-items: center;
          .num {
            color: #1c6920;
          }
          .money-level {
            cursor: pointer;
          }
          .paixu-box {
            display: flex;
            align-items: center;
            .caret-box {
              display: flex;
              flex-direction: column;
              justify-content: center;
              cursor: pointer;
              i:nth-child(1) {
                margin-bottom: -2px;
              }
              i:nth-child(2) {
                margin-top: -2px;
              }
            }
          }
        }
        .row-box {
          .row-componey {
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            .componey-box {
              display: flex;
              align-items: center;
              .city {
                display: inline-block;
                height: 20px;
                width: 20px;
                margin-right: 4px;
                background-size: contain;
                background-position: 50%;
                background-repeat: no-repeat;
                text-align: center;
                line-height: 20px;
                background-color: #e5eeff;
                color: #1a53ff;
                font-weight: 600;
                border-radius: 4px;
              }
              .componey {
                display: inline-block;
                height: 20px;
                line-height: 20px;
                font-weight: 600;
                color: #00000a;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                cursor: pointer;
              }
            }
            .num {
              color: #00000a;
              font-weight: 600;
            }
          }
          .row-register {
            font-size: 12px;
            height: 20px;
            line-height: 20px;
          }
          .row-info {
            display: flex;
            align-items: center;
            .type {
              display: inline-block;
              background-color: #eef9e8;
              border-color: #dcf3d1;
              color: #52c41a;
              height: 16px;
              line-height: 14px;
              padding: 0 8px;
              font-size: 12px;
              border-radius: 8px;
            }
            .info {
              overflow: hidden;
              white-space: nowrap;
              width: 250px;
              text-overflow: ellipsis;
            }

            // .custom-tooltip{
            //   width: 200px;
            // }
          }
          .typeName {
            display: inline-block;
            border-color: #f4f5fc;
            background-color: #f4f5fc;
            color: #00000a;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
          }
        }
        ::v-deep .el-table th.el-table__cell.is-leaf {
          border: none !important;
        }
        ::v-deep .el-table td.el-table__cell {
          border: none !important;
        }
        ::v-deep .el-table .el-table__header-wrapper th,
        .el-table .el-table__fixed-header-wrapper th {
          background: #fff !important;
          font-weight: 100;
        }
        ::v-deep .el-table__header-wrapper tr th:first-child .cell {
          padding: 0;
          text-align: center;
        }
        ::v-deep .el-table__header-wrapper tr th:nth-child(2) .cell {
          padding-left: 0;
        }
        ::v-deep .el-table__body tr td:first-child .cell {
          padding: 0;
          text-align: center;
        }
        ::v-deep .el-table__body tr td:first-child {
          vertical-align: baseline;
        }
        ::v-deep .el-table__body tr td:nth-child(2) .cell {
          padding-left: 0;
        }
      }
    }
  }
  // ::v-deep .BMap_bubble_top {
  //   // visibility: hidden;
  //   display: none;
  // }
  // ::v-deep .BMap_bubble_pop {
  //   // top: 403px !important;
  //   // left: 433px !important;
  //   img{
  //     // top: 56px !important;
  //     display: none;
  //   }
  //   background:transparent !important;
  //   white-space: normal;
  //   word-break: break-all;
  //   border: none !important;
  // }
  // ::v-deep .shadow, .shadow img, .shadow div{
  //   display: none !important;
  // }
  .footer-btn {
    width: 420px;
    text-align: right;
    margin-top: -52px;
    margin-bottom: 7px;
    // display: flex;
    // justify-content: space-between;
    ::v-deep .el-button--medium {
      padding: 10px !important;
    }
  }
}
// ::v-deep .el-select-dropdown{
//   padding: 10px !important;
// }
// ::v-deep .el-tooltip__popper{
//   max-width: 250px !important;
// }
.mapModal {
  width: 100%;
  height: 588px;
}
.search-box {
  .myForm {
    display: flex;
  }
}
.my-custom-grid {
  .operate-box {
    display: flex;
    justify-content: space-between;
    .item {
      width: 46%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      color: #393a51;
      background: #f4f5fc;
      border-radius: 2px;
      height: 60px;
      font-size: 12px;
      i {
        font-size: 20px;
      }
      &:hover {
        color: #1a53ff;
      }
      .caret-Color {
        color: #1a53ff;
      }
    }
    .activeMode {
      background: rgba(25, 144, 255, 0.1);
      color: rgb(22, 132, 252);
    }
  }
}
// ::v-deep .custom-label1::after {
//   content: "";
//   position: absolute;
//   width: 0;
//   height: 0;
//   border-left: 5px solid transparent;
//   border-right: 5px solid transparent;
//   border-top: 8px solid #5382ff;
//   bottom: -8px;
//   left: 50%;
//   transform: translateX(-50%);
// }
// ::v-deep .custom-label2::after {
//   content: "";
//   position: absolute;
//   width: 0;
//   height: 0;
//   border-left: 5px solid transparent;
//   border-right: 5px solid transparent;
//   border-top: 8px solid #f5573e;
//   bottom: -8px;
//   left: 50%;
//   transform: translateX(-50%);
// }
// ::v-deep .el-select-dropdown {
//   max-height: 300px !important;
//   .money-footer {
//   }
// }
.backBox {
  cursor: pointer;
  i {
    color: #5382ff;
  }
}
.modal-footer {
  text-align: right;
}
.dist-box{
  position: relative;
  .select{
    position: absolute;
    left: 0;
    ::v-deep .el-input .el-input__suffix {
      display: none;
    }
    ::v-deep .el-input .el-input__inner {
      border: none !important;
      visibility: hidden;
      background: transparent;
    }
  }
}
.custom-select-dropdown .el-select-dropdown__item{
  height: 28px !important;
  line-height: 28px !important;
}
</style>
