<template>
  <div class="customer-wrap">
    <v-tour name="taskListTour" :steps="steps" :options="tourOptions" />
    <el-radio-group
      v-model="selectedTab"
      class="header-radio"
      @input="handleChange"
    >
      <template v-if="String(deptId).substring(0, 3) === '875'">
        <el-radio-button
          label="0"
          :disabled="isPublic"
          :class="{ 'btn-disabled': isPublic }"
        >个人</el-radio-button>
        <el-radio-button
          label="1"
          :disabled="isPublic"
          :class="{ 'btn-disabled': isPublic }"
        >商户</el-radio-button>
        <el-radio-button
          label="2"
          :disabled="isPrivate"
          :class="{ 'btn-disabled': isPrivate }"
        >企业</el-radio-button>
      </template>
      <template v-else>
        <el-radio-button
          label="2"
          :disabled="isPrivate"
          :class="{ 'btn-disabled': isPrivate }"
        >企业</el-radio-button>
        <el-radio-button
          label="0"
          :disabled="isPublic"
          :class="{ 'btn-disabled': isPublic }"
        >个人</el-radio-button>
        <el-radio-button
          label="1"
          :disabled="isPublic"
          :class="{ 'btn-disabled': isPublic }"
        >商户</el-radio-button>
      </template>
    </el-radio-group>
    <div class="taskTop">
      <div class="taskTop_left">
        <div
          v-if="
            this.shyh == '总行' ||
              isPrivate ||
              isPublic ||
              isHeadOps ||
              this.shyh == '支行'
          "
          id="myCreatTask"
          class="taskTop_left_item"
          :class="[isActive1 ? 'active' : '']"
          @click="handleMyTask"
        >
          我创建的任务<i v-if="isActive1" class="el-icon-arrow-down" />
        </div>
        <div
          v-if="this.shyh == '支行' || isCommonManager || isOutletAdmin"
          id="tsCreatTask"
          class="taskTop_left_item"
          :class="[isActive2 ? 'active' : '']"
          @click="handleTsTask"
        >
          推送给我的任务<i v-if="isActive2" class="el-icon-arrow-down" />
        </div>
        <div
          v-if="
            this.shyh == '总行' ||
              this.shyh == '支行' ||
              isOutletAdmin ||
              isPrivate ||
              isPublic ||
              isHeadOps
          "
          id="otherTask"
          class="taskTop_left_item"
          :class="[isActive3 ? 'active' : '']"
          @click="handleQtTask"
        >
          其他的任务<i v-if="isActive3" class="el-icon-arrow-down" />
        </div>
      </div>
      <div class="taskTop_right">
        <el-input
          v-model="searchQuery"
          placeholder="搜索任务名称"
          clearable
          class="search"
          @clear="handleSearch(searchQuery)"
          @keyup.enter.native="handleSearch(searchQuery)"
        />
        <el-button
          class="addTask"
          round
          type="primary"
          @click="handleAddTask"
        >任务创建</el-button>
      </div>
    </div>
    <div class="main_table">
      <section class="operate-cnt">
        <right-toolbar
          :columns="columns"
          style="margin-left: auto"
          @queryTable="handleRefersh"
        />
      </section>
      <el-table
        v-loading="Loading"
        :data="tableData"
        style="width: 100%"
        max-height="625"
      >
        <el-table-column
          v-if="columns[6].visible"
          key="createName"
          align="center"
          prop="createName"
          label="创建者"
          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>
        <el-table-column
          v-if="columns[0].visible"
          key="campaignName"
          align="center"
          prop="campaignName"
          label="任务名称"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" @click="goToShowTask(scope.row)">{{
              scope.row.campaignName
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          key="isCooperate"
          align="center"
          prop="isCooperate"
          label="任务模式"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.isCooperate === true ? "协作任务" : "普通任务"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns[1].visible"
          key="taskType"
          align="center"
          prop="taskType"
          label="任务类型"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row.taskType == '0'">营销任务</span>
            <span v-if="scope.row.taskType == '1'">事务任务</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns[2].visible"
          key="checkTarget"
          align="center"
          prop="checkTarget"
          label="考核目标"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns[3].visible"
          key="startTime"
          align="center"
          prop="startTime"
          label="开始时间"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns[4].visible"
          key="endTime"
          align="center"
          prop="endTime"
          label="结束时间"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns[7].visible"
          key="claimDate"
          align="center"
          width="230"
          prop="claimDate"
          label="认领时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ `${scope.row.claimStartTime}至${scope.row.claimEndTime}` }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns[8].visible"
          key="campaignDegree"
          align="center"
          prop="campaignDegree"
          label="紧急程度"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns[9].visible"
          key="claimType"
          align="center"
          prop="claimType"
          label="认领类型"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              scope.row.claimType == "0"
                ? "强制认领"
                : scope.row.claimType == "1"
                  ? "可选认领"
                  : ""
            }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="visitType"
          label="走访类型"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns[5].visible"
          key="customerNum"
          align="center"
          prop="customerNum"
          label="客户数"
          show-overflow-tooltip
        />
        <el-table-column align="center" label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleView(scope.row)"
            >查看</el-button>
            <el-button
              v-if="
                ['支行', '网点'].includes(shyh) &&
                  scope.row.orgClaimStatus != '1' &&
                  isActive2 &&
                  scope.row.custClaimStatus == null
              "
              type="text"
              :disabled="
                new Date() > new Date(scope.row.claimEndTime) ||
                  new Date() < new Date(scope.row.claimStartTime)
              "
              @click="handleorgClaim(scope.row.campaignId)"
            >
              {{ scope.row.custClaimStatus == null ? "机构认领" : "" }}
            </el-button>
            <el-button
              v-if="
                ['支行', '网点'].includes(shyh) &&
                  scope.row.orgClaimStatus == '1' &&
                  isActive2 &&
                  scope.row.custClaimStatus == null
              "
              type="text"
              :disabled="scope.row.orgDistributeStatus == '1'"
              @click="handlePushGroupCustomer(scope.row)"
            >{{ "去分配" }}</el-button>
            <el-button
              v-if="
                ((isHeadAdmin || isPublic || isPrivate || isHeadOps) &&
                  selectedTask == '0') ||
                  isBranchAdmin ||
                  isOutletAdmin ||
                  isCommonManager
              "
              type="text"
              @click="goListStatistics(scope.row)"
            >统计</el-button>
            <el-button
              v-if="isActive1"
              type="text"
              @click="goDeleteFn(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"
      />
    </div>
    <!-- 抽屉显示任务创建详情 -->
    <el-drawer
      title=""
      :visible.sync="showTaskDetail"
      :size="850"
      :with-header="false"
      direction="rtl"
      :append-to-body="true"
      :wrapper-closable="false"
    >
      <div id="taskDetailId" class="main main-detail">
        <div class="collapse" @click="showTaskDetail = false">
          <span>收起>></span>
        </div>
        <el-form
          ref="pushform"
          :model="pushform"
          :rules="pushrules"
          label-width="100px"
          style="width: 100%"
        >
          <div class="main_top">
            <p class="common-title">填写任务信息</p>
            <!-- <div>
            <el-button @click="handleCancle" v-if="this.$route.query.type == '1'">取消</el-button>
            <el-button type="primary" @click="handleCommit">提交</el-button>
            <el-button type="warning" disabled>暂存草稿</el-button>
          </div> -->
          </div>
          <div class="fillInformation">
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <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="17" :offset="3">
                <el-form-item
                  label="任务模式"
                  prop="taskModel"
                  class="required"
                >
                  <el-radio-group v-model="pushform.isCooperate" disabled>
                    <el-radio :label="false">普通任务</el-radio>
                    <el-radio :label="true">协作任务</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="紧急程度" prop="campaignDegree">
                  <el-select
                    v-model="pushform.campaignDegree"
                    placeholder="请选择紧急程度"
                    disabled
                  >
                    <el-option label="高" value="高" />
                    <el-option label="中" value="中" />
                    <el-option label="低" value="低" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="认领类型" prop="claimType">
                  <el-select
                    v-model="pushform.claimType"
                    placeholder="请选择认领类型"
                    disabled
                  >
                    <el-option label="强制认领" value="0" />
                    <el-option label="可选认领" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="任务时间" prop="taskDate">
                  <el-date-picker
                    v-model="pushform.taskDate"
                    disabled
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="picktaskDateOption"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="认领时间" prop="claimDate" style="flex: 1">
                  <el-date-picker
                    v-model="pushform.claimDate"
                    disabled
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickclaimDateOption"
                    value-format="yyyy-MM-dd"
                    @change="handleClaimDate"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="任务类型" prop="taskType">
                  <el-radio-group
                    v-model="pushform.taskType"
                    disabled
                    width="100%"
                  >
                    <el-radio label="0">营销任务</el-radio>
                    <el-radio label="1" disabled>事务任务</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="走访网格" prop="areaCode">
                  <el-cascader
                    v-model="pushform.areaCode"
                    :options="areaOptions"
                    :show-all-levels="false"
                    :props="{
                      label: 'name',
                      value: 'code',
                      emitPath: false,
                    }"
                    style="width: 100%"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="pushform.taskType == '0'" class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="活动方式" prop="campaignType">
                  <el-select
                    v-model="pushform.campaignType"
                    disabled
                    placeholder="请选活动方式"
                    allow-create
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in campaignTypeList"
                      :key="item.value"
                      :label="item.label"
                      :disabled="item.disabled"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col v-if="pushform.taskType == '0'" :span="17" :offset="3">
                <el-form-item label="考核目标" prop="checkTarget">
                  <el-select
                    v-model="pushform.checkTarget"
                    disabled
                    placeholder="请选考核目标"
                    allow-create
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in goalList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="任务指标" prop="taskIndex">
                  <el-input
                    v-model="pushform.taskIndex"
                    disabled
                    placeholder="请输入任务指标,如贷款时点余额较上年末时点余额提示50%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="奖励说明" prop="reward">
                  <el-input
                    v-model="pushform.reward"
                    disabled
                    placeholder="描述任务指标完成的奖励"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="任务内容备注" prop="remark">
                  <el-input
                    v-model="pushform.remark"
                    disabled
                    placeholder="描述该任务内容等信息"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="反馈要求" prop="feedBack">
                  <el-checkbox-group v-model="pushform.feedBack" disabled>
                    <el-checkbox label="无" />
                    <el-checkbox label="签到签退" />
                    <el-checkbox label="拍照" />
                    <el-checkbox label="反馈记录" />
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="下载反馈数据" prop="demand">
                  <el-upload
                    ref="upload"
                    class="custom-el-upload"
                    :file-list="fileList"
                    :auto-upload="false"
                    action="#"
                    accept=".csv"
                    disabled
                  >
                    <el-button
                      type="primary"
                      :disabled="true"
                    >上传文件</el-button>
                    <div slot="tip">请上传csv文件，大小在60M以内</div>
                  </el-upload>
                  <!-- <el-button class="template" icon="el-icon-download" type='text' @click.stop="handleCsvDownload(2)">反馈数据.csv</el-button> -->
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="fillInformation">
            <p class="common-title">选择客户</p>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="客户类型" prop="custType">
                  <el-select
                    v-model="pushform.custType"
                    disabled
                    placeholder="请选择客户类型"
                  >
                    <el-option
                      v-for="(item, index) in custTypeList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="走访类型" prop="visitType">
                  <el-radio-group v-model="pushform.visitType" disabled>
                    <el-radio label="企业走访">企业走访</el-radio>
                    <el-radio label="商户走访">商户走访</el-radio>
                    <el-radio label="个人走访">个人走访</el-radio>
                    <el-radio label="收单商户走访">收单商户走访</el-radio>
                    <el-radio label="域外商会走访">域外商会走访</el-radio>
                    <el-radio label="催收走访">催收走访</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item
                  label="选择客户"
                  prop="groupId"
                  class="item-group"
                >
                  <el-select
                    v-model="pushform.groupId"
                    disabled
                    placeholder="请选择分群"
                    :multiple="true"
                  >
                    <!-- <el-option label="分群" value="0"></el-option> -->
                    <el-option
                      v-for="(item, index) in groupIdList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <!-- <div class="createBtn">
                  <el-button type='primary' @click="goToCreate">去创建</el-button>
                  <p>没有合适的客群?</p>
                </div> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="反馈模板" prop="">
                  <el-input v-model="pushform.relatedModelName" disabled />
                </el-form-item> </el-col></el-row>
          </div>
          <div class="fillInformation">
            <p class="common-title">分配规则</p>
            <el-row
              v-if="
                this.shyh == '总行' ||
                  this.isPublic ||
                  this.isPrivate ||
                  this.isHeadOps
              "
              class="formItem"
            >
              <el-col :span="17" :offset="3">
                <el-form-item label="执行人" prop="executer">
                  <el-radio-group v-model="pushform.executer" disabled>
                    <el-radio label="0">机构</el-radio>
                    <el-radio label="1">个人</el-radio>
                    <el-radio label="2">混合分配</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="pushform.isCooperate === true" class="formItem">
              <el-col :span="17" :offset="3">
                <el-form-item label="执行机构" prop="cooperateDeptId">
                  <treeselect
                    ref="orgTree"
                    v-model="pushform.cooperateDeptId"
                    :options="belongDeptOptions"
                    placeholder="请选择"
                    no-options-text="暂无数据"
                    no-results-text="暂无数据"
                    :flat="true"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-else class="formItem">
              <el-col :span="24" :offset="3">
                <!-- <div v-for="(rule,index) in configRules" :key="index">
                <div class="ruleBox">
                  <custom-rule :key="rule.key" :ruleTitle="rule.ruleTitle" :defaultListData="rule.defaultListData"
                    :deptOptions="deptOptions" :ruleArr="ruleArr" :ruleId="ruleId" :ruleName="rule.ruleName"
                    :custType="pushform.custType" :ruleIndex="index"
                    :myDisabled="true" />
                </div>
              </div> -->
                <!-- <el-button class="add-btn" type="primary" icon="el-icon-plus"  @click="addNewRules" v-if="pushform.custType">添加新的分配规则</el-button> -->
                <p class="common-title">分配规则</p>
                <div v-for="(item, index) in distributeCont" :key="index">
                  <div>
                    <span>第{{ index + 1 }}优先级：</span>
                    <span>{{ item }}</span>
                  </div>
                </div>
                <div class="rule-item-con">
                  <div v-if="distributeCont2" class="rule-org">
                    <div>归属机构：</div>
                    <div>{{ distributeCont2 }}</div>
                  </div>
                  <div v-if="distributeCont3" class="rule-org">
                    <div>客户经理：</div>
                    <div>{{ distributeCont3 }}</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <!-- <div class="dialog-footer">
            <el-button @click="showTaskDetail=!showTaskDetail">取 消</el-button>
            <el-button type="primary" disabled>确 定</el-button>
        </div> -->
          </div>
        </el-form>
      </div>
    </el-drawer>
    <!-- 去分配 -->
    <el-drawer
      title=""
      :visible.sync="pushOpen"
      size="40%"
      append-to-body
      :wrapper-closable="false"
      class="pushDialog"
      :with-header="false"
    >
      <div class="main">
        <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 label="中" value="中" />
                  <el-option label="低" value="低" />
                </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 label="可选认领" value="1" />
                </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-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-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">
            <el-col :span="24">
              <el-form-item label="走访类型" prop="visitType">
                <el-radio-group v-model="pushform.visitType" disabled>
                  <el-radio label="企业走访">企业走访</el-radio>
                  <el-radio label="商户走访">商户走访</el-radio>
                  <el-radio label="个人走访">个人走访</el-radio>
                  <el-radio label="收单商户走访">收单商户走访</el-radio>
                  <el-radio label="域外商会走访">域外商会走访</el-radio>
                  <el-radio label="催收走访">催收走访</el-radio>
                  <el-radio label="其他走访">其他走访</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="pushform.taskType == '0'" class="formItem">
            <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-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="formItem">
            <el-col v-if="pushform.taskType == '0'" :span="24">
              <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-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 label="签到签退" />
                  <el-checkbox label="拍照" />
                  <el-checkbox label="反馈记录" />
                </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 label="商户" value="1" />
                  <el-option label="企业" value="2" />
                </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"
                  disabled
                  placeholder="请选择分群"
                  :multiple="true"
                >
                  <el-option
                    v-for="(item, index) in groupIdList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <template v-for="rule in configRules">
            <custom-rule
              :key="rule.key"
              :rule-title="rule.ruleTitle"
              :default-list-data="rule.defaultListData"
              :dept-options="deptOptions"
              :rule-id="ruleId"
              :rule-name="rule.ruleName"
              :cust-type="pushform.custType"
              :special-type="true"
              @getRuleArr="getRuleArr"
            />
          </template>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="handleCancle">取 消</el-button>
          <el-button type="primary" @click="handleInfoSubmit">确 定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  taskList,
  getGroupList,
  getDetailByCampaign,
  getGroupInfoByGroupId,
  getCampaignModelList,
  getAreaIn,
  getAreaOut,
  campaignDelete
} from '@/api/task/taskList.js'
import { mapGetters } from 'vuex'
import { isHead, campaignDetail } from '@/api/system/findCustByGroupId.js'
import { downloadFiles } from '@/utils'
import { uid } from '@/utils'
import CustomRule from '../../grid/visit/checklist/custom-rule.vue'
import { cloneDeep, isEmpty } from 'lodash'
import {
  findchecknamelist,
  findchecklist,
  orgClaimList,
  allocateCustomerList
} from '@/api/system/checklist.js'
import { Message } from 'element-ui'
import { getDeptTree } from '@/api/grid/address/tree.js'

