<template>
  <div class="main">
    <v-tour name="taskDetailTour" :steps="steps" :options="tourOptions" />
    <el-form ref="searchForm" :model="searchForm" class="searchForm">
      <el-row>
        <el-col :span="21">
          <el-row>
            <el-col :span="5">
              <el-form-item label="客户号" prop="custId" label-width="120px">
                <el-input
                  v-model="searchForm.custId"
                  clearable
                  @keyup.enter.native="handleSearch"
                  @clear="handleRest"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="客户名" prop="custName" label-width="120px">
                <el-input
                  v-model="searchForm.custName"
                  clearable
                  @keyup.enter.native="handleSearch"
                  @clear="handleRest"
                />
              </el-form-item>
            </el-col>
            <el-col
              v-if="
                selectedTask != '2' &&
                  (isCommonManager || isBranchAdmin || isOutletAdmin)
              "
              :span="5"
            >
              <el-form-item
                label="认领状态"
                prop="custClaimStatus"
                label-width="70px"
              >
                <el-select
                  v-model="searchForm.custClaimStatus"
                  clearable
                  @change="handleSearch"
                  @clear="handleRest"
                >
                  <el-option
                    v-for="item in custClaimStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              v-if="
                selectedTask != '2' &&
                  (isHeadAdmin || isPublic || isPrivate || isHeadOps)
              "
              :span="5"
            >
              <el-form-item
                label="总行推送状态"
                prop="pushStatus"
                label-width="120px"
              >
                <el-select
                  v-model="searchForm.pushStatus"
                  clearable
                  @change="handleSearch"
                  @clear="handleRest"
                >
                  <el-option
                    v-for="item in pushStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="selectedTask != '2' && isBranchAdmin" :span="5">
              <el-form-item
                label="支行推送状态"
                prop="pushBranchStatus"
                label-width="100px"
              >
                <el-select
                  v-model="searchForm.pushBranchStatus"
                  clearable
                  @change="handleSearch"
                  @clear="handleRest"
                >
                  <el-option
                    v-for="item in pushBranchStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item
                label="走访状态"
                prop="visitStatus"
                label-width="120px"
              >
                <el-select
                  v-model="searchForm.visitStatus"
                  clearable
                  @change="handleSearch"
                >
                  <el-option label="已走访" value="1" />
                  <el-option label="未走访" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="3" style="text-align: right">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleRest">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-button
        v-if="adminFlag == 'admin' && selectedTask != '2'"
        type="primary"
        :disabled="notClaim == 'true'"
        @click="handleCustAppoint"
      >批量指定</el-button>
      <el-button type="primary" @click="exportDataByCustIds">导出</el-button>
      <el-button
        v-if="adminFlag == 'manager'"
        type="primary"
        :disabled="disabledDate == 'true'"
        @click="batchGet"
      >批量认领</el-button>
      <el-button
        v-if="
          !((selectedTask == '1' && isCommonManager) || selectedTask == '2')
        "
        round
        @click="handlePushFild"
      >推送失败</el-button>
      <el-button @click="returnLastPage">返回上一级</el-button>
    </el-row>
    <!-- v-loading="Loading" -->
    <el-table
      ref="groupCustomerDetail"
      :data="tableData"
      style="width: 100%; margin-top: 15px"
      max-height="675"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" label="全选" />
      <el-table-column
        align="center"
        prop=""
        label="分群名称"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.groupName == null">手动添加</span>
          <span v-else>{{ scope.row.groupName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="this.$route.query.custType == '1'"
        align="center"
        prop="custName"
        label="商户名称"
        show-overflow-tooltip
        width="200px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            class="special-btn"
            @click="openDialog(scope.row.custId, '1')"
          >{{ scope.row.custName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="this.$route.query.custType == '2'"
        align="center"
        prop="custName"
        label="企业名称"
        show-overflow-tooltip
        width="200px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            class="special-btn"
            @click="openDialog(scope.row.custId, '2')"
          >{{ scope.row.custName }}</el-button>
        </template></el-table-column>
      <el-table-column
        v-if="
          this.$route.query.custType == '1' || this.$route.query.custType == '2'
        "
        align="center"
        prop="socialCreditCode"
        label="统一社会信用码"
        width="200px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            class="special-btn"
            @click="openDialog(scope.row.custId, $route.query.custType)"
          >{{ scope.row.socialCreditCode }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="this.$route.query.custType == '0'"
        align="center"
        prop="custName"
        label="客户姓名"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            class="special-btn"
            @click="openDialog(scope.row.custId, '0')"
          >{{ scope.row.custName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="this.$route.query.custType == '1'"
        align="center"
        prop="lpName"
        label="经营者姓名"
        show-overflow-tooltip
        width="100px"
      />
      <el-table-column
        v-if="this.$route.query.custType == '2'"
        align="center"
        prop="lpName"
        label="法人姓名"
        show-overflow-tooltip
      />
      <el-table-column
        v-if="this.$route.query.custType == '0'"
        align="center"
        prop="custIdc"
        label="证件号"
        show-overflow-tooltip
        width="150px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            class="special-btn"
            @click="openDialog(scope.row.custId, '0')"
          >{{ scope.row.custIdc }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="this.$route.query.custType == '1'"
        align="center"
        prop="custIdc"
        label="证件号"
        show-overflow-tooltip
        width="150px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            class="special-btn"
            @click="openDialog(scope.row.custId, '1')"
          >{{ scope.row.custIdc }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="this.$route.query.custType == '2'"
        align="center"
        prop="custIdc"
        label="证件号"
        show-overflow-tooltip
        width="150px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            class="special-btn"
            @click="openDialog(scope.row.custId, '2')"
          >{{ scope.row.custIdc }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns[4].visible"
        align="center"
        prop="custPhone"
        label="联系方式"
        show-overflow-tooltip
        width="150px"
      />
      <el-table-column
        v-if="columns[2].visible"
        align="center"
        prop="custId"
        label="客户号"
        show-overflow-tooltip
        width="150px"
      />
      <el-table-column
        v-if="columns[3].visible"
        align="center"
        prop="custIsn"
        label="客户内码"
        show-overflow-tooltip
        width="150px"
      />
      <el-table-column
        v-if="isCommonManager"
        align="center"
        prop="custClaimStatus"
        label="认领状态"
        show-overflow-tooltip
        width="150px"
      >
        <template slot-scope="scope">
          <span
            v-if="
              scope.row.custClaimStatus == '0' ||
                scope.row.custClaimStatus == null
            "
          >未认领</span>
          <span v-if="scope.row.custClaimStatus == '1'">已认领</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="
          (selectedTask == '0' && isHeadAdmin) ||
            (selectedTask == '0' && isPublic) ||
            (selectedTask == '0' && isPrivate) ||
            (selectedTask == '0' && isHeadOps) ||
            ((selectedTask == '1' || selectedTask == '2') && isBranchAdmin)
        "
        align="center"
        label="总行推送状态"
        show-overflow-tooltip
        width="150px"
      >
        <template slot-scope="scope">
          <span>
            {{ handleStatus(scope.row.pushStatus) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="
          isHeadAdmin ||
            isPublic ||
            isPrivate ||
            isHeadOps ||
            ((selectedTask == '0' ||
              selectedTask == '1' ||
              selectedTask == '2') &&
              isBranchAdmin)
        "
        align="center"
        label="机构推送状态"
        show-overflow-tooltip
        width="150px"
      >
        <template slot-scope="scope">
          <span>
            {{ handleStatus(scope.row.secondPushStatus) }}
          </span>
        </template>
      </el-table-column>
      <div id="tsDetail">
        <el-table-column
          v-if="
            (selectedTask == '1' && isbranch) ||
              (selectedTask == '2' && isHeadAdmin) ||
              (selectedTask == '0' && isHead)
          "
          align="center"
          prop="deptName"
          label="推送支行"
          show-overflow-tooltip
          width="150px"
        />
        <el-table-column
          v-if="
            (selectedTask == '1' && isbranch) ||
              (selectedTask == '2' && (isHeadAdmin || isbranch)) ||
              (selectedTask == '0' && (isHead || isbranch))
          "
          align="center"
          prop="outlets"
          label="推送网点"
          show-overflow-tooltip
          width="150px"
        />
        <el-table-column
          v-if="
            (selectedTask == '1' && isbranch) ||
              (selectedTask == '2' &&
                (isHeadAdmin || isbranch || isOutletAdmin)) ||
              (selectedTask == '0' && (isHead || isbranch))
          "
          align="center"
          prop="userName"
          label="推送客户经理"
          width="150px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              scope.row.createName && scope.row.userName
                ? scope.row.createName + "-" + scope.row.userName
                : scope.row.createName || scope.row.userName || ""
            }}
          </template>
        </el-table-column>
      </div>
      <el-table-column
        align="center"
        label="走访状态"
        width="120px"
        prop="visitStatus"
      >
        <template slot-scope="scope">
          {{
            scope.row.visitStatus
              ? scope.row.visitStatus == "0"
                ? "未走访"
                : "已走访"
              : "-"
          }}
        </template>
      </el-table-column>

      <el-table-column
        v-if="selectedTask != '2' && isCooperate === 'false'"
        align="center"
        label="操作"
        width="200"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-if="
              !(
                isCommonManager ||
                userManagerId == 999 ||
                selectedTask == '2'
              )
            "
            type="text"
            :disabled="
              scope.row.pushStatus == '3' ||
                userManagerId == 666 ||
                notClaim == 'true'
            "
            @click="handlePush(scope.row)"
          >指定推送</el-button>
          <!-- <el-button
            v-if="
              (isCommonManager || userManagerId == 999 || isOutletAdmin) &&
                selectedTask == '1'
            "
            type="text"
            :disabled="
              scope.row.custClaimStatus == '1' || disabledDate == 'true'
            "
            @click="handleGet(scope.row.custId)"
          >客户认领</el-button> -->
          <el-button
            type="text"
            @click="handleTarch(scope.row)"
          >触达</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="->,total,prev,pager,next,sizes"
      :total="total"
      :current-page="pageNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      id="pushDialog"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-input
        v-model="searchParams"
        :placeholder="
          isbranch
            ? '请输入个人柜员号或姓名'
            : executer == 0
              ? '请输入机构名'
              : '请输入机构名称/个人柜员号/个人名称'
        "
        clearable
        @clear="resetSearch"
        @keyup.enter.native="handleTreeSearch"
      >
        <template slot="append">
          <el-button icon="el-icon-refresh" @click="resetSearch" />
        </template>
      </el-input>
      <div v-loading="treeLoading" class="roll-dialog">
        <el-tree
          ref="deptTree"
          class="tree-border"
          :data="deptOptions"
          show-checkbox
          :check-strictly="true"
          :filter-node-method="filterNode"
          node-key="id"
          empty-text="暂无数据"
          :props="defaultDeptProps"
          :style="{ width: '100%' }"
          @check-change="handleCheckChange"
        />
      </div>

      <span slot="footer">
        <el-button @click="handleDialogCancle">取消</el-button>
        <el-button type="primary" @click="handleConfigeInfo">确定</el-button>
      </span>
    </el-dialog>
    <el-drawer
      title=""
      :visible.sync="showCuDa"
      :size="750"
      :with-header="false"
      direction="rtl"
      :append-to-body="true"
      :wrapper-closable="false"
    >
      <div class="child-main">
        <div class="collapse" @click="showCuDa = false">
          <span>收起>></span>
        </div>
        <el-button class="drawTitle" type="text" @click="handleCustName">{{
          custName
        }}</el-button>
        <div class="cuda-method">
          <p class="common-title">触达方式</p>
          <div v-if="custType != '0'" class="cuda-method-box">
            <div class="cude-address">
              <div class="second-title">经营地址</div>
              <div class="address-flex">
                <div
                  v-for="(item, index) in addressOneDetails"
                  :key="index"
                  class="content"
                >
                  <el-tooltip :content="item.address">
                    <span class="address" placement="top">
                      {{ item.address }}
                    </span>
                  </el-tooltip>
                  <span class="source">{{ item.source }}</span>
                  <i class="el-icon-position" />
                </div>
              </div>
            </div>
            <div class="cude-address two">
              <div class="second-title">注册地址</div>
              <div class="address-flex">
                <div
                  v-for="(item, index) in addressTwoDetails"
                  :key="index"
                  class="content"
                >
                  <el-tooltip :content="item.address">
                    <span class="address" placement="top">
                      {{ item.address }}
                    </span>
                  </el-tooltip>
                  <span class="source">{{ item.source }}</span>
                  <i class="el-icon-position" />
                </div>
              </div>
            </div>
          </div>
          <div v-if="custType == '0'" class="cuda-method-box">
            <div class="cude-address">
              <div class="second-title">家庭地址</div>
              <div class="address-flex">
                <div
                  v-for="(item, index) in addressFamilyDetails"
                  :key="index"
                  class="content"
                >
                  <el-tooltip :content="item.address">
                    <span class="address" placement="top">
                      {{ item.address }}
                    </span>
                  </el-tooltip>
                  <span class="source">{{ item.source }}</span>
                  <i class="el-icon-position" />
                </div>
              </div>
            </div>
            <div class="cude-address two">
              <div class="second-title">户籍地址</div>
              <div class="address-flex">
                <div
                  v-for="(item, index) in addressHuJiDetails"
                  :key="index"
                  class="content"
                >
                  <el-tooltip :content="item.address">
                    <span class="address" placement="top">
                      {{ item.address }}
                    </span>
                  </el-tooltip>
                  <span class="source">{{ item.source }}</span>
                  <i class="el-icon-position" />
                </div>
              </div>
            </div>
          </div>
          <div v-if="custType == '0'" class="cuda-method-box">
            <div
              class="cude-address"
              style="border-top: none; border-bottom: none"
            >
              <div class="second-title">工作地址</div>
              <div class="address-flex">
                <div
                  v-for="(item, index) in addressWorkDetails"
                  :key="index"
                  class="content"
                >
                  <el-tooltip :content="item.address">
                    <span class="address" placement="top">
                      {{ item.address }}
                    </span>
                  </el-tooltip>
                  <span class="source">{{ item.source }}</span>
                  <i class="el-icon-position" />
                </div>
              </div>
            </div>
            <div
              class="cude-address two"
              style="border-top: none; border-bottom: none"
            >
              <div class="second-title">常住地址</div>
              <div class="address-flex">
                <div
                  v-for="(item, index) in addressCZDetails"
                  :key="index"
                  class="content"
                >
                  <el-tooltip :content="item.address">
                    <span class="address" placement="top">
                      {{ item.address }}
                    </span>
                  </el-tooltip>
                  <span class="source">{{ item.source }}</span>
                  <i class="el-icon-position" />
                </div>
              </div>
            </div>
          </div>
          <div v-if="custType == '0'" class="cuda-method-box">
            <div class="cude-address">
              <div class="second-title">联系地址</div>
              <div class="address-flex">
                <div
                  v-for="(item, index) in addressLXDetails"
                  :key="index"
                  class="content"
                >
                  <el-tooltip :content="item.address">
                    <span class="address" placement="top">
                      {{ item.address }}
                    </span>
                  </el-tooltip>
                  <span class="source">{{ item.source }}</span>
                  <i class="el-icon-position" />
                </div>
              </div>
            </div>
            <div class="cude-address two">
              <div class="second-title">身份证地址</div>
              <div class="address-flex">
                <div
                  v-for="(item, index) in addressSFZDetails"
                  :key="index"
                  class="content"
                >
                  <el-tooltip :content="item.address">
                    <span class="address" placement="top">
                      {{ item.address }}
                    </span>
                  </el-tooltip>
                  <span class="source">{{ item.source }}</span>
                  <i class="el-icon-position" />
                </div>
              </div>
            </div>
          </div>
          <div
            class="cude-address three"
            :class="custType == '0' ? 'person' : ''"
          >
            <div class="second-title">联系方式</div>
            <div class="address-flex">
              <div class="content">{{ custPhone }}</div>
            </div>
          </div>
        </div>
        <div class="cuda-record">
          <p class="common-title">走访记录</p>
          <div class="genjin-con">
            <el-timeline
              v-if="visitRecords.length > 0"
              style="margin-top: 30px"
            >
              <el-timeline-item
                v-for="(record, index) in visitRecords"
                :key="index"
                :timestamp="record.date"
              >
                <el-card>
                  <p class="record_item">
                    任务名称：{{ record.campaignName || "-" }}
                  </p>
                  <p class="record_item">
                    签到时间：{{ record.signInTime || "-" }}
                  </p>
                  <p class="record_item">
                    签退时间：{{ record.signOutTime || "-" }}
                  </p>
                  <p class="record_item">
                    走访机构：{{ record.custName || "-" }}
                  </p>
                  <p class="record_item">
                    走访人：{{ record.userName || "-" }}
                  </p>
                  <p class="zfRemark record_item">
                    走访备注：{{ record.signOutRemark || "-" }}
                  </p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
        <div class="cuda-speed">
          <p class="common-title">业务快捷入口</p>
          <div class="item-box">
            <div
              v-for="(item, index) in speedArr"
              v-if="isOpen ? true : index < 4"
              :key="item.url"
              class="item"
            >
              {{ item.title }}
            </div>
            <span class="operate" @click="isOpen = !isOpen">{{
              isOpen ? "<<收起" : ">>展开全部"
            }}</span>
          </div>
        </div>
        <div class="drawer-footer">
          <!-- <el-button @click="showCuDa=!showCuDa" size="small">取消</el-button> -->
          <!-- <el-button type="primary" size="small">走访计划</el-button>
                    <el-button type="primary" size="small" @click="openFollow">跟进</el-button> -->
          <el-button
            type="danger"
            size="small"
            @click="openCuDa"
          >无法触达</el-button>
        </div>
        <!-- 走访计划 -->
        <!-- <el-drawer
                title=""
                :visible.sync="showVisit"
                width="30%"
                :with-header="false"
                direction="rtl"
                :append-to-body="true"
                >
          </el-drawer> -->
        <!-- 无法触达弹窗 -->
        <div class="dialog-container">
          <el-dialog
            :visible.sync="cudaDialog"
            title=""
            width="25%"
            class="dialog-header"
            append-to-body
          >
            <div class="child-main-cuda">
              <el-form
                ref="formObj"
                :model="formObj"
                :rules="formRules"
                class="my-form"
              >
                <el-form-item label="请选择" prop="task">
                  <el-checkbox-group v-model="formObj.task">
                    <el-checkbox
                      key="1"
                      label="1"
                      style="margin-left: -120px"
                    >联系方式不对</el-checkbox>
                    <el-checkbox key="2" label="2">地址不对</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
              <div class="dialog-footer">
                <el-button
                  type="primary"
                  class="handle-btn"
                  @click="cancelCuDa"
                >取消</el-button>
                <el-button type="primary" @click="onSubmit">确认</el-button>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
      <!-- 跟进 -->
      <el-drawer
        title=""
        :visible.sync="showFollow"
        :size="570"
        :with-header="false"
        direction="rtl"
        :append-to-body="true"
        :wrapper-closable="false"
      >
        <div class="follow-main">
          <div class="collapse" @click="cancelFollow">
            <span>收起>></span>
          </div>
          <div class="common-title">{{ custName }}</div>
          <div class="common-btn">
            <el-button type="text" class="btn">打卡签到</el-button>
            <el-button type="text" class="btn">打卡签退</el-button>
            <el-button
              type="text"
              icon="el-icon-camera"
              class="btn"
            >走访照片</el-button>
          </div>
          <el-form
            ref="formFollow"
            :model="formFollow"
            :rules="formFollowRules"
            class="my-form"
          >
            <el-form-item label="客户意愿" prop="custFeedback">
              <el-select
                v-model="formFollow.custFeedback"
                style="width: 300px"
                placeholder="请选择客户意愿"
              >
                <el-option
                  v-for="item in thinkOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >{{ item.label }}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="营销结果" prop="visitResult">
              <el-select
                v-model="formFollow.visitResult"
                style="width: 300px"
                placeholder="请选择营销结果"
              >
                <el-option
                  v-for="item in resultOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >{{ item.label }}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formFollow.remark"
                style="width: 300px"
                type="textarea"
                placeholder="请输入内容"
                :maxlength="200"
                :show-word-limit="true"
              />
            </el-form-item>
          </el-form>
          <div class="dialog-footer">
            <el-button class="handle-btn" @click="cancelFollow">取消</el-button>
            <el-button type="primary" @click="onSubmitFollow">提交</el-button>
          </div>
        </div>
      </el-drawer>
      <!-- 触达-查看 -->
      <el-drawer
        title=""
        :visible.sync="showResult"
        :size="570"
        :with-header="false"
        direction="rtl"
        :append-to-body="true"
        :wrapper-closable="false"
      >
        <div class="follow-main">
          <div class="collapse" @click="showResult = false">
            <span>收起>></span>
          </div>
          <div class="common-title">{{ viewName }}</div>
          <div class="common-box">
            <span>签到时间: <span /></span>
          </div>
          <div class="common-box">
            <span>签到位置: <span /></span>
          </div>
          <div class="common-box">
            <span>签退时间: <span /></span>
          </div>
          <div class="common-box">
            <span>签退位置: <span /></span>
          </div>
          <div class="zoufang-con">
            <div class="zoufang">走访照片:</div>
            <div>
              <!-- <el-image :src="loanBg" class="result-img"></el-image>
                            <el-image :src="loanBg" class="result-img"></el-image>
                            <el-image :src="loanBg" class="result-img"></el-image>     -->
            </div>
          </div>
          <el-form
            ref="formFollowView"
            :model="formFollowView"
            :rules="formFollowViewRules"
            class="my-form"
          >
            <el-form-item label="客户意愿" prop="custFeedback">
              <el-select
                v-model="formFollowView.custFeedback"
                disabled
                style="width: 300px"
                placeholder="请选择客户意愿"
              >
                <el-option
                  v-for="item in thinkOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >{{ item.label }}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="营销结果" prop="visitResult">
              <el-select
                v-model="formFollowView.visitResult"
                disabled
                style="width: 300px"
                placeholder="请选择营销结果"
              >
                <el-option
                  v-for="item in resultOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >{{ item.label }}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formFollowView.remark"
                disabled
                style="width: 300px"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-form>
          <!-- <div class="dialog-footer">
                        <el-button @click="showResult=!showResult" class="handle-btn">取消</el-button>
                        <el-button type="primary" @click="onSubmitFollow">提交</el-button>
                    </div> -->
        </div>
      </el-drawer>
    </el-drawer>
  </div>
</template>
<script>
import {
  taskListDetail,
  getVisitData,
  addVisitData,
  addNotCuda,
  claimTask,
  apportTask
} from '@/api/task/taskList.js'
import {
  getcdVisitInfoList,
  cdVisitInfoList,
  editVisitInfo,
  getListByCampign
} from '@/api/system/listByRetailKeywords.js'
import {
  campaignDetail,
  isHead,
  customerAppoint,
  findCustomerByNameAndId
} from '@/api/system/findCustByGroupId.js'
import { getDeptTree } from '@/api/grid/address/tree.js'
import { Message } from 'element-ui'
import { mapGetters } from 'vuex'
import loanBg from '@/assets/imgs/loan_bg.png'
import {
  findchecknamelist,
  findchecklist,
  orgClaimList,
  allocateCustomerList,
  custClaimCustomer
} from '@/api/system/checklist.js'
export default {
  data() {
    return {
      steps: [
        {
          target: '.el-table__header tr th:nth-child(10)',
          content:
            '<div style="font-size:20px;line-height:25px">可以看到所有客户详细状态</div><br><span></span>',
          overlay: true,
          params: {
            placement: 'left',
            highlight: true,
            mask: true
          }
        },
        {
          target: '#pushDialog .el-dialog',
          content:
            '<div style="font-size:20px;line-height:25px">批量指定或者指定推送，如果任务配置的是机构，则可以选择机构进行指定推送，支持对已经成功推送的数据重复推送，视为竞争推送</div><br><span></span>',
          overlay: true,
          params: {
            placement: 'right',
            highlight: true,
            mask: true,
            enableScrolling: false
          },
          before: () => {
            this.createRole = 0
            this.executer = 0
            this.handleTourPush()
          }
        },
        {
          target: '#pushDialog .el-dialog',
          content:
            '<div style="font-size:20px;line-height:25px">如果任务配置的是个人，则可以选择个人进行指定推送</div><br><span></span>',
          overlay: true,
          params: {
            placement: 'right',
            highlight: true,
            mask: true,
            enableScrolling: false
          },
          before: () => {
            this.createRole = 0
            this.executer = 1
            this.handleTourPush()
          }
        },
        {
          target: '#pushDialog .el-dialog',
          content:
            '<div style="font-size:20px;line-height:25px">如果任务配置的是混合推送，则可以选择机构或者个人进行指定推送</div><br><span></span>',
          overlay: true,
          params: {
            placement: 'right',
            highlight: true,
            mask: true,
            enableScrolling: false
          },
          before: () => {
            this.createRole = 0
            this.executer = 2
            this.handleTourPush()
          }
        },
        {
          target: '',
          content:
            '<div style="font-size:20px;line-height:25px">总行创建任务并分配到支行/客户经理，流程至此完毕。等待支行/客户经理认领后，相关推送详情字段会回显</div><br><span></span>',
          overlay: true,
          params: {
            highlight: true,
            mask: true,
            enableScrolling: false
          },
          before: () => {
            this.dialogVisible = false
            sessionStorage.removeItem('isSegTour')
          }
        }
      ],
      tourOptions: {
        highlight: true,
        labels: {
          buttonSkip: '跳过',
          buttonPrevious: '上一步',
          buttonNext: '下一步',
          buttonStop: '完成'
        },
        enabledButtons: {
          buttonSkip: true,
          buttonPrevious: true,
          buttonNext: true,
          buttonStop: true
        },
        useKeyboardNavigation: true,
        startTime: 0,
        stopOnTargetNotFound: true,
        debug: false
      },
      loanBg,
      searchForm: {
        custId: '',
        custName: '',
        pushStatus: '',
        pushBranchStatus: ''
      },
      pushBranchStatusList: [
        { label: '未成功推送', value: '-1' },
        { label: '未推送', value: '0' },
        { label: '成功', value: '1' },
        { label: '失败', value: '2' }
      ],
      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: '柜员ID', visible: true }
      ],
      tableData: [],
      Loading: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      dialogTitle: '',
      dialogVisible: false,
      isbranch: false,
      executer: '',
      searchParams: '',
      treeLoading: true,
      deptOptions: [],
      defaultDeptProps: {
        children: 'children',
        label: 'label'
      },
      checkedKeys: [],
      userIds: [],
      isHead: false,
      selectedRows: [],
      selectedIds: [],
      visitRecords: [],
      groupIds: [],
      groupId: '',
      isPushFild: false,
      allUserList: [],
      showCuDa: false,
      speedArr: [
        { title: '快捷菜单1', url: '1' },
        { title: '快捷菜单2', url: '2' },
        { title: '快捷菜单3', url: '3' },
        { title: '快捷菜单4', url: '4' },
        { title: '快捷菜单5', url: '5' },
        { title: '快捷菜单6', url: '6' }
      ],
      isOpen: false,
      cudaDialog: false,
      formObj: {
        task: []
      },
      formRules: {
        task: [
          {
            required: false,
            message: '请选择原因',
            trigger: 'blur'
            // validator: (rule, value, callback) => {
            //     console.log(value)
            //     if (!value.length) {
            //         callback(new Error("请选择原因"));
            //     } else {
            //         callback();
            //     }
            // },
          }
        ]
      },
      showVisit: true,
      showFollow: false,
      thinkOptions: [
        { label: '有意向', value: '1' },
        { label: '没意向', value: '0' }
      ],
      resultOptions: [
        { label: '不适合办理', value: '0' },
        { label: '营销成功', value: '1' },
        { label: '营销失败', value: '2' }
      ],
      formFollowRules: {
        custFeedback: [
          {
            required: true,
            message: '请选择客户意愿',
            trigger: 'blur'
          }
        ],
        visitResult: [
          {
            required: true,
            message: '请选择营销结果',
            trigger: 'blur'
          }
        ]
      },
      formFollowViewRules: {
        custFeedback: [
          {
            required: true,
            message: '请选择客户意愿',
            trigger: 'blur'
          }
        ],
        visitResult: [
          {
            required: true,
            message: '请选择营销结果',
            trigger: 'blur'
          }
        ]
      },
      formFollow: {
        custFeedback: '',
        visitResult: '',
        remark: ''
      },
      formFollowView: {
        custFeedback: '',
        visitResult: '',
        remark: ''
      },
      custName: '',
      custPhone: '',
      showResult: false,
      addressOneDetails: [],
      addressTwoDetails: [],
      visitLogList: [],
      currentCustId: '',
      drawCustType: '',
      drawCustId: '',
      viewName: '',
      selectedTask: '',
      custId: '',
      userManagerId: null,
      adminFlag: '',
      disabledDate: false,
      notClaim: false,
      custType: '',
      addressFamilyDetails: [],
      addressHuJiDetails: [],
      addressWorkDetails: [],
      addressCZDetails: [],
      addressLXDetails: [],
      addressSFZDetails: [],
      custClaimStatusList: [
        { label: '未认领', value: '0' },
        { label: '已认领', value: '1' }
      ],
      ispush: '0',
      isCooperate: false
    }
  },
  computed: {
    ...mapGetters(['roles', 'userName']),
    // 总行
    isHeadAdmin() {
      return this.roles.includes('headAdmin')
    },
    // 支行
    isBranchAdmin() {
      return this.roles.includes('branchAdmin')
    },
    // 客户经理
    isCommonManager() {
      return this.roles.includes('commonManager')
    },
    // 网点主任
    isOutletAdmin() {
      return this.roles.includes('outletAdmin')
    },
    // 对公
    isPublic() {
      return this.roles.includes('headPublic')
    },
    // 对私
    isPrivate() {
      return this.roles.includes('headPrivate')
    },
    // 运管部
    isHeadOps() {
      return this.roles.includes('headOps')
    },
    isSegTour() {
      return sessionStorage.getItem('isSegTour')
    }
  },
  watch: {
    searchParams(val) {
      this.$refs.deptTree.filter(val)
    }
  },
  created() {
    this.selectedTask = this.$route.query.type
    this.searchForm.pushStatus = this.$route.query.pushStatus
    this.userManagerId = this.$route.query.userManagerId
    this.disabledDate = this.$route.query.disabledDate
    this.notClaim = this.$route.query.notClaim
    this.isCooperate = this.$route.query.isCooperate
    console.log(this.disabledDate, 111)
    this.getCampaignDetail()

    this.isUserType()
    this.initCustomerByNameAndId()
    this.custType = this.$route.query.custType
    if (this.isHeadAdmin || this.isPublic || this.isPrivate || this.isHeadOps) {
      this.searchForm.pushStatus = this.$route.query.unSuccessHeadFlag
    }
    if (this.isBranchAdmin) {
      this.searchForm.pushBranchStatus = this.$route.query.unSuccessBranchFlag
    }
    if (this.$route.query.unSuccessHeadFlag == 4) {
      this.ispush = '1'
      this.pushStatusList = [
        { label: '未推送', value: '0' },
        { label: '推送成功', value: '1' },
        { label: '推送失败', value: '2' },
        { label: '无法推送', value: '3' },
        { label: '未成功推送', value: '4' }
      ]
    } else {
      this.pushStatusList = [
        { label: '未推送', value: '0' },
        { label: '推送成功', value: '1' },
        { label: '推送失败', value: '2' },
        { label: '无法推送', value: '3' }
      ]
    }
    if (this.$route.query.unSuccessBranchFlag == 4) {
      this.pushBranchStatusList = [
        { label: '不成功', value: '-1' },
        { label: '未推送', value: '0' },
        { label: '成功', value: '1' },
        { label: '失败', value: '2' },
        { label: '未成功推送', value: '4' }
      ]
    } else {
      this.pushBranchStatusList = [
        { label: '不成功', value: '-1' },
        { label: '未推送', value: '0' },
        { label: '成功', value: '1' },
        { label: '失败', value: '2' }
      ]
    }
    this.searchForm.custClaimStatus = this.$route.query.custClaimStatus
      ? this.$route.query.custClaimStatus
      : ''
    this.initTableDate()
  },
  mounted() {
    if (this.isSegTour == '1') {
      setTimeout(() => {
        this.startTour()
      }, 1000)
    }
  },
  methods: {
    startTour() {
      this.$tours['taskDetailTour'].start()
    },
    getCampaignDetail() {
      campaignDetail({ campaignId: this.$route.query.campaignId }).then(
        (res) => {
          this.executer = res.executer
        }
      )
    },
    isUserType() {
      isHead().then((res) => {
        if (
          Object.keys(res)[0] == 'headAdmin' ||
          Object.keys(res)[0] == 'private' ||
          Object.keys(res)[0] == 'public' ||
          Object.keys(res)[0] == 'ops'
        ) {
          this.createRole = '0'
          this.isbranch = false
          this.isHead = true
        } else if (Object.keys(res)[0] == 'branchAdmin') {
          this.createRole = '1'
          this.isbranch = true
          this.isHead = false
        } else {
          this.createRole = '2'
        }
      })
    },
    initTableDate() {
      this.Loading = true
      const params = {
        campaignId: this.$route.query.campaignId,
        type: this.selectedTask,
        custId: this.searchForm.custId,
        custName: this.searchForm.custName,

        custClaimStatus: this.searchForm.custClaimStatus,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        custType: this.$route.query.custType,
        userManagerId: this.userManagerId,
        pushBranchStatus: this.searchForm.pushBranchStatus,
        visitStatus: this.searchForm.visitStatus
      }
      if (
        this.isHeadAdmin ||
        this.isPublic ||
        this.isPrivate ||
        this.isHeadOps
      ) {
        if (this.ispush == '1' || this.searchForm.pushStatus == '4') {
          params.unSuccessHeadFlag = true
        } else if (this.ispush == '2') {
          if (this.searchForm.pushStatus == '4') {
            params.unSuccessHeadFlag = true
          } else {
            params.unSuccessHeadFlag = ''
          }
        }
      }
      params.pushStatus =
        this.searchForm.pushStatus == '4' ? '' : this.searchForm.pushStatus
      taskListDetail(params).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.Loading = false
          this.tableData = res.rows
          this.total = res.total
          this.adminFlag = res.rows.length > 0 ? res.rows[0].adminFlag : ''
          // this.groupId = res.rows.length > 0 ? res.rows[0].groupId : ''
        }
      })
    },
    handleStatus(status) {
      switch (status) {
        case '0':
          return '未推送'
        case '1':
          return '推送成功'
        case '2':
          return '推送失败'
        case '3':
          return '无法推送'
        case '/':
          return '/'
      }
    },
    handleSearch() {
      this.ispush = '2'
      this.initTableDate()
    },
    handleRest() {
      this.ispush = '2'
      this.searchForm = {}
      this.initTableDate()
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.initTableDate()
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage
      this.initTableDate()
    },
    initCustomerByNameAndId() {
      findCustomerByNameAndId().then((res) => {
        // let list = res.filter(
        //     (item) => item.deptId != `${item.deptId.substring(0, 3)}000`
        // );
        this.allUserList = res.map((item) => {
          return {
            label: `${item.nickName}(${item.userName})`,
            value: item.userName,
            deptId: item.deptId,
            id: item.userId,
            level: 'user',
            children: []
          }
        })
      })
    },
    // 总行---支行树
    getDeptTree() {
      getDeptTree().then((response) => {
        const filterTree = (data) => {
          if (!Array.isArray(data)) return []

          return data.map((node) => {
            const newNode = { ...node }

            if (node.level === 'head') {
              newNode.disabled = true
              newNode.children = filterTree(node.children || []).filter(
                (child) => child.level === 'branch'
              )
            } else if (node.level === 'branch') {
              delete newNode.children
            }

            return newNode
          })
        }

        this.deptOptions = filterTree(response.data)
        this.treeLoading = false
      })
    },
    getOutletDeptTree() {
      getDeptTree().then((res) => {
        const filterTreeOutlet = (data) => {
          if (!Array.isArray(data)) return []

          return data.map((node) => {
            const newNode = { ...node }

            if (node.level === 'head') {
              newNode.disabled = true
              newNode.children = filterTreeOutlet(node.children || [])
            } else if (node.level === 'branch') {
              newNode.disabled = true
              newNode.children = filterTreeOutlet(node.children || [])
            }

            return newNode
          })
        }
        this.deptOptions = filterTreeOutlet(res.data)
        this.treeLoading = false
      })
    },
    // 总行---个人树
    getPersonTree() {
      getDeptTree().then((response) => {
        this.deptOptions = response.data
        this.deptOptions[0].disabled = true
        const obj = this.deptOptions[0]
        this.allUserList.forEach((el) => {
          if (el.deptId == obj.id && obj.level == 'head') {
            this.deptOptions[0].children.push(el)
          }
        })
        this.deptOptions[0].children.forEach((item) => {
          this.allUserList.forEach((el) => {
            if (item.level == 'branch') {
              item.disabled = true
              if (item.id == el.deptId) {
                item.children ? item.children.push(el) : []
              }
            }
          })
        })
        this.deptOptions[0].children.forEach((item) => {
          if (Array.isArray(item.children)) {
            item?.children.forEach((el) => {
              el.children = []
              if (el.level == 'outlet') {
                el.disabled = true
                this.allUserList.forEach((v) => {
                  if (el.id == v.deptId) {
                    el.children.push(v)
                  }
                })
              }
            })
          }
        })
        console.log(this.userName, 'this.userName')
        console.log(this.deptOptions, 'this.deptOptions')
        if (
          this.isHeadAdmin ||
          this.isPublic ||
          this.isPrivate ||
          this.isHeadOps
        ) {
          this.disableCurrentUser(this.deptOptions, this.userName)
        }
        this.treeLoading = false
      })
    },
    // 置灰自己
    disableCurrentUser(tree, currentUserId) {
      for (const node of tree) {
        if (node.value === currentUserId) {
          node.disabled = true
          return true
        }
        if (node.children && node.children.length) {
          const found = this.disableCurrentUser(node.children, currentUserId)
          if (found) return true
        }
      }
      return false
    },
    // 总行---混合树
    getDeptAndPerTree() {
      getDeptTree().then((response) => {
        this.deptOptions = response.data
        console.log(this.deptOptions, 'this.deptOptionsthis.deptOptions')
        const obj = this.deptOptions[0]
        this.allUserList.forEach((el) => {
          if (el.deptId == obj.id && obj.level == 'head') {
            this.deptOptions[0].children.push(el)
          }
        })
        this.deptOptions[0].children.forEach((item) => {
          this.allUserList.forEach((el) => {
            if (item.level == 'branch') {
              if (item.id == el.deptId) {
                item.children ? item.children.push(el) : []
              }
            }
          })
        })
        this.deptOptions[0].children.forEach((item) => {
          if (Array.isArray(item.children)) {
            item?.children.forEach((el) => {
              el.children = []
              if (el.level == 'outlet') {
                this.allUserList.forEach((v) => {
                  if (el.id == v.deptId) {
                    el.children.push(v)
                  }
                })
              }
            })
          }
        })
        if (
          this.isHeadAdmin ||
          this.isPublic ||
          this.isPrivate ||
          this.isHeadOps
        ) {
          this.disableCurrentUser(this.deptOptions, this.userName)
        }
        this.treeLoading = false
      })
    },
    // 支行---个人树
    getZhpersonTres() {
      getDeptTree({ deptid: this.currentDeptId }).then((response) => {
        this.deptOptions = response.data
        this.deptOptions[0].disabled = true
        if (
          this.deptOptions[0].children &&
          this.deptOptions[0].children.length > 0
        ) {
          this.deptOptions[0].children.forEach((item) => {
            item.children = []
            item.disabled = true
            this.allUserList.forEach((el) => {
              if (this.deptOptions[0].id == el.deptId) {
                this.deptOptions[0].children.push(el)
                this.deptOptions[0].children = Array.from(
                  new Set(this.deptOptions[0].children)
                )
              }
              if (item.level == 'outlet') {
                if (item.id == el.deptId) {
                  item.children.push(el)
                }
              }
            })
          })
        } else {
          this.deptOptions[0].children = []
          this.allUserList.forEach((el) => {
            if (this.deptOptions[0].id == el.deptId) {
              console.log(this.deptOptions[0], 'this.deptOptions[0]')
              console.log(el, 'elel')
              this.deptOptions[0].children.push(el)
              this.deptOptions[0].children = Array.from(
                new Set(this.deptOptions[0].children)
              )
            }
          })
        }
      })
      this.treeLoading = false
    },
    handlePush(row) {
      if (this.$route.query.campaignId == null) {
        Message.warning('请返回上一级，新建活动成功后才可指定推送！')
        this.$refs.groupCustomerDetail.clearSelection()
        return
      }
      this.dialogVisible = true
      this.custIds = row.custId
      this.groupId = row.groupId || '-1' // 我的客户中直接添加到活动的，没有归属客群
      if (this.createRole == '0') {
        // 总行
        if (this.executer == '0') {
          // 机构
          this.dialogTitle = '请选择支行'
          this.getDeptTree()
        } else if (this.executer == '1') {
          // 个人
          this.dialogTitle = '请选择客户经理'
          this.getPersonTree()
        } else if (this.executer == '3') {
          this.dialogTitle = '请选择网点'
          this.getOutletDeptTree()
        } else {
          // 混合
          this.dialogTitle = '请选择个人或者机构'
          this.getDeptAndPerTree()
        }
      } else if (this.createRole == '1' || this.createRole == '2') {
        // 支行----只能选择推送给个人
        this.dialogTitle = '请选择客户经理'
        this.getZhpersonTres()
      }
    },
    handleTourPush() {
      this.dialogVisible = true
      if (this.createRole == '0') {
        // 总行
        if (this.executer == '0') {
          // 机构
          this.dialogTitle = '请选择机构'
          this.getDeptTree()
        } else if (this.executer == '1') {
          // 个人
          this.dialogTitle = '请选择客户经理'
          this.getPersonTree()
        } else {
          // 混合
          this.dialogTitle = '请选择个人或者机构'
          this.getDeptAndPerTree()
        }
      } else if (this.createRole == '1') {
        // 支行----只能选择推送给个人
        this.dialogTitle = '请选择客户经理'
        this.getZhpersonTres()
      }
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    handleCustAppoint() {
      console.log(this.selectedRows, 'this.selectedRows')
      const selectedCustIds = this.selectedRows.map((item) => item.custId)
      // 我的客户中直接添加到活动的，没有归属客群
      const groupIds = this.selectedRows.map((item) => item.groupId || '-1')
      this.selectedIds = selectedCustIds
      this.groupIds = groupIds
      const arr = this.selectedRows.map((item) => item.pushStatus)

      console.log(arr, 'arr')
      if (this.selectedIds.length == 0) {
        Message.warning('请先选择指定客户')
        return
      }
      if (this.$route.query.campaignId == null) {
        Message.warning('请返回上一级，新建活动成功后才可批量推送！')
        this.$refs.groupCustomerDetail.clearSelection()
        return
      }
      if (arr.includes('3')) {
        Message.warning('无法推送的数据不能进行推送，请重新进行选择')
        return
      }
      this.dialogVisible = true
      if (this.createRole == '0') {
        // 总行
        if (this.executer == '0') {
          // 机构
          this.dialogTitle = '请选择机构'
          this.getDeptTree()
        } else if (this.executer == '1') {
          // 个人
          this.dialogTitle = '请选择客户经理'
          this.getPersonTree()
        } else {
          // 混合
          this.dialogTitle = '请选择个人或者机构'
          this.getDeptAndPerTree()
        }
      } else if (this.createRole == '1') {
        // 支行----只能选择推送给个人
        this.dialogTitle = '请选择客户经理'
        this.getZhpersonTres()
      }
    },
    resetSearch() {
      this.searchParams = ''
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleCheckChange(data, checked) {
      if (this.isbranch || this.isOutletAdmin) {
        if (checked) {
          this.userIds.push(data.id)
        } else if (!checked && this.userIds != []) {
          const index = this.userIds.indexOf(data.id)
          this.userIds.splice(index, 1)
        }
      }
      if (this.executer == '0') {
        if (checked) {
          this.checkedKeys.push(data.id)
        } else if (!checked && this.checkedKeys != []) {
          const index = this.checkedKeys.indexOf(data.id)
          this.checkedKeys.splice(index, 1)
        }
      }
      if (this.executer == '1' && data.level == 'user') {
        if (checked) {
          this.userIds.push(data.id)
        } else if (!checked && this.userIds != []) {
          const index = this.userIds.indexOf(data.id)
          this.userIds.splice(index, 1)
        }
      }
      if (this.executer == '2' && this.isHead) {
        if (data.level != 'user') {
          if (checked) {
            this.checkedKeys.push(data.id)
          } else if (!checked && this.checkedKeys != []) {
            const index = this.checkedKeys.indexOf(data.id)
            this.checkedKeys.splice(index, 1)
          }
        } else {
          if (checked) {
            this.userIds.push(data.id)
          } else if (!checked && this.userIds != []) {
            const index = this.userIds.indexOf(data.id)
            this.userIds.splice(index, 1)
          }
        }
      }
    },
    handleDialogCancle() {
      this.deptOptions = []
      this.treeLoading = true
      this.searchParams = ''
      this.$refs.groupCustomerDetail.clearSelection()
      this.dialogVisible = false
      this.checkedKeys = []
      this.userIds = []
    },
    handleConfigeInfo() {
      console.log(this.groupIds, this.groupId)
      const createRole = this.isHeadAdmin
        ? '0'
        : this.isBranchAdmin
          ? '5'
          : this.isPublic
            ? '2'
            : this.isPrivate
              ? '1'
              : this.isHeadOps
                ? '3'
                : ''
      // 总行管理员推送机构
      if (this.executer == 0 && this.isHead) {
        if (this.checkedKeys.length == 0) {
          Message.warning('请勾选机构后提交')
        } else {
          customerAppoint({
            custIds: this.selectedIds?.join(',') || this.custIds,
            deptIds: this.checkedKeys?.join(',') || [],
            groupId: this.groupIds.join(',') || this.groupId,
            campaignId: this.$route.query.campaignId,
            createRole
          }).then((res) => {
            if (res.code == '200') {
              Message.success('总行机构层级推送成功!')
              this.deptOptions = []
              this.checkedKeys = []
              this.treeLoading = true
              this.searchParams = ''
              this.dialogVisible = false
              this.selectedRows.map((item) => {
                return (item.pushStatus = '1')
              })
              this.$refs.groupCustomerDetail.clearSelection()
              this.userIds = []
              this.selectedIds = []
              this.groupIds = []
              this.custIds = ''
              this.groupId = ''
              this.initTableDate()
            }
          })
        }
      }
      // 总行推送到个人的情况
      else if (this.executer == 1 && this.isHead) {
        if (this.userIds.length == 0) {
          Message.warning('请勾选客户经理后提交')
        } else {
          customerAppoint({
            custIds: this.selectedIds.join(',') || this.custIds,
            deptIds: '',
            userIds: [...new Set(this.userIds)].join(','),
            groupId: this.groupIds.join(',') || this.groupId,
            campaignId: this.$route.query.campaignId,
            createRole
          }).then((res) => {
            if (res.code == '200') {
              Message.success('总行个人层级推送成功！')
              this.deptOptions = []
              this.treeLoading = true
              this.searchParams = ''
              this.dialogVisible = false
              this.selectedRows.map((item) => {
                return (item.pushStatus = '1')
              })
              this.$refs.groupCustomerDetail.clearSelection()
              this.userIds = []
              this.selectedIds = []
              this.groupIds = []
              this.custIds = ''
              this.groupId = ''
              this.initTableDate()
            }
          })
        }
      } else if (this.isbranch == true) {
        // 支行推送到个人的情况
        if (this.userIds.length == 0) {
          Message.warning('请勾选客户经理后提交')
        } else {
          customerAppoint({
            custIds: this.selectedIds.join(',') || this.custIds,
            deptIds: '',
            userIds: [...new Set(this.userIds)].join(','),
            groupId: this.groupIds.join(',') || this.groupId,
            campaignId: this.$route.query.campaignId,
            createRole
          }).then((res) => {
            if (res.code == '200') {
              Message.success('支行个人推送成功！')
              this.deptOptions = []
              this.treeLoading = true
              this.searchParams = ''
              this.dialogVisible = false
              this.selectedRows.map((item) => {
                return (item.pushStatus = '1')
              })
              this.$refs.groupCustomerDetail.clearSelection()
              this.userIds = []
              this.selectedIds = []
              this.groupIds = []
              this.custIds = ''
              this.groupId = ''
              this.initTableDate()
            }
          })
        }
      } else if (this.executer == 2 && this.isHead) {
        if (this.userIds.length == 0 && this.checkedKeys.length == 0) {
          Message.warning('请至少选择一个机构及客户经理进行混合推送')
        } else {
          customerAppoint({
            custIds: this.selectedIds.join(',') || this.custIds,
            deptIds: this.checkedKeys.join(','),
            userIds: [...new Set(this.userIds)].join(','),
            groupId: this.groupIds.join(',') || this.groupId,
            campaignId: this.$route.query.campaignId,
            createRole
          }).then((res) => {
            if (res.code == 200) {
              Message.success('总行混合推送成功')
              this.deptOptions = []
              this.treeLoading = true
              this.searchParams = ''
              this.dialogVisible = false
              this.selectedRows.map((item) => {
                return (item.pushStatus = '1')
              })
              this.$refs.groupCustomerDetail.clearSelection()
              this.userIds = []
              this.checkedKeys = []
              this.selectedIds = []
              this.groupIds = []
              this.custIds = ''
              this.groupId = ''
              this.initTableDate()
            }
          })
        }
      } else if (this.isOutletAdmin) {
        // 网点推送到个人的情况
        if (this.userIds.length == 0) {
          Message.warning('请勾选客户经理后提交')
        } else {
          customerAppoint({
            custIds: this.selectedIds.join(',') || this.custIds,
            deptIds: '',
            userIds: [...new Set(this.userIds)].join(','),
            groupId: this.groupIds.join(',') || this.groupId,
            campaignId: this.$route.query.campaignId,
            createRole: '6'
          }).then((res) => {
            if (res.code == '200') {
              Message.success('网点个人推送成功！')
              this.deptOptions = []
              this.treeLoading = true
              this.searchParams = ''
              this.dialogVisible = false
              this.selectedRows.map((item) => {
                return (item.pushStatus = '1')
              })
              this.$refs.groupCustomerDetail.clearSelection()
              this.userIds = []
              this.selectedIds = []
              this.groupIds = []
              this.custIds = ''
              this.groupId = ''
              this.initTableDate()
            }
          })
        }
      }
    },
    exportDataByCustIds() {
      const selectedCustIds = this.selectedRows.map((item) => item.custId)
      this.selectedIds = selectedCustIds
      if (this.selectedIds.length == 0) {
        Message.warning('请先选择导出客户')
        return
      }
      this.download(
        `/system/campaign/exportDataByCustIds?campaignId=${
          this.$route.query.campaignId
        }&custIds=${this.selectedIds.join(',')}`,
        {},
        `个人分群_${new Date().getTime()}.xlsx`
      )
      this.$refs.groupCustomerDetail.clearSelection()
      Message.success('导出成功')
    },

    handlePushFild() {
      this.isPushFild = !this.isPushFild
      if (this.isPushFild) {
        this.searchForm.pushStatus = '2'
        this.initTableDate()
      } else {
        this.searchForm.pushStatus = undefined
        this.initTableDate()
      }
    },
    returnLastPage() {
      // this.$router.go(-1)
      const { query } = this.$route
      if (query.backUrl) {
        this.$router.replace({
          path: query.backUrl,
          query
        })
      } else {
        this.$router.go(-1)
      }
    },
    handleCustName() {
      if (this.drawCustType == '0') {
        this.$router.push({
          path: '/360charts/indexcharts',
          query: {
            custId: this.drawCustId
          }
        })
      } else if (this.drawCustType == '1') {
        this.$router.push({
          path: '/360charts/commercial/',
          query: {
            custId: this.drawCustId
          }
        })
      } else if (this.drawCustType == '2') {
        this.$router.push({
          path: '/360charts/firm/',
          query: {
            custId: this.drawCustId
          }
        })
      }
    },
    // 监听分页
    openDialog(custId, type) {
      if (type == '0') {
        this.$router.push({
          path: '/360charts/indexcharts',
          query: {
            custId
          }
        })
      } else if (type == '1') {
        this.$router.push({
          path: '/360charts/commercial/',
          query: {
            custId
          }
        })
      } else if (type == '2') {
        this.$router.push({
          path: '/360charts/firm/',
          query: {
            custId
          }
        })
      }
    },
    // 触达
    handleTarch(row) {
      this.showCuDa = true
      this.custName = row.custName
      this.drawCustType = row.custType
      this.drawCustId = row.custId
      this.custPhone = row.custPhone
      this.currentCustId = row.custId
      this.custId = row.custId
      this.drawSocialCreditCode = row.socialCreditCode
      this.drawCustIdc = row.custIdc
      this.initGetVisitInfoList()

      getVisitData({ custId: row.custId }).then((res) => {
        if (res.code == 200) {
          const { addressDetails, visitLogList } = res.data
          this.addressOneDetails = addressDetails.filter(
            (item) => item.addressName === '经营地址'
          )
          this.addressTwoDetails = addressDetails.filter(
            (item) => item.addressName === '注册地址'
          )
          this.addressFamilyDetails = addressDetails.filter(
            (item) => item.addressName === '家庭地址'
          )
          this.addressHuJiDetails = addressDetails.filter(
            (item) => item.addressName === '户籍地址'
          )
          this.addressWorkDetails = addressDetails.filter(
            (item) => item.addressName === '工作地址'
          )
          this.addressCZDetails = addressDetails.filter(
            (item) => item.addressName === '常住地址'
          )
          this.addressLXDetails = addressDetails.filter(
            (item) => item.addressName === '联系地址'
          )
          this.addressSFZDetails = addressDetails.filter(
            (item) => item.addressName === '身份证地址'
          )
          this.visitLogList = visitLogList
        }
      })
    },
    // 触达-查看
    viewContent(item) {
      this.showResult = true
      this.formFollowView.custFeedback = item.custFeedback
      this.formFollowView.visitResult = item.visitResult
      this.formFollowView.remark = item.remark
      this.viewName = item.nickName
    },
    // 无法触达弹框
    openCuDa() {
      this.cudaDialog = true
    },
    cancelCuDa() {
      this.cudaDialog = false
      this.formObj.task = []
    },
    onSubmit() {
      // campaignId: this.$route.query.campaignId
      const taskId = this.$route.query.campaignId
      const custId = this.currentCustId
      let contactErrorFlag = false
      let addressErrorFlag = false
      console.log(this.formObj.task)
      if (!this.formObj.task.length) {
        Message.warning('请选择原因')
        return
      }
      if (this.formObj.task.includes('1')) {
        contactErrorFlag = true
      }
      if (this.formObj.task.includes('2')) {
        addressErrorFlag = true
      }
      this.$refs.formObj.validate((valid) => {
        if (valid) {
          addNotCuda({
            taskId,
            custId,
            contactErrorFlag,
            addressErrorFlag
          }).then((res) => {
            if (res.code == 200) {
              Message.success('无法触达提交成功！')
              this.cudaDialog = false
            }
          })
        }
      })
    },
    // 跟进
    openFollow() {
      this.showFollow = true
    },
    cancelFollow() {
      this.showFollow = false
      this.$refs.formFollow.resetFields()
    },
    onSubmitFollow() {
      const that = this
      this.$refs.formFollow.validate((valid) => {
        if (valid) {
          addVisitData({
            custId: that.currentCustId,
            custFeedback: that.formFollow.custFeedback,
            visitResult: that.formFollow.visitResult,
            remark: that.formFollow.remark
          }).then((res) => {
            if (res.code == 200) {
              Message.success('跟进成功！')
              this.showFollow = false
              getVisitData({ custId: that.custId }).then((res) => {
                if (res.code == 200) {
                  const { addressDetails, visitLogList } = res.data
                  this.addressOneDetails = addressDetails.filter(
                    (item) => item.addressName === '经营地址'
                  )
                  this.addressTwoDetails = addressDetails.filter(
                    (item) => item.addressName === '注册地址'
                  )
                  this.addressFamilyDetails = addressDetails.filter(
                    (item) => item.addressName === '家庭地址'
                  )
                  this.addressHuJiDetails = addressDetails.filter(
                    (item) => item.addressName === '户籍地址'
                  )
                  this.addressWorkDetails = addressDetails.filter(
                    (item) => item.addressName === '工作地址'
                  )
                  this.addressCZDetails = addressDetails.filter(
                    (item) => item.addressName === '常住地址'
                  )
                  this.addressLXDetails = addressDetails.filter(
                    (item) => item.addressName === '联系地址'
                  )
                  this.addressSFZDetails = addressDetails.filter(
                    (item) => item.addressName === '身份证地址'
                  )
                  this.visitLogList = visitLogList
                }
              })
            }
          })
        }
      })
    },
    // 处理认领/批量认领事件
    handleGet(custId) {
      custClaimCustomer({
        custIds: custId,
        campaignId: this.$route.query.campaignId
      }).then((res) => {
        if (res.code == 200) {
          Message.success('认领成功!')
          this.$refs.groupCustomerDetail.clearSelection()
          this.initTableDate()
        }
      })
    },

    // 处理批量认领
    batchGet() {
      // this.selectedRows
      const selectedIds = this.selectedRows.map((item) => item.custId)
      const selectedCustStatus = this.selectedRows.filter(
        (item) => item.custClaimStatus == '1'
      )
      if (selectedIds.length == 0) {
        Message.warning('请先选择客户')
        return
      }
      if (selectedCustStatus.length) {
        Message.warning('当前选项包括已被认领的客户,请重新选择')
        return
      }
      this.handleGet(selectedIds.join(','))
    },
    initGetVisitInfoList() {
      const params = {
        campaignId: this.$route.query.campaignId,
        custId: this.custId
      }
      getListByCampign(params).then((res) => {
        this.visitRecords = res.data || []
      })
      // if (this.$route.query.custType == '0') {
      //   // 个人
      //   const params = {
      //     campaignId: this.$route.query.campaignId,
      //     custIdc: this.drawCustIdc
      //   }
      //   getcdVisitInfoList(params).then((res) => {
      //     if (res.code == 200) {
      //       const arr = res.rows.map((item) => {
      //         return item.infoList
      //       })
      //       const list = arr.flat()
      //       list.forEach((item) => {
      //         item.isRemarkEdit = true
      //       })
      //       this.visitRecords = JSON.parse(JSON.stringify(list))
      //     }
      //   })
      // } else if (
      //   this.$route.query.custType == '1' ||
      //   this.$route.query.custType == '2'
      // ) {
      //   // 商户或者企业
      //   const params = {
      //     campaignId: this.$route.query.campaignId,
      //     socialCreditCode: this.drawSocialCreditCode
      //   }
      //   cdVisitInfoList(params).then((res) => {
      //     if (res.code == 200) {
      //       const arr = res.rows.map((item) => {
      //         return item.infoList
      //       })
      //       const list = arr.flat()
      //       list.forEach((item) => {
      //         item.isRemarkEdit = true
      //         item.isZfEdit = item.visId == this.userName
      //       })
      //       this.visitRecords = JSON.parse(JSON.stringify(list))
      //     }
      //   })
      // }
    },
    handleClickRecord(item, index) {
      this.$set(this.visitRecords[index], 'isRemarkEdit', false)
    },
    handleCancleRecord(item, index) {
      this.initGetVisitInfoList()
    },
    handleCommitRecord(item, index) {
      const params = {
        id: item.id,
        remark: item.remark
      }
      editVisitInfo(params).then((res) => {
        if (res.code == 200) {
          Message.success('修改成功!')
          this.initGetVisitInfoList()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  padding: 30px 30px 100px 30px;
  background-color: #fff;

  .special-btn {
    width: 110%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .special-btn1 {
    width: 110%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.child-main {
  padding-left: 32px;
  padding-top: 15px;

  .title {
    margin: 10px 0;
    font-weight: bold;
  }

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

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

  .cuda-method-box {
    display: flex;
    margin-left: 10px;
  }

  .cude-address {
    width: 42%;
    display: flex;
    // margin-left: 10px;
    border: 1px solid #ddd;

    .second-title {
      width: 104px;
      height: 104px;
      background: #eaf5ff;
      text-align: center;
      display: flex;
      align-items: center;
      padding: 0 10px;
      color: #222;
      font-size: 16px;
      font-weight: 500;
      border-right: 1px solid #ddd;
    }

    .content {
      font-size: 12px;
      padding: 2px 8px;
      color: #3d3d3d;
      font-weight: 400;

      .source {
        background: #eaf5ff;
        border-radius: 2px;
        padding: 1px 0px;
        // margin-left: 4px;
      }
    }

    .address-flex {
      width: calc(100% - 100px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100px;
      overflow-y: auto;

      .content {
        display: flex;
        align-items: center;

        .el-icon-position {
          margin-left: 2px;
          color: #4886f8;
        }
      }

      .address {
        display: inline-block;
        width: 60%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .two {
    border-left: none;
  }

  .three {
    width: calc(83% - 1px);
    border-top: none;
    margin-left: 10px;
  }

  .person {
    // width: calc(83% - 2px);
  }

  .cuda-record {
    margin-top: 15px;

    .name {
      margin: 0 5px;
    }

    .time-view {
      color: #4886f8;
      cursor: pointer;
    }

    .genjin-con {
      margin-left: 10px;

      .timeline-box {
        font-size: 14px;
        color: #3d3d3d;
        font-weight: 400;
      }
    }
  }

  .cuda-speed {
    margin-top: 5px;

    .item-box {
      display: flex;
      flex-wrap: wrap;

      .item {
        background: #eaf5ff;
        font-size: 12px;
        display: flex;
        flex-basis: calc(20% - 10px);
        height: 30px;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        cursor: pointer;
        margin-right: 5px;
        margin-bottom: 5px;
        color: #222;
        // font-size: 16px;
        font-weight: 500;
      }
    }

    .operate {
      color: #4886f8;
      cursor: pointer;
      font-size: 12px;
      display: flex;
      align-items: center;
      margin-bottom: 5px;
    }
  }

  .drawer-footer {
    margin-top: 100px;
    text-align: center;
  }

  .collapse {
    position: fixed;
    right: 750px;
    background: #fff;
    height: 100px;
    font-size: 14px;
    color: #4886f8;
    margin-left: 2px;
    display: flex;
    align-items: center;
    top: 38%;
    cursor: pointer;
    padding-left: 5px;
    border-radius: 10px 0 0 10px;
  }
}

.child-main-cuda {
  // padding: 40px 40px;
  .my-form {
    margin: 10px 0 30px 0;
    text-align: center;
  }

  .title {
    font-size: 20px;
  }

  .dialog-footer {
    text-align: center;

    .handle-btn {
      margin-left: 10px;
    }
  }

  ::v-deep .el-form-item__error {
    margin-left: 80px;
  }
}

::v-deep .el-tree {
  .el-checkbox.is-disabled {
    display: none;
  }
}

.follow-main {
  padding: 10px 47px;

  .title {
    font-weight: bold;
  }

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

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

    //  margin-left: -6px;
  }

  .dialog-footer {
    text-align: center;
  }

  ::v-deep .el-form-item__label {
    min-width: 80px;
  }

  .common-box {
    padding: 5px 7px;
    font-size: 14px;
    color: #606266;
    font-weight: 600;
  }

  .zoufang-con {
    display: flex;

    .zoufang {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #606266;
      font-weight: 600;
      margin-left: 7px;
    }

    .result-img {
      width: 100px;
      height: 80px;
      margin-right: 2px;
    }
  }

  .common-btn {
    .btn {
      color: #4886f8;
      font-weight: 550;
    }
  }

  .collapse {
    position: fixed;
    right: 570px;
    background: #fff;
    height: 100px;
    font-size: 14px;
    color: #4886f8;
    margin-left: 2px;
    display: flex;
    align-items: center;
    top: 38%;
    cursor: pointer;
    padding-left: 5px;
    border-radius: 10px 0 0 10px;
  }
}

.drawTitle {
  font-size: 16px;
  font-weight: 600;
}

.zfRemark {
  display: flex;
}

.remarkTitle {
  width: 70%;
}

.record_btn {
  margin-top: 20px;
}

.record_item {
  line-height: 30px;
}

.dzBox_top {
  display: flex;
}

.dzBox_item {
  width: 30%;
  display: flex;
  min-height: 80px;
  gap: 2%;
  border: 1px solid #ddd;
}

.dzBox_title {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eaf5ff;
  border-right: 1px solid #ddd;
}

.dzBox_content {
  padding: 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  div {
    line-height: 30px;
  }
}

.dzBox_wapper {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

::v-deep .v-step[data-popper-placement^="top"]::after {
  top: 135%;
  left: 15%;
  transform: rotate(180deg);
}

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

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

::v-deep .v-step[data-popper-placement^="right"]::after {
  top: 100%;
  left: -95%;
  transform: rotate(180deg);
}

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

  ::v-deep .el-select {
    width: 180px;
  }
}
</style>

<style>
@import "../../grid/tour.css";
</style>
