<template>
  <div class="customer-wrap">
    <div>
      <el-radio-group class="header-radio" v-model="selectedTab" @change="handleTabChange">
        <template v-if="String(deptId).substring(0, 3) === '875'">
          <el-radio-button label="0" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">个人</el-radio-button>
          <el-radio-button label="1" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">商户</el-radio-button>
          <el-radio-button label="2" :disabled="isPrivate" :class="{ 'btn-disabled': isPrivate }">企业</el-radio-button>
        </template>
        <template v-else>
          <el-radio-button label="2" :disabled="isPrivate" :class="{ 'btn-disabled': isPrivate }">企业</el-radio-button>
          <el-radio-button label="0" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">个人</el-radio-button>
          <el-radio-button label="1" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">商户</el-radio-button>
        </template>
      </el-radio-group>
      <div class="customerMain">
        <div :class="iscollapsed ? 'customerMain_left_sq' : 'customerMain_left_zk'">
          <div class="collabse-button" @click="toggleCollapse">
            <i :class="iscollapsed ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
          </div>
          <section class="search-box" v-if="!iscollapsed">
            <section class="search-cnt">
              <el-input v-model="searchQuery" :placeholder="placeholder" clearable @keyup.enter.native="handleSearch()"
                @clear="handleSearch">
              </el-input>
              <section class="search-btn" @click="handleSearch()">
                <i class="el-icon-search"></i>
              </section>
            </section>
          </section>
          <section class="search-box" v-if="!iscollapsed">
            <section class="search-cnt">
              <el-input v-model="searchCustId" placeholder="请输入客户号" clearable @keyup.enter.native="handleSearch()"
                @clear="handleSearch">
              </el-input>
              <section class="search-btn" @click="handleSearch()">
                <i class="el-icon-search"></i>
              </section>
            </section>
          </section>

          <template v-if="!iscollapsed">
            <div>
              <div class="labelTop">
                <span class="btbz"></span>
                <span class="radio-labels">客户类型:</span>
              </div>
              <group-check :groupArr="custArr" @onGroupChange="handleSelectedTypeOptions" class="labelTop"
                ref="custRef"></group-check>
            </div>
            <div>
              <div class="labelTop">
                <span class="btbz"></span>
                <span class="radio-labels">产品标签:</span>
              </div>
              <group-check :groupArr="tagArr" @onGroupChange="handleselectedLabelOptions" class="labelTop"
                ref="tagRef"></group-check>
            </div>
            <div v-if="this.selectedTab == '2'">
              <div class="labelTop">
                <span class="btbz"></span>
                <span class="radio-labels">企业规模:</span>
              </div>
              <group-check :groupArr="scaleArr" @onGroupChange="handleselectedSizeOptions" class="labelTop"
                ref="scaleRef"></group-check>
            </div>
            <div class="wangge">
              <div class="labelTop">
                <span class="btbz"></span>
                <span class="radio-labels">网格信息:</span>
              </div>
            </div>
            <el-row class="checkBox" v-if="!isCommonManager">
              <div class="girdTitle">总行行政网格：</div>
              <div class="girdSelect">
                <el-select v-model="firstGird" multiple filterable placeholder="请选择总行行政网格"
                  @change="blurFirstGird(firstGird)">
                  <el-option v-for="(item, index) in firstOptions" :key="index" :label="item.gridName"
                    :value="item.gridId"></el-option>
                  <!-- <el-pagination slot="empty" small layout="prev,pager,next" :total="firstTotal" :page-size="firstPageSize" :current-page="firstCurrentPage" @current-page="handleFirstCurrent" style="padding:10px"></el-pagination> -->
                </el-select>
              </div>
            </el-row>
            <el-row class="checkBox">
              <div class="girdTitle">支行行政网格：</div>
              <div class="girdSelect">
                <el-select v-model="secondGird" filterable multiple placeholder="请选择支行行政网格"
                  @change="blurSecondGird(secondGird)">
                  <el-option v-for="(item, index) in secondOptions" :key="index" :label="item.gridName"
                    :value="item.gridId"></el-option>
                </el-select>
              </div>
            </el-row>
            <el-row class="checkBox">
              <div class="girdTitle">自绘地图网格：</div>
              <div class="girdSelect">
                <el-select v-model="mapGird" filterable multiple placeholder="请输入自绘地图网格名称"
                  @change="blurMapGird(mapGird)">
                  <el-option v-for="(item, index) in mapGirdOptions" :key="index" :label="item.gridName"
                    :value="item.gridId"></el-option>
                </el-select>
              </div>
            </el-row>
            <el-row class="checkBox">
              <div class="girdTitle">自建名单网格：</div>
              <div class="girdSelect">
                <el-select v-model="mdGird" filterable multiple placeholder="请输入自建名单网格名称" @change="blurMdGird(mdGird)">
                  <el-option v-for="(item, index) in mdGirdOptions" :key="index" :label="item.gridName"
                    :value="item.gridId"></el-option>
                </el-select>
              </div>
            </el-row>

            <el-row class="checkBox">
              <div class="per-blocks">
                <div class="zbTitle">业务指标</div>
                <div @click="showMore = !showMore">
                  <i class="el-icon-arrow-up ywzbIcon" v-if="showMore"></i>
                  <i class="el-icon-arrow-down ywzbIcon" v-else></i>
                </div>
              </div>
              <div class="myGroup" v-show="showMore">
                <group-check-more :groupArr="wgArr" ref="myGroup" :contiKeys="contiKeys"
                  @onGroupChange="handleselectedPerOptions"></group-check-more>

              </div>
            </el-row>

            <el-button type="primary" round style="width: 80%;margin: 24px auto;display: block;" @click="handleSearch">查询</el-button>
          </template>
        </div>
        <div :class="iscollapsed ? 'customerMain_right_zk' : 'customerMain_right_sq'">
          <section class="operate-cnt">
            <div>
              <el-dropdown trigger="click">
                <el-button type="primary">
                  导出<i class="el-icon-arrow-down export_icon"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleExportSelect"
                    :disabled="this.selectRows.length == 0">导出所选</el-dropdown-item>
                  <el-dropdown-item @click.native="handleExportAll">导出前1000条<i class="quesiton"></i></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <template v-if="selectedTab === '2' && canSeeBusinessImport">
                <div class="import-action">
                  <el-upload
                    ref="businessImportUploadRef"
                    class="business-import-upload"
                    action="#"
                    :show-file-list="false"
                    :http-request="requestBusinessCustLevelImport"
                    :before-upload="beforeBusinessCustLevelUpload"
                    :disabled="businessImportLoading"
                  >
                    <el-button
                      icon="el-icon-upload2"
                      type="primary"
                      style="margin-left: 10px"
                      :loading="businessImportLoading"
                    >导入</el-button>
                  </el-upload>
                  <el-tooltip placement="top" trigger="hover" content="导入更新公司客户视图分层分类数据" width="200">
                    <span class="import-question"><i class="el-icon-question"></i></span>
                  </el-tooltip>
                </div>
              </template>
              <upload-tag style="margin-left: 10px" v-if="selectedTab === '0' && userName.indexOf('931') === 0"></upload-tag>
            </div>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="searchColoumns"
              @getConfigColumns="getConfigColumns"></right-toolbar>
          </section>
          <section class="table-wrap" v-loading="pageLoading">
            <common-table :table-data="tableData" :table-coloumns="tableColoumns" :isShow="isShow"
              :page-size="queryParams.size" :pagination="true" :total-rows="total" :current-page="queryParams.num"
              :isShowFilter="true" :configColoumns="configColoumns" :isShowSelection="true"
              @onPageChange="handleCurrentChange" @onSizeChange="handleOnSizeChange"
              @onSelectionChange="onSelectionChange" ref="table1" maxHeight="580">
              <template #myName="scope">
                <el-button type="text" @click="openDialog(scope.row)">{{ scope.row.custName }}</el-button>
              </template>
              <template #myCustIdsn="scope">
                <el-button type="text" @click="openDialog(scope.row)">{{ scope.row.custIdsn }}</el-button>
              </template>
              <template #header="{ item }">
                <div class="label-box">
                  {{ item.label }}
                  <el-tooltip v-if="item.desc" placement="top" trigger="hover" :content="item.desc" width="200">
                    <span class="quesiton"><i class="el-icon-question"></i></span>
                  </el-tooltip>
                </div>
              </template>
            </common-table>
          </section>
          <section class="main-wrap">
            <section class="iframe-wrap" v-loading="pageLoading">
              <b-map-marker :mapData="mapData" :selectedTab="selectedTab" @open-dialog="openDialog" />
            </section>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getCustomerList,
  getCustAddressList,
  getPerIndcList,
  getGegionList,
  getDrawList,
  getVirtualList,
  importBusinessCustLevelAsync,
  getBusinessCustLevelImportStatus
} from '@/api/grid/mycustomer.js'
import GroupCheck from './components/group-check'
import GroupCheckMore from './components/group-check-more'
import UploadTag from './components/uploadTag.vue'
import { debounce, cloneDeep } from 'lodash'
import { placeholderMap, custTypeMap, custScaleMap, custTagMap } from './constant-info'
import CommonTable from '@/components/Common/common-table'
import BMapMarker from '@/map/BMapMarker.vue'
import { mapGetters } from 'vuex'

