<template>
  <div class="customer-wrap" v-loading="loading">
    <el-radio-group class="header-radio" v-model="selectedTab" @change="handleTabChange">
      <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>
    </el-radio-group>
    <section class="search-box" v-if="!showExamine && !showIgnore && showSearch">
      <section class="search-cnt">
        <el-input v-model="searchText" placeholder="搜索客户名称" clearable @keyup.enter.native="searchQuery"
          @clear="searchQuery"> </el-input>
        <section class="search-btn" @click="searchQuery">
          <i class="el-icon-search"></i>
        </section>
      </section>
    </section>
    <el-form v-if="!showExamine && !showIgnore && showSearch" class="select-container" label-width="70px"
      label-position="left">
      <div class="search-vl">
        <el-form-item label="镇/街道">
          <el-input v-model="queryForm.street" size="small" placeholder="请输入" clearable @clear="searchQuery"
            @keyup.enter.native="searchQuery" />
        </el-form-item>
        <el-form-item label="村/社区">
          <el-input v-model="queryForm.community" size="small" placeholder="请输入" clearable @clear="searchQuery"
            @keyup.enter.native="searchQuery" />
        </el-form-item>
        <el-form-item label="来源" label-width="40px">
          <el-select style="width: 100%" v-model="queryForm.source" placeholder="请选择" size="small" clearable
            @clear="searchQuery" @change="searchQuery">
            <el-option v-for="(item, index) in sourceType" :key="index" :label="item.label"
              :value="item.label"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="search-vl">
        <el-form-item label="是否新客" v-if="!isCollapse">
          <el-select style="width: 100%" v-model="queryForm.custStatus" placeholder="请选择" size="small" clearable
            @clear="searchQuery" @change="searchQuery">
            <el-option v-for="(item, index) in custStatusList" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="近期地址是否变化" v-if="!isCollapse" label-width="130px">
          <el-select style="width: 100%" v-model="queryForm.custAddressStatus" placeholder="请选择" size="small" clearable
            @clear="searchQuery" @change="searchQuery">
            <el-option v-for="(item, index) in custStatusList" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上图状态" v-if="!isCollapse">
          <el-select style="width: 100%" v-model="queryForm.status" placeholder="请选择" size="small" clearable
            @clear="searchQuery" @change="searchQuery">
            <el-option v-for="(item, index) in statusList" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="search-operate">
        <el-button type="primary" size="small" class="common-search-btn" @click="searchQuery">查询</el-button>
        <el-button size="small" class="common-reset-btn" @click="resetFilters">重置</el-button>
        <el-button size="small" type="text" @click="doCollapse">{{ !isCollapse ? '收起' : '展开' }}
          <i :class="isCollapse ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
        </el-button>
      </div>
    </el-form>
    <div class="operate-wrap common-operate-wrap" v-loading="refreshLoading">
      <section style="display: flex" v-if="!showExamine && !showIgnore">
        <el-button type="primary" class="common-mini-btn" size="mini" @click="handleImport"
          v-if="!showExamine && !showIgnore">地址导入</el-button>
        <el-button @click="gotoExamine" class="common-mini-btn" type="plain" size="mini"
          style="background-color: #4886f80f; color: #4886f8; border-color: #4886f8">去审核</el-button>
        <el-button @click="gotoIgnore" class="common-mini-btn" type="plain" size="mini"
          style="background-color: #4886f80f; color: #4886f8; border-color: #4886f8">已忽略地址库</el-button>
        <el-button type="plain" size="mini" class="common-mini-btn" :disabled="selectionCheckeds.length === 0"
          :class="{ 'btn-no-click': selectionCheckeds.length === 0 }"
          style="background-color: #4886f80f; color: #4886f8; border-color: #4886f8" @click="onGrouping">一键分群</el-button>
        <el-button type="plain" size="mini" class="common-mini-btn"
          style="background-color: #4886f80f; color: #4886f8; border-color: #4886f8" @click="refreshTable">刷新</el-button>
        <!-- <el-button type="plain" size="mini" class="common-mini-btn radius-btn "
          @click="handleNewStatusChange">新成立</el-button>
        <el-button type="plain" size="mini" class="common-mini-btn radius-btn"
          @click="handleAddressChange">地址变化</el-button> -->
      </section>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"
        v-if="!showExamine && !showIgnore"></right-toolbar>
    </div>
    <div class="common-operate-wrap audit-operate" v-if="showExamine">
      <section class="vl">
        <svg-icon @click="backToIndex" class-name="icon-back" icon-class="icon-back" v-if="!fromPage" />
        <el-button type="primary" size="mini" class="common-mini-btn" :class="{ 'no-click': selectedRows.length === 0 }"
          :disabled="selectedRows.length === 0" @click="useNewBatchAdress">使用新地址</el-button>
        <el-button type="primary" size="mini" class="common-mini-btn" :class="{ 'no-click': selectedRows.length === 0 }"
          :disabled="selectedRows.length === 0" @click="ignoreBatchGrid">忽略</el-button>
        <!-- <el-button type="plain" size="mini" class="common-mini-btn radius-btn" @click="newlyEstablish">新成立</el-button>
        <el-button type="plain" size="mini" class="common-mini-btn radius-btn" @click="adrdressChange">地址变化</el-button> -->
      </section>
      <section class="vr">
        <el-button type="plain" icon="el-icon-circle-plus-outline" @click="openAddAnchorModal">添加地址</el-button>
      </section>
    </div>
    <div class="common-operate-wrap" v-if="showIgnore">
      <svg-icon @click="backToIndex" class-name="icon-back" icon-class="icon-back" />
      <el-button type="primary" size="mini" class="common-mini-btn" :class="{ 'no-click': selectedRows.length === 0 }"
        :disabled="selectedRows.length === 0" @click="addBatchAdress">添加到审核页</el-button>
      <el-popconfirm title="确定删除吗？" icon="el-icon-info" iconColor="red" @confirm="deleteBatchIgnoreGrid">
        <el-button slot="reference" type="danger" size="mini" class="common-mini-btn" style="margin: 0 10px"
          :disabled="selectedRows.length === 0">删除</el-button>
      </el-popconfirm>
      <!-- <el-button type="plain" size="mini" class="common-mini-btn radius-btn" @click="newlyEstablish">新成立</el-button>
      <el-button type="plain" size="mini" class="common-mini-btn radius-btn" @click="adrdressChange">地址变化</el-button> -->
    </div>
    <section class="table-wrap">
      <el-table class="table common-table-cnt" @selection-change="handleAnchorSelectionChange" :data="tableData"
        v-if="!showExamine && !showIgnore" :key="table1Key" max-height="540">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="anchorName" label="客户名称" width="150" show-overflow-tooltip align="left"
          v-if="columns[0].visible">
          <template slot-scope="scope">
            <el-button type="text" @click.prevent="goCustDetail(scope.row)">{{ scope.row.anchorName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="legalId" label="证件号" width="200" show-overflow-tooltip align="left">
          <template slot-scope="scope">
            <el-button type="text" @click.prevent="goCustDetail(scope.row)">{{ scope.row.legalId }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="belongBusiness" label="所在行业" width="150" show-overflow-tooltip align="left"
          v-if="columns[1].visible"></el-table-column>
        <el-table-column prop="status" label="上图状态" width="150" show-overflow-tooltip align="left"
          v-if="columns[7].visible"></el-table-column>
        <el-table-column prop="source" width="150" show-overflow-tooltip align="left" v-if="columns[2].visible">
          <template #header>
            <el-tooltip placement="top" trigger="hover" content="指客户入格、在地图展示时,使用的地址来源,即该地址来自哪个业务系统或外部数据源">
              <span class="quesiton"><i class="el-icon-question"></i>使用来源</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="addressName" width="150" show-overflow-tooltip align="left" v-if="columns[3].visible">
          <template #header>
            <el-tooltip placement="top" trigger="hover" content="指客户入格、在地图展示时,使用的地址类型,如企业注册地/经营地/个人居住地/工作地/户籍地等">
              <span class="quesiton"><i class="el-icon-question"></i>使用类型</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="custStatus" width="150" show-overflow-tooltip align="left">
          <template #header>
            <el-tooltip placement="top" trigger="hover" content="近30天内加入本系统的新客、历史非本系统存量有效客户">
              <span class="quesiton"><i class="el-icon-question"></i>是否新客</span>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.custStatus == '0'">否</span>
            <span v-if="scope.row.custStatus == '1'">是</span>
          </template>
        </el-table-column>
        <el-table-column prop="custAddressStatus" width="150" show-overflow-tooltip align="left">
          <template #header>
            <el-tooltip placement="top" trigger="hover" content="近30天内客户某一地址发生了变化">
              <span class="quesiton"><i class="el-icon-question"></i>近期地址是否变化</span>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.custAddressStatus == '0'">否</span>
            <span v-if="scope.row.custAddressStatus == '1'">是</span>
          </template>
        </el-table-column>
        <el-table-column prop="province" label="省" width="150" show-overflow-tooltip align="left"
          v-if="columns[11].visible"></el-table-column>
        <el-table-column prop="city" label="市" width="150" show-overflow-tooltip align="left"
          v-if="columns[12].visible"></el-table-column>
        <el-table-column prop="county" label="县区" width="150" show-overflow-tooltip align="left"
          v-if="columns[13].visible"></el-table-column>
        <el-table-column prop="street" label="镇/街道" width="150" show-overflow-tooltip align="left"
          v-if="columns[4].visible"></el-table-column>
        <el-table-column prop="community" label="村/社区" width="150" show-overflow-tooltip align="left"
          v-if="columns[5].visible"></el-table-column>
        <el-table-column prop="address" label="详细地址" align="left" width="150" show-overflow-tooltip
          v-if="columns[6].visible"></el-table-column>

        <el-table-column prop="anchorRemark" label="备注" align="left" width="150" show-overflow-tooltip
          v-if="columns[8].visible"></el-table-column>
        <el-table-column label="经度" align="left" width="180" v-if="columns[9].visible">
          <template slot-scope="scope">
            <span>{{ parseFloat(Number(scope.row.longitude).toFixed(2)) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="纬度" align="left" width="180" v-if="columns[10].visible">
          <template slot-scope="scope">
            <span>{{ parseFloat(Number(scope.row.latitude).toFixed(2)) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作" width="140px" align="left" fixed="right">
          <template #default="scope">
            <el-button type="text" @click.prevent="showDetails(scope.row)">详情</el-button>
            <el-button type="text" @click.prevent="startEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="确定删除吗？" icon="el-icon-info" iconColor="red" @confirm="deleteGrid(scope.row)">
              <el-button slot="reference" type="text" style="color: #f24957; margin-left: 10px">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-loading="loading" :data="examineTable" class="table common-table-cnt" v-if="showExamine && !showIgnore"
        @selection-change="handleSelectionChange" @sort-change="handleSortChange" ref="multipleTable" :key="table2Key"
        max-height="540">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="nickName" label="导入者" width="120" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column prop="updateTime" label="导入时间" sortable="updateTime" width="170" align="left"></el-table-column>
        <el-table-column prop="anchorName" label="客户名称" width="150" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column prop="belongBusiness" label="所在行业" align="left" width="150"
          show-overflow-tooltip></el-table-column>
        <el-table-column prop="source" align="left" width="100">
          <template #header>
            <el-tooltip placement="top" trigger="hover" content="指客户入格、在地图展示时,使用的地址来源,即该地址来自哪个业务系统或外部数据源">
              <span class="quesiton"><i class="el-icon-question"></i>使用来源</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="type" label="类型" align="left"></el-table-column> -->
        <el-table-column prop="addressName" align="left" width="100">
          <template #header>
            <el-tooltip placement="top" trigger="hover" content="指客户入格、在地图展示时,使用的地址类型,如企业注册地/经营地/个人居住地/工作地/户籍地等">
              <span class="quesiton"><i class="el-icon-question"></i>使用类型</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="custStatus" width="150" show-overflow-tooltip align="left">
          <template #header>
            <el-tooltip placement="top" trigger="hover" content="近30天内加入本系统的新客、历史非本系统存量有效客户">
              <span class="quesiton"><i class="el-icon-question"></i>是否新客</span>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.custStatus == '0'">否</span>
            <span v-if="scope.row.custStatus == '1'">是</span>
          </template>
        </el-table-column>
        <el-table-column prop="custAddressStatus" width="150" show-overflow-tooltip align="left">
          <template #header>
            <el-tooltip placement="top" trigger="hover" content="近30天内客户某一地址发生了变化">
              <span class="quesiton"><i class="el-icon-question"></i>近期地址是否变化</span>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.custAddressStatus == '0'">否</span>
            <span v-if="scope.row.custAddressStatus == '1'">是</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="原地址" width="250" show-overflow-tooltip align="left"> </el-table-column>
        <el-table-column prop="addressNow" label="现地址" width="250" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column prop="analyzeAdress" width="300" align="left">
          <template slot="header">
            <p style="text-align: center">解析结果</p>
            <p style="text-align: center">省-市-县/区-镇/街道-村/社区-门牌号</p>
          </template>
          <template slot-scope="scope">
            <div class="address-wrap">
              <el-button @click="handleEdit(scope.row, scope.$index)" icon="el-icon-edit" type="text"></el-button>
              <div class="address-cnt">
                <span>{{ scope.row.analyzeAdress }}</span>
                <el-input v-model="scope.row.addressDetailNow" placeholder="门牌号" size="mini"
                  style="width: 100px"></el-input>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addressRemark" label="备注" width="250" align="left">
          <template #default="scope">
            <el-input v-model="scope.row.addressRemark"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作" align="left" width="150" fixed="right">
          <template #default="scope">
            <el-button type="text" @click.prevent="useNewAdress([scope.row])">使用新地址</el-button>
            <el-button type="text" @click.prevent="ignoreGrid([scope.row])">忽略</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 已忽略地址库 -->
      <el-table v-loading="loading" :data="ignoreTable" class="table common-table-cnt" v-if="showIgnore && !showExamine"
        @selection-change="handleSelectionChange" @sort-change="handleSortChange" ref="multipleTable" :key="table3Key"
        max-height="540">
        <el-table-column type="selection" width="55" align="left"> </el-table-column>
        <el-table-column prop="updateTime" label="审核时间" sortable="updateTime" align="left" width="150"></el-table-column>
        <el-table-column prop="anchorName" label="客户名称" align="left" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="belongBusiness" label="所在行业" align="left" width="150"
          show-overflow-tooltip></el-table-column>
        <el-table-column prop="source" align="left" width="150" show-overflow-tooltip>
          <template #header>
            <el-tooltip placement="top" trigger="hover" content="指客户入格、在地图展示时,使用的地址来源,即该地址来自哪个业务系统或外部数据源">
              <span class="quesiton"><i class="el-icon-question"></i>使用来源</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="type" label="类型" align="left"></el-table-column> -->
        <el-table-column prop="addressName" align="left">
          <template #header>
            <el-tooltip placement="top" trigger="hover" content="指客户入格、在地图展示时,使用的地址类型,如企业注册地/经营地/个人居住地/工作地/户籍地等">
              <span class="quesiton"><i class="el-icon-question"></i>使用类型</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="addressRemark" label="备注" align="left" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="address" label="原地址" align="left"> </el-table-column>
        <el-table-column prop="addressNow" label="现地址" align="left">
        </el-table-column>
        <el-table-column prop="operate" label="操作" align="left" width="170">
          <template #default="scope">
            <el-button type="text" @click.prevent="addAdress([scope.row])">添加到审核页</el-button>
            <el-popconfirm title="确定删除吗？" icon="el-icon-info" iconColor="red" @confirm="deleteIgnoreGrid([scope.row])">
              <el-button slot="reference" type="text" style="color: #f24957; margin-left: 10px">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <section class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" layout=" prev, jumper, next,sizes">
        </el-pagination>
      </section>
    </section>
    <el-dialog :visible.sync="dialogVisible" title="编辑地址">
      <el-form :model="currentRow">
        <el-form-item label="镇/街道">
          <el-input v-model="currentRow.streetNow"></el-input>
        </el-form-item>
        <el-form-item label="村/社区">
          <el-input v-model="currentRow.communityNow"></el-input>
        </el-form-item>
        <el-form-item label="门牌号">
          <el-input v-model="currentRow.addressDetailNow"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </span>
    </el-dialog>
    <import-modal ref="importModal" :custType="selectedTab" :modalTitle="modalTitle"
      :defaultUploadClientType="uploadClientType" @onRefreshTable="onRefreshTable"></import-modal>
    <grouping-modal :checkedArr="selectionCheckeds" ref="groupingModal" :defaultUploadClientType="uploadClientType"
      @onRefreshTable="onRefreshTable"></grouping-modal>
    <tree-modal ref="treeModal" :currentRow="currentRow" @updateAddress="updateAddress"></tree-modal>
    <anchor-modal :custType="selectedTab" ref="anchorModal" :defaultUploadClientType="uploadClientType"
      @refreshPage="refresnAuthList"></anchor-modal>

    <div v-if="selectedRow !== null && !showExamine && !showIgnore" class="map-container">
      <el-form class="detail-info">
        <h4>客户地址详情<i @click="selectedRow = null" class="el-icon-close"></i></h4>
        <h5 class="common-title">地址信息</h5>
        <div v-if="!isEditing">
          <div class="common-celldz" v-for="(item, index) in getAddressListData(currentData)" :key="index">
            <div class="cell-left">{{ item[0].addressName }}</div>
            <div class="cell-right">
              <div v-for="(el, i) in item" :key="i" class="right-item">
                <div class="right-item-adress" :title="el.address">{{ el.address }}</div>
                <div class="right-item-source">
                  <el-tag>{{ el.source }}</el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="common-celldz" v-for="(item, index) in editedData.addressList" :key="index">
            <div class="cell-left">{{ item[0].addressName }}</div>
            <div class="cell-right">
              <div v-for="(el, i) in item" :key="i" class="right-item">
                <div class="right-item-adress" :title="el.address" v-if="el.source !== '手工导入'">{{ el.address }}</div>
                <el-input v-model="editedData.addressList[index][i].address" size="mini" v-else></el-input>
                <div class="right-item-source">
                  <el-tag>{{ el.source }}</el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="common-cell">
          <div></div>
        </div>
        <h5 class="common-title">客户信息</h5>
        <div class="common-cell">
          <p>客户名称</p>
          <div v-if="!isEditing">
            <span>{{ currentData.anchorName }}</span>
          </div>
          <el-input v-else v-model="editedData.anchorName" maxlength="20" size="mini"></el-input>
        </div>
        <div class="common-cell">
          <p>证件号</p>
          <div>
            <span>{{ currentData.legalId }}</span>
          </div>
        </div>
        <div class="common-cell">
          <p>客户类型</p>
          <div>
            <span v-if="selectedTab == '0'">个人</span>
            <span v-if="selectedTab == '1'">商户</span>
            <span v-if="selectedTab == '2'">企业</span>
          </div>
        </div>
        <div class="common-cell">
          <p>所在行业</p>
          <div v-if="!isEditing">
            <span>{{ currentData.belongBusiness }}</span>
          </div>
          <el-cascader v-else v-model='editedData.belongBusiness' :options="industryOptions" placeholder="请选择"
            class="input-name" :props="{ expandTrigger: 'hover', label: 'label', value: 'value', checkStrictly: true }">
          </el-cascader>
        </div>

        <h5 class="common-title">备注</h5>
        <el-input class="el-remark" type="textarea" v-if="!isEditing" disabled maxlength="100"
          :autosize="{ minRows: 2, maxRows: 4 }" v-model="currentData.anchorRemark"></el-input>
        <el-input class="el-remark" type="textarea" maxlength="100" v-else :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="在这里输入文本..." style="width: 100%" v-model="editedData.anchorRemark"></el-input>
        <div class="edit-operate">
          <el-popconfirm title="确定删除吗？" icon="el-icon-info" iconColor="red" @confirm="deleteGrid(selectedRow)">
            <el-button slot="reference" type="plain" size="small"
              style="background-color: #5e5e5d; color: #ffffff;margin-right:10px">删除</el-button>
          </el-popconfirm>
          <el-button type="primary" size="small" v-if="!isEditing" @click.prevent="startEdit(selectedRow)">编辑</el-button>
          <el-button type="primary" size="small" v-else @click.prevent="saveEdit">保存</el-button>
        </div>
      </el-form>

    </div>
    <div>
      <div v-if="showMap">
        <div v-loading="mapLoading" v-if="isMap">
          <iframe name="bdmap" :src="getIframeSrc()" style="width: 100%; height: 725px" />
        </div>
        <el-empty v-if="!isMap" description="该锚点状态未上图" style="width: 100%; height: 725px"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAnchorList,
  getAuditList,
  getIgnoreList,
  getAnchorDetail,
  updateAnchor,
  getCust,
  PassAudit,
  ReAudit,
  SetIgnoreUp,
  DelIgnore,
  DelAnchor,
  getUserProfile,
  refresh,
  importDataBySelect
} from '@/api/grid/anchor.js'
import { dataMap } from './constant-info'
import ImportModal from './components/import-modal'
import GroupingModal from './components/grouping-modal'
import AnchorModal from './components/anchor-modal'
import TreeModal from './components/tree-modal'
import { isEmpty, debounce } from 'lodash'
import { uid } from '@/utils'
import { getIndustryTree } from '@/api/system/listByRetailKeywords.js'
import { mapGetters } from 'vuex'

export default {
  components: { ImportModal, GroupingModal, AnchorModal, TreeModal },
  props: {
    fromPage: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      isMap: false,
      showMap: false,
      industryOptions: [],
      mapLoading: true,
      selectedTab: '2',
      searchText: '',
      // 显示搜索条件
      showSearch: true,
      tableData: [],
      // 需更改
      userid: 0,
      // 总条数
      total: 0,
      showModal: false,
      clientType: null,
      uploadClientType: null,
      showExamine: false,
      showIgnore: false,
      dialogVisible: false,
      textContent: '',
      currentRow: {}, // 当前行,为了改变新地址
      currentData: {
        anchorName: '',
        anchorRemark: '',
        belongBusiness: '',
        addressList: []
      }, // 用于显示详情页
      selectedRows: [], // 存储选中的行
      examineTable: [],
      ignoreTable: [],
      table1Key: 'table',
      table2Key: 'tableExamine',
      table3Key: 'tableIgnore',
      isEditing: false,
      editedData: [],
      editRow: null,
      selectedRow: null,
      fileList: [],
      companyExamineTable: [],
      ids: [],
      id: [],
      currentPage: 1,
      pageSize: 5,
      isCollapse: true,
      columns: [
        { 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: false },
        { key: 9, label: `经度`, visible: true },
        { key: 10, label: `纬度`, visible: true },
        { key: 11, label: `省`, visible: false },
        { key: 12, label: `市`, visible: false },
        { key: 13, label: `县区`, visible: false }
      ],
      belongBusinessOptions: [
        { value: '零售批发', label: '零售批发' },
        { value: '教育', label: '教育' },
        { value: '医疗', label: '医疗' }
      ],
      newStatus: false,
      addressStatus: false,
      modalTitle: '',
      typeMap: {},
      sourceType: [

        {
          label: '柜面核心',
          value: '柜面核心'
        },
        {
          label: '大信贷',
          value: '大信贷'
        },
        {
          label: 'EICC',
          value: 'EICC'
        },
        {
          label: 'ECIF',
          value: 'ECIF'
        },
        {
          label: '新华社',
          value: '新华社'
        },
        {
          label: '金综',
          value: '金综'
        },
        {
          label: '手工导入',
          value: '手工导入'
        },

      ],
      custStatusList: [
        {
          label: '否',
          value: '0'
        },
        {
          label: '是',
          value: '1'
        },
      ],
      statusList: [
        {
          label: '已上图',
          value: '已上图'
        },
        {
          label: '未上图',
          value: '未上图'
        },
      ],
      queryForm: {
        street: '',
        source: '',
        community: '',
        custStatus: '',
        custAddressStatus: '',
        status: ''
      },
      orderDefault: 'descending',
      orderByColumn: 'updateTime',
      selectionCheckeds: [],
      refreshLoading: false
    }
  },
  created() {
    const { query: { selectedTab } } = this.$route;
    if (selectedTab) {
      this.selectedTab = selectedTab;
      for (let key in this.$route.query) {
        delete this.$route.query[key];
      }
    }
    this.getList()
    window['mapProps'] = (params) => {
      console.log(params)
      if (params === "MAP_LOADING") {
        this.mapLoading = true
      }
      if (params === "MAP_LOADING_FINISH") {
        setTimeout(() => {
          this.mapLoading = false
        }, 500)
      }
      // this.getStateFromMap(params)
    }
  },
  mounted() {
    this.getUserProfile()
    this.initIndustryTree()
    window.gotoExamineClick = this.gotoExamineClick
  },
  watch: {
    isPrivate: {
      handler(val) {
        if (val) {
          this.selectedTab = '0'
          this.sourceType = [
          {
            label: '柜面核心',
            value: '柜面核心'
          },
          {
            label: '大信贷',
            value: '大信贷'
          },
          {
            label: 'EICC',
            value: 'EICC'
          },
          {
            label: 'ECIF',
            value: 'ECIF'
          },
          {
            label: '手工导入',
            value: '手工导入'
          },

        ]
          this.getList()
        }
      },
      immediate: true
    },
    fromPage: {
      handler(val) {
        if (val) {
          this.gotoExamine();
        }
      },
      immediate: true
    },
  },
  beforeDestroy() {
    this.$message.closeAll()
  },
  methods: {
    initIndustryTree() {
      getIndustryTree().then(res => {

        this.industryOptions = res.data.map(item => {
          return {
            value: item.name,
            label: item.name,
            children: item.industryTrees
          }
        })
        this.industryOptions.forEach(item => {
          item.children.forEach(el => {
            el.value = el.name
            el.label = el.name
          })
        })
      })
    },
    getIframeSrc() {
      const baseUrl = '/baidu/anchor.html'
      const queryString = new URLSearchParams({ 'NODE_ENV': process.env.NODE_ENV }).toString()
      return `${baseUrl}?${queryString}`
    },
    getAddressListData(obj) {
      if (isEmpty(obj?.addressList)) {
        return []
      }
      let arr = obj.addressList.map(ot => ({
        ...ot,
        uid: uid()
      }))
      const result = []
      arr.forEach(item => {
        let group = result.find(group => group[0].addressName === item.addressName)
        if (!group) {
          group = []
          result.push(group)
        }
        group.push(item)
      })
      return result
    },
    getAddressList(obj) {
      if (isEmpty(obj?.addressList)) {
        return []
      }
      let newData = [];
      obj.addressList.map(ot => {
        if (ot.longitude && ot.latitude) {
          newData.push({
            ...ot,
            uid: uid()
          });
        }
      })
      return newData
    },
    onRefreshTable() {
      this.currentPage = 1
      this.getList()
    },
    refresnAuthList() {
      this.currentPage = 1
      this.gotoShowExamine()
    },
    updateAddress(obj) {
      this.$set(this.examineTable, obj.tableIndex, {
        ...this.examineTable[obj.tableIndex],
        regionCode: obj.code,
        analyzeAdress: `${obj.province}-${obj.city}-${obj.county}-${obj.town}-${obj.village}`,
        provinceNow: obj.province,
        cityNow: obj.city,
        countyNow: obj.county,
        streetNow: obj.town,
        communityNow: obj.village,
      })
    },
    getStateFromMap(res) {
      this.mapLoading = false
    },
    getUserProfile() {
      getUserProfile().then((res) => {
        this.userid = res.data.userId
        localStorage.setItem('userid', this.userid)
      })
    },
    getList() {
      if (this.fromPage) {
        return;
      }
      this.selectedRow = null
      this.isEditing = false
      this.loading = true
      getAnchorList({
        userid: this.userid,
        custType: this.selectedTab,
        anchorName: this.searchText,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        type: this.typeMap.type,
        orderByColumn: 'a.updateTime',
        isAsc: 'descending',
        ...this.queryForm
      }).then((response) => {
        this.tableData = response?.rows || []
        this.total = response?.total || 0
      }).catch(err => console.error(err))
        .finally(() => {
          setTimeout(() => {
            this.loading = false
          }, 100)
        })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.currentPage = 1
      if (this.showExamine === true) {
        this.gotoShowExamine()
      } else if (this.showIgnore === true) {
        this.gotoShowIgnore()
      } else {
        this.getList()
      }
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      if (this.showExamine === true) {
        this.gotoShowExamine()
      } else if (this.showIgnore === true) {
        this.gotoShowIgnore()
      } else {
        this.getList()
      }
    },
    handleNewStatusChange() {
      this.newStatus = !this.newStatus
      this.addressStatus = false
      this.typeMap = {
        type: this.newStatus ? '新成立' : ''
      }
      this.searchQuery()
    },
    handleAddressChange() {
      this.addressStatus = !this.addressStatus
      this.newStatus = false
      this.typeMap = {
        type: this.addressStatus ? '地址变化' : ''
      }
      this.searchQuery()
    },
    doCollapse() {
      this.isCollapse = !this.isCollapse
    },
    resetFilters() {
      this.currentPage = 1
      this.queryForm = {
        street: '',
        source: '',
        community: ''
      }
      this.getList()
    },
    // 搜索按钮
    searchQuery() {
      this.currentPage = 1
      this.getList()
    },
    // 返回并刷新页面
    backToIndex() {
      this.newStatus = false
      this.addressStatus = false
      this.selectionCheckeds = []
      this.selectedRows = []
      this.currentPage = 1
      this.showExamine = false
      this.showIgnore = false
      this.getList()
    },
    // 获取锚点列表
    getAnchorData() {
      this.searchText = ''
      this.currentPage = 1
      this.getList()
    },
    gotoExamineClick() {
      this.$message.closeAll()
      this.gotoExamine()
    },
    // 展示审核页面
    gotoExamine() {
      this.showMap = false
      this.orderDefault = 'descending'
      this.doCommonGetAuditListData()
    },
    doCommonGetAuditListData() {
      this.currentPage = 1
      this.addressStatus = false
      this.newStatus = false
      this.gotoShowExamine()
    },
    gotoShowExamine() {
      this.showExamine = true
      this.selectedRows = []
      let typeVal = ''
      if (this.newStatus) {
        typeVal = '新成立'
      }
      if (this.addressStatus) {
        typeVal = '地址变化'
      }
      this.loading = true
      getAuditList({
        userid: this.userid,
        custType: this.selectedTab,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        orderByColumn: this.orderByColumn,
        isAsc: this.orderDefault,
        type: typeVal
      })
        .then((response) => {
          this.examineTable = response.rows?.map(ot => ({
            ...ot,
            analyzeAdress: ot.provinceNow ? `${ot.provinceNow}-${ot.cityNow}-${ot.countyNow}-${ot.streetNow}-${ot.communityNow}` : '无 - '
          }))
          this.total = response.total
        })
        .catch((error) => {
          console.error('error', error)
        })
        .finally(() => {
          setTimeout(() => {
            this.loading = false
          }, 100)
        })
    },
    // 展示已忽略地址页面
    gotoIgnore() {
      this.orderDefault = 'descending'
      this.doCommonGetIgnoreList()
    },
    doCommonGetIgnoreList() {
      this.currentPage = 1
      this.addressStatus = false
      this.newStatus = false
      this.gotoShowIgnore()
    },
    gotoShowIgnore() {
      this.showIgnore = true
      let typeVal = ''
      if (this.newStatus) {
        typeVal = '新成立'
      }
      if (this.addressStatus) {
        typeVal = '地址变化'
      }
      this.loading = true
      getIgnoreList({
        userid: this.userid,
        custType: this.selectedTab,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        orderByColumn: this.orderByColumn,
        isAsc: this.orderDefault,
        type: typeVal
      })
        .then((response) => {
          this.ignoreTable = response.rows
          this.total = response.total
        })
        .catch((error) => {
          console.log('error', error)
        })
        .finally(() => {
          setTimeout(() => {
            this.loading = false
          }, 100)
        })
    },
    handleTabChange(val) {
      console.log(this.fromPage, 1111)
      if (this.fromPage) {
        this.gotoExamine();
        return;
      }
      // 根据选中的选项更新表格数据
      if (val == '0') {
        this.sourceType = [
          {
            label: '柜面核心',
            value: '柜面核心'
          },
          {
            label: '大信贷',
            value: '大信贷'
          },
          {
            label: 'EICC',
            value: 'EICC'
          },
          {
            label: 'ECIF',
            value: 'ECIF'
          },
          {
            label: '手工导入',
            value: '手工导入'
          },

        ]

      } else if (val == '1' || val == '2') {
        this.sourceType = [
          {
            label: '柜面核心',
            value: '柜面核心'
          },
          {
            label: '大信贷',
            value: '大信贷'
          },
          {
            label: 'EICC',
            value: 'EICC'
          },
          {
            label: 'ECIF',
            value: 'ECIF'
          },
          {
            label: '新华社',
            value: '新华社'
          },
          {
            label: '金综',
            value: '金综'
          },
          {
            label: '手工导入',
            value: '手工导入'
          },
        ]
      }

      this.searchText = ''
      this.showExamine = false
      this.showIgnore = false
      this.getAnchorData()
    },
    renderHeader(h, { column }) {
      const label = column.label.split('\n')
      return h('div', { style: 'display:flex;flex-direction:column;' }, [h('span', label[0]), h('span', label[1])])
    },
    initGetAnchorDetail(row) {
      this.showMap = true
      if (row.longitude == null && row.latitude == null) {
        // this.mapLoading = true
        this.isMap = false
        this.selectedRow = { ...row }
        getAnchorDetail({ anchorid: this.selectedRow.id })
          .then((response) => {
            if (this.showDetail == 'view') {
              this.isEditing = false
            } else if (this.showDetail == 'edit') {
              this.isEditing = true
            }
            this.currentData = response.data
            return response.data
          })
          .catch((error) => {
            console.error('error', error)
          })
      } else {
        this.mapLoading = false
        this.isMap = true
        this.selectedRow = { ...row }
        getAnchorDetail({ anchorid: this.selectedRow.id })
          .then((response) => {
            if (this.showDetail == 'view') {
              this.isEditing = false
            } else if (this.showDetail == 'edit') {
              this.isEditing = true
            }
            this.currentData = response.data
            return response.data
          })
          .catch((error) => {
            console.error('error', error)
          })
        setTimeout(() => {
          if (row.longitude && row.latitude) {
            var lng = parseFloat(row.longitude)
            var lat = parseFloat(row.latitude)
            window.frames['bdmap'].addMarker(lng, lat)
          }
        }, 1500)
      }
    },
    showDetails(row) {
      console.log(11111)

      this.showDetail = 'view'
      this.initGetAnchorDetail(row)


    },
    startEdit: debounce(function (row) {
      this.showDetail = 'edit'
      this.initGetAnchorDetail(row)
      setTimeout(() => {
        // this.selectedRow = { ...row }
        this.editRow = row
        this.editedData = this.currentData
        const result = []
        if (this.editedData.addressList && this.editedData.addressList.length > 0) {
          this.editedData.addressList.forEach(item => {
            let group = result.find(group => group[0].addressName === item.addressName)
            if (!group) {
              group = []
              result.push(group)
            }
            group.push(item)
          })
        }

        delete this.editedData.addressList
        this.editedData.addressList = result
        console.log(this.editedData, 'this.editedData')

      }, 1500)
    }, 1000),
    // startEdit(row) {

    // },
    saveEdit() {
      console.log(this.editedData, 'this.editedData6666666')
      if (this.editRow) {
        const index = this.tableData.findIndex((item) => item.id === this.editRow.id)
        if (index !== -1) {
          if (this.editedData.addressList === null) {
            this.editedData.addressList = []
          } else {
            let arr = this.editedData.addressList.flat()
            delete this.editedData.addressList
            this.editedData.addressList = arr
            console.log(this.editedData, 'arrrrr')
          }
          this.editedData.belongBusiness = this.editedData.belongBusiness ? this.editedData.belongBusiness[this.editedData.belongBusiness.length - 1] : ''
          updateAnchor(this.editedData, this.userid).then((response) => {
            console.log(response)
            this.getList()
          })
        }

      }
    },
    goCustDetail(row) {
      if (this.selectedTab == '0') {
        this.$router.push({
          path: '/360charts/indexcharts',
          query: {
            custId: row.custId,
            selectedTab: this.selectedTab,
            backUrl: '/grid/map/anchor'
          }
        })
      } else if (this.selectedTab == '1') {
        this.$router.push({
          path: '/360charts/commercial/',
          query: {
            custId: row.custId,
            selectedTab: this.selectedTab,
            backUrl: '/grid/map/anchor'
          }
        })
      } else if (this.selectedTab == '2') {
        this.$router.push({
          path: '/360charts/firm/',
          query: {
            custId: row.custId,
            selectedTab: this.selectedTab,
            backUrl: '/grid/map/anchor'
          }
        })
      }
    },
    // 审核页面编辑地址
    handleEdit(row, tag) {
      this.currentRow = { ...row, tag }
      this.$refs.treeModal.onOpen()
      // this.dialogVisible = true
    },
    // 审核页面保存编辑地址
    handleSave() {
      const index = this.examineTable.findIndex((item) => item.id === this.currentRow.id)
      if (index !== -1) {
        this.examineTable.splice(index, 1, this.currentRow)
        this.dialogVisible = false
      }
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    handleAnchorSelectionChange(checkeds) {
      this.selectionCheckeds = checkeds
      console.log(checkeds)
    },
    refreshTable() {
      this.$message.closeAll()
      this.refreshLoading = true;
      refresh(this.userid, this.selectedTab).then((response) => {
        this.textContent = response.msg
        this.refreshLoading = false;
        this.$message({
          message: this.getHtmlStr(response.data),
          type: 'error',
          iconClass: 'el-icon-warning',
          customClass: 'message-cnt',
          duration: 0,
          dangerouslyUseHTMLString: true,
          showClose: true,
        })
      })
    },
    getHtmlStr(res) {
      const obj = dataMap[this.selectedTab]
      return `新发现了 <span  >${res.newAnchorNum}</span> ${obj.names},
      <span  >${res.changeAnchorNum}</span> ${obj.tips}！
      仍有<span class="text-line" onclick="gotoExamineClick()">${res.auditAnchorNum}</span>${obj.str}`
    },
    useNewAdress(rows) {
      PassAudit(rows).then((response) => {
        console.log(response)
        if (response.code === 200) {
          this.$message.success(response.msg)
          this.selectedRows = []
          this.gotoShowExamine()
        }
      })
      this.$refs.multipleTable.clearSelection()
    },
    ignoreGrid(rows) {
      const newArr = rows?.map((item) => ({
        ...item
      }))
      SetIgnoreUp(newArr).then((response) => {
        console.log(response)
        if (response.code === 200) {
          this.$message.success(response.msg)
        }
        this.selectedRows = []
        this.gotoShowExamine()
      })
    },
    handleSortChange(col) {
      this.orderByColumn = col.order ? col.prop : 'updateTime'
      this.orderDefault = col.order ? col.order : 'descending'
      if (this.showExamine) {
        this.doCommonGetAuditListData()
      }
      if (this.showIgnore) {
        this.doCommonGetIgnoreList()
      }
    },
    useNewBatchAdress() {
      if (this.selectedRows.length === 0) {
        return
      }
      this.useNewAdress(this.selectedRows)
    },
    ignoreBatchGrid() {
      if (this.selectedRows.length === 0) {
        return
      }
      this.ignoreGrid(this.selectedRows)
    },
    // 使用新地址
    addAdress(rows) {
      if (rows.length > 1) {
        this.ids = rows.map((row) => row.id)
      } else {
        this.ids = [rows[0].id]
      }
      ReAudit(this.ids).then((response) => {
        console.log(response)
        if (response.code === 200) {
          this.$message.success(response.msg)
          this.gotoShowIgnore()
        }
      })
    },
    // 删除已忽略地址
    deleteIgnoreGrid(rows) {
      if (rows.length > 1) {
        this.ids = rows.map((row) => row.id)
      } else {
        this.ids = [rows[0].id]
      }
      DelIgnore(this.ids).then((response) => {
        console.log(response)
        if (response.code === 200) {
          this.$message.success(response.msg)
          this.gotoShowIgnore()
        }
      })
    },
    // 删除锚点
    deleteGrid(rows) {
      if (rows.length > 1) {
        this.ids = rows.map((row) => row.id)
      } else {
        this.ids = [rows.id]
      }
      DelAnchor(this.ids).then((response) => {
        console.log(response)
        if (response.code === 200) {
          this.$message.success(response.msg)
          this.getList()
        }
      })
    },
    // 批量使用新地址地址
    addBatchAdress() {
      if (this.selectedRows.length === 0) {
        return
      }
      this.addAdress(this.selectedRows)
    },
    // 批量删除已忽略地址
    deleteBatchIgnoreGrid() {
      if (this.selectedRows.length === 0) {
        return
      }
      this.deleteIgnoreGrid(this.selectedRows)
    },
    newlyEstablish() {
      this.newStatus = !this.newStatus
      this.addressStatus = false
      this.currentPage = 1
      if (this.showExamine === true) {
        this.currentPage = 1
        this.gotoShowExamine()
      } else {
        this.gotoShowIgnore()
      }
    },
    openAddAnchorModal() {
      this.$refs.anchorModal.onOpen()
    },
    adrdressChange() {
      this.addressStatus = !this.addressStatus
      this.newStatus = false
      this.currentPage = 1
      if (this.showExamine === true) {
        this.gotoShowExamine()
      } else {
        this.gotoShowIgnore()
      }
    },
    submitUpload() { },
    handleImport() {
      this.$refs.importModal.onOpen()
      this.modalTitle = '用户导入'
      this.uploadClientType = this.selectedTab
    },
    onGrouping() {
      if (this.selectionCheckeds.length === 0) {
        return
      }
      this.uploadClientType = this.selectedTab
      console.log(this.uploadClientType)
      this.$refs.groupingModal.onOpen()
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    handleFileUpload(event) {
      const file = event.target.flies[0]
      if (file) {
        this.fileName = file.name
        this.uploadFile(file)
      }
    },
    uploadFile(file) {
      const formData = new FormData()
      formData.append('file', file)
    }
  },
  computed: {
    ...mapGetters(['roles']),
    examineWithNewAdress() {
      return this.examineTable.map((item) => ({
        ...item,
        newAdress: `${item.firAdress} ${item.scoAdress}`
      }))
    },
    currentDataValue() {
      if (Object.keys(this.currentData).length === 0) {
        return {}
      } else {
        return this.currentData
      }
    },
    isPublic() {
      return this.roles.includes('headPublic')
    },
    isPrivate() {
      return this.roles.includes('headPrivate')
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.anchorButton {
  background-color: #409eff;
  color: white;
  border-radius: 0;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-bottom: 10px;
}

.table-wrap {
  width: 100%;
  margin-top: 16px;
  padding: 0 30px;
}

.dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.el-table .cell {
  white-space: pre-wrap;
}

.examineButton {
  background-color: #5cacfc;
  color: white;
  border-radius: 0;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.customer-wrap {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
  height: calc(100vh - 135px);
  border-radius: 16px 16px 0 0;
  overflow-y: auto;

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

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

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

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

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

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

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

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

.operate-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 30px;
  margin-top: 24px;
}

.icon-back {
  font-size: 20px;
  margin-right: 10px;
  cursor: pointer;
  vertical-align: middle;
}

.common-operate-wrap {
  padding: 0 30px;

  .el-button {
    padding: 8px 20px;

    &.radius-btn {
      border-radius: 16px;
    }
  }

  &.audit-operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.map-container {
  position: relative;

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

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

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

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

.common-cell {
  display: flex;
  align-items: flex-start;
  padding: 0 30px;

  p {
    width: 82px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #cccccc;
    line-height: 32px;
    font-weight: 400;

  }

  >div {
    flex: 1;
  }

  span {
    font-size: 14px;
    color: #cccccc;
    line-height: 32px;
    font-weight: 400;
    word-break: break-all;
  }
}

.edit-operate {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 30px;
  border-top: 1px solid #646363;
}

.el-remark {
  padding: 0 30px;
  margin-bottom: 30px;

  ::v-deep .el-textarea__inner {
    background-color: #ffffff1a;
    color: #cccccc;
  }
}

.select-container {

  justify-content: space-between;
  align-items: flex-start;
  padding: 0 30px;
  margin: 20px 0;

  ::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 {
    text-align: right;
    padding: 30px 30px 0 0;


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

.common-celldz {
  display: flex;
  align-items: center;
  padding: 0 30px;
  font-size: 14px;
}

.cell-left {
  width: 82px
}

.cell-right {
  flex: 1;
}

.right-item {
  display: flex;
  line-height: 40px;

  ::v-deep .el-input {
    width: 150px;
  }
}

.right-item-adress {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.right-item-source {
  margin-left: 30px;
}
</style>
<style lang="scss">
.message-cnt {
  min-width: 400px;
  background-color: #f6263514;
  border-radius: 20px;
  padding: 11px 15px 11px 20px;
  border: 1px solid #f6263533;
  top: 204px !important;

  // left: 56.8%;
  .el-message__content {
    color: #f62635;
  }

  .el-icon-warning {
    margin-right: 10px;
    color: #f62635;
  }

  .text-line {
    text-decoration: underline;
    text-underline-offset: 5px;
    cursor: pointer;
  }
}

.address-cnt {
  display: flex;
  align-items: center;
}

.address-wrap {
  display: flex;
  align-items: center;
}

.no-click {
  background-color: #7fa9f6 !important;
  cursor: not-allowed !important;
}

.no-click-danger {
  color: #ffffff;
  background-color: #ffa4a4;
  border-color: #ffa4a4;
}

.btn-no-click {
  background-color: rgba(72, 134, 248, 0.01) !important;
  cursor: not-allowed !important;
}
</style>