export default {
  components: { CustomRule },
  data() {
    return {
      areaOptions: [],
      steps: [],
      belongDeptOptions: [],
      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
      },
      selectedTab: '',
      selectedTask: '0',
      searchQuery: '',
      isActive1: true,
      isActive2: false,
      isActive3: false,
      Loading: false,
      columns: [
        { key: 6, label: '创建者', visible: true },
        { 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: 7, label: '认领时间', visible: true },
        { key: 8, label: '紧急程度', visible: true },
        { key: 9, label: '认领类型', visible: true },
        { key: 5, label: '客户数', visible: true }
      ],
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      shyh: '',
      showTaskDetail: false,
      pushrules: {
        campaignName: [{ required: true, message: '任务名称不能为空' }],
        campaignDegree: [{ required: true, message: '请选择紧急程度' }],
        claimType: [{ required: true, message: '请选择认领类型' }],
        taskDate: [{ required: true, message: '请选择任务时间' }],
        claimDate: [{ required: true, message: '请选择认领时间' }],
        taskType: [{ required: true, message: '请选择任务类型' }],
        campaignType: [{ required: true, message: '请选择活动方式' }],
        checkTarget: [{ required: true, message: '请选择考核目标' }],
        custType: [{ required: true, message: '请选择客户类型' }],
        visitType: [{ required: true, message: '请选择走访类型' }],
        groupId: [
          {
            required: true,
            message: '请选择客户',
            trigger: 'change',
            validator: (rule, value, callback) => {
              console.log(value)
              if (
                (isEmpty(value) || !value.length) &&
                this.groupIdList.length &&
                this.pushform.custType
              ) {
                callback(new Error('客户不能为空'))
                // callback();
              } else {
                callback()
              }
            }
          }
        ],
        executer: [{ required: true, message: '请选择执行人' }]
      },
      goalList: [
        { label: '自定义', value: '7' },
        { label: '存款营销', value: '存款营销' },
        { label: '贷款营销', value: '贷款营销' },
        { label: '产品营销', value: '产品营销' },
        { label: '贷前调查', value: '贷前调查' },
        { label: '贷后回访', value: '贷后回访' },
        { label: '逾期催收', value: '逾期催收' }
      ],
      campaignTypeList: [
        { label: '电话', value: '电话', disabled: true },
        { label: '短信', value: '短信', disabled: true },
        { label: '走访', value: '走访' }
      ],
      picktaskDateOption: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      pickclaimDateOption: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      pushform: {
        campaignName: '',
        campaignDegree: '',
        claimType: '',
        taskDate: [],
        claimDate: [],
        taskType: '',
        campaignType: '',
        checkTarget: '',
        taskIndex: '',
        reward: '',
        remark: '',
        feedBack: [],
        custType: '',
        groupId: '',
        executer: '',
        visitType: ''
      },
      configRules: [
        {
          ruleTitle: '分配规则',
          ruleName: 'personal',
          key: uid()
        }
      ],
      groupIdList: [],
      defaultGroupIdList: [],
      ruleArr: [],
      ruleId: '3',
      deptOptions: [],
      fileList: [],
      distributeCont: [],
      distributeCont2: '',
      distributeCont3: '',
      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: '请选择活动时间' }],
        taskDate: [{ required: true, message: '请选择任务时间' }],
        claimDate: [{ required: true, message: '请选择认领时间' }],
        taskType: [{ required: true, message: '请选择任务类型' }],
        visitType: [{ required: true, message: '请选择走访类型' }],
        checkTarget: [{ required: true, message: '请选择考核目标' }],
        claimdateRange: [{ required: true, message: '请选择认领时间' }],
        distributeType: [{ required: true, message: '请选择分配规则' }],
        custType: [{ required: true, message: '请选择客户类型' }],
        groupId: [
          {
            required: true,
            message: '请选择客户',
            trigger: 'change',
            validator: (rule, value, callback) => {
              console.log(value)
              if (
                (isEmpty(value) || !value.length) &&
                this.groupIdList.length
              ) {
                callback(new Error('客户不能为空'))
              } else {
                callback()
              }
            }
          }
        ],
        executer: [{ required: true, message: '请选择执行人' }]
      },
      pushOpen: false,
      ruleMap: { personal: [] }
    }
  },
  computed: {
    ...mapGetters(['roles']),
    deptId() {
      return this.$store.state.user.deptId
    },
    // 总行
    isHeadAdmin() {
      return this.roles.includes('headAdmin')
    },
    // 对公
    isPublic() {
      return this.roles.includes('headPublic')
    },
    // 对私
    isPrivate() {
      return this.roles.includes('headPrivate')
    },
    // 运管部
    isHeadOps() {
      return this.roles.includes('headOps')
    },
    // 支行
    isBranchAdmin() {
      return this.roles.includes('branchAdmin')
    },
    // 客户经理
    isCommonManager() {
      return this.roles.includes('commonManager')
    },
    // 网点主任
    isOutletAdmin() {
      return this.roles.includes('outletAdmin')
    },
    isSegTour() {
      return sessionStorage.getItem('isSegTour')
    }
  },
  created() {
    // getGroupInfoByGroupId({})
    this.isUserType()
    // 根据deptId动态设置默认tab：默认选中第一个tab
    const deptId = this.$store.state.user.deptId
    const deptIdStr = deptId ? String(deptId) : ''
    const defaultTab = deptIdStr.startsWith('875') ? '0' : '2'

    if (this.isPublic) {
      this.selectedTab = '2'
      this.custTypeList = [{ label: '企业', value: '2' }]
    } else if (this.isPrivate) {
      this.selectedTab = defaultTab
      this.custTypeList = [
        { label: '个人', value: '0' },
        { label: '商户', value: '1' }
      ]
    } else {
      this.selectedTab = defaultTab
      this.custTypeList = [
        { label: '个人', value: '0' },
        { label: '商户', value: '1' },
        { label: '企业', value: '2' }
      ]
    }
    if (this.isCommonManager || this.isOutletAdmin) {
      this.selectedTask = '1'
      this.isActive2 = true
    }
    const { selectedTab, selectedTask } = this.$route.query
    if (selectedTab) {
      this.selectedTab = selectedTab
      this.selectedTask = selectedTask
      this.isActive1 = selectedTask == '0'
      this.isActive2 = selectedTask == '1'
      this.isActive3 = selectedTask == '2'
      for (const key in this.$route.query) {
        delete this.$route.query[key]
      }
    }
    if (this.isHeadAdmin || this.isPublic || this.isPrivate || this.isHeadOps) {
      this.steps = [
        {
          target: '#myCreatTask',
          content:
            '<div style="font-size:20px;line-height:25px">我创建的任务</div><br><span>我创建的任务</span>',
          overlay: true,
          params: {
            placement: 'right',
            highlight: true,
            mask: true,
            enableScrolling: false
          }
        },
        {
          target: '#otherTask',
          content:
            '<div style="font-size:20px;line-height:25px">其他的任务</div><br><span>由支行创建下发的任务，但是总行可见</span>',
          overlay: true,
          params: {
            placement: 'bottom',
            highlight: true,
            mask: true
          }
        },
        {
          target: '.el-table__header tr th:nth-child(2)',
          content:
            '<div style="font-size:20px;line-height:25px">点击任务名称</div><br><span></span>',
          overlay: true,
          params: {
            placement: 'right',
            highlight: true,
            mask: true
          }
        },
        {
          target: '#taskDetailId',
          content:
            '<div style="font-size:20px;line-height:25px">查看该任务配置信息</div><br><span></span>',
          overlay: true,
          params: {
            placement: 'left',
            highlight: true,
            mask: true
          },
          before: () => {
            this.showTaskDetail = true
          }
        },
        {
          target: '.el-table__header tr th:nth-child(12)',
          content:
            '<div style="font-size:20px;line-height:25px">点击查看</div><br><span></span>',
          overlay: true,
          params: {
            placement: 'top',
            highlight: true,
            mask: true
          },
          before: () => {
            this.showTaskDetail = false
          }
        },
        {
          target: '.el-table__header tr th:nth-child(12)',
          content: '',
          overlay: true,
          params: {
            placement: 'auto',
            highlight: true,
            mask: true
          },
          before: () => {
            return this.$router
              .push({
                path: '/taskManage/taskDtails',
                query: {
                  campaignId:
                    this.tableData.length > 0
                      ? this.tableData[0].campaignId
                      : '',
                  custType: this.selectedTab,
                  type: this.selectedTask
                }
              })
              .then(() => {
                return new Promise((resolve) => {
                  const checkElement = () => {}
                  checkElement()
                })
              })
          }
        }
      ]
    } else if (this.isBranchAdmin) {
      this.steps = [
        {
          target: '#myCreatTask',
          content:
            '<div style="font-size:20px;line-height:25px">我创建的任务</div><br><span>我创建的任务</span>',
          overlay: true,
          params: {
            placement: 'right',
            highlight: true,
            mask: true,
            enableScrolling: false
          }
        },
        {
          target: '#tsCreatTask',
          content:
            '<div style="font-size:20px;line-height:25px">推送给我的任务</div><br><span>由总行创建下发本支行，需要支行二次分配的任务</span>',
          overlay: true,
          params: {
            placement: 'bottom',
            highlight: true,
            mask: true,
            enableScrolling: false
          }
        },
        {
          target: '#otherTask',
          content:
            '<div style="font-size:20px;line-height:25px">其他的任务</div><br><span>由总行创建直接下发本支行内部人员的任务，支行可见</span>',
          overlay: true,
          params: {
            placement: 'bottom',
            highlight: true,
            mask: true
          }
        },
        {
          target: '.el-table__header tr th:nth-child(2)',
          content:
            '<div style="font-size:20px;line-height:25px">点击任务名称</div><br><span></span>',
          overlay: true,
          params: {
            placement: 'right',
            highlight: true,
            mask: true
          }
        },
        {
          target: '#taskDetailId',
          content:
            '<div style="font-size:20px;line-height:25px">查看该任务配置信息</div><br><span></span>',
          overlay: true,
          params: {
            placement: 'left',
            highlight: true,
            mask: true
          },
          before: () => {
            this.showTaskDetail = true
          }
        },
        {
          target: '.el-table__header tr th:nth-child(12)',
          content:
            '<div style="font-size:20px;line-height:25px">点击查看</div><br><span></span>',
          overlay: true,
          params: {
            placement: 'top',
            highlight: true,
            mask: true
          },
          before: () => {
            this.showTaskDetail = false
          }
        },
        {
          target: '.el-table__header tr th:nth-child(12)',
          content: '',
          overlay: true,
          params: {
            placement: 'auto',
            highlight: true,
            mask: true
          },
          before: () => {
            return this.$router
              .push({
                path: '/taskManage/taskDtails',
                query: {
                  campaignId:
                    this.tableData.length > 0
                      ? this.tableData[0].campaignId
                      : '',
                  custType: this.selectedTab,
                  type: this.selectedTask
                }
              })
              .then(() => {
                return new Promise((resolve) => {
                  const checkElement = () => {}
                  checkElement()
                })
              })
          }
        }
      ]
    }
    this.init()
    // this.initGroupList()
    this.getDeptTreeSelect()
  },
  mounted() {
    this.initAreaOptions()
  },
  methods: {
    startTour() {
      this.$tours['taskListTour'].start()
    },
    async initAreaOptions() {
      const res1 = await getAreaIn()
      const res2 = await getAreaOut()
      this.areaOptions = [
        { name: '域内', code: 'in', children: this.markTree(res1.data) || [] },
        { name: '域外', code: 'out', children: this.markTree(res2.data) || [] }
      ]
    },
    markTree(treeData) {
      const processNode = (node) => {
        const hasChildren =
          Array.isArray(node.children) && node.children.length > 0

        if (!hasChildren) {
          node.leaf = true
          if (node.children && node.children.length === 0) {
            delete node.children
          }
        } else {
          node.children.forEach((child) => processNode(child))
        }
      }

      if (Array.isArray(treeData)) {
        treeData.forEach((node) => processNode(node))
      }

      return treeData
    },
    handleCancle() {
      this.pushOpen = false
    },
    getRuleArr(obj, index, managerOptions) {
      console.log(obj)
      this.ruleMap[obj.ruleName] = obj.arr
      this.managerOptions = managerOptions
    },
    getUserDeptNames(arr) {
      return arr.flatMap((item) => [
        item,
        ...this.getUserDeptNames(item.children || [])
      ])
    },
    handleInfoSubmit() {
      this.$refs.pushform.validate((valid) => {
        if (valid) {
          const params = {
            campaignId: this.campaignId
            // groupId: this.pushform.groupId.join(','),
          }
          // 优化分配规则代码
          let newArr = []
          if (this.pushform.custType == '0') {
            newArr = this.ruleMap.personal
          } else if (this.pushform.custType == '1') {
            newArr = this.ruleMap.merchant
          } else if (this.pushform.custType == '2') {
            newArr = this.ruleMap.company
          }

          // console.log(newArr);
          const distributeCont = newArr.map((item) => {
            return item.label
          })
          let distributeCont2 = []
          let distributeCont3 = []
          // console.log(this.deptOptions,newArr[newArr.length-1])
          const newDeptOptions = this.getUserDeptNames(this.deptOptions)
          // console.log(newDeptOptions)
          if (newArr[newArr.length - 1].ruleKey == '3') {
            // 随机分配
            distributeCont2 = newArr[newArr.length - 1].userDeptList.map(
              (i) => {
                return newDeptOptions.map((item) => {
                  if (item.id == i) {
                    return item.label
                  }
                  return 'false'
                })
              }
            )
            distributeCont3 = newArr[newArr.length - 1].userName.map((i) => {
              return this.managerOptions.map((item) => {
                if (item.userId == i) {
                  return `${item.deptName}-${item.userName}-${item.nickName}`
                }
                return 'false'
              })
            })
            // console.log(distributeCont2,222)
            distributeCont2 = []
              .concat(...distributeCont2)
              .filter((item) => item != 'false')
            distributeCont3 = []
              .concat(...distributeCont3)
              .filter((item) => item != 'false')
          }
          params.distributeCont = distributeCont.join(',')
          params.distributeCont2 = distributeCont2.join(',')
          params.distributeCont3 = distributeCont3.join(',')
          // console.log(distributeCont2,distributeCont3)
          const arr = newArr.map((item) => {
            return item.ruleKey
          })
          // console.log(arr,'arr')
          const arr1 = arr.map((item) => {
            if (item.includes('+') || item.includes('--')) {
              return item.substring(0, 2)
            } else {
              return item
            }
          })
          // 特色网格组装
          const arrTswg = arr.filter((item) => item.includes('+'))
          const layerIdList = arrTswg.map((item) => {
            const itemList = item.split('+')
            return itemList.pop()
          })
          // 虚拟网格组装
          const arrXnwg = arr.filter((item) => item.includes('--'))
          const virtualGridIdsList = arrXnwg.map((item) => {
            const itemList = item.split('--')
            return itemList.pop()
          })
          params.distributeType = arr1.join(',')
          params.layerIds = layerIdList
          params.virtualGridIds = virtualGridIdsList
          const perArr = newArr.filter((item) => 'userName' in item)
          if (perArr && perArr.length > 0) {
            const perList = perArr[0].userName
            params.userIds = perList
          }
          console.log(params, 'params')
          // return;
          allocateCustomerList(params).then((res) => {
            if (res.code == 200) {
              this.pushOpen = false
              Message.success('支行管理员二次分配成功!')
              this.init()
            }
          })
        } else {
          return false
        }
      })
      console.log(this.pushform.checkTarget)
    },
    // 认领
    handleorgClaim(campaignId) {
      orgClaimList({ campaignId }).then((res) => {
        if (res.code == 200) {
          Message.success('认领成功!')
          this.init()
        }
      })
    },
    // 分配
    handlePushGroupCustomer(row) {
      this.pushform.groupName = row.groupName
      this.campaignId = row.campaignId
      getDetailByCampaign(row.campaignId).then((res) => {
        if (res.code == 200) {
          const { data } = res
          const newGroup = []
          this.groupIdList =
            (data?.groups &&
              data.groups.map((item) => ({
                label: item.groupName,
                value: item.groupId
              }))) ||
            []
          this.pushOpen = true
          this.pushform.campaignName = data.campaignName
          this.pushform.campaignDegree = data.campaignDegree
          this.pushform.campaignType = data.campaignType
          this.pushform.claimType = data.claimType
          this.pushform.taskDate = [data.startTime || '', data.endTime || '']
          this.pushform.claimDate = [
            data.claimStartTime || '',
            data.claimEndTime || ''
          ]
          this.pushform.taskType = data.taskType
          this.pushform.checkTarget = data.checkTarget
          this.pushform.taskIndex = data.taskIndex
          this.pushform.reward = data.reward
          this.pushform.remark = data.remark
          this.pushform.feedBack = data.feedBack ? data.feedBack : []
          this.pushform.custType = data.custType
          this.pushform.visitType = data.visitType
          this.pushform.relatedModelName = data.relatedModelName
          this.pushform.groupId = this.groupIdList.map((item) => item.value)
          this.handleGroupType()
        }
      })
      // }
    },
    goListStatistics(row) {
      this.$router.push({
        path: '/taskManage/listStatistics',
        query: {
          campaignName: row.campaignName,
          selectedTab: this.selectedTab
        }
      })
    },
    getDeptTreeSelect() {
      getDeptTree().then((response) => {
        this.deptOptions = response.data
        this.belongDeptOptions = response.data?.[0]?.children || []
      })
    },
    handleClaimDate(val) {
      const rlStartDate = val ? Date.parse(new Date(val[0])) : ''
      const rlEndDate = val ? Date.parse(new Date(val[1])) : ''
      const taskStartDate = this.pushform.taskDate
        ? Date.parse(new Date(this.pushform.taskDate[0]))
        : ''
      const taskEndDate = this.pushform.taskDate
        ? Date.parse(new Date(this.pushform.taskDate[1]))
        : ''

      if (rlStartDate < taskStartDate) {
        Message.warning('认领开始时间需大于等于任务开始时间')
        this.pushform.claimDate = []
      }
      if (rlEndDate > taskEndDate) {
        Message.warning('认领结束时间需小于等于任务结束时间')
        this.pushform.claimDate = []
      }
      console.log(this.pushform.taskDate, 'pushform.taskDate')
    },
    initGroupList() {
      const params = {
        groupType: '0'
      }
      // if (this.isPublic) {
      //   params.type = '0'
      // } else if (this.isPrivate) {
      //   params.type = '1'
      // }
      getGroupList(params).then((res) => {
        // console.log(res)
        this.defaultGroupIdList = res.map((item) => {
          return {
            label: item.groupName,
            value: item.groupId,
            custType: item.custType
          }
        })
        this.groupIdList = cloneDeep(this.defaultGroupIdList)
      })
    },
    isUserType() {
      isHead().then((res) => {
        console.log(Object.keys(res)[0])
        if (Object.keys(res)[0].startsWith('h')) {
          this.shyh = '总行'
        } else if (Object.keys(res)[0].startsWith('b')) {
          this.shyh = '支行'
        } else if (Object.keys(res)[0].startsWith('o')) {
          this.shyh = '网点'
        }
      })
    },
    init() {
      this.Loading = true
      const params = {
        campaignName: this.searchQuery,
        custType: this.selectedTab,
        type: this.selectedTask,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderByColumn: 'createTime', // 排序字段
        isAsc: 'descending' // 倒序
      }
      taskList(params).then((res) => {
        if (res.code == '200') {
          this.tableData = res.rows
          this.total = res.total
          this.Loading = false
          if (this.isSegTour == '1') {
            setTimeout(() => {
              this.startTour()
            }, 1000)
          }
        }
      })
    },
    handleChange(val) {
      this.pageSize = 10
      this.pageNum = 1
      this.init()
    },
    handleMyTask() {
      this.isActive1 = true
      this.isActive2 = false
      this.isActive3 = false
      this.selectedTask = '0'
      this.pageSize = 10
      this.pageNum = 1
      this.init()
    },
    handleTsTask() {
      this.isActive1 = false
      this.isActive2 = true
      this.isActive3 = false
      this.selectedTask = '1'
      this.pageSize = 10
      this.pageNum = 1
      this.init()
    },
    handleQtTask() {
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = true
      this.selectedTask = '2'
      this.pageSize = 10
      this.pageNum = 1
      this.init()
    },
    handleRefersh() {
      this.searchQuery = ''
      this.init()
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.init()
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage
      this.init()
    },
    handleSearch() {
      this.init()
    },
    handleAddTask() {
      this.$router.push({ path: '/taskManage/taskCreation' })
    },
    handleView(row) {
      const params = {
        campaignId: row.campaignId,
        custType: this.selectedTab,
        type: this.selectedTask,
        isCooperate: row.isCooperate || 'false',
        executer: row.executer
      }
      if (this.selectedTask == '1') {
        params.userManagerId =
          row.orgClaimStatus == '0'
            ? 666
            : row.orgClaimStatus == '1' && row.orgDistributeStatus == '0'
              ? 777
              : row.orgClaimStatus == '1' && row.orgDistributeStatus == '1'
                ? 888
                : row.custClaimStatus != null
                  ? 999
                  : null
        // 判断当前时间是否在认领时间内
        const disabledDate =
          new Date() > new Date(row.claimEndTime) ||
          new Date() < new Date(row.claimStartTime)
        params.disabledDate = disabledDate
        // 判断该任务没有被认领、分配
        const notClaim =
          row.orgClaimStatus != '1' || row.orgDistributeStatus != '1'
        params.notClaim = notClaim
      }
      this.$router.push({
        path: '/taskManage/taskDtails',
        query: {
          ...params,
          selectedTab: this.selectedTab,
          selectedTask: this.selectedTask,
          backUrl: '/taskManage/taskList'
        }
      })
    },
    goToShowTask(row) {
      getDetailByCampaign(row.campaignId).then((res) => {
        if (res.code == 200) {
          const { data } = res
          const newGroup = []
          this.groupIdList =
            (res?.data?.groups &&
              res.data.groups.map((item) => ({
                label: item.groupName,
                value: item.groupId
              }))) ||
            []
          this.showTaskDetail = true
          this.pushform.campaignName = data.campaignName
          this.pushform.campaignDegree = data.campaignDegree
          this.pushform.claimType = data.claimType
          this.pushform.taskDate = [data.startTime || '', data.endTime || '']
          this.pushform.claimDate = [
            data.claimStartTime || '',
            data.claimEndTime || ''
          ]
          this.pushform.taskType = data.taskType
          this.pushform.campaignType = data.campaignType
          this.pushform.checkTarget = data.checkTarget
          this.pushform.taskIndex = data.taskIndex
          this.pushform.reward = data.reward
          this.pushform.feedBack = data.feedBack?.split(',')
          this.pushform.custType = data.custType
          this.pushform.groupId = this.groupIdList.map((item) => item.value)
          this.pushform.executer = data.executer
          this.pushform.visitType = data.visitType
          this.pushform.relatedModelName = data.relatedModelName

          this.pushform.isCooperate = data.isCooperate || false
          this.pushform.cooperateDeptId = data.cooperateDeptId
          if (data.isCooperate !== true) {
            this.distributeCont = data.distributeCont.split(',')
            this.distributeCont2 = data.distributeCont2
            this.distributeCont3 = data.distributeCont3
          }
        }
      })
    },
    handleCsvDownload() {
      // let resultName;
      // if (type == 0) {
      //   // this.custType='0'
      //   resultName = `个人模板_${new Date().getTime()}.xlsx`
      // }
      // else if (type == 2) {
      //   // this.custType='2'
      //   resultName = `企业模板_${new Date().getTime()}.xlsx`
      // }
      // else {
      //   // this.custType='1'
      //   resultName = `商户模板_${new Date().getTime()}.xlsx`
      // }
      // downloadFile().then(res=>{
      //   downloadFiles(res, resultName)
      // })
    },
    // 切换客户类型
    handleGroupType() {
      // this.groupIdList = this.defaultGroupIdList.filter(item => item.custType == custType);
      // this.pushform.groupId = '';
      this.configRules = []
      const ruleName =
        this.pushform.custType == '0'
          ? 'personal'
          : this.pushform.custType == '1'
            ? 'merchant'
            : this.pushform.custType == '2'
              ? 'company'
              : ''
      this.configRules.push({
        ruleTitle: '分配规则',
        ruleName,
        key: uid()
      })
      this.ruleMap[ruleName] = []
    },
    goDeleteFn(row){
      this.$modal.confirm('是否确认删除？').then(()=>{
        return campaignDelete({campaignId:row.campaignId})
      }).then(() => {
        this.init()
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    }
  }
}
</script>
<style lang="scss" scoped>
.customer-wrap {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px 16px 0 0;

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

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

    .el-radio-button {
      flex: 1;

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

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

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

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

      &.is-active {
        &::before,
        &::after {
          content: none;
        }
      }
    }
  }
}