export default {
  components: { GroupCheck, CommonTable, BMapMarker, GroupCheckMore, UploadTag },
  data() {
    return {
      firstGird: [],
      firstOptions: [],
      firstGirdVal: [],
      firstLoading: false,
      firstTotal: 0,
      firstPageSize: 10,
      firstCurrentPage: 1,
      firstKeyWords: '',
      secondGird: [],
      secondOptions: [],
      secondGirdVal: [],
      mapGird: [],
      mapGirdOptions: [],
      mapGirdVal: [],
      mdGird: [],
      mdGirdOptions: [],
      mdGirdVla: [],
      isShow: '0',
      checkAll: false,
      isIndeterminate: true,
      showSearch: true,
      selectedTab: '',
      searchQuery: '',
      searchCustId: '',
      selectRows: [],
      tableData: [],
      mapData: [],
      total: 0,
      selectedViewTab: '列表视角',
      custPattern: '',
      showmap: false,
      showtable: true,
      currentRow: null,
      custArr: [
        {
          label: '存量',
          value: '0'
        },
        {
          label: '信贷潜在',
          value: '1',
          desc: '数据来自大信贷平台潜在信贷客户标签'
        }
      ],
      tagArr: [
        {
          label: '存款',
          value: 'saveAccount'
        },
        {
          label: '贷款',
          value: 'loanAccount'
        },
        {
          label: '中收',
          value: 'middleAccount'
        }
      ],
      scaleArr: [
        {
          label: '小型',
          value: '0'
        },
        {
          label: '中型',
          value: '1'
        },
        {
          label: '大型',
          value: '2'
        },
        {
          label: '微型',
          value: '3'
        },
      ],
      queryParams: {
        num: 1,
        size: 10,
        custPattern: ''
      },
      loading: false,
      pageLoading: true,
      tableColoumns: [],
      placeholder: '',
      configColoumns: {},
      searchColoumns: [],
      mapLoading: false,
      showMore: false,
      wgArr: [],
      defaultArr: [],
      showMoreIndc: true,
      contiKeys: [],
      iscollapsed: false,
      businessImportLoading: false,
      businessImportTimer: null,
    }
  },
  watch: {
    selectedTab: {
      handler(val) {
        if (val) {
          const type = this.roles.includes('headPublic') ? 'isPublic' :
            this.roles.includes('headPrivate') ? 'isPrivate' :
              this.roles.includes('headOps') ? 'isOps' : ""
          this.tableColoumns = placeholderMap(type)[val].tableColoumns
          this.placeholder = placeholderMap(type)[val].placeholder
          this.queryParams.custPattern = val
          this.searchColoumns = this.getSearchColoumns()
        }
      },
      immediate: true
    },
    isPrivate: {
      handler(val) {
        if (val) {
          this.selectedTab = '0'
          this.queryParams.custPattern = '0'
          this.getList()
          this.getIndcList();
        } else {
          this.selectedTab = '2'
          this.queryParams.custPattern = this.$route.query.selectedTab ? this.$route.query.selectedTab : '2'
          this.getList()
          this.getIndcList();
        }
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters(['roles', 'userName']),
    deptId() {
      return this.$store.state.user.deptId
    },
    filtereDate() {
      if (this.searchQuery) {
        return this.tableData.filter((item) => item.companyName.includes(this.searchQuery) || item.legalName.includes(this.searchQuery))
      }
      return this.tableData
    },
    isHeadAdmin() {
      return this.roles.includes('headAdmin')
    },
    isPublic() {
      return this.roles.includes('headPublic')
    },
    isPrivate() {
      return this.roles.includes('headPrivate')
    },
    isOps() {
      return this.roles.includes('headOps')
    },
    is825() {
      return String(this.deptId || '').substring(0, 3) === '825'
    },
    canSeeBusinessImport() {
      return this.is825 && (this.isHeadAdmin || this.isPublic || this.isPrivate || this.isOps)
    },
    // 客户经理
    isCommonManager() {
      return this.roles.includes('commonManager')
    },
  },
  methods: {
    initGetfirstRegionList() {
      const params = {
        gridLevel: '1',
      }
      if (this.selectedTab == '2') {
        params.opsDept = '1'
      } else {
        params.opsDept = '0'
      }
      getGegionList(params).then(res => {
        if (res.code == 200) {
          this.firstOptions = res.data
        }
      })
    },
    blurFirstGird(val) {
      this.firstGirdVal = val
      // this.getList()
    },
    initGetSecondRegionList() {
      const params = {
        gridLevel: '2',
      }
      if (this.selectedTab == '2') {
        params.opsDept = '1'
      } else {
        params.opsDept = '0'
      }
      getGegionList(params).then(res => {
        if (res.code == 200) {
          this.secondOptions = res.data
        }
      })

    },
    blurSecondGird(val) {
      this.secondGirdVal = val
      // this.getList()
    },
    initgetDrawList() {
      const params = {}
      if (this.selectedTab == '2') {
        params.opsDept = '1'
      } else {
        params.opsDept = '0'
      }
      getDrawList(params).then(res => {
        if (res.code == 200) {
          this.mapGirdOptions = res.data
        }
      })
    },
    blurMapGird(val) {
      this.mapGirdVal = val
      // this.getList()
    },
    initGetVirtualList() {
      const params = {}
      if (this.selectedTab == '2') {
        params.opsDept = '1'
      } else {
        params.opsDept = '0'
      }
      getVirtualList(params).then(res => {
        if (res.code == 200) {
          this.mdGirdOptions = res.data
        }
      })
    },
    blurMdGird(val) {
      this.mdGirdVla = val
      // this.getList()
    },
    firstRemoteMethod() { },
    handleFirstVisible() { },
    toggleCollapse() {
      this.iscollapsed = !this.iscollapsed
    },
    // 查询业务指标
    getIndcList() {
      getPerIndcList({ custPattern: this.selectedTab }).then(res => {
        if (res.code == 200) {
          let { discreteParams, continuousParams } = res.data;
          continuousParams = continuousParams.map(item => {
            this.contiKeys.push(item.par_value)
            return {
              label: item.par_key,
              value: item.par_value,
              type: 'range',
              key1: item.par_value + '-1',
              key2: item.par_value + '-2',
              // prop: this.underSoure(item.par_value)
            }
          })
          discreteParams = discreteParams.map(item => {
            return {
              label: item.par_key,
              value: item.par_value,
              // prop: this.underSoure(item.par_value)
            }
          })
          this.defaultArr = continuousParams.concat(discreteParams)
          this.wgArr = this.defaultArr

        }
      })
    },
    underSoure(str) {
      return str.replace(/_([a-z])/g, (g) => {
        return g[1].toUpperCase()
      })
    },
    // openAll() {
    //   this.wgArr = this.defaultArr;

    // },
    // collapseAll() {
    //   this.wgArr = this.defaultArr.slice(0, 5);

    // },
    getSearchColoumns() {
      const newArr = []
      this.tableColoumns?.map((ot, oInd) => {
        if (ot.label !== '操作') {
          newArr.push({
            key: oInd,
            label: ot.label,
            visible: true
          })
        }
      })
      return newArr
    },
    getConfigColumns(obj) {
      this.configColoumns = obj
    },
    handleselectedLabelOptions(val) {
      const checkboxStates = [val.includes('saveAccount'), val.includes('loanAccount'), val.includes('middleAccount')]
      this.queryParams = {
        ...this.queryParams,
        custTag: val.length ? checkboxStates.map((selected) => (selected ? '1' : '0')).join('') : ''
      }
      this.queryParams.num = 1
      this.queryParams.size = 10
      // this.getList()
    },
    getScaleData(arr) {
      if (arr.length === 0) return ''
      const sortedValues = arr.sort()
      if (sortedValues.length === 1) {
        return sortedValues[0]
      } else if (sortedValues.includes('01') && sortedValues.includes('02')) {
        return '12'
      } else if (sortedValues.includes('01') && sortedValues.includes('03')) {
        return '13'
      } else if (sortedValues.includes('02') && sortedValues.includes('03')) {
        return '23'
      }
    },
    handleselectedSizeOptions(val) {
      this.scaleArr.map(item => {
        this.queryParams[`custScale${item.value}`] && delete this.queryParams[`custScale${item.value}`]
        this.queryParams.custScale && delete this.queryParams.custScale
      });
      val.map(key => {
        this.queryParams[`custScale${key}`] = key
        this.queryParams.custScale = '00'
      })
      if (val.length === this.scaleArr.length) {
        val.map(key => {
          this.queryParams[`custScale${key}`] && delete this.queryParams[`custScale${key}`]
          this.queryParams.custScale && delete this.queryParams.custScale
        });
      }

      this.queryParams.num = 1
      this.queryParams.size = 10
      // this.getList()
    },
    handleSelectedTypeOptions(val) {
      this.queryParams = {
        ...this.queryParams,
        custType: val.length === 2 ? '2' : val[0]
      }
      this.queryParams.num = 1
      this.queryParams.size = 10
      // this.getList()
    },

    // 业务指标
    handleselectedPerOptions({ val1, val2 }) {
      console.log(val1, 'val1val1val1val1val1val1');
      // const type = this.roles.includes('headPublic') ? 'isPublic' :
      //   this.roles.includes('headPrivate') ? 'isPrivate' :
      //     this.roles.includes('headOps') ? 'isOps' : ""
      // this.tableColoumns = placeholderMap(type)[this.selectedTab].tableColoumns
      // let tabList = JSON.parse(JSON.stringify(this.tableColoumns))
      // console.log(tabList, 'this.tabListtabListtabListtabList')
      // console.log(this.wgArr,'wgArrwgArrwgArr')
      // console.log(this.contiKeys,'contiKeyscontiKeyscontiKeys')
      let arr = []
      for (let i = 0; i < this.wgArr.length; i++) {
        for (let j = 0; j < val1.length; j++) {
          if (val1[j] == this.wgArr[i].value) {
            arr.push(this.wgArr[i])
          }
        }
      }
      // console.log(arr, 'arrrrrrrr')
      // this.tableColoumns = tabList.concat(arr)
      // console.log(this.tableColoumns, 'this.tableColoumns2222222')
      let continuousParams = [];
      let discreteParams = [];
      val1.map(item => {
        // 连续型
        if (this.contiKeys.includes(item)) {
          let value1 = val2[`${item}-1`] || ''
          let value2 = val2[`${item}-2`] || ''
          continuousParams.push({
            key: item,
            value: [value1, value2]
          })
        } else {
          discreteParams.push({
            key: item,
            value: '是'
          })
        }
      })
      this.queryParams.continuousParams = continuousParams;
      this.queryParams.discreteParams = discreteParams;
      // this.getList()
    },
    // 监听分页
    openDialog(row) {

      if (this.selectedTab == '0') {
        this.$router.push({
          path: '/360charts/indexcharts',
          query: {
            custId: row.custId,
            selectedTab: this.selectedTab,
            backUrl: '/customer/customer'
          }
        })
      } else if (this.selectedTab == '1') {
        this.$router.push({
          path: '/360charts/commercial/',
          query: {
            custId: row.custId,
            selectedTab: this.selectedTab,
            backUrl: '/customer/customer'
          }
        })
      } else if (this.selectedTab == '2') {
        this.$router.push({
          path: '/360charts/firm/',
          query: {
            custId: row.custId,
            selectedTab: this.selectedTab,
            backUrl: '/customer/customer'
          }
        })
      }

    },
    handleCurrentChange(newPage) {
      this.queryParams.num = newPage
      this.getList()
    },
    handleOnSizeChange(newNum) {

      this.queryParams.size = newNum
      this.getList()
    },
    onSelectionChange(val) {
      this.selectRows = val;
    },
    /** 查询用户列表 */
    getList() {
      this.pageLoading = true;
      if (!this.queryParams.custPattern) return;
      this.queryParams.regionTopGridIds = this.firstGirdVal
      this.queryParams.regionSecGridIds = this.secondGirdVal
      this.queryParams.drawGridIds = this.mapGirdVal
      this.queryParams.virtualGridIds = this.mdGirdVla
      if (this.queryParams.regionTopGridIds.length == 0 && this.queryParams.regionSecGridIds.length == 0 && this.queryParams.drawGridIds.length == 0 && this.queryParams.virtualGridIds.length == 0) {
        this.queryParams.isSelectGrid = false
      } else {
        this.queryParams.isSelectGrid = true
      }
      console.log(this.queryParams, 'this.queryParamsthis.queryParams')
      // this.pageLoading = true
      getCustomerList(this.queryParams)
        .then((response) => {
          // 如果table是企业
          this.tableData = response?.data?.map((item) => ({
            ...item,
            belongUserNameList: item.belongUserNameList,
            custTag: custTagMap[item.custTag],
            custType: item.custType ? custTypeMap[item.custType] : '无',
            custScale: item.custScale ? custScaleMap[item.custScale] : '无'
          }))
          this.tableData.forEach(item=>{
            item.custIdsn = item.custId?item.custId.substring(3):''
          })
          if (this.selectedTab == '1' || this.selectedTab == '2') {
            this.total = response.total
          } else {
            this.total = null
          }
          // this.pageLoading = false
          // const newData = response?.data?.filter(item => item.longitude && item.latitude);
          // 调取接口获取经纬度等信息
          getCustAddressList(response?.data || []).then(res => {
            if (res.code == 200) {
              this.pageLoading = false
              this.mapData = res?.data?.filter(item => item.longitude && item.latitude);
            }
          }).catch((err) => console.error(err))
            .finally(() => {
              this.pageLoading = false
            })
        })
        .catch((err) => console.error(err))
        .finally(() => {
          // this.pageLoading = false
        })
    },
    handleTabChange(val) {

      this.$refs.myGroup.clearData()
      this.$refs.custRef.checkedVal = []
      this.$refs.custRef.checkAll = false
      this.$refs.custRef.isIndeterminate = false
      this.$refs.tagRef.checkedVal = []
      this.$refs.tagRef.checkAll = false
      this.$refs.tagRef.isIndeterminate = false
      if (this.$refs.scaleRef) {
        this.$refs.scaleRef.checkedVal = []
        this.$refs.scaleRef.checkAll = false
        this.$refs.scaleRef.isIndeterminate = false
      }
      this.selectedViewTab = '列表视角'
      this.searchQuery = ''
      this.searchCustId = ''
      this.firstGird = []
      this.secondGird = []
      this.mapGird = []
      this.mdGird = []
      this.queryParams.size = 10
      this.queryParams.continuousParams = [];
      this.queryParams.discreteParams = [];
      this.queryParams.custScale = '';
      this.queryParams.custScale1 ='';
      this.queryParams.custTag ='';
      this.queryParams.custType=''
      this.firstGirdVal = []
      this.secondGirdVal = []
      this.mapGirdVal = []
      this.mdGirdVla = []
      this.getList()
      this.getIndcList()
      this.initGetfirstRegionList()
      this.initGetSecondRegionList()
      this.initgetDrawList()
      this.initGetVirtualList()
    },
    handleSearch: debounce(function () {
      // 重新调用查询接口
      this.queryParams = {
        ...this.queryParams,
        custName: this.searchQuery,
        custId: this.searchCustId,
        custPattern: this.selectedTab
      }
      this.queryParams.num = 1
      this.queryParams.size = 10
      this.getList()
    }, 100),
    handleViewTabChange() {
    },
    getIframeSrc() {
      const baseUrl = "/baidu/marker.html"
      const queryString = new URLSearchParams({ 'NODE_ENV': process.env.NODE_ENV }).toString()

      return `${baseUrl}?${queryString}`
    },
    handleExportSelect() {
      let API = '', tit = '';
      if (this.selectedTab === '0') {
        API = '/system/custBaseInfo/exportRetail'
        tit = '个人客户'
      } else if (this.selectedTab === '1') {
        API = '/system/custBaseInfo/exportMerchant'
        tit = '商户客户'
      } else if (this.selectedTab === '2') {
        API = '/system/custBaseInfo/exportBusiness'
        tit = '企业客户'
      }
      this.downloadPOST(
        `${API}`,
        this.selectRows,
        `${tit}_${new Date().getTime()}.xlsx`,
        {},
        'post'
      )
      this.$refs.table1.$refs.commontable.clearSelection()
    },
    handleExportAll() {
      if (this.selectRows.length == 0) {
        let API = ''
        let title = ''
        if (this.selectedTab === '0') {
          API = '/system/custBaseInfo/exportRetail1000'
          title = '个人客户'
        } else if (this.selectedTab === '1') {
          API = '/system/custBaseInfo/exportMerchant1000'
          title = '商户客户'
        } else if (this.selectedTab === '2') {
          API = '/system/custBaseInfo/exportBusiness1000'
          title = '企业客户'
        }
        this.downloadPOST(
          `${API}`,
          this.queryParams,
          `${title}_${new Date().getTime()}.xlsx`,
          {},
          'post'
        )
      }
    },
    beforeBusinessCustLevelUpload(file) {
      const fileName = file.name ? file.name.toLowerCase() : ''
      const isExcel = fileName.endsWith('.xls') || fileName.endsWith('.xlsx')
      if (!isExcel) {
        this.$message.warning('请上传Excel文件')
        return false
      }
      return true
    },
    async requestBusinessCustLevelImport(fileOut) {
      const { file } = fileOut
      const formData = new FormData()
      formData.append('file', file)
      this.businessImportLoading = true
      this.clearBusinessImportTimer()
      try {
        const res = await importBusinessCustLevelAsync(formData)
        this.$message.success(res.msg || '导入任务已提交，后台正在处理')
        if (res.data) {
          this.pollBusinessCustLevelImportStatus(res.data)
        }
      } finally {
        this.businessImportLoading = false
        if (this.$refs.businessImportUploadRef) {
          this.$refs.businessImportUploadRef.clearFiles()
        }
      }
    },
    pollBusinessCustLevelImportStatus(taskId) {
      this.clearBusinessImportTimer()
      this.businessImportTimer = setInterval(async () => {
        try {
          const res = await getBusinessCustLevelImportStatus(taskId)
          const task = res.data
          if (!task || task.status === '0') {
            return
          }
          this.clearBusinessImportTimer()
          if (task.status === '1') {
            window.dispatchEvent(new Event('notice-center-refresh'))
            this.$message.success(task.message || '导入成功')
            this.getList()
          } else if (task.status === '2') {
            window.dispatchEvent(new Event('notice-center-refresh'))
            this.$message.error(task.message || '导入失败')
          }
        } catch (error) {
          this.clearBusinessImportTimer()
        }
      }, 3000)
    },
    clearBusinessImportTimer() {
      if (this.businessImportTimer) {
        clearInterval(this.businessImportTimer)
        this.businessImportTimer = null
      }
    }
  },
  created() {
    const { query } = this.$route;
    if (query.backUrl) {
      this.selectedTab = query.selectedTab
      this.queryParams.custPattern = query.selectedTab
    } else {
      // 默认选中第一个tab
      const deptId = this.$store.state.user.deptId
      const deptIdStr = deptId ? String(deptId) : ''
      this.selectedTab = deptIdStr.startsWith('875') ? '0' : '2'
      this.queryParams.custPattern = this.selectedTab
    }
  },
  mounted() {
    // this.handleSearch()
    this.initGetfirstRegionList()
    this.initGetSecondRegionList()
    this.initgetDrawList()
    this.initGetVirtualList()
  },
  beforeDestroy() {
    this.clearBusinessImportTimer()
  }
}
</script>
<style lang="scss" scoped>
.customer-wrap {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px 16px 0 0;

  .header-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;

    .btn-disabled {
      ::v-deep .el-radio-button__inner {
        background-color: #e7e7e7;
      }
    }

    .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;
        }
      }
    }
  }
}

