<template>
  <div>
    <v-tour name="queryListTour" :steps="steps" :options="tourOptions"></v-tour>
    <section class="header-statics" v-loading="topLoading" v-if="selectedTab === '1'">
      <p v-if="!isCommonManager">{{ topData['deptName'] }}</p>
      <ul class="statics-cnt">
        <li v-hasRole="['admin', 'headAdmin', 'headOps', 'headPublic', 'headPrivate']">
          <span>{{ topData['branchNum'] || 0 }}</span>
          <span>支行</span>
        </li>
        <li v-hasRole="roleData">
          <span>{{ topData['outletNum'] || 0 }}</span>
          <span>网点</span>
        </li>
        <li v-if="!noFirstGrid">
          <span>{{ topData['topGridNum'] || 0 }}</span>
          <span>总行行政网格</span>
        </li>
        <li>
          <span>{{ topData['secGridNum'] || 0 }}</span>
          <span>支行行政网格</span>
        </li>
        <li>
          <span>{{ topData['businessNum'] || 0 }}</span>
          <span>企业客户数</span>
        </li>
        <li>
          <span>{{ topData['merchantNum'] || 0 }}</span>
          <span>商户客户数</span>
        </li>
        <li>
          <span>{{ topData['retailNum'] || 0 }}</span>
          <span>个人客户数</span>
        </li>

      </ul>
    </section>
    <section class="header-statics" v-loading="topLoading" v-else>
      <p v-if="!isCommonManager">{{ topOtherData['deptName'] }}</p>
      <ul class="statics-cnt">
        <li v-hasRole="['admin', 'headAdmin', 'headOps', 'headPublic', 'headPrivate']">
          <span>{{ topOtherData['branchNum'] || 0 }}</span>
          <span>支行</span>
        </li>
        <li v-hasRole="roleData">
          <span>{{ topOtherData['outletNum'] || 0 }}</span>
          <span>网点</span>
        </li>
        <li v-if="selectedTab === '2'">
          <span>{{ topOtherData['drawGridNum'] || 0 }}</span>
          <span>自绘地图网格</span>
        </li>
        <li v-else>
          <span>{{ topOtherData['virtualGridNum'] || 0 }}</span>
          <span>自建名单网格</span>
        </li>
        <li>
          <span>{{ topOtherData['businessNum'] || 0 }}</span>
          <span>企业客户数</span>
        </li>
        <li>
          <span>{{ topOtherData['merchantNum'] || 0 }}</span>
          <span>商户客户数</span>
        </li>
        <li>
          <span>{{ topOtherData['retailNum'] || 0 }}</span>
          <span>个人客户数</span>
        </li>

      </ul>
    </section>
    <div class="grid-wrap">
      <el-radio-group v-model="selectedTab" class="header-radio" @change="onTabChange">
        <el-radio-button label="1">行政网格</el-radio-button>
        <el-radio-button label="2">自绘地图网格</el-radio-button>
        <el-radio-button label="3">自建名单网格</el-radio-button>
      </el-radio-group>
      <div class="grid-cnt">
        <el-form class="select-container" :class="{ 'is-more-query': queryLength >= 3 }" label-width="80px"
          label-position="left" v-if="showSearch">
          <div class="search-vl">
            <template v-if="selectedTab === '1' && gridLevel === '1'">
              <el-form-item label="总行行政网格名称" label-width="140px">
                <el-input v-model="queryParams.gridName" size="small" placeholder="请输入" clearable @clear="onSearch"
                  @keyup.enter.native="onSearch" />
              </el-form-item>
              <el-form-item label="责任类型">
                <el-select style="width: 100%" v-model="queryParams.gridDutyType" placeholder="请选择" size="small" clearable
                  @change="onSearch" @clear="onSearch">
                  <el-option v-for="(item, index) in dutyTypeOptions" :key="index" :label="item.label" :value="item.value"
                    :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="关联支行" v-if="isAdmin">
                <el-input size="small" v-model="queryParams.relateBranchName" placeholder="请输入" clearable
                  @clear="onSearch" @keyup.enter.native="onSearch" />
              </el-form-item>
              <el-form-item label="业务部门归属" prop="opsDept" label-width="100px"
                v-if="department >= 3 && (!isCollapse || queryLength <= 3)">
                <el-select v-model="queryParams.opsDept" placeholder="请选择" clearable size="small" style="width: 100%"
                  @clear="onSearch" @change="onSearch">
                  <el-option v-for="item in businessBelongList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </template>
            <template v-if="selectedTab === '1' && gridLevel === '2'">
              <el-form-item label="支行行政网格名称" label-width="140px">
                <el-input v-model="queryParams.gridName" size="small" placeholder="请输入" clearable @clear="onSearch"
                  @keyup.enter.native="onSearch" />
              </el-form-item>
              <el-form-item label="责任类型">
                <el-select style="width: 100%" v-model="queryParams.gridDutyType" placeholder="请选择" size="small" clearable
                  @change="onSearch" @clear="onSearch">
                  <el-option v-for="(item, index) in dutyTypeOptions" :key="index" :label="item.label" :value="item.value"
                    :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="关联支行" v-if="isAdmin">
                <el-input size="small" v-model="queryParams.relateBranchName" placeholder="请输入" clearable
                  @clear="onSearch" @keyup.enter.native="onSearch" />
              </el-form-item>
              <el-form-item label="关联网点" v-if="!isCollapse && !isCommonManager">
                <el-input size="small" v-model="queryParams.relateOutletName" placeholder="请输入" clearable
                  @clear="onSearch" @keyup.enter.native="onSearch" />
              </el-form-item>
              <el-form-item label="关联客户经理号" label-width="110px" v-if="!isCollapse && !isCommonManager">
                <el-input size="small" v-model="queryParams.relateUserName" placeholder="请输入" clearable @clear="onSearch"
                  @keyup.enter.native="onSearch" />
              </el-form-item>
              <el-form-item label="所属总行行政网格名称" label-width="125px" v-if="!isCollapse">
                <el-input size="small" v-model="queryParams.parentGridName" placeholder="请输入" clearable @clear="onSearch"
                  @keyup.enter.native="onSearch" />
              </el-form-item>
              <el-form-item label="业务部门归属" prop="opsDept" label-width="100px"
                v-if="department >= 3 && (!isCollapse || queryLength <= 3)">
                <el-select v-model="queryParams.opsDept" placeholder="请选择" clearable size="small" style="width: 100%"
                  @clear="onSearch" @change="onSearch">
                  <el-option v-for="item in businessBelongList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </template>
            <template v-if="selectedTab === '2'">
              <el-form-item label="责任类型">
                <el-select style="width: 100%" v-model="queryParams.gridDutyType" placeholder="请选择" size="small" clearable
                  @change="onSearch" @clear="onSearch">
                  <el-option v-for="(item, index) in dutyTypeOptions" :key="index" :label="item.label" :value="item.value"
                    :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="网格名称">
                <el-input size="small" v-model="queryParams.gridName" placeholder="请输入" clearable @clear="onSearch"
                  @keyup.enter.native="onSearch" />
              </el-form-item>
              <el-form-item label="关联客户经理号" label-width="110px" v-hasRole="roleData">
                <el-input size="small" v-model="queryParams.relateUserName" placeholder="请输入" clearable @clear="onSearch"
                  @keyup.enter.native="onSearch" />
              </el-form-item>
              <el-form-item label="业务部门归属" prop="opsDept" label-width="100px"
                v-if="department >= 3 && (!isCollapse || queryLength <= 3)">
                <el-select v-model="queryParams.opsDept" placeholder="请选择" clearable size="small" style="width: 100%"
                  @clear="onSearch" @change="onSearch">
                  <el-option v-for="item in businessBelongList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </template>
            <template v-if="selectedTab === '3'">
              <el-form-item label="客户类型">
                <el-select style="width: 100%" v-model="queryParams.custType" placeholder="请选择" size="small" clearable
                  @clear="onSearch" @change="onSearch">
                  <el-option v-for="(item, index) in clientTypeOptions" :key="index" :label="item.label"
                    :value="item.value"
                    :disabled="(isPrivate && item.value === '2') || (isPublic && item.value !== '2')"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="网格类型">
                <el-select style="width: 100%" v-model="queryParams.gridType" placeholder="请选择" size="small" clearable
                  @clear="onSearch" @change="onSearch">
                  <el-option v-for="(item, index) in gridTypeOptions" :key="index" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="网格名称">
                <el-input size="small" v-model="queryParams.gridName" placeholder="请输入" clearable @clear="onSearch"
                  @keyup.enter.native="onSearch" />
              </el-form-item>
              <el-form-item label="责任类型" v-if="!isCollapse">
                <el-select style="width: 100%" v-model="queryParams.gridDutyType" placeholder="请选择" size="small" clearable
                  @change="onSearch" @clear="onSearch">
                  <el-option v-for="(item, index) in dutyTypeOptions" :key="index" :label="item.label" :value="item.value"
                    :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="关联客户经理号" label-width="110px" v-hasRole="roleData" v-if="!isCollapse">
                <el-input size="small" v-model="queryParams.relateUserName" placeholder="请输入" clearable @clear="onSearch"
                  @keyup.enter.native="onSearch" />
              </el-form-item>
              <el-form-item label="业务部门归属" prop="opsDept" label-width="100px"
                v-if="department >= 3 && (!isCollapse || queryLength <= 3)">
                <el-select v-model="queryParams.opsDept" placeholder="请选择" clearable size="small" style="width: 100%"
                  @clear="onSearch" @change="onSearch">
                  <el-option v-for="item in businessBelongList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </template>
            <!-- <el-form-item label="归属机构" class="org-cell">
              <org-select ref="orgSelect" :select-value="belongOrg" @onTreeSelect="onTreeSelect" @clear="onTreeSelect('')"></org-select>
            </el-form-item> -->
          </div>
          <div class="search-operate">
            <el-button type="primary" size="small" class="common-search-btn" @click="onSearch">查询</el-button>
            <el-button size="small" class="common-reset-btn" type="plain" @click="resetFilters">重置</el-button>
            <el-button size="small" type="text" v-if="queryLength > 3" @click="doCollapse">{{ !isCollapse ? '收起' : '展开' }}
              <i :class="isCollapse ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
            </el-button>
          </div>
        </el-form>
        <div class="operate-wrap" :class="{ 'vir-operate': selectedTab === '3' }">
          <!-- <menu-group-radio v-if="selectedTab === '1'" :menu-arr="menuArr(noFirstGrid)" :defaultMenu="activeIndex" @onMenuSelect="handleSelect"></menu-group-radio> -->
          <el-radio-group v-model="gridLevel" @change="handleSelect" size="medium" v-if="selectedTab === '1'">
            <el-radio-button label="1" value type="text" v-if="!noFirstGrid" id="zhwlBtn">总行行政网格</el-radio-button>
            <el-radio-button label="2" type="text" id="ejwlBtn">支行行政网格</el-radio-button>
          </el-radio-group>
          <el-radio-group v-model="featureTab" @change="handleViewTabChange" size="medium" v-if="selectedTab === '2'"
            style="visibility:hidden">
            <el-radio-button label="1" value type="text">列表视角</el-radio-button>
            <el-radio-button label="2" type="text">地图视角</el-radio-button>
          </el-radio-group>
          <section class="operate-vr">
            <right-toolbar :showSearch.sync="showSearch" :columns="filterColumns" style="margin-right: 24px"
              @queryTable="resetFilters" />
            <el-button type="primary" v-if="showAddBtn" icon="el-icon-plus" size="small" @click="setupFirGrid">{{
              addBtnName }}</el-button>
            <el-button type="primary" v-if="showBatch" icon="el-icon-delete" size="small"
              @click="deleteBatch">批量删除</el-button>
          </section>
        </div>
        <section class="table-wrap">
          <section v-if="selectedTab === '1'" class="table-wrap">
            <el-table v-if="gridLevel === '1'" v-loading="loading" :data="tableData" class="common-table-cnt"
              @sort-change="handleSortChange" @selection-change="handleSelectChange" ref="tableRef" key="1"
              @row-click="clickRow" :row-style="rowStyle" :row-class-name="rowClassNameMethod" max-height="300">
              <el-table-column v-if="!isCommonManager" type="selection" width="55" :selectable="isRowSelectable" />
              <el-table-column v-if="firstCol[0].visible" prop="creator" label="创建者" show-overflow-tooltip />
              <el-table-column v-if="firstCol[1].visible" prop="gridName" label="总行行政网格名称" min-width="140px" show-overflow-tooltip />
              <el-table-column v-if="firstCol[9].visible" prop="regionNames" label="关联行政区域" show-overflow-tooltip />
              <el-table-column v-if="firstCol[2].visible" prop="opsDeptName" label="业务部门归属" show-overflow-tooltip />
              <el-table-column v-if="firstCol[3].visible" prop="gridDutyTypeDes" width="100px" label="责任类型">
              </el-table-column>
              <el-table-column v-if="firstCol[4].visible" prop="relateBranchNames" label="关联支行"
                show-overflow-tooltip></el-table-column>
              <el-table-column v-if="firstCol[5].visible" prop="secGridNum" sortable="secGridNum" label="支行行政网格个数"
                width="180px">
                <template v-if="gridLevel === '1'" #default="scope">
                  <span style="color: #4886f8; margin-right: 8px">{{ scope.row.secGridNameLen }}</span>
                  <el-popover v-if="Number(scope.row.secGridNameLen) > 0" placement="bottom" title="支行行政网格名称" min-width="140px"
                    trigger="click" :content="scope.row.secGrids">
                    <el-button slot="reference" type="text">详情</el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column v-if="firstCol[8].visible" prop="businessCount" label="企业客户数" width="150px">
                <template v-if="gridLevel === '1'" #default="scope">
                  <el-button type="text" :disabled="isPrivate" @click="clientkeeperFeature(scope.row, '2')">{{
                    scope.row.businessCount }}</el-button>
                </template>
              </el-table-column>
              <el-table-column v-if="firstCol[7].visible" prop="merchantCount" label="商户客户数" width="150px"
                class-name="custColum">
                <template v-if="gridLevel === '1'" #default="scope">
                  <el-button type="text" :disabled="isPublic" @click="clientkeeperFeature(scope.row, '1')">{{
                    scope.row.merchantCount }}</el-button>
                </template>
              </el-table-column>
              <el-table-column v-if="firstCol[6].visible" prop="retailCount" label="个人客户数" width="150px">
                <template v-if="gridLevel === '1'" #default="scope">
                  <el-button type="text" :disabled="isPublic" @click="clientkeeperFeature(scope.row, '0')">{{
                    scope.row.retailCount }}</el-button>
                </template>
              </el-table-column>


              <el-table-column label="操作" width="200px" v-if="!isCommonManager" fixed="right">
                <template #default="scope">
                  <div class="myOperate">
                    <el-button type="text" v-if="scope.row.isEdit" @click.prevent="editFir(scope.row)">编辑总行</el-button>
                    <el-button v-if="scope.row.isCreate" type="text" @click.prevent="goSco(scope.row)">去建支行
                    </el-button>
                    <el-popconfirm v-if="scope.row.isEdit" title="确定删除吗？" icon="el-icon-info" iconColor="red"
                      @confirm="deleteGrid(scope.row)">
                      <el-button slot="reference" style="margin-left: 8px; color: #f24957" type="text">删除</el-button>
                    </el-popconfirm>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination style="margin-bottom: 30px" layout="total, prev, pager, next, sizes"
              v-if="total > 0 && gridLevel === '1'" :total="total" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" :page-sizes="[5, 10, 20, 50]" @pagination="handleCurrentChange" />
            <section v-if="gridLevel === '1'" class="map-container" id="mapDetail">
              <section class="detail-info" v-if="detailModalVisible">
                <h4>总行行政网格详情<i @click="detailModalVisible = !detailModalVisible" class="el-icon-close"></i></h4>
                <ul class="map-cnt">
                  <li>
                    <span class="des-vl">创建者</span>
                    <span class="des-vr">{{ mapDetailInfo.creator }}</span>
                  </li>
                  <li>
                    <span class="des-vl">总行行政网格名称</span>
                    <span class="des-vr">{{ mapDetailInfo.gridName }}</span>
                  </li>
                  <li>
                    <span class="des-vl">业务部门归属</span>
                    <span class="des-vr">{{ mapDetailInfo.opsDeptName }}</span>
                  </li>
                  <li>
                    <span class="des-vl">责任类型</span>

                    <span class="des-vr">
                      {{ mapDetailInfo.gridDutyTypeDes }}
                    </span>
                  </li>
                  <li>
                    <span class="des-vl">关联支行</span>
                    <span class="des-vr">{{ mapDetailInfo.relateBranchNames }}</span>
                  </li>
                  <li>
                    <span class="des-vl">支行网络个数</span>
                    <span class="des-vr">{{ mapDetailInfo.secGridNum }}</span>
                  </li>
                  <li>
                    <span class="des-vl">企业客户数</span>
                    <span class="des-vr">{{ mapDetailInfo.businessCount }}</span>
                  </li>
                  <li>
                    <span class="des-vl">商户客户数</span>
                    <span class="des-vr">{{ mapDetailInfo.merchantCount }}</span>
                  </li>

                  <li>
                    <span class="des-vl">个人客户数</span>
                    <span class="des-vr">{{ mapDetailInfo.retailCount }}</span>
                  </li>

                </ul>
              </section>
              <div v-loading="mapLoading" class="map-box">
                <el-select v-model="mapOpsDeptSpec" placeholder="请选择" size="small" class="map-search" @clear="onQuery"
                  @change="onQuery" clearable v-if="department >= 3">
                  <el-option v-for="item in businessBelongList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
                <iframe name="bdmap" id="bdmap" :src="getIframeSrc()" style="width: 100%; height: 650px" />
              </div>
            </section>
            <el-table v-if="gridLevel === '2'" v-loading="loading" :data="tableData" class="common-table-cnt"
              @sort-change="handleSortChange" @selection-change="handleSelectChange" ref="tableRef" key="2"
              @row-click="clickRow" :row-style="rowStyle" :row-class-name="rowClassNameMethod">
              <el-table-column v-if="!isCommonManager" type="selection" width="55" :selectable="isRowSelectable" />
              <el-table-column v-if="secondCol[0].visible" prop="creator" label="创建者" show-overflow-tooltip />
              <el-table-column v-if="secondCol[1].visible" prop="gridName" label="支行行政网格名称" min-width="140px" show-overflow-tooltip />
              <el-table-column v-if="secondCol[11].visible" prop="regionNames" label="关联行政区域" show-overflow-tooltip />
              <el-table-column v-if="secondCol[2].visible" prop="opsDeptName" label="业务部门归属" show-overflow-tooltip />
              <el-table-column v-if="secondCol[3].visible" prop="gridDutyTypeDes" width="100px" label="责任类型">
                <template #default="scope">
                  <span>{{ scope.row.gridDutyTypeDes }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="secondCol[4].visible" prop="relateBranchNames" label="关联支行" show-overflow-tooltip />
              <el-table-column v-if="secondCol[5].visible" prop="relateOutletNames" label="关联网点" show-overflow-tooltip />
              <el-table-column v-if="secondCol[6].visible" prop="relateUserNames" label="关联客户经理" show-overflow-tooltip />
              <el-table-column v-if="secondCol[7].visible" prop="parentGridName" label="所属总行行政网格" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ scope.row.parentGridName }}</span>
                </template>
              </el-table-column>

              <el-table-column v-if="secondCol[10].visible" prop="businessCount" width="150px" label="企业客户数">
                <template #default="scope">
                  <el-button type="text" :disabled="isPrivate" @click="clientkeeperFeature(scope.row, '2')">{{
                    scope.row.businessCount }}</el-button>
                </template>
              </el-table-column>
              <el-table-column v-if="secondCol[9].visible" prop="merchantCount" width="150px" label="商户客户数">
                <template #default="scope">
                  <el-button type="text" :disabled="isPublic" @click="clientkeeperFeature(scope.row, '1')">{{
                    scope.row.merchantCount }}</el-button>
                </template>
              </el-table-column>
              <el-table-column v-if="secondCol[8].visible" prop="retailCount" width="150px" label="个人客户数">
                <template #default="scope">
                  <el-button type="text" :disabled="isPublic" @click="clientkeeperFeature(scope.row, '0')">{{
                    scope.row.retailCount }}</el-button>
                </template>
              </el-table-column>


              <el-table-column label="操作" width="120px" v-if="!isCommonManager" fixed="right">
                <template #default="scope">
                  <div class="myOperate">
                    <el-button type="text" v-if="scope.row.isEdit" style="margin-right: 8px"
                      @click.prevent="editSco(scope.row)">编辑支行</el-button>
                    <el-popconfirm title="确定删除吗？" v-if="scope.row.isEdit" icon="el-icon-info" iconColor="red"
                      @confirm="deleteGrid(scope.row)">
                      <el-button slot="reference" type="text" style="color: #f24957">删除</el-button>
                    </el-popconfirm>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination style="margin-bottom: 30px" layout="total, prev, pager, next, sizes"
              v-if="total > 0 && gridLevel === '2'" :total="total" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" :page-sizes="[5, 10, 20, 50]" @pagination="handleCurrentChange" />
            <section v-if="gridLevel === '2'" class="map-container" id="zhMapDetail">
              <section class="detail-info" v-if="detailModalVisible">
                <h4>支行行政网格详情<i @click="detailModalVisible = !detailModalVisible" class="el-icon-close"></i></h4>
                <ul class="map-cnt">
                  <li>
                    <span class="des-vl">创建者</span>
                    <span class="des-vr">{{ mapDetailInfo.creator }}</span>
                  </li>
                  <li>
                    <span class="des-vl">支行行政网格名称</span>
                    <span class="des-vr">{{ mapDetailInfo.gridName }}</span>
                  </li>
                  <li>
                    <span class="des-vl">业务部门归属</span>
                    <span class="des-vr">{{ mapDetailInfo.opsDeptName }}</span>
                  </li>
                  <li>
                    <span class="des-vl">责任类型</span>
                    <span class="des-vr">{{ mapDetailInfo.gridDutyTypeDes }}</span>
                  </li>
                  <li>
                    <span class="des-vl">关联支行</span>
                    <span class="des-vr">{{ mapDetailInfo.relateBranchNames }}</span>
                  </li>
                  <li>
                    <span class="des-vl">关联网点</span>
                    <span class="des-vr">{{ mapDetailInfo.relateOutletNames }}</span>
                  </li>
                  <li>
                    <span class="des-vl">关联客户经理</span>
                    <span class="des-vr">{{ mapDetailInfo.relateUserNames }}</span>
                  </li>
                  <li>
                    <span class="des-vl">所属总行行政网格</span>
                    <span class="des-vr">{{ mapDetailInfo.parentGridName }}</span>
                  </li>
                  <li>
                    <span class="des-vl">个人客户数</span>
                    <span class="des-vr">{{ mapDetailInfo.retailCount }}</span>
                  </li>
                  <li>
                    <span class="des-vl">商户数</span>
                    <span class="des-vr">{{ mapDetailInfo.merchantCount }}</span>
                  </li>
                  <li>
                    <span class="des-vl">企业数</span>
                    <span class="des-vr">{{ mapDetailInfo.businessCount }}</span>
                  </li>
                </ul>
              </section>
              <div v-loading="mapLoading" class="map-box">
                <el-select v-model="mapOpsDeptSpec" placeholder="请选择" size="small" class="map-search" @clear="onQuery"
                  @change="onQuery" clearable v-if="department >= 3">
                  <el-option v-for="item in businessBelongList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
                <iframe name="bdmap" id="zhBdmap" v-loading="mapLoading" :src="getIframeSrc()"
                  style="width: 100%; height: 650px" />
              </div>
            </section>
          </section>
          <section v-if="selectedTab === '2'" class="table-wrap">
            <el-table v-loading="loading" :data="featureData" class="common-table-cnt" @sort-change="handleSortChange"
              @selection-change="handleSelectChange" ref="tableRef" key="3" @row-click="clickRow" :row-style="rowStyle"
              :row-class-name="rowClassNameMethod" max-height="296">
              <el-table-column v-if="!isCommonManager" type="selection" width="55" :selectable="isRowSelectable" />
              <el-table-column prop="creator" label="创建者" width="150px" v-if="featureCol[0].visible"
                show-overflow-tooltip></el-table-column>
              <el-table-column prop="gridName" label="网格名称" width="150px" v-if="featureCol[1].visible"
                show-overflow-tooltip></el-table-column>
              <el-table-column v-if="featureCol[2].visible" width="150px" prop="opsDeptName" label="业务部门归属"
                show-overflow-tooltip />
              <el-table-column prop="gridDutyTypeDes" label="责任类型" v-if="featureCol[3].visible"> </el-table-column>
              <el-table-column prop="branchNames" label="关联支行" width="200px" v-if="featureCol[4].visible"
                show-overflow-tooltip></el-table-column>
              <el-table-column prop="outletNames" label="关联网点" width="200px" v-if="featureCol[5].visible"
                show-overflow-tooltip></el-table-column>
              <el-table-column prop="userNames" label="客户经理" width="200px" v-if="featureCol[6].visible"
                show-overflow-tooltip> </el-table-column>

              <el-table-column v-if="featureCol[9].visible" prop="businessCount" width="150px" label="企业客户数">
                <template #default="scope">
                  <el-button type="text" :disabled="isPrivate" @click="clientkeeperFeature(scope.row, '2')">{{
                    scope.row.businessCount }}</el-button>
                </template>
              </el-table-column>
              <el-table-column v-if="featureCol[8].visible" prop="merchantCount" width="150px" label="商户客户数">
                <template #default="scope">
                  <el-button type="text" :disabled="isPublic" @click="clientkeeperFeature(scope.row, '1')">{{
                    scope.row.merchantCount }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="retailCount" v-if="featureCol[7].visible" label="个人客户数" width="150px">
                <template #default="scope">
                  <el-button type="text" :disabled="isPublic" @click="clientkeeperFeature(scope.row, '0')">{{
                    scope.row.retailCount }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="operate" label="操作" v-if="!isCommonManager" width="120px" fixed="right">
                <template #default="scope">
                  <div class="myOperate">
                    <el-button type="text" style="margin-right: 8px" v-if="scope.row.isEdit"
                      @click.prevent="editFeature(scope.row)">编辑</el-button>
                    <el-popconfirm title="确定删除吗？" icon="el-icon-info" iconColor="red" v-if="scope.row.isEdit"
                      @confirm="deleteGrid(scope.row)">
                      <el-button slot="reference" type="text" style="color: #f24957">删除</el-button>
                    </el-popconfirm>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination style="margin-bottom: 30px" layout="total, prev, pager, next, sizes" v-if="total > 0"
              :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
              :page-sizes="[5, 10, 20, 50]" @pagination="handleCurrentChange" />
          </section>
          <section v-if="selectedTab === '2'" class="map-container">
            <section class="detail-info" v-if="detailModalVisible">
              <h4>自绘地图网格详情<i @click="detailModalVisible = !detailModalVisible" class="el-icon-close"></i></h4>
              <ul class="map-cnt">
                <li>
                  <span class="des-vl">创建者</span>
                  <span class="des-vr">{{ mapDetailInfo.creator }}</span>
                </li>
                <li>
                  <span class="des-vl">网格名称</span>
                  <span class="des-vr">{{ mapDetailInfo.gridName }}</span>
                </li>
                <li>
                  <span class="des-vl">业务部门归属</span>
                  <span class="des-vr">{{ mapDetailInfo.opsDeptName }}</span>
                </li>
                <li>
                  <span class="des-vl">责任类型</span>

                  <span class="des-vr">
                    {{ mapDetailInfo.gridDutyTypeDes }}
                  </span>
                </li>
                <li>
                  <span class="des-vl">关联支行</span>
                  <span class="des-vr">{{ mapDetailInfo.branchNames }}</span>
                </li>
                <li>
                  <span class="des-vl">关联网点</span>
                  <span class="des-vr">{{ mapDetailInfo.outletNames }}</span>
                </li>
                <li>
                  <span class="des-vl">客户经理</span>
                  <span class="des-vr">{{ mapDetailInfo.userNames }}</span>
                </li>
                <li>
                  <span class="des-vl">企业客户数</span>
                  <span class="des-vr">{{ mapDetailInfo.businessCount }}</span>
                </li>
                <li>
                  <span class="des-vl">商户客户数</span>
                  <span class="des-vr">{{ mapDetailInfo.merchantCount }}</span>
                </li>

                <li>
                  <span class="des-vl">个人客户数</span>
                  <span class="des-vr">{{ mapDetailInfo.retailCount }}</span>
                </li>

              </ul>
            </section>
            <div v-loading="mapLoading" class="map-box">
              <el-select v-model="mapOpsDeptSpec" placeholder="请选择" size="small" class="map-search" @clear="onQuery"
                @change="onQuery" clearable v-if="department >= 3">
                <el-option v-for="item in businessBelongList" :key="item.key" :label="item.label" :value="item.key" />
              </el-select>
              <iframe name="featuremap" :src="getIframeSrc()" style="width: 100%; height: 650px" />
            </div>
          </section>
          <section v-if="selectedTab === '3'" class="table-wrap">
            <el-table v-loading="loading" :data="virtualData" class="common-table-cnt" @sort-change="handleSortChange"
              @selection-change="handleSelectChange" ref="tableRef" key="4" max-height="540">
              <el-table-column v-if="!isCommonManager" type="selection" width="55" :selectable="isRowSelectable" />
              <el-table-column prop="creator" label="创建者" width="150px" v-if="virCol[0].visible"
                show-overflow-tooltip></el-table-column>
              <el-table-column prop="gridName" label="网格名称" width="150px" v-if="virCol[1].visible"
                show-overflow-tooltip></el-table-column>
              <el-table-column v-if="virCol[2].visible" prop="opsDeptName" width="150px" label="业务部门归属"
                show-overflow-tooltip />
              <el-table-column prop="gridDutyTypeDes" label="责任类型" v-if="virCol[3].visible">
                <template #default="scope">
                  <span>{{ scope.row.gridDutyTypeDes }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="branchNames" label="关联支行" width="200px" v-if="virCol[4].visible"
                show-overflow-tooltip></el-table-column>
              <el-table-column prop="outletNames" label="关联网点" width="200px" v-if="virCol[5].visible"
                show-overflow-tooltip></el-table-column>
              <el-table-column prop="userNames" label="客户经理" width="200px" v-if="virCol[6].visible" show-overflow-tooltip>
              </el-table-column>

              <el-table-column v-if="virCol[9].visible" prop="businessCount" width="150px" label="企业客户数">
                <template #default="scope">
                  <el-button type="text" :disabled="isPrivate" @click="clientkeeperFeature(scope.row, '2')">{{
                    scope.row.businessCount }}</el-button>
                </template>
              </el-table-column>
              <el-table-column v-if="virCol[8].visible" prop="merchantCount" width="150px" label="商户客户数">
                <template #default="scope">
                  <el-button type="text" :disabled="isPublic" @click="clientkeeperFeature(scope.row, '1')">{{
                    scope.row.merchantCount }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="retailCount" v-if="virCol[7].visible" label="个人客户数" width="150px">
                <template #default="scope">
                  <el-button type="text" :disabled="isPublic" @click="clientkeeperFeature(scope.row, '0')">{{
                    scope.row.retailCount }}</el-button>
                </template>
              </el-table-column>


              <el-table-column prop="gridType" v-if="virCol[10].visible" label="网格类型">
                <template #default="scope">
                  <p>{{ scope.row.gridType | filterGridType }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="custTypes" v-if="virCol[11].visible" label="客户类型" width="120px">
                <template #default="scope">
                  <span>{{ scope.row.custTypes }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="operate" label="操作" width="120px" fixed="right">
                <template #default="scope">
                  <el-button type="text" style="margin-right: 8px" v-if="scope.row.isEdit"
                    @click.prevent="editNets(scope.row)">编辑</el-button>
                  <el-popconfirm title="确定删除吗？" icon="el-icon-info" v-if="scope.row.isEdit" iconColor="red"
                    @confirm="deleteGrid(scope.row)">
                    <el-button slot="reference" type="text" style="color: #f24957">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <pagination style="margin-bottom: 30px" layout="total, prev, pager, next, sizes" v-if="total > 0"
              :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
              @pagination="handleCurrentChange" />
          </section>
        </section>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="详情">
      <div v-if="selectedItem">
        <p>{{ selectedItem.relatedManager }}</p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getGridRegionCoord } from '@/api/grid/draw-area'
import { griddeptnum, delGrid, getVirtualgrid, deleteVirtual, getGrid, getFeaturegrid, featureGridDelete } from '@/api/grid/list/gridlist.js'
import OrgSelect from './compontent/org-select'
import { cloneDeep, isEmpty, omit, size } from 'lodash'
import { custTypeMap, rolesInfoArr, gridTypeOptions, menuArr, gridDutyTypeMap } from './constant-info'
import { mapGetters } from 'vuex'
import MenuGroupRadio from '@/components/Common/menu-group-radio'
import WKT from "terraformer-wkt-parser";
import { businessBelongList } from '../utils';

let initQueryInfo = {
  pageNum: 1,
  pageSize: 5,
  gridDutyType: '',
  gridType: '',
  relateBranchName: '',
  relateOutletName: '',
  relateUserName: '',
  custManagerList: '',
  custType: '',
  orderByColumn: '',
  userNames: '',
  branchNames: '',
  outletNames: '',
  branchNames: '',
  gridDutyType: '',
  gridName: '',
  userName: '',
  relateUserName: '',
  layerId: '',
  parentGridName: '',
  opsDept: '',
}
let that;
export default {
  components: { OrgSelect, MenuGroupRadio },
  filters: {
    getStr(arr) {
      if (isEmpty(arr)) {
        return ''
      } else {
        return arr.join(',')
      }
    },
    filterGridType(val) {
      if (!val) return '-'
      const data = that.selectedTab !== '2' ? gridTypeOptions : that.layerOptions;
      return data.find((ot) => ot.value === val)?.label ?? ''
    },
    filterCustType(val) {
      if (!val) return '-'
      return custTypeMap[val]
    }
  },
  data() {
    return {
      steps: [

      ],
      tourOptions: {
        highlight: true,
        labels: {
          buttonSkip: '跳过',
          buttonPrevious: '上一步',
          buttonNext: '下一步',
          buttonStop: '完成'
        },
        enabledButtons: {
          buttonSkip: true,
          buttonPrevious: true,
          buttonNext: true,
          buttonStop: true,
        },
        useKeyboardNavigation: true,
        startTime: 0,
        stopOnTargetNotFound: true,
        debug: false,
      },
      businessBelongList: businessBelongList,
      // 遮罩层
      topLoading: false,
      loading: false,
      mapLoading: false,
      detailModalVisible: false,
      addBtnName: '新建总行行政网格',
      activeIndex: '1',
      // 选中数组
      queryParams: cloneDeep(initQueryInfo),
      virtualGridName: '',
      gridPattern: '1',
      gridLevel: '1',
      gridTypeOptions,
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      selectedItem: null,
      dialogVisible: false,
      feature: 1,
      selectedTab: '1', // 当前选中的选项
      searchQuery: '',
      topData: [],
      topOtherData: [],
      tableData: [], // 表格数据
      administrativeData: [],
      virtualData: [],
      featureData: [],
      dutyTypeOptions: [
        { value: '1', label: '责任网格' },
        { value: '2', label: '竞争网格' }
      ],
      clientTypeOptions: [
        { value: '0', label: '个人' },
        { value: '1', label: '商户' },
        { value: '2', label: '企业' }
      ],
      filteredDate: [],
      belongOrg: '',
      firstCol: [
        { key: 0, label: `创建者`, visible: true },
        { key: 1, label: `总行行政网格名称`, visible: true },
        { key: 2, label: `业务部门归属`, visible: true },
        { key: 3, label: `责任类型`, visible: true },
        { key: 4, label: `关联支行`, visible: true },
        { key: 5, label: `支行行政网格个数`, visible: true },
        { key: 6, label: `个人客户数`, visible: true },
        { key: 7, label: `商户客户数`, visible: true },
        { key: 8, label: `企业客户数`, visible: true },
        { key: 9, label: `关联行政区域`, visible: true },
      ],
      secondCol: [
        { key: 0, label: `创建者`, visible: true },
        { key: 1, label: `支行行政网格名称`, visible: true },
        { key: 2, label: `业务部门归属`, visible: true },
        { key: 3, label: `责任类型`, visible: true },
        { key: 4, label: `关联支行`, visible: true },
        { key: 5, label: `关联网点`, visible: true },
        { key: 6, label: `关联客户经理`, visible: true },
        { key: 7, label: `所属总行行政网格`, visible: true },
        { key: 8, label: `个人客户数`, visible: true },
        { key: 9, label: `商户客户数`, visible: true },
        { key: 10, label: `企业客户数`, visible: true },
        { key: 11, label: `关联行政区域`, visible: true }
      ],
      virCol: [
        { key: 0, label: `创建者`, visible: true },
        { key: 1, label: `网格名称`, visible: true },
        { key: 2, label: `业务部门归属`, visible: true },
        { key: 3, label: `责任类型`, visible: true },
        { key: 4, label: `关联支行`, visible: true },
        { key: 5, label: `关联网点`, visible: true },
        { key: 6, label: `客户经理`, visible: true },
        { key: 7, label: `个人客户数`, visible: true },
        { key: 8, label: `商户客户数`, visible: true },
        { key: 9, label: `企业客户数`, visible: true },
        { key: 10, label: `网格类型`, visible: true },
        { key: 11, label: `客户类型`, visible: true }
      ],
      featureCol: [
        { key: 0, label: `创建者`, visible: true },
        { key: 1, label: `网格名称`, visible: true },
        { key: 2, label: `业务部门归属`, visible: true },
        { key: 3, label: `责任类型`, visible: true },
        { key: 4, label: `关联支行`, visible: true },
        { key: 5, label: `关联网点`, visible: true },
        { key: 6, label: `客户经理`, visible: true },
        { key: 7, label: `个人客户数`, visible: true },
        { key: 8, label: `商户客户数`, visible: true },
        { key: 9, label: `企业客户数`, visible: true }
      ],
      menuArr,
      queryLength: 0,
      isCollapse: true,
      orderDefault: 'descending',
      mapDetailInfo: {},
      layerOptions: [],
      selection: [],
      featureTab: '1',
      roleData: ['admin', 'branchAdmin', 'headOps', 'headPublic', 'headPrivate'], // 支行管理员 零售部公司部运管部可创建网格
      mapOpsDept: '0',
      mapOpsDeptDefault: '0',
      mapOpsDeptSpec: '',
    }
  },
  beforeCreate() {
    that = this;
  },
  computed: {
    ...mapGetters(['roles']),
    //对公
    //总行
    isHeadAdmin() {
      return this.roles.includes('headAdmin')
    },
    //对公
    isPublic() {
      return this.roles.includes('headPublic')
    },
    //对私
    isPrivate() {
      return this.roles.includes('headPrivate')
    },
    //运管部
    isHeadOps() {
      return this.roles.includes('headOps')
    },
    //支行
    isBranchAdmin() {
      return this.roles.includes('branchAdmin')
    },
    // 客户经理
    isCommonManager() {
      return this.roles.includes('commonManager')
    },
    // 网点主任
    isOutletAdmin() {
      return this.roles.includes('outletAdmin')
    },
    //运管
    isOps() {
      return this.roles.includes('headOps')
    },
    filterColumns() {
      if (this.selectedTab === '3') {
        return this.virCol
      } else {
        return this.gridLevel === '1' ? this.firstCol : this.secondCol
      }
    },
    showAddBtn() {
      if (this.selectedTab === '3') {
        return this.roleData.includes(this.roles[0])
      } else {
        if (this.gridLevel === '1') {
          return ['admin', 'headOps', 'headPublic', 'headPrivate'].includes(this.roles[0])
        } else if (this.gridLevel === '2') {
          return this.roleData.includes(this.roles[0])
        }
      }
    },
    showBatch() {
      if (this.selectedTab === '3') {
        return this.roleData.includes(this.roles[0])
      } else if (this.selectedTab === '2') {
        if (this.featureTab !== '2') {
          return this.roleData.includes(this.roles[0])
        } else {
          return false;
        }
      } else {
        if (this.gridLevel === '1') {
          return this.roleData.includes(this.roles[0])
        } else if (this.gridLevel === '2') {
          return this.roleData.includes(this.roles[0])
        } else {
          return false;
        }
      }
    },
    isAdmin() {
      return this.roles.includes('admin') || this.roles.includes('headAdmin')
    },
    isAfterBranchManage() {
      return this.roles.includes('branchAdmin') || this.roles.includes('outletAdmin')
    },
    noFirstGrid() {
      return this.roles.includes('commonManager') || this.roles.includes('outletAdmin')
    },
    department() {
      if (this.roles.includes('headPrivate')) {
        // 零售部
        return '0'
      } else if (this.roles.includes('headPublic')) {
        // 公司部
        return '1'
      } else if (this.roles.includes('headOps')) {
        // 运管部
        return '2'
      } else {
        return '3'
      }
    },
    isTour() {
      return sessionStorage.getItem('isTour')
    },
    isPrevious() {
      return sessionStorage.getItem('isPrevious')
    },
    // ismapTour() {
    //   return JSON.parse(sessionStorage.getItem('ismapTour'))
    // },
  },
  // watch: {
  //   noFirstGrid: {
  //     handler(val) {
  //       if (val) {
  //         this.detailModalVisible = false
  //         this.mapDetailInfo = {}
  //         this.isCollapse = true
  //         this.queryParams.pageNum = 1
  //         this.gridLevel = '2'
  //         this.activeIndex = '2-1'
  //         this.queryLength = this.getQueryFormLen()
  //         this.getGridList()
  //         switch (this.gridLevel) {
  //           case '1':
  //             return (this.addBtnName = '新建总行行政网格')
  //           default:
  //             return (this.addBtnName = '新建支行行政网格')
  //         }
  //       }
  //     },
  //     immediate: true
  //   }
  // },

  created() {
    const { query: { selectedTab, gridLevel } } = this.$route;
    console.log(this.$route)
    if (selectedTab) {
      this.selectedTab = selectedTab;
      this.gridLevel = gridLevel || '1';
      switch (selectedTab) {
        case '2':
          if (this.noFirstGrid) {
            this.gridLevel = '2'
            this.activeIndex = '2-1'
          } else {
            this.gridLevel = '1'
            this.activeIndex = '1-1'
          }
          this.tableData = []
          this.virtualData = []
          this.queryLength = this.getQueryFormLen()
          this.addBtnName = '新建自绘地图网格'
          break;
        case '3':
          if (this.noFirstGrid) {
            this.gridLevel = '2'
            this.activeIndex = '2-1'
          } else {
            this.gridLevel = '1'
            this.activeIndex = '1-1'
          }
          this.featureTab = '1'
          this.tableData = []
          this.featureData = []
          this.queryLength = this.getQueryFormLen()
          this.addBtnName = '新建自建名单网格'
          break;
        default:
          this.featureTab = '1'
          this.virtualData = []
          this.featureData = []
          this.queryLength = this.getQueryFormLen()
          this.addBtnName = '新建总行行政网格'
          break;
      }
      for (let key in this.$route.query) {
        delete this.$route.query[key];
      }
    }else if(this.noFirstGrid){
      this.detailModalVisible = false
          this.mapDetailInfo = {}
          this.isCollapse = true
          this.queryParams.pageNum = 1
          this.gridLevel = '2'
          this.activeIndex = '2-1'
          this.queryLength = this.getQueryFormLen()
          // this.getGridList()
          switch (this.gridLevel) {
            case '1':
              this.addBtnName = '新建总行行政网格'
            default:
              this.addBtnName = '新建支行行政网格'
          }
    }
    this.filteredDate = this.tableData
    this.getTopData()
    this.getGridList()
    window['mapProps'] = (params) => {
      const newArr = params.split(':')
      if (newArr[0] === 'SHOW_DETAIL') {
        const keyName = 'gridId'
        const data = this.selectedTab === '2' ? this.featureData : this.tableData;
        this.mapDetailInfo = data?.find((ot) => Number(ot[keyName]) === Number(newArr[1]))
        console.log(this.mapDetailInfo, 'this.mapDetailInfo')
        this.detailModalVisible = true
      }
    }

    if (this.isTour == '5') {

      if (this.isPublic || this.isPrivate || this.isHeadOps) {
        this.featureTab = '1'
        this.activeIndex = '1-2'
        this.steps = [
          {
            target: '#zhwlBtn',
            content: '<div style="font-size:20px;line-height:25px">网格查询</div><br><span>点击“总行行政网格”、下方可查看地图视角</span>',
            overlay: true,
            params: {
              placement: 'right',
              highlight: true,
              mask: true
            },
          },
          {
            target: '#bdmap',
            content: '<div style="font-size:20px;line-height:25px">网格查询</div><br><span>点击地图上的图形，可出现网格详情信息</span>',
            overlay: true,
            params: {
              placement: 'top',
              highlight: true,
              mask: true,

            },
            before: () => {
              const data = this.selectedTab === '2' ? this.featureData : this.tableData;
              this.mapDetailInfo = data[0]
              this.detailModalVisible = true
            }
          },
          {
            target: '#mapDetail',
            content: '<div style="font-size:20px;line-height:25px">网格查询</div><br><span>点击地图上的图形，可出现网格详情信息</span>',
            overlay: true,
            params: {
              placement: 'top',
              highlight: true,
              mask: true,

            },
            before: () => {
              sessionStorage.removeItem('isTour')
              sessionStorage.removeItem('isPrevious')
            }
          },
        ]
      } else if (this.isBranchAdmin) {
        this.steps = [
          {
            target: '#ejwlBtn',
            content: '<div style="font-size:20px;line-height:25px">网格查询</div><br><span>点击“支行行政网格”、下方可查看地图视角</span>',
            overlay: true,
            params: {
              placement: 'right',
              highlight: true,
              mask: true
            },
          },
          {
            target: '#zhBdmap',
            content: '<div style="font-size:20px;line-height:25px">网格查询</div><br><span>点击地图上的图形，可出现网格详情信息</span>',
            overlay: true,
            params: {
              placement: 'top',
              highlight: true,
              mask: true,

            },
            before: () => {

              const data = this.selectedTab === '2' ? this.featureData : this.tableData;
              this.mapDetailInfo = data[0]
              this.detailModalVisible = true
            }
          },
          {
            target: '#zhMapDetail',
            content: '<div style="font-size:20px;line-height:25px">网格查询</div><br><span>点击地图上的图形，可出现网格详情信息</span>',
            overlay: true,
            params: {
              placement: 'top',
              highlight: true,
              mask: true,

            },
            before: () => {
              sessionStorage.removeItem('isTour')
              sessionStorage.removeItem('isPrevious')
            }
          },
        ]
      }

    } else if (this.isTour == '3') {
      if (this.isPublic || this.isPrivate || this.isHeadOps) {
        this.steps = [
          {
            target: '#nestlist',
            content: '<div style="font-size:20px;line-height:25px">网格查询</div><br><span>支持查看已创建的网格，支持查看网格中客户与客户经理的归属关系。</span>',
            overlay: true,
            params: {
              placement: 'bottom',
              highlight: true,
              mask: true
            }
          },
          {
            target: this.tableData.length > 0 ? '.el-table__body tr:nth-child(2) td:nth-child(9)' : '.custColum',
            content: '<div style="font-size:20px;line-height:25px">网格查询</div><br><span>点击任一网格的客户数（数字）</span>',
            params: {
              placement: 'left',
              highlight: true,
              mask: true,
            },
          },
          {
            target: '.el-table__body tr:nth-child(2) td:nth-child(9)',
            content: '',
            overlay: true,
            before: () => {
              return this.$router.push({ path: '/grid/create/featurecomponent' }).then(() => {
                return new Promise(resolve => {
                  const checkElement = () => {
                    this.clientkeeperFeature(this.tableData[0], '1')
                    if (document.querySelector('#tableWrap')) {
                      resolve()
                    } else {
                      setTimeout(checkElement, 100)
                    }
                  }
                  checkElement()
                })
              })
            }
          },
        ]
      } else if (this.isBranchAdmin) {
        this.steps = [
          {
            target: '#nestlist',
            content: '<div style="font-size:20px;line-height:25px">网格查询</div><br><span>支持查看已创建的网格，支持查看网格中客户与客户经理的归属关系。</span>',
            overlay: true,
            params: {
              placement: 'bottom',
              highlight: true,
              mask: true
            }
          },
          {
            target: '.el-table__header tr th:nth-child(11)',
            content: '<div style="font-size:20px;line-height:25px">网格查询</div><br><span>点击任一网格的客户数（数字）</span>',
            params: {
              placement: 'left',
              highlight: true,
              mask: true,
            },
          },
          {
            target: '.el-table__header tr th:nth-child(11)',
            content: '',
            overlay: true,
            before: () => {
              return this.$router.push({ path: '/grid/create/featurecomponent' }).then(() => {
                return new Promise(resolve => {
                  const checkElement = () => {
                    this.clientkeeperFeature(this.tableData[0], '1')
                    if (document.querySelector('#tableWrap')) {
                      resolve()
                    } else {
                      setTimeout(checkElement, 100)
                    }
                  }
                  checkElement()
                })
              })
            }
          },
        ]
      }

    }

  },
  mounted() {
    this.queryLength = this.getQueryFormLen();
    if (this.isPrivate) {
      this.mapOpsDeptDefault = '0'
    } else if (this.isPublic) {
      this.mapOpsDeptDefault = '1'
    } else if (this.isOps) {
      this.mapOpsDeptDefault = '2'
    } else {
      this.mapOpsDeptDefault = '0'
    }
    if (this.isTour == '3') {
      if (this.isPublic || this.isPrivate || this.isHeadOps) {
        this.gridLevel = '1'
        if (this.isPrevious == 'second') {
          setTimeout(() => {
            this.startTour(1)
          }, 1000)
        } else {
          setTimeout(() => {
            this.startTour(0)
          }, 1000)
        }
      } else if (this.isBranchAdmin) {
        this.gridLevel = '2'
        if (this.isPrevious == 'second') {
          setTimeout(() => {
            this.startTour(1)
          }, 1000)
        } else {
          setTimeout(() => {
            this.startTour(0)
          }, 1000)
        }
      }


    } else if (this.isTour == '5') {
      if (this.isPublic || this.isPrivate || this.isHeadOps) {
        this.gridLevel = '1'
        setTimeout(() => {
          this.startTour(0)
        }, 1000)
      } else if (this.isBranchAdmin) {
        this.gridLevel = '2'
        setTimeout(() => {
          this.startTour(0)
        }, 1000)
      }

    }
  },
  methods: {
    startTour(index) {
      this.$tours['queryListTour'].start(index)
    },
    rowStyle({ row }) {
      if (row.highlight) {
        // console.log(this.$refs.tableRef)
        return {
          background: 'rgba(32, 148, 255,0.3)',
          // cursor:'pointer',
        }
      }
    },

    rowClassNameMethod({ row }) {
      // console.log(row)
      if (row.highlight) {
        return 'rowHighLight'
      }
    },
    // 点击行
    clickRow(row, column) {
      // console.log(column)
      // if(column.label !='操作'){
      const currentGridId = row.gridId;
      let data = this.selectedTab == '1' ? this.tableData : this.featureData;
      let key = this.selectedTab == '1' ? 'tableData' : 'featureData';
      this[key] = this[key].map(item => {
        if (item.gridId == row.gridId) {
          item.highlight = !item.highlight;
        }
        return item;
      })
      const selection = this[key].filter(item => item.highlight)
      if (this.selectedTab == '1') {
        window.frames['bdmap'].setBatchFillColor(selection, currentGridId)
      }
      if (this.selectedTab == '2') {
        window.frames['featuremap'].setBatchFillColor(selection, currentGridId)
      }
      // }
    },

    getIframeSrc() {
      const baseUrl = "/baidu/grid.html"
      const queryString = new URLSearchParams({ 'NODE_ENV': process.env.NODE_ENV }).toString()
      return `${baseUrl}?${queryString}`
    },
    getTopData() {
      this.topLoading = true
      griddeptnum({
        tabGridType: this.selectedTab
      }).then((res) => {
        for (const item in res.data) {
          if (res.data[item] === null) {
            res.data[item] = 0
          }
        }
        this.userDeprName = res.data?.userDeprName || '-'
        // if (res.data.topGridNum || res.data.secGridNum) {
        //   this.topData = res.data
        // } else {
        //   this.topOtherData = res.data
        // }
        this.topData = res.data
        this.topOtherData = res.data
        this.topLoading = false
      })
    },
    onTreeSelect(val) {
      this.belongOrg = val
      this.onSearch()
    },
    getQueryFormLen() {
      if (this.isAdmin) {
        return size(rolesInfoArr['headAdmin'][this.selectedTab][this.gridLevel])
      } else if (this.isAfterBranchManage) {
        return size(rolesInfoArr['branchAdmin'][this.selectedTab][this.gridLevel])
      } else if (this.isCommonManager) {
        return size(rolesInfoArr['commonManager'][this.selectedTab][this.gridLevel])
      } else if (this.department < 3) {
        return size(rolesInfoArr['department'][this.selectedTab][this.gridLevel])
      }
    },
    handleCurrentChange(obj) {
      this.queryParams.pageNum = obj.page
      if (obj.sizeChange) {
        this.queryParams.pageNum = 1
      }
      this.getGridList()
    },
    onTabChange(val) {
      if (val == '3') {
        initQueryInfo.pageSize = 10
      } else {
        initQueryInfo.pageSize = 5
      }
      this.isCollapse = true
      this.queryParams = cloneDeep(initQueryInfo)
      this.total = 0
      this.selection = []
      // this.mapOpsDept = '0'
      this.mapOpsDept = this.mapOpsDeptDefault;
      switch (val) {
        case '2':
          if (this.noFirstGrid) {
            this.gridLevel = '2'
            this.activeIndex = '2-1'
          } else {
            this.gridLevel = '1'
            this.activeIndex = '1-1'
          }
          this.tableData = []
          this.virtualData = []
          this.queryLength = this.getQueryFormLen()
          this.addBtnName = '新建自绘地图网格'
          this.getTopData()
          this.getGridList()
          this.getlayerData()
          return
        case '3':
          if (this.noFirstGrid) {
            this.gridLevel = '2'
            this.activeIndex = '2-1'
          } else {
            this.gridLevel = '1'
            this.activeIndex = '1-1'
          }
          this.featureTab = '1'
          this.tableData = []
          this.featureData = []
          this.queryLength = this.getQueryFormLen()
          this.addBtnName = '新建自建名单网格'
          this.getTopData()
          this.getGridList()
          return
        default:
          this.featureTab = '1'
          this.virtualData = []
          this.featureData = []
          this.queryLength = this.getQueryFormLen()
          this.addBtnName = '新建总行行政网格'
          this.getTopData()
          this.getGridList()
          return
      }
    },
    getlayerData() {
      this.$store.dispatch("queryMenu").then(data => {
        const newData = data.map(item => ({
          label: item.layerName,
          value: item.layerId,
        }));
        this.layerOptions = newData;
      });
    },
    handleSortChange(col) {
      this.queryParams.orderByColumn = col.order ? col.prop : ''
      this.orderDefault = col.order ? col.order : 'ascending'
      this.queryParams.pageNum = 1
      this.getGridList()
    },
    /** 查询用户列表 */
    getGridList(mapOpsDept) {
      this.loading = true
      // if (this.activeIndex === '1-2' || this.activeIndex === '2-2' || this.featureTab === '2') {
      this.mapLoading = true
      // }
      const apiMapUrl = {
        1: getGrid,
        2: getFeaturegrid,
        3: getVirtualgrid
      }
      const params = {
        gridPattern: this.gridPattern,
        ...this.queryParams
      }
      if (this.selectedTab === '1') {
        params.gridLevel = this.gridLevel
        // 地图视角传参
        if (mapOpsDept && this.department >= 3) params.opsDept = mapOpsDept
      }
      if (this.selectedTab === '2') {
        if (this.department < 3) params.opsDept = this.department;
        // 地图视角传参
        if (mapOpsDept) {
          if (this.department >= 3) params.opsDept = mapOpsDept;
          else params.opsDept = this.department;
        }
      }
      if (this.mapOpsDeptSpec) {
        params.opsDept = this.mapOpsDeptSpec;
      }
      apiMapUrl[this.selectedTab](params)
        .then((res) => {
          if (this.selectedTab === '1') {
            this.tableData =
              res?.rows?.map((ot) => {
                const index = businessBelongList.findIndex(i => i.key === ot.opsDept)
                return {
                  ...ot,
                  gridDutyTypeDes: gridDutyTypeMap[ot.gridDutyType],
                  secGridNum: ot.secGrids?.split(',')?.length || 0,
                  secGridNameLen: ot.secGrids?.split(',')?.length || 0,
                  opsDeptName: index > -1 ? businessBelongList[index].label : ''
                }
              }) || []
            // if (this.activeIndex === '1-2' || this.activeIndex === '2-2') {
            setTimeout(() => {
              this.loadMapView()
            }, 1000)
            // }
          } else if (this.selectedTab === '2') {
            this.featureData =
              res?.rows?.map((ot) => {
                const index = businessBelongList.findIndex(i => i.key === ot.opsDept)
                return {
                  ...ot,
                  gridDutyTypeDes: gridDutyTypeMap[ot.gridDutyType],
                  opsDeptName: index > -1 ? businessBelongList[index].label : ''
                }
              }) || []
            this.currentData2 = this.featureData;
            // if (this.featureTab === '2') {
            setTimeout(() => {
              window.frames['featuremap'].addPolygon(this.featureData, WKT)
              this.mapLoading = false
            }, 1000)
            // }
          } else if (this.selectedTab === '3') {
            this.virtualData =
              res?.rows?.map((ot) => {
                const index = businessBelongList.findIndex(i => i.key === ot.opsDept)
                return {
                  ...ot,
                  gridDutyTypeDes: gridDutyTypeMap[ot.gridDutyType],
                  opsDeptName: index > -1 ? businessBelongList[index].label : ''
                }
              }) || []
          }
          this.total = res?.total || 0
        })
        .catch((err) => console.error(err))
        .finally(() => (this.loading = false))
    },
    async loadMapView() {
      console.log(this.tableData)
      if (this.tableData && this.tableData.length > 0) {
        let gridIds = []
        if (this.gridLevel === '1') {
          gridIds = this.tableData.map((item) => item.gridId)
        } else {
          gridIds = this.tableData.map((item) => item.gridId)
        }
        const { code, data } = await getGridRegionCoord(gridIds)
        if (code === 200) {
          this.currentData = data;
          window.frames['bdmap'].addPolygon(data)
        }
      } else {
        window.frames['bdmap'].cleanPolygon();
      }
      this.mapLoading = false
    },
    handleViewTabChange(val) {
      this.detailModalVisible = false;
      // this.mapOpsDept = '0'
      this.mapOpsDept = this.mapOpsDeptDefault;
      if (val == '2') {
        this.getGridList(this.mapOpsDept)
      } else {
        this.getGridList()
      }
    },
    async onShowDetail() { },
    async deleteGrid(row, ids = []) {
      const apiUrl = this.selectedTab === '3' ? deleteVirtual : this.selectedTab === '2' ? featureGridDelete : delGrid
      const idVal = row.gridId
      const res = await apiUrl({
        idList: ids.length > 0 ? ids : [idVal]
      })
      if (res.code === 200) {
        this.$message.success(res.data)
        this.queryParams.pageNum = 1
        this.getGridList()
        if (ids.length > 0) this.$refs.tableRef.clearSelection()
      }
    },
    isRowSelectable(row, index) {
      return row.isEdit
    },
    handleSelectChange(val) {
      this.selection = val;
      // if(this.selectedTab == '1'){
      // if(this.currentData){
      // this.currentData = this.currentData.map(item=>{
      //   if(this.selection.findIndex(i=>i.gridId == item.gridId)>-1){
      //     return {
      //       ...item,
      //       isSign:true
      //     }
      //   }
      //   return item;
      // })
      // console.log(window.frames['bdmap'])
      // window.frames['bdmap'].setBatchFillColor(this.selection)
      // }
      // }
      // if(this.selectedTab == '2'){
      //  this.currentData2 = this.currentData2.map(item=>{
      //   if(this.selection.findIndex(i=>i.gridId == item.gridId)>-1){
      //     return {
      //       ...item,
      //       isSign:true
      //     }
      //   }
      //   return item;
      // })
      // window.frames['featuremap'].setBatchFillColor(this.selection)
      // }
    },
    deleteBatch() {
      const ids = this.selection.map(v => v.gridId);
      if (ids.length === 0) {
        this.$message.error('请选择要删除的列表');
        return;
      }
      this.deleteGrid({}, ids);
    },
    editFir(row) {
      this.$router.push({
        path: '/grid/create/updatefirst',
        query: {
          edit: 2,
          gridId: row.gridId,
          selectedTab: '1',
          gridLevel: '1',
          backUrl: '/grid/list'
        }
      })
    },
    editSco(row) {
      this.$router.push({
        path: '/grid/create/updatesecond',
        query: {
          edit: 2,
          gridId: row.gridId,
          topGridId: row.parentGridId,
          selectedTab: '1',
          gridLevel: '2',
          backUrl: '/grid/list'
        }
      })
    },
    editFeature(row) {
      this.$router.push({
        path: '/grid/create/updatefeature',
        query: {
          edit: 2,
          gridId: row.gridId,
          backUrl: '/grid/list',
          selectedTab: '2',
        }
      })
    },
    editNets(row) {
      this.$router.push({
        path: '/grid/create/updatevirtual',
        query: {
          edit: 2,
          gridId: row.gridId,
          backUrl: '/grid/list',
          selectedTab: '3',
        }
      })
    },
    setupSco() {
      this.$router.push({
        path: '/grid/create/createsecond',
        query: {
          selectedTab: '1',
          gridLevel: '2',
          backUrl: '/grid/list'
        }
      })
    },
    goSco(row) {
      this.$router.push({
        path: '/grid/create/createsecond',
        query: {
          edit: 1,
          gridId: row.gridId,
          gridType: row.gridType,
          opsDept: row.opsDept,
          selectedTab: '1',
          gridLevel: '2',
          backUrl: '/grid/list'
        }
      })
    },
    getvirtualGridList() { },
    showDetails(item) {
      (this.selectedItem = item), (this.dialogVisible = true)
    },
    clientkeeperFeature(row, custType) {
      if (row) {
        const gridIdVal = 'gridId'
        const gridNameVal = 'gridName'
        sessionStorage.setItem(
          'detailInfoObj',
          JSON.stringify({
            gridPattern: this.selectedTab,
            gridLevel: this.gridLevel,
            gridId: row[gridIdVal],
            gridName: row[gridNameVal],
            custType: custType,
            isAddRelate: row.isAddRelate, // 能不能手动指定的标识
            isUnbind: row.isUnbind || false, // 能不能解绑的标识
            opsDept: row.opsDept,
          })
        )
      } else {
        sessionStorage.setItem(
          'detailInfoObj',
          JSON.stringify({
            gridPattern: this.selectedTab,
            gridLevel: this.gridLevel,
            gridId: '',
            gridName: '',
            custType: custType,
            isAddRelate: '', // 能不能手动指定的标识
            isUnbind: false, // 能不能解绑的标识
            opsDept: '',
          })
        )
      }

      this.$router.push({
        path: '/grid/create/featurecomponent',
        query: {
          selectedTab: this.selectedTab,
          gridLevel: this.gridLevel,
          backUrl: '/grid/list'
        }
      })
    },
    onSearch() {
      this.queryParams.pageNum = 1
      // 地图视角
      // this.mapOpsDept = this.mapOpsDeptDefault;
      // if (this.activeIndex === '1-2' || this.activeIndex === '2-2' || this.featureTab === '2') {
      //   this.getGridList(this.mapOpsDeptDefault)
      // }else{
      this.getGridList()
      // }
      if (this.selectedTab === '1') {
        this.detailModalVisible = false;
      }
    },
    onQuery() {
      this.mapOpsDept = this.mapOpsDeptSpec;
      this.getGridList(this.mapOpsDept)
      this.detailModalVisible = false;
    },
    doCollapse() {
      this.isCollapse = !this.isCollapse
    },
    resetFilters() {
      this.queryParams = cloneDeep(initQueryInfo)
      this.mapOpsDeptSpec = '';
      this.onSearch()
    },
    handleSelect() {
      this.detailModalVisible = false
      this.mapDetailInfo = {}
      this.isCollapse = true
      this.queryParams.pageNum = 1
      // this.gridLevel = obj.parentKey
      // this.activeIndex = obj.subKey
      this.queryLength = this.getQueryFormLen()
      this.selection = []
      // this.mapOpsDept = '0'
      this.mapOpsDept = this.mapOpsDeptDefault;
      this.mapOpsDeptSpec = '';
      // if(this.activeIndex === '1-2' || this.activeIndex === '2-2'){
      //   this.getGridList(this.mapOpsDept)
      // }else{
      this.getGridList()
      // }
      switch (this.gridLevel) {
        case '1':
          return (this.addBtnName = '新建总行行政网格')
        default:
          return (this.addBtnName = '新建支行行政网格')
      }
    },
    setupFirGrid() {
      if (this.gridLevel === '1' && this.selectedTab === '1') {
        this.$router.push({
          path: '/grid/create/createfirst',
          query: {
            selectedTab: '1',
            gridLevel: '1',
            backUrl: '/grid/list'
          }
        })
      } else if (this.gridLevel === '2' && this.selectedTab === '1') {
        this.setupSco()
      } else if (this.selectedTab === '2') {
        this.$router.push({
          path: '/grid/create/createfeature',
          query: {
            selectedTab: '2',
            backUrl: '/grid/list'
          }
        })
      } else if (this.selectedTab === '3') {
        this.setupVirGrid()
      }
    },
    setupVirGrid() {
      this.$router.push({
        path: '/grid/create/createvirtual',
        query: {
          selectedTab: '3',
          backUrl: '/grid/list'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.header-radio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ebebeb;

  .el-radio-button {
    flex: 1;

    ::v-deep .el-radio-button__inner {
      width: 100%;
      border: none;
      font-weight: 400;
      letter-spacing: 0.44px;
      line-height: 25px;
      font-size: 16px;
      color: #666666;
      padding: 11px 0 12px 0;
    }

    ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
      background-color: #4886f8;
      font-weight: 400;
      color: #ffffff;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:nth-child(2) {

      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 21px;
        width: 1px;
        background: #ebebeb;
        z-index: 1;
      }

      &::after {
        right: 1px;
      }
    }

    &.is-active {

      &::before,
      &::after {
        content: none;
      }
    }
  }
}

.grid-wrap {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px 16px 0 0;

  .grid-cnt {
    padding: 24px 30px;
  }
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.setupStrGrid {
  background-color: rgba(0, 0, 255, 0.2);
  float: right;
  margin-right: 20px;
  margin-bottom: 20px;
}

.operate-wrap {
  margin-top: 20px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &.vir-operate {
    width: 100%;
    justify-content: flex-end;
  }
}

.tree-border {
  max-height: 300px;
  width: 30%;
  overflow-y: auto;
}

.plain-raido-btn {
  ::v-deep .el-radio-button__inner {
    color: #666666;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #ebebeb;
    border-radius: 0;
  }

  ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    border: 1px solid #4886f8;
    color: #4886f8;
    background-color: #ffffff;
    box-shadow: none;
  }
}

.operate-vr {
  display: flex;
  align-items: center;
}

.header-statics {
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px;
  background-color: #ffffff;
  margin: 0 0 22px 0;
  padding: 24px 30px;
  overflow-x: hidden;

  >p {
    margin: 0 0 20px 0;
    line-height: 25px;
    font-weight: 600;
    color: #222222;
    font-size: 18px;
    letter-spacing: 0.5px;
  }
}

.statics-cnt {
  display: flex;
  justify-content: space-between;
  gap: 17px;
  padding: 0;
  margin: 0;

  li {
    list-style: none;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    // background-color: #eaf5ff;
    border-radius: 8px;
    padding: 24px 0;
    min-width: 90px;
    border: 3px solid #a8c2f5;

    span {
      &:first-child {
        font-size: 28px;
        font-weight: bold;
        line-height: 40px;
        color: #222222;
      }

      &:last-child {
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #666;
      }
    }
  }
}

.el-form-item {
  ::v-deep .el-form-item__label {
    line-height: 30px;
  }

  ::v-deep .el-form-item__content {
    line-height: 30px;
  }
}

.select-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  ::v-deep .search-vl {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 24px;

    .el-form-item {
      flex-basis: calc((100% - 48px) / 3);
      margin-right: 0;
    }
  }

  ::v-deep .search-operate {

    // padding: 0 30px;
    .el-form-item__content {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-between;
    }
  }

  ::v-deep .el-form-item {
    margin-bottom: 0;

    .el-form-item__label {
      color: #3d3d3d;
      font-size: 14px;
      font-weight: 400;
    }
  }

  &.is-more-query {
    flex-direction: column;

    .search-operate {
      width: 100%;
      text-align: right;
      display: flex;
      justify-content: flex-end;
      margin-top: 12px;
    }

    .search-vl {
      width: 100%;
      flex-wrap: wrap;

      .el-form-item {
        flex-basis: calc((100% - 48px) / 3);
      }
    }
  }
}

.map-container {
  position: relative;

  .common-title {
    position: relative;
    color: #ffffff;
    line-height: 16px;
    font-weight: 500;
    font-size: 16px;
    padding-left: 10px;
    margin: 24px 30px 24px 18px;

    &::before {
      position: absolute;
      top: 50%;
      transform: translatey(-50%);
      left: 0;
      content: '';
      width: 2px;
      background-color: #4886f8;
      height: 16px;
    }
  }

  .detail-info {
    background-color: rgba(0, 0, 0, 0.78);
    color: white;
    width: 390px;
    position: absolute;
    right: 40px;
    top: 40px;
    border-radius: 8px;
    z-index: 99;

    h4 {
      font-size: 18px;
      color: #ffffff;
      line-height: 25px;
      font-weight: 600;
      text-align: center;
      margin: 24px 0;
      position: relative;
    }

    .el-icon-close {
      position: absolute;
      right: 24px;
      top: 0;
      font-size: 18px;
      cursor: pointer;
    }

    .map-cnt {
      margin: 0 30px 30px 30px;

      li {
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        span {
          font-size: 14px;
          line-height: 16px;
          color: #cccccc;
        }

        .des-vl {
          width: 100px;
          text-align: right;
          margin-right: 28px;
        }

        .des-vr {
          flex: 1;
        }
      }
    }
  }
}

.map-box {
  position: relative;

  .map-search {
    width: 30%;
    margin-bottom: 10px;
    position: absolute;
    left: 10px;
    top: 10px;
  }
}

::v-deep .v-step::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background-image: url('../../../../assets/images/arrow.gif');
  background-repeat: no-repeat;
  background-size: contain;
  top: 0;
  left: 50%;
  z-index: 9999999;
}

::v-deep .v-step[data-popper-placement^="top"]::after {
  top: 36%;
  left: -50%;
}

::v-deep .v-step[data-popper-placement^="bottom"]::after {
  top: -45%;
  left: 0;
  transform: rotate(90deg);
}

::v-deep .v-step[data-popper-placement^="left"]::after {
  top: -25%;
  left: 100%;
}

::v-deep .v-step[data-popper-placement^="right"]::after {
  top: -20%;
  left: -35%;

}

.table-wrap {
  ::v-deep .el-table .el-table__row {
    cursor: pointer;
    // &:hover {
    //   background: #f1fbff !important;
    // }
  }

  ::v-deep .el-table tbody tr:hover>td {
    background: #f1fbff !important;
  }

  ::v-deep .el-table tbody tr td:last-child {
    padding: 0 0 !important;

    .cell {
      padding: 0 0 !important;
    }

    .myOperate {
      background: #f1fbff !important;
      height: 48px;
      line-height: 48px;
      padding-left: 10px;
    }
  }

  ::v-deep .el-table tbody .rowHighLight:hover>td {
    background: rgba(32, 148, 255, 0.1) !important;

    .myOperate {
      background: #f1fbff !important;
    }

    // color:red;
  }
}
</style>
<style>
@import '../../tour.css';
</style>

