<template>
  <div class="customer-wrap">
    <div>
      <el-radio-group class="header-radio" v-model="selectedTab" @input="handleChange">
        <el-radio-button label="2" :disabled="isPrivate" :class="{ 'btn-disabled': isPrivate }">企业</el-radio-button>
        <el-radio-button label="1" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">商户</el-radio-button>
        <el-radio-button label="0" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">个人</el-radio-button>
      </el-radio-group>
      <el-row :gutter="24" style="padding: 0 30px;">
        <el-col :span="this.shyh == '总行' ? 8 : 12" v-if="this.shyh != '客户经理'">
          <el-card class="box-card">
            <div class="my-span-checklist-header">
              <span class="my-span-checklist-title">我创建的营销清单</span>
              <span class="viewAll" @click="handleWdAll" v-if="this.shyh != '客户经理'">查看全部 <i
                  class="el-icon-arrow-right"></i>
              </span>
            </div>
            <div class="my-span-checklist-content">
              <div :class="{ active: currentTable === 1 }" class="my-span-checklist-content-item"
                v-for="(item, index) in groupTag" @click="handleCheckCustomerList(item, '我的')" :key="index">{{
                  item.campaignName }}
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="this.shyh == '总行' ? 8 : this.shyh == '支行' ? 12 : 24">
          <el-card class="box-card1">
            <div class="my-span-checklist-header">
              <span class="my-span-checklist-title">推送给我的营销清单</span>
              <span class="viewAll" @click="handleTsAll" v-if="this.shyh != '总行'">查看全部<i class="el-icon-arrow-right"></i>
              </span>
            </div>

            <div class="my-span-checklist-content">
              <div class="my-span-checklist-content-item" v-for="(item, index) in groupTag2"
                @click="handleCheckCustomerList(item, '推荐')" :key="index">{{ item.campaignName }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8" v-if="this.shyh == '总行'">
          <el-card class="box-card1">
            <div class="my-span-checklist-header">
              <span class="my-span-checklist-title">其他的营销清单</span>
              <span class="viewAll" @click="handleOtherAll">查看全部<i class="el-icon-arrow-right"></i>
              </span>
            </div>
            <div class="my-span-checklist-content">
              <div class="my-span-checklist-content-item" v-for="(item, index) in groupTag3"
                @click="handleCheckCustomerList(item, '其他')" :key="index">{{ item.campaignName }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <section class="main-wrap">
          <section class="search-box" v-if="showSearch">
            <section class="search-cnt">
              <el-input v-model="searchQuery" 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>
          <!-- 总行视角----我的营销清单 -->
          <el-form ref="" :model="searchFrom" label-width="130px" v-if="(this.shyh == '总行' && this.qdzt == '我的')"
            class="searchForm">
            <el-row :gutter="24">
              <el-col :span="7">
                <el-form-item label="紧急程度">
                  <el-select v-model="searchFrom.campaignDegree" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in jjcdList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="机构认领状态">
                  <el-select v-model="searchFrom.orgClaimStatus" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in rlList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="机构分配状态">
                  <el-select v-model="searchFrom.orgDistributeStatus" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in fpList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="3" style="line-height: 38px;">
                <span v-if="!this.isZk" @click="handleZk" class="zhk">展开<i class="el-icon-arrow-down "></i></span>
                <span v-if="this.isZk" @click="handleSq" class="zhk">收起<i class="el-icon-arrow-up "></i></span>
              </el-col>
            </el-row>
            <el-row :gutter="24" v-if="this.isZk">
              <el-col :span="7">
                <el-form-item label="开始时间">
                  <el-date-picker v-model="searchFrom.startTime" type="date" placeholder="选择日期" clearable
                    @change="handleSearchChange" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="结束时间">
                  <el-date-picker v-model="searchFrom.endTime" type="date" placeholder="选择日期" @change="handleSearchChange"
                    value-format="yyyy-MM-dd" clearable></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="认领结束时间">
                  <el-date-picker v-model="searchFrom.claimEndTime" type="date" placeholder="选择日期" clearable
                    @change="handleSearchChange" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row :gutter="24" v-if="this.isZk">
              <el-col :span="7">
                <el-form-item label="活动进度">
                  <el-select v-model="searchFrom.actionStatus" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in hdjdList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="认领类型">
                  <el-select v-model="searchFrom.claimType" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in rlTypeList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="执行机构">
                  <el-cascader v-model='searchFrom.belongDept' :options="departOptions" @change="handleSearchChange"
                    clearable :props="{ expandTrigger: 'hover', label: 'label', value: 'id', checkStrictly: true }">
                  </el-cascader>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row class="queryBtn">
              <el-col>
                <el-button type="primary" @click="handleQuery" size="small">查询</el-button>
                <el-button @click="handleRest" size="small">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
          <!-- 总行视角----其他营销清单 ，支行视角----我的营销清单-->
          <el-form ref="" :model="searchFrom" label-width="130px" class="searchForm"
            v-if="(this.shyh == '总行' && this.qdzt == '其他') || (this.shyh == '支行' && this.qdzt == '我的')">
            <el-row :gutter="24">
              <el-col :span="7">
                <el-form-item label="紧急程度">
                  <el-select v-model="searchFrom.campaignDegree" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in jjcdList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="活动进度">
                  <el-select v-model="searchFrom.actionStatus" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in hdjdList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="认领类型">
                  <el-select v-model="searchFrom.claimType" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in rlTypeList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="3" style="line-height: 38px;">
                <span v-if="!this.isZk" @click="handleZk" class="zhk">展开<i class="el-icon-arrow-down "></i></span>
                <span v-if="this.isZk" @click="handleSq" class="zhk">收起<i class="el-icon-arrow-up "></i></span>
              </el-col>
            </el-row>
            <el-row :gutter="24" v-if="this.isZk">
              <el-col :span="7">
                <el-form-item label="开始时间">
                  <el-date-picker v-model="searchFrom.startTime" type="date" placeholder="选择日期" clearable
                    @change="handleSearchChange" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="结束时间">
                  <el-date-picker v-model="searchFrom.endTime" type="date" placeholder="选择日期" @change="handleSearchChange"
                    clearable value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row class="queryBtn">
              <el-col>
                <el-button type="primary" @click="handleQuery" size="small">查询</el-button>
                <el-button @click="handleRest" size="small">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
          <!-- 支行视角----推送营销清单 -->
          <el-form ref="" :model="searchFrom" label-width="130px" v-if="(this.shyh == '支行' && this.qdzt == '推送')"
            class="searchForm">
            <el-row :gutter="24">
              <el-col :span="7">
                <el-form-item label="紧急程度">
                  <el-select v-model="searchFrom.campaignDegree" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in jjcdList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="活动进度">
                  <el-select v-model="searchFrom.actionStatus" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in hdjdList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>

              </el-col>
              <el-col :span="7">
                <el-form-item label="认领类型">
                  <el-select v-model="searchFrom.claimType" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in rlTypeList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>

              </el-col>

              <el-col :span="3" style="line-height: 38px;">
                <span v-if="!this.isZk" @click="handleZk" class="zhk">展开<i class="el-icon-arrow-down "></i></span>
                <span v-if="this.isZk" @click="handleSq" class="zhk">收起<i class="el-icon-arrow-up "></i></span>
              </el-col>
            </el-row>
            <el-row :gutter="24" v-if="this.isZk">
              <el-col :span="7">
                <el-form-item label="开始时间">
                  <el-date-picker v-model="searchFrom.startTime" type="date" placeholder="选择日期" clearable
                    @change="handleSearchChange" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="结束时间">
                  <el-date-picker v-model="searchFrom.endTime" type="date" placeholder="选择日期" @change="handleSearchChange"
                    clearable value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="认领结束时间">
                  <el-date-picker v-model="searchFrom.claimEndTime" type="date" placeholder="选择日期" clearable
                    @change="handleSearchChange" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row :gutter="24" v-if="this.isZk">
              <el-col :span="7">
                <el-form-item label="认领状态">
                  <el-select v-model="searchFrom.orgClaimStatus" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in rlList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="分配状态">
                  <el-select v-model="searchFrom.orgDistributeStatus" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in fpList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="queryBtn">
              <el-col>
                <el-button type="primary" @click="handleQuery" size="small">查询</el-button>
                <el-button @click="handleRest" size="small">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
          <!-- 个人视角---推送营销清单 -->
          <el-form ref="" :model="searchFrom" label-width="130px" v-if="(this.shyh == '客户经理')" class="searchForm">
            <el-row :gutter="24">
              <el-col :span="7">
                <el-form-item label="清单来源">
                  <el-select v-model="searchFrom.createRole" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in createRoleList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>

              </el-col>
              <el-col :span="7">
                <el-form-item label="紧急程度">
                  <el-select v-model="searchFrom.campaignDegree" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in jjcdList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="活动进度">
                  <el-select v-model="searchFrom.actionStatus" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in hdjdList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="line-height: 38px;">
                <span v-if="!this.isZk" @click="handleZk" class="zhk">展开<i class="el-icon-arrow-down "></i></span>
                <span v-if="this.isZk" @click="handleSq" class="zhk">收起<i class="el-icon-arrow-up "></i></span>
              </el-col>
            </el-row>
            <el-row :gutter="24" v-if="this.isZk">
              <el-col :span="7">
                <el-form-item label="开始时间">
                  <el-date-picker v-model="searchFrom.startTime" type="date" placeholder="选择日期" clearable
                    @change="handleSearchChange" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="结束时间">
                  <el-date-picker v-model="searchFrom.endTime" type="date" placeholder="选择日期" @change="handleSearchChange"
                    clearable value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="认领类型">
                  <el-select v-model="searchFrom.claimType" @change="handleSearchChange" clearable>
                    <el-option v-for="(item, index) in rlTypeList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row class="queryBtn">
              <el-col>
                <el-button type="primary" @click="handleQuery" size="small">查询</el-button>
                <el-button @click="handleRest" size="small">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="handleRest" :columns="columns"
            class="ri-btn"></right-toolbar>
          <section class="table-wrap">
            <el-table :data="tableData" style="width: 100%" row-key="generateRowKey" :loading="tableLoading">
              <el-table-column prop="groupId" type="selection" label="全选" v-if="isSelected"></el-table-column>
              <el-table-column prop="createRole" label="清单来源" align="center" v-if="columns[0].visible" :key="0">
                <template slot-scope="scope">
                  {{ scope.row.createRole == "0" ? "总行" : "支行" }}
                </template>
              </el-table-column>
              <el-table-column prop="groupType" label="清单类型" align="center" v-if="columns[1].visible" :key="1">
                <template slot-scope="scope">
                  <span v-if="scope.row.groupType == '0'">我创建的营销清单</span>
                  <span v-if="scope.row.groupType == '1'">推送给我的营销清单</span>
                  <span v-if="scope.row.groupType == '2'">其他的营销清单</span>
                </template>
              </el-table-column>
              <el-table-column prop="sendDept" label="下发支行"
                v-if="(columns[2].visible && (this.shyh == '总行' && this.qdzt == '其他'))" :key="2">

              </el-table-column>
              <el-table-column prop="groupName" label="清单名称" v-if="columns[3].visible" :key="3"></el-table-column>
              <el-table-column prop="customerNum" label="客户数" v-if="columns[4].visible" :key="4"></el-table-column>
              <el-table-column prop="campaignName" label="任务名称" v-if="columns[5].visible" :key="5"></el-table-column>
              <el-table-column prop="checkTarget" label="考核目标" v-if="columns[17].visible" :key="17"></el-table-column>
              <el-table-column width="120" label="活动创建时间" v-if="columns[6].visible" :key="6">
                <template slot-scope="scope">
                  {{ formatDate(scope.row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="" label="开始时间" v-if="columns[7].visible" width="110" :key="7">
                <template slot-scope="scope">
                  {{ formatDate(scope.row.startTime) }}
                </template>
              </el-table-column>
              <el-table-column label="结束时间" v-if="columns[8].visible" width="110" :key="8">
                <template slot-scope="scope">
                  {{ formatDate(scope.row.endTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="actionStatus" label="活动进度" v-if="columns[9].visible" :key="9"></el-table-column>
              <el-table-column prop="campaignDegree" label="紧急程度" v-if="columns[10].visible" :key="10"></el-table-column>
              <el-table-column prop="belongDept" label="执行机构"
                v-if="(this.shyh == '总行' && this.qdzt == '我的') && columns[11].visible" :key="11">

              </el-table-column>
              <el-table-column prop="claimEndTime" label="认领结束时间" width="120" :key="12"
                v-if="((this.shyh == '总行' && this.qdzt == '我的') || (this.shyh == '支行' && this.qdzt == '推送') || this.shyh == '客户经理') && columns[12].visible"></el-table-column>
              <el-table-column prop="claimType" label="认领类型" v-if="columns[13].visible" :key="13">
                <template slot-scope="scope">
                  {{ scope.row.claimType == "0" ? "强制认领" : "可选认领" }}
                </template>
              </el-table-column>
              <el-table-column prop="orgClaimStatus" :label="this.shyh == '总行' ? '机构认领状态' : '认领状态'" :key="14"
                v-if="((this.shyh == '总行' && this.qdzt == '我的') || (this.shyh == '支行' && this.qdzt == '推送')) && columns[14].visible"
                width="120">

                <template slot-scope="scope">
                  <span v-if="scope.row.orgClaimStatus == '0'">待认领</span>
                  <span v-else-if="scope.row.orgClaimStatus == '1'">已认领</span>
                  <span v-else>{{ scope.row.orgClaimStatus }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="orgDistributeStatus" :label="this.shyh == '总行' ? '机构分配状态' : '分配状态'" :key="15"
                v-if="((this.shyh == '总行' && this.qdzt == '我的') || (this.shyh == '支行' && this.qdzt == '推送')) && columns[15].visible"
                width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.orgDistributeStatus == '0'">待分配</span>
                  <span v-else-if="scope.row.orgDistributeStatus == '1'">已分配</span>
                  <span v-else>{{ scope.row.orgDistributeStatus }}</span>
                </template>
              </el-table-column>
              <el-table-column width="120" align="center" prop="receiveSitustion" label="客户经理认领率" :key="16"
                v-if="columns[16].visible && this.shyh != '客户经理'"></el-table-column>

              <el-table-column prop="operate" label="操作" width="220" fixed="right">
                <template slot-scope="scope">
                  <div style="display: flex;">
                    <el-button type="text" size="small" @click="handleViewDetails(scope.row)">查看详情</el-button>

                    <div v-if="shyh == '总行'">
                      <el-button :disabled="true" type="text" size="small" v-if="qdzt != '其他'"
                        class="detail_btn">提醒分配</el-button>
                    </div>
                    <div v-if="scope.row.deptId">
                      <el-button type="text" size="small" @click="handleorgClaim(scope.row.groupId, scope.row.campaignId)"
                        v-if="(shyh == '支行' && qdzt == '推送')" :disabled="scope.row.orgClaimStatus != '0'"
                        class="detail_btn">认领</el-button>
                    </div>



                    <div v-if="(shyh == '支行' && qdzt == '推送')">
                      <el-button type="text" size="mini" class="detail_btn"
                        v-if="((scope.row.orgClaimStatus == '1' && scope.row.secondPushStatus == '0') || (scope.row.orgClaimStatus == '1' && scope.row.secondPushStatus == '1'))"
                        @click="
                          handlePushGroupCustomer(
                            scope.row.groupId,
                            scope.row.groupType == '1' ? '0' : '1',
                            scope.row.campaignId,
                            scope.row,
                            '2',
                            scope.row.createRole
                          )
                        ">去分配</el-button>
                    </div>
                  </div>


                </template>
              </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="->,total,prev,pager,next,sizes" :total="total"
              :current-page="pageNum"></el-pagination>
          </section>
        </section>
      </el-row>
    </div>
    <el-dialog :title="pushTitle" :visible.sync="pushOpen" width="700px" append-to-body @close="handleCancle"
      class="pushDialog">
      <el-form ref="pushform" :model="pushform" :rules="pushroles" label-width="100px">
        <p class="common-title">填写任务信息</p>
        <el-row class="formItem">
          <el-col :span="24">
            <el-form-item label="任务名称" prop="campaignName">
              <el-input v-model="pushform.campaignName" maxlength="30" placeholder="请输入任务名称" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="formItem">
          <el-col :span="24">
            <el-form-item label="紧急程度" prop="campaignDegree">
              <el-select v-model="pushform.campaignDegree" placeholder="请选择紧急程度" disabled>
                <el-option label="高" value="高"></el-option>
                <el-option label="中" value="中"></el-option>
                <el-option label="低" value="低"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="formItem">
          <el-col :span="24">
            <el-form-item label="认领类型" prop="claimType">
              <el-select v-model="pushform.claimType" placeholder="请选择认领类型" disabled>
                <el-option label="强制认领" value="0"></el-option>
                <el-option label="可选认领" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="formItem">
          <el-col :span="24">
            <el-form-item label="任务时间" prop="taskDate">
              <el-date-picker v-model="pushform.taskDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd" disabled>
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="formItem">
          <el-col :span="24">
            <el-form-item label="认领时间" prop="claimDate" style="flex: 1">
              <el-date-picker v-model="pushform.claimDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd" disabled>
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="formItem">
          <el-col :span="24">
            <el-form-item label="任务类型" prop="taskType">
              <el-radio-group v-model="pushform.taskType" disabled>
                <el-radio label="0">营销任务</el-radio>
                <el-radio label="1">事务任务</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="formItem" v-if="pushform.taskType == '0'">
          <el-col :span="24">
            <el-form-item label="活动方式" prop="campaignType">
              <el-select v-model="pushform.campaignType" placeholder="请选活动方式" allow-create clearable filterable disabled>
                <el-option v-for="item in campaignTypeList" :key="item.value" :label="item.label"
                  :disabled="item.disabled" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="formItem">
          <el-col :span="24" v-if="pushform.taskType == '0'">
            <el-form-item label="考核目标" prop="checkTarget">
              <el-select v-model="pushform.checkTarget" placeholder="请选考核目标" allow-create clearable filterable disabled>
                <el-option v-for="item in goalList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="formItem">
          <el-col :span="24">
            <el-form-item label="任务指标" prop="taskIndex">
              <el-input v-model="pushform.taskIndex" placeholder="请输入任务指标,如贷款时点余额较上年末时点余额提示50%" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="formItem">
          <el-col :span="24">
            <el-form-item label="奖励说明" prop="reward">
              <el-input v-model="pushform.reward" placeholder="描述该任务/活动提出/奖励" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="formItem">
          <el-col :span="24">
            <el-form-item label="任务内容备注" prop="remark">
              <el-input v-model="pushform.remark" placeholder="描述该任务/活动活动内容等信息" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="formItem">
          <el-col :span="24">
            <el-form-item label="反馈要求" prop="feedBack">
              <el-checkbox-group v-model="pushform.feedBack" disabled>
                <el-checkbox label="无"></el-checkbox>
                <el-checkbox label="签到签退"></el-checkbox>
                <el-checkbox label="拍照"></el-checkbox>
                <el-checkbox label="反馈记录"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <p class="common-title">选择客户</p>
        <el-row class="formItem">
          <el-col :span="24">
            <el-form-item label="客户类型" prop="custType">
              <el-select v-model="pushform.custType" placeholder="请选择客户类型" disabled>
                <el-option label="个人" value="0"></el-option>
                <el-option label="商户" value="1"></el-option>
                <el-option label="企业" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="formItem">
          <el-col :span="24">
            <el-form-item label="选择客户" prop="groupId">
              <el-select v-model="pushform.groupId" placeholder="请选择客户类型" disabled>
                <el-option v-for="(item, index) in groupIdList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <template v-for="rule in configRules">
          <custom-rule :key="rule.key" :ruleTitle="rule.ruleTitle" :defaultListData="rule.defaultListData"
            :deptOptions="deptOptions" :ruleArr="ruleArr" :ruleId="ruleId" :ruleName="rule.ruleName" :custType="pushform.custType"
            @getRuleArr="getRuleArr" />
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleInfoSubmit">确 定</el-button>
        <el-button @click="handleCancle">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  findchecknamelist,
  findchecklist,
  orgClaimList,
  allocateCustomerList,
} from "@/api/system/checklist.js";
import { isHead, campaignDetail } from "@/api/system/findCustByGroupId.js";
import { campaignAdd } from "@/api/system/campaign.js";
import { getUserProfile } from '@/api/grid/anchor.js'
import { Message } from 'element-ui'
import CustomRule from '../custom-rule.vue'
import { getDeptTree } from "@/api/grid/address/tree.js";
import { uid } from '@/utils'
import { getGroupList, getGroupInfoByGroupId } from '@/api/task/taskList.js'
import { mapGetters } from 'vuex'
export default {
  components: { CustomRule },
  data() {
    return {
      campaignTypeList: [
        { label: '电话', value: '电话', disabled: true },
        { label: '短信', value: '短信', disabled: true },
        { label: '走访', value: '走访' },
      ],
      goalList: [
        { label: '自定义', value: '7' },
        { label: '存款营销', value: '存款营销' },
        { label: '贷款营销', value: '贷款营销' },
        { label: '产品营销', value: '产品营销' },
        { label: '贷前调查', value: '贷前调查' },
        { label: '贷后回访', value: '贷后回访' },
        { label: '逾期催收', value: '逾期催收' },
      ],
      isZk: false,
      qdzt: '我的',
      createRoleList: [
        {
          label: '总行',
          value: '0'
        },
        {
          label: '支行',
          value: '1'
        }
      ],

      defaultListData: [],
      ruleArr: [
        {
          label: '按存款归属',
          id: '101001',
        },
        {
          label: '按贷款归属',
          id: '103001'
        },

        {
          label: '按全员营销归属',
          id: '6',
          children: [
            {
              label: '信用卡营销',
              id: '203205',
            },
            {
              label: '信用卡责任',
              id: '203207',
            },
            {
              label: '代发工资有效户',
              id: '2024202',
            },
            {
              label: '国际业务结算',
              id: '207201',
            },
            {
              label: '国际业务贸易融资',
              id: '207202'
            }
          ]
        },
        {
          label: '按行政网格归属',
          id: '2',
          children: [
            {
              label: '按零售部行政网格归属',
              id: '20',
              key: '0'
            },
            {
              label: '按公司部行政网格归属',
              id: '21',
              key: '1'
            }, {
              label: '按运管部行政网格归属',
              id: '22',
              key: '2'
            },
          ]
        },
        {
          label: '按自绘地图网格归属',
          id: '4',
          children: [
            {
              label: '按零售部自绘地图网格归属',
              id: '40',
              key: '0',
              children: null
            },
            {
              label: '按公司部自绘地图网格归属',
              id: '41',
              key: '1',
              children: null
            }, {
              label: '按运管部自绘地图网格归属',
              id: '42',
              key: '2',
              children: null
            },
          ]
        },
        {
          label: '按自建名单网格归属',
          id: '5',
          children: [
            {
              label: '按零售部自建名单网格归属',
              id: '50',
              key: '0',
              children: null
            },
            {
              label: '按公司部自建名单网格归属',
              id: '51',
              key: '1',
              children: null
            }, {
              label: '按运管部自建名单网格归属',
              id: '52',
              key: '2',
              children: null
            },
          ]
        },
        {
          label: '随机平均分配',
          id: '3'
        },
        {
          label: '手动指定',
          id: '0'
        },
      ],
      hdjdList: [
        { label: '待开始', value: '待开始' },
        { label: '进行中', value: '进行中' },
        { label: '已结束', value: '已结束' }
      ],
      jjcdList: [
        { label: '高', value: '高' },
        { label: '中', value: '中' },
        { label: '低', value: '低' }
      ],
      rlTypeList: [
        { label: '强制认领', value: '0' },
        { label: '可选认领', value: '1' }
      ],
      departOptions: [],
      rlList: [
        { label: '待认领', value: '0' },
        { label: '已认领', value: '1' }
      ],
      fpList: [
        { label: '待分配', value: '0' },
        { label: '已分配', value: '1' }
      ],
      orgClaimStatusName: '',
      orgDistributeStatusName: '',
      buttonLoading: false,
      tableLoading: true,
      isShowSearch: 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: true },
        { key: 9, label: "活动进度", visible: true },
        { key: 10, label: "紧急程度", visible: true },
        { key: 11, label: "执行机构", visible: true },
        { key: 12, label: "认领结束时间", visible: true },
        { key: 13, label: "认领类型", visible: true },
        { key: 14, label: "机构认领状态", visible: true },
        { key: 15, label: "机构分配状态", visible: true },
        { key: 16, label: "客户经理认领率", visible: true },
        { key: 17, label: "考核目标", visible: true },
      ],
      searchFrom: {
        actionStatus: '',
        campaignDegree: '',
        claimType: '',
        startTime: '',
        endTime: '',
        orgClaimStatus: '',
        orgDistributeStatus: '',
        createRole: ''

      },
      isorgClaimStatus: true,
      isorgDistributeStatus: true,
      isreceiveSitustion: true,
      isclaimEndTime: true,
      isSelected: false,
      checklistTitle: "",
      ischecklistTitle: false,
      isremind: false,
      ishandleCliamedNotDistributedOrgClick: false,
      ishandleCliamedNotDistributedOrg: false,
      ishandleNotCliamedOrgClick: false,
      ishandleNotCliamedOrg: false,
      pushOpen: false,
      pushroles: {
        groupName: [
          { required: true, message: "分群名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "分群名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        campaignName: [
          { required: true, message: "任务名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "任务名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        campaignType: [{ required: true, message: "请选择活动类型" }],
        campaignDegree: [{ required: true, message: "请选择紧急程度" }],
        claimType: [{ required: true, message: "请选择认领类型" }],
        dateRange: [{ required: true, message: "请选择活动时间" }],
        claimdateRange: [{ required: true, message: "请选择认领时间" }],
        executer: [{ required: true, message: "请选择执行人" }],
        distributeType: [{ required: true, message: "请选择分配规则" }],
      },
      pushform: {
        campaignName: '',
        campaignDegree: '',
        claimType: '',
        taskDate: [],
        claimDate: [],
        taskType: '',
        campaignType: '',
        checkTarget: '',
        taskIndex: '',
        reward: '',
        remark: '',
        feedBack: [],
        custType: '',
        groupId: '',
        executer: '',
      },
      pushOpen: false,
      pushTitle: "创建活动",
      radiosButonIsDisableFromMe: false,
      radiosButonIsDisableToMe: false,
      userType: "0",
      showmap: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      isCreatePag: false,
      groupFlag: "1",
      groupTable: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      isHeader: false,
      isBranch: false,
      searchQuery: "",
      showCreateDialog: false,
      selectedCreateType: "",
      isCreatePage: false,
      tableData: [],
      groupId: "",
      // createRole: '',
      campaignId: "",
      ispushformread: false,
      pushformDetail: {},
      isOther: true,
      istogetit: false,
      isCheckList: false,
      groupTag: [],
      groupTag2: [],
      groupTag3: [],
      groupId: "",
      groupType: '0',
      campaignId: "",
      detail: false,
      remind: false,
      togetit: false,
      todistribute: false,
      createRole: "",
      total: 0,
      pageSize: 10,
      pageNum: 1,
      showtable: false,
      currentTable: 1,
      selectedTab: "2", //当前选中的选项
      custPattern: 2,
      personalData: [],
      merchantData: [],
      enterpriseData: [],
      myPersonalData: [],
      myMerchantData: [],
      myEnterpriseData: [],
      shyh: '',
      ruleMap: {},
      groupIdList: [],
      deptOptions: [],
      ruleId: '3',
    };
  },
  created() {
    if (this.$route.query.custPattern) {
      this.custPattern = this.$route.query.custPattern
      this.selectedTab = this.$route.query.custPattern
    } else {
      if (this.isPublic) {
        this.custPattern = '2'
        this.selectedTab = '2'
      } else if (this.isPrivate) {
        this.custPattern = '0'
        this.selectedTab = '0'
      } else {
        this.custPattern = '2'
        this.selectedTab = '2'
      }
    }
    if (this.$route.query.groupType) {
      this.groupType = this.$route.query.groupType
    }

    if (this.groupType == 0) {
      this.qdzt = '我的'
    } else if (this.groupType == 1) {
      this.qdzt = '推送'
    } else if (this.groupType == 2) {
      this.qdzt = '其他'
    }


    this.isUserType();
    this.getUser()
    this.getDeptTreeSelect()
    console.log(this.groupType, 'this.groupType')
  },
  computed: {
    ...mapGetters(['roles']),
    //对公
    isPublic() {
      return this.roles.includes('headPublic')
    },
    //对私
    isPrivate() {
      return this.roles.includes('headPrivate')
    },
    configRules() {

      const newArr = []
      if (this.selectedTab == '0') {
        newArr.push({
          ruleTitle: '分配规则',
          ruleName: 'personal',
          key: uid()
        })
        this.ruleMap.personal = [

        ]
      }

      if (this.selectedTab == '1') {
        newArr.push({
          ruleTitle: '分配规则',
          ruleName: 'merchant',
          key: uid()
        })
        this.ruleMap.merchant = [

        ]
      }

      if (this.selectedTab == '2') {
        newArr.push({
          ruleTitle: '分配规则',
          ruleName: 'company',
          key: uid()
        })
        this.ruleMap.company = [

        ]
      }
      return newArr
    }
  },
  methods: {

    getDeptTreeSelect() {
      getDeptTree().then((response) => {
        this.deptOptions = response.data
      })
    },
    initGroupList(data) {
      const params = {
        groupId: data
      }
      getGroupInfoByGroupId(params).then(res => {
        console.log(res, 'ressssssssssss')
        this.groupIdList = [
          {
            label: res.data.groupName,
            value: res.data.groupId,
          }
        ]
        console.log(this.groupIdList, 'this.groupIdList')
      })
    },
    handleSearchChange() {
      this.initTableData()
    },
    getRuleArr(obj) {
      this.ruleMap[obj.ruleName] = obj.arr
      console.log(this.ruleMap, '===============>>')
    },
    handleWdAll() {

      this.qdzt = '我的'
      this.groupType = 0
      this.searchFrom = {}
      this.initTableData()
    },
    handleTsAll() {
      this.qdzt = '推送'
      this.groupType = 1
      this.searchFrom = {}
      this.initTableData()
    },
    handleOtherAll() {
      this.qdzt = '其他'
      this.groupType = 2
      this.searchFrom = {}
      this.initTableData()
    },
    getUser() {
      getUserProfile().then(res => {
        let deptId = res.data.dept.deptId
        this.initDeptTree(deptId)
      })
    },
    initDeptTree(deptId) {
      getDeptTree(deptId).then(res => {
        this.departOptions = res.data

      })
    },
    isUserType() {
      isHead().then((res) => {
        if (Object.keys(res)[0] == 'headAdmin') {
          this.shyh = '总行'
          this.groupType = 0
          this.qdzt == '我的'
        } else if (Object.keys(res)[0] == 'branchAdmin') {
          this.shyh = '支行'
          this.groupType = 0
          this.qdzt == '我的'
        } else if (Object.keys(res)[0] == 'manager' || Object.keys(res)[0] == 'outlet') {
          this.shyh = '客户经理'
          this.groupType = 1
          this.qdzt == '推送'
        } else if (Object.keys(res)[0] == 'private') {
          this.shyh = '总行'
          this.groupType = 0
          this.qdzt == '我的'
        } else if (Object.keys(res)[0] == 'public') {
          this.shyh = '总行'
          this.groupType = 0
          this.qdzt == '我的'
        } else if (Object.keys(res)[0] == 'ops') {
          this.shyh = '总行'
          this.groupType = 0
          this.qdzt == '我的'
        }
        this.initTagList()
        this.initTableData()
        console.log(this.groupType, 'this.groupType2222')
      });
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toISOString().slice(0, 10).replace("T", " ");
    },
    initTagList() {
      const params = {
        custPattern: this.custPattern,
        // groupType: this.groupType,
        pageSize: 100,
        isAsc: 'descending',
        // orderByColumn: 'updateTime'
      }
      if (this.shyh == '客户经理') {
        params.groupType = 1
      } else {
        params.groupType = undefined
      }
      findchecklist(params).then((response) => {
        let arr1 = []
        let arr2 = []
        let arr3 = []
        response.rows.forEach(item => {
          if (item.groupType == '0') {
            arr1.push(item)
          } else if (item.groupType == '1') {
            arr2.push(item)
          } else if (item.groupType == '2') {
            arr3.push(item)
          }
        })
        let list1 = []
        let list2 = []
        let list3 = []
        arr1.forEach(item => {
          if (!list1.find(r => r.campaignName == item.campaignName)) {
            list1.push(item)
          }
        })
        console.log(list1, 'list1')
        arr2.forEach(item => {
          if (!list2.find(r => r.campaignName == item.campaignName)) {
            list2.push(item)
          }
        })
        arr3.forEach(item => {
          if (!list3.find(r => r.campaignName == item.campaignName)) {
            list3.push(item)
          }
        })
        if (list1.length > 4) {
          this.groupTag = list1.slice(0, 4)
        } else {
          this.groupTag = list1
        }
        if (list2.length > 4) {
          this.groupTag2 = list2.slice(0, 4)
        } else {
          this.groupTag2 = list2
        }
        if (list3.length > 4) {
          this.groupTag3 = list3.slice(0, 4)
        } else {
          this.groupTag3 = list3
        }

      });
    },
    initTableData(campaignName) {

      const params = {
        ...this.searchFrom,
        custPattern: this.custPattern,
        groupType: this.groupType,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        groupName: this.searchQuery,
        campaignName: campaignName,
        isAsc: 'descending',
        // orderByColumn: 'updateTime'
      }
      params.belongDept = params.belongDept ? params.belongDept[params.belongDept.length - 1] : ''
      findchecklist(params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.rows
          this.total = res.total
          this.tableLoading = false
        }
      })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.initTableData()
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.initTableData()
    },
    handleChange() {
      this.searchFrom = {}
      this.isUserType()
      this.qdzt = '我的'
      this.searchQuery = ''
      if (this.selectedTab == '0') {
        this.custPattern = 0

        this.initTableData()
        this.initTagList()
      } else if (this.selectedTab == '1') {
        this.custPattern = 1

        this.initTableData()
        this.initTagList()
      } else if (this.selectedTab == '2') {
        this.custPattern = 2

        this.initTableData()
        this.initTagList()
      }
    },
    handleZk() {
      this.isZk = true
    },
    handleSq() {
      this.isZk = false
    },
    handleQuery() {
      this.initTableData()
    },
    handleRest() {
      this.searchFrom = {}
      this.initTableData()
    },
    handleSearch() {
      this.initTableData()
    },
    handleCheckCustomerList(item, type) {
      if (type == '我的') {
        this.qdzt = '我的'
        this.groupType = '0'
        this.initTableData(item.campaignName)
      } else if (type == '推荐') {
        this.groupType = '1'
        this.qdzt = '推送'
        this.initTableData(item.campaignName)
      } else if (type == '其他') {
        this.groupType = '2'
        this.qdzt = '其他'
        this.initTableData(item.campaignName)
      }

    },
    handleViewDetails(row) {
      this.$router.push({
        path: "/checklist/customerlist",
        query: { groupId: row.groupId, custPattern: this.custPattern, campaignId: row.campaignId, groupType: row.groupType, deptId: row.deptId, qdzt: this.qdzt },
      });
    },
    handlePushGroupCustomer(
      groupId,
      groupType,
      campaignId,
      row,
      type,
      createRole

    ) {
      
      if (row.orgClaimStatus == "1" && row.secondPushStatus == "1") {
        this.$router.push({
          path: "/taskManage/taskDtails",
          query: { groupId, groupType: '0', campaignId, row, type: '3', custType: this.selectedTab, createRole },
        });
        return;
      }
      if (row.orgClaimStatus == "1" && row.secondPushStatus == "0") {
        
        this.pushform.groupName = row.groupName;
        this.groupIdList = []
        this.initGroupList(groupId)
        this.groupId = groupId;
        this.campaignId = campaignId;
        campaignDetail({ campaignId: this.campaignId }).then((res) => {
          this.pushOpen = true;
          this.pushform.campaignName = res.campaignName
          this.pushform.campaignDegree = res.campaignDegree
          this.pushform.campaignType = res.campaignType
          this.pushform.claimType = res.claimType
          this.pushform.taskDate = [
            this.parseFormattedDate(res.startTime),
            this.parseFormattedDate(res.endTime),
          ];
          this.pushform.claimDate = [
            this.parseFormattedDate(res.claimStartTime),
            this.parseFormattedDate(res.claimEndTime),
          ]
          this.pushform.taskType = res.taskType
          this.pushform.checkTarget = res.checkTarget
          this.pushform.taskIndex = res.taskIndex
          this.pushform.reward = res.reward
          this.pushform.remark = res.remark
          this.pushform.feedBack = res.feedBack ? res.feedBack : []
          this.pushform.custType = res.custType
          this.pushform.groupId = res.groupId

        });
      }
    },
    parseFormattedDate(formattedDateString) {
      const isoDateString = formattedDateString.replace(" ", "T");
      const date = new Date(isoDateString);
      if (isNaN(date.getTime())) {
        return null;
      }
      return date;
    },
    handleRadioGroup(value) {
      localStorage.setItem('distributeType', value)
    },

    handleorgClaim(groupId, campaignId) {
      orgClaimList({ groupId, campaignId }).then((res) => {
        if (res.code == 200) {
          Message.success("机构客户认领成功!");
          this.initTableData()
        }
      });
    },
    handleCancle() {
      this.pushOpen = false
      this.selectOptions = []
      this.$refs.pushform.resetFields();
      this.defaultListData = []
      this.newArr = []
    },
    handleInfoSubmit() {
      this.$refs["pushform"].validate((valid) => {
        if (valid) {
          const params = {
            campaignId: this.campaignId,
            groupId: this.groupId,
          }
          if (this.selectedTab == '0') {
            // distributeType组装
            let arr = this.ruleMap.personal.map(item => { return item.ruleKey })
            let arr1 = arr.map(item => {
              if (item.includes('+') || item.includes('--')) {
                return item.substring(0, 2)
              } else {
                return item
              }
            })
            //特色网格组装
            let arrTswg = arr.filter(item => item.includes('+'))
            let layerIdList = arrTswg.map(item => {
              let itemList = item.split('+')
              return itemList.pop()
            })
            //虚拟网格组装
            let arrXnwg = arr.filter(item => item.includes('--'))
            let virtualGridIdsList = arrXnwg.map(item => {
              let itemList = item.split('--')
              return itemList.pop()
            })
            params.distributeType = arr1.join(',')
            params.layerIds = layerIdList.join(',')
            params.virtualGridIds = virtualGridIdsList.join(',')

            let perArr = this.ruleMap.personal.filter(item => 'userName' in item)
            if (perArr && perArr.length > 0) {
              let perList = perArr[0].userName
              params.userIds = perList.join(',')
            }
          } else if (this.selectedTab == '1') {
            let arr = this.ruleMap.merchant.map(item => { return item.ruleKey })
            let arr1 = arr.map(item => {
              if (item.includes('+') || item.includes('--')) {
                return item.substring(0, 2)
              } else {
                return item
              }
            })
            //特色网格组装
            let arrTswg = arr.filter(item => item.includes('+'))
            let layerIdList = arrTswg.map(item => {
              let itemList = item.split('+')
              return itemList.pop()
            })
            //虚拟网格组装
            let arrXnwg = arr.filter(item => item.includes('--'))
            let virtualGridIdsList = arrXnwg.map(item => {
              let itemList = item.split('--')
              return itemList.pop()
            })
            params.distributeType = arr1.join(',')
            params.layerIds = layerIdList.join(',')
            params.virtualGridIds = virtualGridIdsList.join(',')
            let perArr = this.ruleMap.merchant.filter(item => 'userName' in item)
            if (perArr && perArr.length > 0) {
              let perList = perArr[0].userName
              params.userIds = perList.join(',')
            }
          } else if (this.selectedTab == '2') {
            let arr = this.ruleMap.company.map(item => { return item.ruleKey })
            let arr1 = arr.map(item => {
              if (item.includes('+') || item.includes('--')) {
                return item.substring(0, 2)
              } else {
                return item
              }
            })
            //特色网格组装
            let arrTswg = arr.filter(item => item.includes('+'))
            let layerIdList = arrTswg.map(item => {
              let itemList = item.split('+')
              return itemList.pop()
            })
            //虚拟网格组装
            let arrXnwg = arr.filter(item => item.includes('--'))
            let virtualGridIdsList = arrXnwg.map(item => {
              let itemList = item.split('--')
              return itemList.pop()
            })
            params.distributeType = arr1.join(',')
            params.layerIds = layerIdList.join(',')
            params.virtualGridIds = virtualGridIdsList.join(',')
            let perArr = this.ruleMap.company.filter(item => 'userName' in item)
            if (perArr && perArr.length > 0) {
              let perList = perArr[0].userName
              params.userIds = perList.join(',')
            }
          }
          console.log(params, 'params')
          allocateCustomerList(params).then(res => {
            if (res.code == 200) {
              this.pushOpen = false
              Message.success("支行管理员二次分配成功!");
              this.initTableData()
            }
          })
        } else {
          return false
        }
      })
    },
  },

};
</script>

<style lang="scss" scoped>
.main-wrap {
  margin: 0 30px;
}

.remind-more {
  width: 108px;
  height: 36px;
  background: #4886f8;
  border-radius: 1px;
  color: #ffffff;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 14px;
  margin-bottom: 25px;
}

.checklist-btn2 {
  width: 108px;
  height: 36px;
  background: #4886f80f;
  border-radius: 1px;
  color: #4886f8;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 14px;
  margin-left: 12px;
  margin-bottom: 25px;
}

.checklist-btn3 {
  width: 108px;
  height: 36px;
  background: #4886f80f;
  border-radius: 1px;
  color: #4886f8;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 14px;
  margin-left: 12px;
  margin-bottom: 25px;
}

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

  .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: 30px;
      }

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

.my-span-checklist-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.my-span-checklist-content-item {
  cursor: pointer;
  width: 45%;
  height: 44px;
  padding: 20px;
  text-align: left;
  font-size: 14px;
  background-color: #ffffff;
  font-weight: 200;
  border-radius: 5px;
  margin-top: 15px;
  line-height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.queryBtn {
  text-align: right;
  margin-right: 20px;
  margin-bottom: 20px;
}

.box-card {
  height: 181px;
  background: #EAF5FF;
  border-radius: 8px;
  margin-top: 25px;
}

.box-card1 {
  height: 181px;
  background: #EAF5FF;
  border-radius: 8px;
  margin-top: 25px;
}

.my-span-checklist-header {
  display: flex;
  justify-content: space-between;
}

.my-span-checklist-title {
  height: 25px;
  font-family: PingFangSC-SNaNpxibold;
  font-weight: 600;
  font-size: 18px;
  color: #222222;
  letter-spacing: 0.5px;
}

.my-checkall {
  height: 20px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14px;
  color: #959da6;
  letter-spacing: 0;
}

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 24px 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: 2px solid #ebebeb;
    }

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


}

.operate-cnt {
  margin: 24px 0 16px 0;
  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;
    }
  }
}

.viewAll {
  cursor: pointer;
  height: 20px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14px;
  color: #959da6;
  letter-spacing: 0;
}

.zhk {
  cursor: pointer;
}

.detail_btn {
  margin-left: 10px;
}

.searchForm {
  margin-top: 15px;
}

.ri-btn {
  margin-bottom: 16px;
}

.common-title {
  position: relative;
  color: #222222;
  line-height: 35px;
  font-weight: 600;
  font-size: 16px;
  padding-left: 10px;
  margin-bottom: 20px;

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

.pushDialog {
  ::v-deep .el-dialog__body {
    padding: 10px 20px;
  }

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

  ::v-deep .el-date-editor {
    width: 100%;
  }
}
</style>