.customerMain_left_zk {
  position: relative;
  width: 23%;
  background-color: rgba(245, 247, 252, 1);
  border-radius: 0px 0px 0px 16px;
  box-shadow: 4px 0px 12px 0px rgba(0, 0, 0, 0.15);


}

.customerMain_left_sq {
  position: relative;
  width: 1%;
  transition: width 0.1s;
}

.customerMain_right_sq {
  width: 73%;
  margin-left: 1%;
}

.customerMain_right_zk {
  width: 98%;
  margin-left: 1%;
}

.labelTop {
  margin: 15px 10px;
}

.customerMain {
  display: flex;
}

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

.checkBox {
  .el-checkbox-group {
    display: flex;
    align-items: center;

    ::v-deep .el-checkbox__label {
      color: #3d3d3d;
      font-size: 12px;
      font-weight: 400;
      padding-left: 6px;
    }
  }
}

.radio-labels {
  line-height: 22px;
  color: #3d3d3d;
  font-size: 16px;
  font-weight: 700;
  margin-right: 10px;
}

.zbTitle {
  line-height: 22px;
  font-size: 16px;
  margin-right: 10px;
}

.girdTitle {
  margin-left: 15px;
}

.girdSelect {
  margin: 15px;

  ::v-deep .el-select {
    width: 100%;
  }
}