.taskTop {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.taskTop_left {
  display: flex;
}

.taskTop_left_item {
  width: 150px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}

.el-icon-arrow-down {
  margin-left: 15px;
  font-size: 16px;
  color: rgb(64, 149, 229);
}

.taskTop_right {
  display: flex;
}

.search {
  margin-right: 20px;
}

.active {
  border-bottom: 4px solid rgb(64, 149, 229);
}

.main_table {
  margin-top: 20px;
}

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

  .top-right-btn {
    margin-right: 24px;
    padding-bottom: 6px;
  }

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

::v-deep .el-pagination {
  margin-top: 15px;
}

.main {
  padding: 30px 30px 100px 30px;
  background-color: #fff;

  .main_top {
    display: flex;
    justify-content: space-between;
  }

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

  .fillInformation {
    margin-top: 20px;
  }

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

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

  .configRulesItem {
    display: flex;
    margin-bottom: 15px;
  }

  .yxjLabel {
    width: 20%;
  }

  .addIcon {
    font-size: 25px;
    line-height: 40px;
    margin-left: 10px;
  }

  .ruleIcon {
    width: 20%;
  }

  .kejlbox {
    display: flex;
    margin-top: 15px;
  }

  .kejlLabel {
    width: 20%;
    margin-right: 15px;
  }

  .item-group {
    position: relative;

    .createBtn {
      position: absolute;
      right: -130px;
      top: 0;

      p {
        color: #666;
        font-size: 12px;
      }
    }
  }

  ::v-deep .el-form-item.required {
  .el-form-item__label {
    &::before {
      content: "*";
      color: #ff4949;
      margin-right: 4px;
    }
  }
}

  .ruleBox {
    // border: 1px solid #ddd;
    position: relative;
    padding: 12px;

    .del-btn {
      position: absolute;
      right: 5px;
      top: 5px;
    }

    margin-bottom: 10px;
  }

  .formItem {
    .add-btn {
      margin-top: 5px;
    }
  }
}

// .custom-el-upload{
//   position: relative;
//   .template{
//     position: absolute;
//   }
// }
.common-title {
  position: relative;
  color: #222222;
  line-height: 16px;
  font-weight: 600;
  font-size: 16px;
  padding-left: 10px;
  margin: 0 20% 20px 0;

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

.rule-item-con {
  margin-left: 10px;

  // width: 74%;
  .rule-org {
    display: flex;

    div:first-child {
      width: 80px;
    }

    div:nth-child(2) {
      width: 61%;
    }
  }
}

.dialog-footer {
  margin-top: 70px;
  text-align: center;
}

.main-detail {
  // padding: 0 0;
  position: relative;
  display: flex;

  .collapse {
    position: fixed;
    right: 850px;
    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;
  }
}

::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: -180%;
  left: 60%;
  transform: rotate(-90deg);
}

::v-deep .v-step[data-popper-placement^="right"]::after {
  top: -20%;
  left: -85%;
}
</style>
<style>
@import "../../grid/tour.css";
</style>