.btbz {
  // color: #ff4d42;
  margin-right: 8px;
  margin-top: 3px;
  display: inline-block;
  // content: '';
  width: 3px;
  background-color: #4886f8;
  height: 16px;
  border-radius: 2px;

}

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 24px 0;

  .search-cnt {
    position: relative;
    width: 95%;
  }

  ::v-deep .el-input {
    width: 100%;
    position: relative;

    .el-input__inner {
      height: 44px;
      line-height: 44px;
      border: 1px solid #ebebeb;
      padding-left: 24px;
    }

    .el-input__suffix {
      right: 45px;
    }
  }

  .search-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 2px;
    border: 1px solid #4886f8;
    background-color: #4886f8;
    cursor: pointer;
    z-index: 1;

    .el-icon-search {
      color: #ffffff;
      font-size: 14px;
    }
  }
}

.main-wrap {
  margin: 0 30px;

  .checkBox {
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.operate-cnt {
  margin: 24px 0 16px 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  .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-right {
    display: flex;
    align-items: flex-end;

    .export-all {
      margin-left: 10px;
    }
  }
}

.import-action {
  display: inline-block;
  position: relative;
}

.business-import-upload {
  display: inline-block;
}

.import-question {
  position: absolute;
  top: -2px;
  right: -14px;
  color: #b9b9b9;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}

.iframe-wrap {
  width: 100%;
  height: 500px;
  padding-bottom: 40px;
}

.label-box {
  display: inline-block;
  position: relative;
}

.quesiton {
  display: block;
  font-size: 13px;
  color: #b9b9b9;
  position: absolute;
  right: -14px;
  top: -5px;
}

.wangge {
  // border:1px solid #ddd;

  background: #f1fbff;
  border-radius: 5px;
  padding: 2px 4px;
  padding-left: 0px;
  margin-bottom: 5px !important;

  .collapse {
    display: inline-block;

    height: 25px;
    line-height: 25px;
    // border: 1px solid #ddd;
    color: #999;
    text-align: right;
    font-size: 14px;
    cursor: pointer;
    padding-right: 3px;
  }
}

.myGroup {
  padding: 5px;

  .radio-labels {
    // display: block;
    // width: 100px;
  }

  position: relative;

  .btn {
    height: 30px;
    border-radius: 8px;
    // position: absolute;
    // top: 15px;
    // right: -77px;
  }

  .per-block {
    width: 100px;
    display: flex !important;
    justify-content: space-between;

    .my-per-label {
      display: inline-block;
      width: 90px;
    }
  }
}

.per-blocks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 15px;
  padding-left: 15px;
}

.ywzbIcon {
  cursor: pointer;
}

.collabse-button {
  width: 10px;
  height: 80px;
  background-color: rgba($color: #000000, $alpha: 0.5);
  border-radius: 0 15px 15px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: absolute;
  top: 350px;
  left: 100%;
}

::v-deep .el-dropdown-menu__item {
  line-height: 45px;
}

.export_icon {
  margin-left: 15px;
}</style>
