<template>
  <div class="home-container">
    <v-tour name="homeTour" :steps="steps" :options="tourOptions"></v-tour>
    <div class="page-vl">
      <div class="page-common-wrap page-vl-top" id="ywzbMain" >
        <p class="page-title page-title-position">业务指标</p>
        <div class="page-vl-main-wrap" v-show="showposition">
          <div v-for="item in businessArr1" :key="item.uid" class="page-vl-main">
            <p class="business-title">{{ item.itemNm }}</p>
            <div class="vt-main top-vt-main">
              <div class="top_num">
                <span>上月值</span>
                <span style="font-size: 14px;">{{ changeData(item.yiAmt) }}</span>
              </div>
              <div class="top_num">
                <span>当月值</span>
                <span style="font-size: 14px;">{{ changeData(item.curAmt) }}</span>
              </div>
              <div class="top_num">
                <span style="font-size: 14px;">较上月变动</span>
                <span v-if="String(item.inc).includes('-')" style=" font-size: 14px;color: #00B453">{{ changeData(item.inc)
                }}<i class="el-icon-caret-bottom"></i></span>
                <span v-else-if="item.inc == 0 || item.inc === '0'" style=" font-size: 14px;color: #409EFF">{{ changeData(item.inc) }}</span>
                <span v-else style=" font-size: 14px;color: #EF3F35">{{ changeData(item.inc) }}<i
                    class="el-icon-caret-top"></i></span>
              </div>
            </div>
          </div>
          <div v-for="item in businessArr" :key="item.uid" class="page-vl-main">
            <p class="business-title">{{ item.itemNm }}</p>
            <div class="vt-main top-vt-main">
              <div class="top_num">
                <span>上月值</span>
                <span style="font-size: 14px; cursor: pointer; color: #409EFF;" @click="goToCustManager(item.itemNm, 'last')">{{ item.yiAmt }}</span>
              </div>
              <div class="top_num">
                <span>当月值</span>
                <span style="font-size: 14px; cursor: pointer; color: #409EFF;" @click="goToCustManager(item.itemNm, 'current')">{{ item.inc }}</span>
              </div>
              <div class="top_num">
                <span style="font-size: 14px;">较上月变动</span>
                <span v-if="String(item.curAmt).includes('-')"
                      style="font-size: 14px; color: #00B453; cursor: pointer;"
                      @click="goToCustManager(item.itemNm, 'fall')">
                  {{ item.curAmt }}<i class="el-icon-caret-bottom"></i>
                </span>
                <span v-else-if="item.curAmt == 0 || item.curAmt === '0'"
                      style="font-size: 14px; color: #409EFF; cursor: pointer;"
                      @click="goToCustManager(item.itemNm, 'rise')">
                  {{ item.curAmt }}
                </span>
                <span v-else
                      style="font-size: 14px; color: #EF3F35; cursor: pointer;"
                      @click="goToCustManager(item.itemNm, 'rise')">
                  {{ item.curAmt }}<i class="el-icon-caret-top"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-common-wrap">
        <div class="dbbox">
          <el-radio-group class="header-radio" v-model="selectedTab" @input="getData">
            <el-radio-button label="3">待办清单</el-radio-button>
            <el-radio-button label="4">预警任务</el-radio-button>
            <el-radio-button label="5">二次走访提醒</el-radio-button>
            <el-radio-button label="6">走访资源提醒</el-radio-button>
            <el-radio-button label="7" v-if="!shouldHideFor875">营销任务</el-radio-button>
          </el-radio-group>
        </div>
        <el-table v-if="selectedTab==='3'" key="3" :data="tableData" :loading="loading" style="width: 100%;margin-top: 20px;">
          <el-table-column align="center" prop="nickName" label="柜员姓名" show-overflow-tooltip key="nickName" />
          <!-- <el-table-column align="center" prop="userName" label="柜员号" show-overflow-tooltip key="userName" /> -->
          <el-table-column align="center" prop="postName" label="岗位名称" show-overflow-tooltip key="postName" />
          <el-table-column align="center" prop="status" label="状态" show-overflow-tooltip key="status">
            <template slot-scope="scope">
              <span v-if="scope.row.status==='0'">未完成</span>
              <span v-else-if="scope.row.status==='1'">部分完成</span>
              <span v-else-if="scope.row.status==='2'">已完成</span>
              <span v-else>其他</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="workDetail" label="清单详情" show-overflow-tooltip key="workDetail" />
          <el-table-column align="center" prop="workType" label="重点工作类别" show-overflow-tooltip key="workType" />
          <el-table-column align="center" prop="frequencyType" label="频率类型" show-overflow-tooltip key="frequencyType">
          <template slot-scope="scope">
              <span v-if="scope.row.frequencyType==='0'">每日</span>
              <span v-else-if="scope.row.frequencyType==='1'">每周</span>
              <span v-else-if="scope.row.frequencyType==='2'">每月</span>
              <span v-else-if="scope.row.frequencyType==='3'">每季</span>
              <span v-else-if="scope.row.frequencyType==='4'">每年</span>
              <span v-else>其他</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="isOverdue" label="是否逾期" show-overflow-tooltip key="isOverdue">
          <template slot-scope="scope">
              <span v-if="scope.row.isOverdue===0">否</span>
              <span v-else>是</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="startTime" label="开始时间" show-overflow-tooltip key="startTime" />
          <el-table-column align="center" prop="endTime" label="结束时间" show-overflow-tooltip key="endTime" />
          <!-- <el-table-column align="center" prop="isread" label="是否已读" show-overflow-tooltip key="isread" /> -->
          <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip key="remark" />
        </el-table>
        <el-table v-if="selectedTab==='4'" key="4" :data="tableData" :loading="loading" style="width: 100%;margin-top: 20px;">
          <!-- <el-table-column align="center" prop="id" label="id" show-overflow-tooltip key="id" /> -->
          <el-table-column align="center" prop="custName" label="客户名" show-overflow-tooltip key="custName" />
          <el-table-column align="center" width="230" prop="custId" label="客户号" show-overflow-tooltip key="custId" />
          <el-table-column align="center" width="220" prop="custIsn" label="客户内码" show-overflow-tooltip key="custIsn" />
          <el-table-column align="center" prop="alterType" label="预警类型" show-overflow-tooltip key="alterType" />
          <el-table-column align="center" prop="alterDetail" label="预警信息" show-overflow-tooltip key="alterDetail" />
          <el-table-column align="center" prop="isread" label="是否已读" show-overflow-tooltip key="isread">
            <template slot-scope="scope">
              <span v-if="scope.row.isread===0">否</span>
              <span v-else>是</span>
            </template>  
          </el-table-column>
          <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip key="remark" />
        </el-table>
        <el-table v-if="selectedTab==='5'" key="5" :data="tableData" :loading="loading" style="width: 100%;margin-top: 20px;">
          <!-- <el-table-column align="center" prop="id" label="id" show-overflow-tooltip key="id" /> -->
          <el-table-column align="center" width="200" prop="custName" label="客户名" show-overflow-tooltip key="custName" />
          <el-table-column align="center" width="250" prop="custId" label="客户号" show-overflow-tooltip key="custId" />
          <!-- <el-table-column align="center" prop="custType" label="客户类型" show-overflow-tooltip key="custType" /> -->
          <el-table-column align="center" prop="fromNickName" label="柜员姓名" show-overflow-tooltip key="fromNickName" />
          <el-table-column align="center" prop="fromUserName" label="柜员号" show-overflow-tooltip key="fromUserName" />
          <!-- <el-table-column align="center" prop="createBy" label="创建者" show-overflow-tooltip key="createBy" />
          <el-table-column align="center" prop="createTime" label="创建时间" show-overflow-tooltip key="createTime" /> -->
          <el-table-column align="center" prop="isread" label="是否已读" show-overflow-tooltip key="isread" />
          <el-table-column align="center" prop="secondVisitTime" label="二次走访时间" show-overflow-tooltip key="secondVisitTime" />
          <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip key="remark" />
        </el-table>
        <el-table v-if="selectedTab==='6'" key="6" :data="tableData" :loading="loading" style="width: 100%;margin-top: 20px;">
          <!-- <el-table-column align="center" prop="id" label="id" show-overflow-tooltip key="id" /> -->
          <el-table-column align="center" prop="custName" width="200" label="客户名" show-overflow-tooltip key="custName" />
          <el-table-column align="center" prop="custId" width="250" label="客户号" show-overflow-tooltip key="custId" />
          <!-- <el-table-column align="center" prop="custType" label="客户类型" show-overflow-tooltip key="custType" /> -->
          <el-table-column align="center" prop="fromNickName" label="申请人姓名" show-overflow-tooltip key="fromNickName" />
          <el-table-column align="center" prop="fromUserName" label="申请人号" show-overflow-tooltip key="fromUserName" />
          <el-table-column align="center" prop="toNickName" label="被申请人姓名" show-overflow-tooltip key="toNickName" />
          <el-table-column align="center" prop="toUserName" label="被申请人号" show-overflow-tooltip key="toUserName" />
          <!-- <el-table-column align="center" prop="createBy" label="创建者" show-overflow-tooltip key="createBy" />
          <el-table-column align="center" prop="createTime" label="创建时间" show-overflow-tooltip key="createTime" /> -->
          <el-table-column align="center" prop="isread" label="是否已读" show-overflow-tooltip key="isread" />
          <!-- <el-table-column align="center" prop="secondVisitTime" label="二次走访时间" show-overflow-tooltip key="secondVisitTime" /> -->
          <el-table-column label="状态" prop="status" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.status | formatFilter('status',statusList) }}</span>
          </template>
        </el-table-column>
          <el-table-column align="center" prop="applyRemark" label="申请备注" show-overflow-tooltip key="applyRemark" />
          <el-table-column align="center" prop="approvalRemark" label="审批备注" show-overflow-tooltip key="approvalRemark" />
          <el-table-column label="操作" align="center" width="160">
            <template slot-scope="scope">
              <el-button v-if="scope.row.toUserName === userName" size="mini" type="text" icon="el-icon-edit" @click="editFn(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="selectedTab==='7' && !shouldHideFor875" key="7" :data="tableData" :loading="loading" style="width: 100%;margin-top: 20px;">
          <el-table-column label="营销任务" width="200" prop="marketTaskName" min-width="100" show-overflow-tooltip />
          <el-table-column label="客户姓名" prop="custName" min-width="100" show-overflow-tooltip />
          <el-table-column label="客户号" width="200" prop="custId" min-width="140" show-overflow-tooltip />
          <el-table-column label="客户类型" prop="custType" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.custType == '2'">企业</span>
              <span v-if="scope.row.custType == '1'">商户</span>
              <span v-if="scope.row.custType == '0'">个人</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="柜员号" prop="userName" min-width="100" show-overflow-tooltip /> -->
          <el-table-column label="柜员姓名" prop="nickName" min-width="100" show-overflow-tooltip />
          <el-table-column label="机构" prop="deptName" min-width="100" show-overflow-tooltip />
          <el-table-column label="完成状态" prop="status" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.status | formatFilter('status',marketstatusList) }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="导入状态" prop="importStatus" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.importStatus === '1'">成功</span>
              <span v-else>失败</span>
            </template>
          </el-table-column>
          <el-table-column label="失败原因" prop="failureReason" min-width="100" show-overflow-tooltip>
          </el-table-column> -->
          <el-table-column label="是否逾期" prop="isOverdue" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.isReed === '0'">否</span>
              <span v-else>是</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="isread" label="是否已读" show-overflow-tooltip key="isread">
            <template slot-scope="scope">
              <span v-if="scope.row.isread===0">否</span>
              <span v-else>是</span>
            </template>  
          </el-table-column>
          <el-table-column label="结束时间" width="200" prop="endTime" min-width="100" show-overflow-tooltip />
          <el-table-column label="备注" prop="remark" min-width="100" show-overflow-tooltip />
        </el-table>
        <el-pagination @current-change="handleAgentCurrentChange"
          class="warnPagination" :page-size="5"
          layout="->,total,prev,pager,next" :total="agentTotal" :current-page="agentPageNum"></el-pagination>
      </div>
    </div>
    <div class="page-vr">
      <div class="page-vr-top page-common-wrap" id="bjczMain">
        <p class="page-title-cnt page-title-position">
          <span class="page-title">便捷操作</span>
          <span class="more-btn" @click="handleSetting" v-if="!isSetting">设置<i class="el-icon-setting"></i></span>
          <span v-if="isSetting">
            <span class="more-btn cancle" @click="handleSetting">取消</span>
            <span class="more-btn" @click="handleSaveSetting">保存</span>
          </span>
        </p>
        <ul class="operate-cnt">
          <li v-for="(it, ind) in filteredOptArr" :key="ind" class="setLi" @mouseenter="onMouseOver(ind, true)"
            @mouseleave="onMouseOver(ind, false)">
            <div class="noSetting" v-if="it.setShow">
              <svg-icon :icon-class="getCurrentImg(ind)" :class="isSetting ? 'svg-icon-imgSetting' : 'svg-icon-img'"
                @click="handleGo(it.name)" />
              <span @click="handleGo(it.name)">{{ it.name }}</span>
            </div>
            <div class="setIcon_box" v-if="it.setShow">
              <i class="el-icon-close setIcon" v-if="isSetting" @click="handleClickSetShow(it, ind)"></i>
            </div>
            <div v-if="!it.setShow" class="set_inp">
              <!-- <i class="el-icon-close cancleIcon" @click="handleSetCancle(it)"></i> -->
              <el-select v-model="it.name" style="margin-top: 20px;">
                <el-option v-for="(item, index) in bjMenuList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </div>
          </li>
        </ul>
      </div>
      <div class="page-vr-middle page-common-wrap no-padding-cnt page-vr-top" id="yjxxMain" v-if="!shouldHideFor875">
        <p class="page-title page-btm">预警信息</p>
        <ul class="common-ul">
          <li v-for="(it, ind) in warnArr" :key="ind" style="cursor: pointer;" @click="handleWarn(it)" class="yjxxLi">
            <div>
              <i class="el-icon-message-solid yjxxLd"></i>
              <span>{{ it.infoName }}</span>
            </div>
            <span class="count-bold">{{ it.infoCount }}</span>
          </li>
        </ul>
      </div>
      <div class="page-vr-btm page-common-wrap no-padding-cnt page-vr-top" id="bbgxxxMain">
        <p class="page-title-cnt page-btm">
          <el-badge class="item">
            <span class="page-title">版本更新信息</span>
          </el-badge>
          <!-- <span class="more-btn">更多<i class="el-icon-arrow-right"></i></span> -->
        </p>
        <ul class="common-ul">
          <li v-for="(it, ind) in updateArr" :key="ind" class="notice_li" @click="handleNotice(it)">
            <div :title="it.noticeTitle" class="notice_title">{{ it.noticeTitle }}</div>
            <div :title="it.createTime" class="notice_title">{{ it.createTime }}</div>
          </li>
        </ul>
      </div>

      <div class="page-common-wrap url-box">
        <p class="page-title page-btm">外部系统</p>

        <ul class="common-ul">
          <li v-for="(it, ind) in externalUrlList" :key="ind" class="url_li" @click="handleClickUrl(it)">
            <div>{{ it.name }}</div>
          </li>
        </ul>
      </div>
    </div>

    <el-drawer title="预警信息" :visible.sync="warnDrawer" size="50%">
      <div class="warnDrawer_mian" id="yjDrawer">
        <h3>{{ warnName }}</h3>
        <el-table :data="warnData" style="width: 100%" v-if="deptId && (deptId+'').substring(0,3) == '932'" key="1">
          <el-table-column align="center" :prop="v" :label="v" show-overflow-tooltip v-for="(v,k) in warnDatakeys" :key="k"></el-table-column>
        </el-table>
        <el-table :data="warnData" style="width: 100%" v-else key="99">
          <el-table-column align="center" prop="custName" label="客户名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button @click="handleGoDetail(scope.row)" type="text">{{ scope.row.custName }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="custId" label="客户号" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="custIdsn" label="证件号" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button @click="handleGoDetail(scope.row)" type="text">{{ scope.row.custIdsn }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="loanContractNum" label="合同号" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="loanContractAmt" label="合同额度(元)" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="contact" label="联系方式" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="custType" label="客户类型" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.custType == '2'">企业</span>
              <span v-if="scope.row.custType == '1'">商户</span>
              <span v-if="scope.row.custType == '0'">个人</span>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="loanDueWarnValue" label="距离到期时间(天)" width="130px"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="warnPagination"
          :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="->,total,sizes,prev,pager,next" :total="total"
          :current-page="pageNum"></el-pagination>
      </div>
    </el-drawer>
    <el-drawer title="" :visible.sync="pushOpen" size="40%" append-to-body :wrapperClosable="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>
                  <el-option label="中" value="中"></el-option>
                  <el-option label="低" value="低"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="formItem">
            <el-col :span="24">
              <el-form-item label="认领类型" prop="claimType">
                <el-select v-model="pushform.claimType" placeholder="请选择认领类型" disabled>
                  <el-option label="强制认领" value="0"></el-option>
                  <el-option label="可选认领" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="formItem">
            <el-col :span="24">
              <el-form-item label="任务时间" prop="taskDate">
                <el-date-picker v-model="pushform.taskDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" value-format="yyyy-MM-dd" disabled>
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="formItem">
            <el-col :span="24">
              <el-form-item label="认领时间" prop="claimDate" style="flex: 1">
                <el-date-picker v-model="pushform.claimDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" value-format="yyyy-MM-dd" disabled>
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="formItem">
            <el-col :span="24">
              <el-form-item label="任务类型" prop="taskType">
                <el-radio-group v-model="pushform.taskType" disabled>
                  <el-radio label="0">营销任务</el-radio>
                  <el-radio label="1">事务任务</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="formItem">
            <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 class="formItem" v-if="pushform.taskType == '0'">
            <el-col :span="24">
              <el-form-item label="活动方式" prop="campaignType">
                <el-select v-model="pushform.campaignType" placeholder="请选活动方式" allow-create clearable filterable
                  disabled>
                  <el-option v-for="item in campaignTypeList" :key="item.value" :label="item.label"
                    :disabled="item.disabled" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="formItem">
            <el-col :span="24" v-if="pushform.taskType == '0'">
              <el-form-item label="考核目标" prop="checkTarget">
                <el-select v-model="pushform.checkTarget" placeholder="请选考核目标" allow-create clearable filterable disabled>
                  <el-option v-for="item in goalList" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="formItem">
            <el-col :span="24">
              <el-form-item label="任务指标" prop="taskIndex">
                <el-input v-model="pushform.taskIndex" placeholder="请输入任务指标,如贷款时点余额较上年末时点余额提示50%" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="formItem">
            <el-col :span="24">
              <el-form-item label="奖励说明" prop="reward">
                <el-input v-model="pushform.reward" placeholder="描述该任务/活动提出/奖励" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="formItem">
            <el-col :span="24">
              <el-form-item label="任务内容备注" prop="remark">
                <el-input v-model="pushform.remark" placeholder="描述该任务/活动活动内容等信息" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="formItem">
            <el-col :span="24">
              <el-form-item label="反馈要求" prop="feedBack">
                <el-checkbox-group v-model="pushform.feedBack" disabled>
                  <el-checkbox label="无"></el-checkbox>
                  <el-checkbox label="签到签退"></el-checkbox>
                  <el-checkbox label="拍照"></el-checkbox>
                  <el-checkbox label="反馈记录"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <p class="common-title">选择客户</p>
          <el-row class="formItem">
            <el-col :span="24">
              <el-form-item label="客户类型" prop="custType">
                <el-select v-model="pushform.custType" placeholder="请选择客户类型" disabled>
                  <el-option label="个人" value="0"></el-option>
                  <el-option label="商户" value="1"></el-option>
                  <el-option label="企业" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="formItem">
            <el-col :span="24">
              <el-form-item label="选择客户" prop="groupId">
                <el-select disabled v-model="pushform.groupId" placeholder="请选择分群" :multiple="true">
                  <el-option v-for="(item, index) in groupIdList" :key="index" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


          <template v-for="rule in configRules">
            <custom-rule :key="rule.key" :ruleTitle="rule.ruleTitle" :defaultListData="rule.defaultListData"
              :deptOptions="deptOptions" :ruleId="ruleId" :ruleName="rule.ruleName" :custType="pushform.custType"
              @getRuleArr="getRuleArr" :specialType="true" />
          </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>
    <el-dialog :visible.sync="dialogVisible" title="" width="700px" append-to-body>
      <div class="notice_content">
        <div class="titlelog_title">
          <span>公告标题:</span>
          <span>{{ titleForm.noticeTitle }}</span>
        </div>
        <div class="titlelog_content">
          <span class="before_title">公告类型：</span>
          <span v-if="titleForm.noticeType == '1'">通知</span>
          <span v-if="titleForm.noticeType == '2'">公告</span>
        </div>
        <div class="titlelog_content">
          <span class="before_title">创建者：</span>
          <span>{{ titleForm.createBy }}</span>
        </div>
        <div class="titlelog_content">
          <span class="before_title">创建时间：</span>
          <span>{{ parseTime(titleForm.createTime, '{y}-{m}-{d}') }}</span>
        </div>
        <div class="titlelog_content" style="display:flex">
          <span class="before_title">公告内容：</span>
          <span v-html="titleForm.noticeContent" style="width: 73%;"></span>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑"
      :visible.sync="visibleFlag"
      width="500px"
      append-to-body
      v-if="visibleFlag"
    >
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="dialogForm.status"
                placeholder="请选择状态"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="approvalRemark">
              <el-input
                v-model="dialogForm.approvalRemark"
                placeholder="请输入备注"
                clearable
                style="width:100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="dialogOkfn">确 定</el-button>
        <el-button @click="dialogCancelfn">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { indicatorArr, indicatorOtherArr } from '@/views/dashboard/constant-info'
import { quickList, warnList, loanWarnList, quickSelect, updateQuickSelect, headList, branchList, managerList, getReminder, getNotice, getNoticeCenter, noticeHasReady, warnRespList, workRecordList, workRecordAlterList, appointmentSecondVisitList, appointmentResourceAssistList, resourceAssistEdit, recordread } from '@/api/system/home.js'
import { marketTaskListMy, marketread } from '@/api/task/markettask.js'
import { Message } from 'element-ui'
import { getDeptTree } from '@/api/grid/address/tree.js'
import { mapGetters, mapState } from 'vuex'
import { orgClaimList, allocateCustomerList } from "@/api/system/checklist.js";
import { getDetailByCampaign } from '@/api/task/taskList.js'
import CustomRule from '../views/grid/visit/checklist/custom-rule.vue'
import { uid } from '@/utils'
import loanBg from '@/assets/imgs/loan_bg.png'
import painBg from '@/assets/imgs/pain_bg.png'
import { isFirstLogin } from "@/api/login";
import { cloneDeep, isEmpty, keys } from 'lodash'
import { getExternalUrl } from '@/api/system/home.js'
import { gridCmpmCustManagerResult } from '@/api/gridSearch/accountManageReport/index'
export default {
  name: 'Dashboard',
  components: { CustomRule },
  data() {
    return {
      statusList: [
        {
          label: "未审核",
          value: "0"
        },
        {
          label: "通过",
          value: "1"
        },
        {
          label: "拒绝",
          value: "2"
        }
      ],
      marketstatusList: [
        {
          label: "未完成",
          value: "0"
        },
        {
          label: "部分完成",
          value: "1"
        },
        {
          label: "已完成",
          value: "2"
        }
      ],
      steps: [
        // {
        //   target: '.home-container',
        //   content: '<div style="font-size:20px;line-height:25px">欢迎使用首页功能</div><br><span></span>',
        //   overlay: true,
        //   params: {
        //     placement: 'auto',
        //     highlight: true,
        //     mask: true,
        //   }
        // },
        {
          target: '#ywzbMain',
          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: '#bjczMain',
          content: '<div style="font-size:20px;line-height:25px">快捷菜单</div><br><span>点击可跳转对于的菜单页</span>',
          overlay: true,
          params: {
            placement: 'left',
            highlight: true,
            mask: true,
            enableScrolling: false
          },

        },
        {
          target: '#yjxxMain',
          content: '<div style="font-size:20px;line-height:25px">预警信息</div><br><span>定制化预警提示信息</span>',
          overlay: true,
          params: {
            placement: 'left',
            highlight: true,
            mask: true,
            enableScrolling: false
          },

        },
        {
          target: '#yjDrawer',
          content: '<div style="font-size:20px;line-height:25px">预警信息</div><br><span>可以查看详细预警信息，点击客户名可以跳转客户视图</span>',
          overlay: true,
          params: {
            placement: 'left',
            highlight: true,
            mask: true,
            enableScrolling: false
          },
          before: () => {
            this.handleWarn(this.warnArr[0])

          }
        },
        {
          target: '#bbgxxxMain',
          content: '<div style="font-size:20px;line-height:25px">版本更新信息</div><br><span>查看</span>',
          overlay: true,
          params: {
            placement: 'left',
            highlight: true,
            mask: true,
            enableScrolling: false
          },
          before: () => {
            this.warnDrawer = false

          }
        },
      ],
      tourOptions: {
        highlight: true,
        labels: {
          buttonSkip: '跳过',
          buttonNext: '下一步',
          buttonStop: '完成'
        },
        enabledButtons: {
          buttonSkip: true,
          buttonNext: true,
          buttonStop: true,
        },
        useKeyboardNavigation: true,
        startTime: 0,
        stopOnTargetNotFound: true,
        debug: false,
      },
      titleForm: {
        noticeTitle: '',
        noticeType: '',
        createBy: '',
        createTime: '',
        noticeContent: ''
      },
      externalUrlList: [],
      businessArr: [],
      businessArr1:[],
      indicatorArr,
      indicatorOtherArr,
      updateArr: [],
      optArr: [{ setShow: '', name: '', icon: '' }],
      iconList: [{ icon: 'jx_01' }, { icon: 'yw_02' }, { icon: 'wg_03' }, { icon: 'qd_04' },],
      warnArr: [],
      loanBg,
      painBg,
      hoverIndex: null,
      warnDrawer: false,
      warnName: '',
      warnData: [],
      total: 0,
      pageSize: 5,
      pageNum: 1,
      isSetting: false,
      bjMenuList: [],
      selectedTab: '3',
      agentMattersData: [],
      isFinish: false,
      agentPageSize: 5,
      agentPageNum: 1,
      agentTotal: 0,
      pushOpen: false,
      pushform: {
        campaignName: '',
        campaignDegree: '',
        claimType: '',
        taskDate: [],
        claimDate: [],
        taskType: '',
        campaignType: '',
        checkTarget: '',
        taskIndex: '',
        reward: '',
        remark: '',
        feedBack: [],
        custType: '',
        groupId: '',
        executer: '',
        visitType:''
      },
      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: "请选择执行人" }],
      },
      groupIdList: [],
      campaignTypeList: [
        { label: '电话', value: '电话', disabled: true },
        { label: '短信', value: '短信', disabled: true },
        { label: '走访', value: '走访' },
      ],
      goalList: [
        { label: '自定义', value: '7' },
        { label: '存款营销', value: '存款营销' },
        { label: '贷款营销', value: '贷款营销' },
        { label: '产品营销', value: '产品营销' },
        { label: '贷前调查', value: '贷前调查' },
        { label: '贷后回访', value: '贷后回访' },
        { label: '逾期催收', value: '逾期催收' },
      ],
      configRules: [{
        ruleTitle: '分配规则',
        ruleName: 'personal',
        key: uid()
      }],
      deptOptions: [],
      ruleId: '3',
      ruleMap: { personal: [] },
      ruleArr: [],
      dialogVisible: false,
      noticeData: [],
      noticeCenterList: [],
      notReadCount: 0,
      warnDatakeys:[],
      tableData: [],
      loading: false,
      dialogForm: {
        status: '',
        approvalRemark: ''
      },
      visibleFlag: false,
      dialogFormRules: {
        status: [{ required: true, message: "不能为空", trigger: "blur" }]
      }
    }
  },
  computed: {
    ...mapGetters(['sidebarRouters', 'sidebar', 'ddRouters', 'roles', 'userName', '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')
    },
    showposition() {
        return this.userName.slice(0, 3) === '875'
    },
    // headId为875时隐藏预警信息和营销任务
    shouldHideFor875() {
      return this.userName && (this.userName + '').substring(0, 3) === '875'
    },
    // headId为875时，便捷操作只显示快速入门
    filteredOptArr() {
      return this.optArr
    }
  },
  watch: {
    selectedTab(newVal, oldVal) {
      // 切换tab时重置分页为第1页
      if (newVal !== oldVal) {
        this.pageNum = 1
        this.agentPageNum = 1
      }
    }
  },
  mounted() {
    this.getDeptTreeSelect()
    this.initGetReminder()
    this.initQuickList()
    this.initWarnList()
    this.initQuickSelect()
    this.initGetNotice()
    // this.initBranchList()
    this.initIsFirstLogin()
    this.getUrl()
    this.getData()
    // this.getCenterList();
  },
  filters: {
    formatFilter(v, type, list) {
      if (type == "status") {
        let arr = _.filter(list, { value: v });
        return arr.length > 0 ? arr[0].label : '';
      }
    }
  },
  methods: {
    /** 跳转到管户报表页面 */
    goToCustManager(itemNm, statusType) {
      // 从 itemNm 中提取星级，如 "3星客户" → "3星"，"基础客户" → "基础"
      // 使用正则匹配以"星"或"基础"或"长尾"开头的内容
      let custLevel = itemNm.replace('客户', '').trim()
      // 如果没有"客户"后缀，直接使用整个名称
      if (custLevel === itemNm) {
        custLevel = itemNm
      }
      this.$router.push({
        path: '/gridSearch/accountManageReport',
        query: {
          custLevel: custLevel,
          statusType: statusType
        }
      })
    },
    getData() {
      this.loading = true
      if (this.selectedTab === '3') {
        workRecordList({ frequencyType: 0, validTime: new Date().toISOString().replace('T', ' ').slice(0, 19),pageNum: this.pageNum, pageSize: this.pageSize }).then(res => {
          this.tableData = res.rows.map(item => {
            return {
              ...item,
              isread: item.readTime ? '是' : '否'
            }
          })
          this.agentTotal = res.total
          this.loading = false
        })
      } else if (this.selectedTab === '4') {
        workRecordAlterList({pageNum: this.pageNum, pageSize: this.pageSize}).then(res => {
          this.tableData = res.rows.map(item => {
            return {
              ...item,
              isread: item.readTime ? '是' : '否'
            }
          })
          this.agentTotal = res.total
          this.loading = false
        })
      } else if (this.selectedTab === '5') {
        appointmentSecondVisitList({pageNum: this.pageNum, pageSize: this.pageSize}).then(res => {
          this.tableData = res.rows.map(item => {
            return {
              ...item,
              isread: item.readTime ? '是' : '否'
            }
          })
          this.agentTotal = res.total
          this.loading = false
        })
      } else if (this.selectedTab === '6') {
        appointmentResourceAssistList({pageNum: this.pageNum, pageSize: this.pageSize}).then(res => {
          this.tableData = res.rows.map(item => {
            return {
              ...item,
              isread: item.readTime ? '是' : '否'
            }
          })
          this.agentTotal = res.total
          this.loading = false
        })
      } else if (this.selectedTab === '7') {
        marketTaskListMy({pageNum: this.pageNum, pageSize: this.pageSize}).then(res => {
          this.tableData = res.rows.map(item => {
            return {
              ...item,
              isread: item.readTime ? '是' : '否'
            }
          })
          this.agentTotal = res.total
          this.loading = false
        })
      }
    },
    getUrl() {
      getExternalUrl().then((res) => {
        if (res.code === 200) {
          this.externalUrlList = res.data?.map((item) => {
            if(item.flag === '1') {
              return {
                name: item.name,
                url: item.url+`?org=${this.deptId}&userid=${this.userName}`
              }
            } else {
              return {
                name: item.name,
                url: item.url
              }
            }
          }) || []
          console.log(this.externalUrlList)
        }
      })
    },
    handleClickUrl(item) {
      window.open(item.url, '_blank')
    },
    initIsFirstLogin() {
      const params = {
        username: this.userName
      }
      isFirstLogin(params).then(res => {
        if (res.code == 200) {
          // 用户首次登陆
          // 用户已有登录记录
          if (res.msg == '用户首次登陆') {
            setTimeout(() => {
              this.startTour()
            }, 1000)
          }
        }
      })
    },
    startTour() {
      this.$tours['homeTour'].start()
    },
    // 消息已读
    // handleHasRead(uuid){
    //   noticeHasReady({uuid}).then(res=>{
    //     if(res.code == 200){
    //       Message.success('已读成功');
    //       this.getCenterList();
    //     }
    //   })
    // },

    // 消息中心列表
    // getCenterList(){
    //   getNoticeCenter({}).then(res=>{
    //     if(res.code == 200){
    //       this.noticeCenterList = res.data;
    //       this.notReadList = res.data.filter(item=>!item.readStatus)
    //       this.notReadCount = this.notReadList.length;
    //     }
    //   })
    // },

    initGetNotice() {
      getNotice().then(res => {
        if (res.code == 200) {
          this.updateArr = res.rows
        }
      })
    },
    initGetReminder() {
      gridCmpmCustManagerResult().then(res => {
          this.businessArr1 = [
            {
              itemNm:'总资产余额',
              curAmt:res.custAumBal,
              yiAmt:res.custAumBalLm,
              inc:res.aumBalCompLm
            },
            {
              itemNm:'总资产余额月日均',
              curAmt:res.custAumMonthAvg,
              yiAmt:res.custAumMonthAvgLm,
              inc:res.custAumMonthAvgCompLm
            }]
            let keys = res.custLevelCompLm ? Object.keys(res.custLevelCompLm) : [];
            keys.forEach(item =>{
              this.businessArr.push({
              itemNm:item + '客户',
              curAmt:res.custLevelCompLm[item],
              inc:res.custLevelCount[item],
              yiAmt:res.custLevelCount[item] - res.custLevelCompLm[item]
              })
        })
      })
    },
    onMouseOver(tag, isHovered) {
      this.hoverIndex = isHovered ? tag : null
    },
    getCurrentImg(index) {
      return this.hoverIndex === index ? `${this.iconList[index].icon}_selected` : this.iconList[index].icon
    },
    handleClickSetShow(item, i) {
      this.$set(this.optArr[i], 'setShow', false)
    },
    handleSetCancle(item) {
      item.setShow = true
    },
    handleChange(val) {
      if (val == '1') {
        this.isFinish = false
      } else if (val == '2') {
        this.isFinish = true
      }
      this.agentPageSize = 5
      this.agentPageNum = 1
      this.initBranchList()
    },
    initBranchList() {
      if (this.isBranchAdmin) {
        const params = {
          isFinish: this.isFinish,
          pageSize: this.agentPageSize,
          pageNum: this.agentPageNum,
          orderByColumn: 'campaignEndTime'
        }
        branchList(params).then(res => {
          if (res.code == 200) {
            this.agentMattersData = res.rows
            this.agentTotal = res.total
          }
        })
      } else if (this.isCommonManager || this.isOutletAdmin) {
        const query = {

          pageSize: this.agentPageSize,
          pageNum: this.agentPageNum,
          orderByColumn: 'campaignEndTime'
        }
        managerList(query).then(res => {
          if (res.code == 200) {
            this.agentMattersData = res.rows
            this.agentTotal = res.total
          }
        })
      } else if (this.isHeadAdmin || this.isPublic || this.isPrivate || this.isHeadOps) {
        const params = {
          isFinish: this.isFinish,
          pageSize: this.agentPageSize,
          pageNum: this.agentPageNum,
          orderByColumn: 'claimEndTime'
        }
        headList(params).then(res => {
          if (res.code == 200) {
            this.agentMattersData = res.rows
            this.agentTotal = res.total
          }
        })
      }


    },
    getDeptTreeSelect() {
      getDeptTree().then((response) => {
        this.deptOptions = response.data
      })
    },
    changeData(val) {
      const newval = (Number(val) / 100000000).toFixed(2)
      return newval+'亿元'
    },
    handleAgentSizeChange(val) {
      // this.agentPageSize = val
      // this.initBranchList()
      this.pageSize = 5
      this.getData()
    },
    handleAgentCurrentChange(val) {
      this.agentPageNum = val
      this.pageNum = val
      this.getData()
    },
    handleorgClaim(campaignId) {
      orgClaimList({ campaignId }).then((res) => {
        if (res.code == 200) {
          Message.success("认领成功!");
          this.initBranchList()
        }
      });
    },
    handleGroupType() {

      this.configRules = [];
      let 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] = []
    },
    handlePushGroupCustomer(row) {
      if (row.campaignStatus == '100') {
        this.pushform.groupName = row.groupName;
        this.campaignId = row.campaignId;
        getDetailByCampaign(row.campaignId).then((res) => {
          if (res.code == 200) {
            const { data } = res;
            let 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.visitType = data.visitType
            this.pushform.feedBack = data.feedBack ? data.feedBack : []
            this.pushform.custType = data.custType
            this.pushform.groupId = this.groupIdList.map(item => item.value)
            this.handleGroupType();

          }
        });
      } else if (row.campaignStatus == '110') {
        this.$router.push({
          path: '/taskManage/taskDtails',
          query: {
            campaignId: row.campaignId,
            custType: row.custType,
            //待办里无任务类型 0我的任务，1推送任务，2其他任务
            type: '1',
            //环节和名单详情里的推送状态value不一样，无法匹配
            //推送状态-----为推送失败和无法推送
            unSuccessBranchFlag: '-1'
          }
        })
      }
    },
    handleView(row) {
      let status = ''
      if (row.campaignStatus == '客户认领') {
        //未认领状态
        status = '0'
      } else if (row.campaignStatus == '客户触达') {
        //已认领状态
        status = '1'
      }
      this.$router.push({
        path: '/taskManage/taskDtails',
        query: {
          campaignId: row.campaignId,
          custType: row.custType,
          //待办里无任务类型 0我的任务，1推送任务，2其他任务
          type: '1',
          userManagerId: '999',
          // pushStatus: row.campaignStatus,
          //认领状态
          custClaimStatus: status
        }
      })

    },
    handlePushSend(row) {
      this.$router.push({
        path: '/taskManage/taskDtails',
        query: {
          campaignId: row.campaignId,
          custType: row.custType,
          //待办里无任务类型 0我的任务，1推送任务，2其他任务 总行首页只展示我创建的任务，故此 穿0
          type: '0',
          unSuccessHeadFlag: '4',
        }
      })
    },
    getRuleArr(obj, index, managerOptions) {
      console.log(obj)
      this.ruleMap[obj.ruleName] = obj.arr;
      this.managerOptions = managerOptions;
    },
    handleCancle() {
      this.pushOpen = false;
    },
    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);
          let 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)
          let arr = newArr.map(item => { return item.ruleKey })
          // console.log(arr,'arr')
          let arr1 = arr.map(item => {
            if (item.includes('+') || item.includes('--')) {
              return item.substring(0, 2)
            } else {
              return item
            }
          })
          //特色网格组装
          let arrTswg = arr.filter(item => item.includes('+'))
          let layerIdList = arrTswg.map(item => {
            let itemList = item.split('+')
            return itemList.pop()
          })
          //虚拟网格组装
          let arrXnwg = arr.filter(item => item.includes('--'))
          let virtualGridIdsList = arrXnwg.map(item => {
            let itemList = item.split('--')
            return itemList.pop()
          })
          params.distributeType = arr1.join(',')
          params.layerIds = layerIdList
          params.virtualGridIds = virtualGridIdsList
          let perArr = newArr.filter(item => 'userName' in item)
          if (perArr && perArr.length > 0) {
            let perList = perArr[0].userName
            params.userIds = perList
          }
          console.log(params, 'params');
          allocateCustomerList(params).then(res => {
            if (res.code == 200) {
              this.pushOpen = false
              Message.success("支行管理员二次分配成功!");
              this.initBranchList()
            }
          })
        } else {
          return false
        }
      })
      console.log(this.pushform.checkTarget)
    },
    initQuickList() {
      quickList().then(res => {
        if (res.code == 200) {
          this.optArr = res.data.map(item => {
            return {
              name: item.title,
              icon: '',
              setShow: true
            }
          })
          // this.optArr.forEach((item, index) => {
          //   this.iconList.forEach((el, i) => {
          //     if (index == i) {
          //       item.icon = el.icon
          //       item.setShow = true
          //     }
          //   })
          // })
        }
      })
    },
    initWarnList() {
      warnList().then(res => {
        if (res.code == 200) {
          this.warnArr = res.data
        }
      })
    },
    initQuickSelect() {
      quickSelect().then(res => {
        if (res.code == 200) {
          this.bjMenuList = res.data.map(item => {
            return {
              label: item,
              value: item
            }
          })
        }
      })
    },
    handleSetting() {
      this.optArr.forEach(item => {
        item.setShow = true
      })
      this.isSetting = !this.isSetting
      this.initQuickList()
    },
    handleSaveSetting() {
      let arr = this.optArr.map(item => {
        return item.name
      }).filter(name => name && name.trim() !== '') // 过滤掉空值
      console.log(arr, 'arrarrarr')
      updateQuickSelect(arr).then(res => {
        if (res.code == 200) {
          Message.success(res.data)
          this.handleSetting()
          this.initQuickList()
        }
      })
    },
    handleWarn(item) {
      this.warnName = item.infoName
      this.pageSize = 10
      this.pageNum = 1
      this.warnDrawer = true
      this.initLoanWarnList()
    },
    initLoanWarnList() {
      let deptId=this.deptId+""
      if(deptId && deptId.substring(0,3) == '932'){
        const params = {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          type: this.warnName
        }
        warnRespList(params).then(res => {
          if (res.code == 200) {
            if(this.pageNum == '1' && res.rows.length > 0){
              this.warnDatakeys=keys(res.rows[0])
            }
            this.warnData = res.rows
            this.total = res.total
          }
        })
      }else{
        const params = {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        }
        loanWarnList(params).then(res => {
          if (res.code == 200) {
            this.warnData = res.rows
            this.warnData.forEach(item=>{
              item.custIdsn = item.custId?item.custId.substring(3):''
            })
            this.total = res.total
          }
        })
      }
    },

    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.initLoanWarnList()
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage
      this.initLoanWarnList()
    },
    handleGo(name) {
      console.log(this.ddRouters, 'this.ddRouters')
      const result = this.findNodePath(this.ddRouters, name)
      let toPath = result.join('/')
      this.$router.push({
        path: toPath,
      })
    },
    findNodePath(tree, tragetName, path = []) {
      for (let node of tree) {

        const currentPath = [...path, node.path]
        if (node.meta.title === tragetName) {
          return currentPath
        }
        if (node.children && node.children.length > 0) {
          const result = this.findNodePath(node.children, tragetName, currentPath)
          if (result) {
            return result
          }
        }
      }
      return null
    },
    handleNotice(item) {
      this.dialogVisible = true
      this.titleForm = item


    },
    handleGoDetail(item) {
      if (item.custType == '0') {
        this.$router.push({
          path: '/360charts/indexcharts',
          query: {
            custId: item.custId
          }
        })
      } else if (item.custType == '1') {
        this.$router.push({
          path: '/360charts/commercial/',
          query: {
            custId: item.custId
          }
        })
      } else if (item.custType == '2') {
        this.$router.push({
          path: '/360charts/firm/',
          query: {
            custId: item.custId
          }
        })
      }
    },
    editFn(row) {
      this.dialogTitle = "修改";
      this.dialogForm = cloneDeep(row);
      this.visibleFlag = true;
    },
    dialogOkfn() {
      this.$refs["dialogFormRef"].validate(valid => {
        if (valid) {
          this.dialogForm.approvalRemark = this.dialogForm.approvalRemark
          resourceAssistEdit(this.dialogForm).then(response => {
            if (response.code == "200") {
              let msg = "修改成功";
              this.$message.success(msg);
              this.visibleFlag = false;
              this.getData();
            } else {
              this.$message.error(response.msg || "操作失败");
            }
          });
        }
      });
    },
    dialogCancelfn() {
      this.visibleFlag = false;
    },
  }
}
</script>

<style lang="scss" scoped>
ul,
li,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-container {

  overflow: hidden;

  border-radius: 16px 16px 0 0;
  display: flex;
}

.page-vl {
  width: 75%;
}

.page-vr {
  width: 24%;
  margin-left: 1%;
  display: flex;
  flex-direction: column;
}

.page-title {
  color: #222222;
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
}

.page-common-wrap {
  border-radius: 16px;
  box-shadow: 5px 3px 8px 5px #00000017;
  background-color: #ffffff;
  padding: 24px 10px;

  &.no-padding-cnt {
    padding: 30px 0;

    .page-title {
      padding: 0 24px;
    }

    .page-title-cnt {
      padding-right: 24px;
    }

    .common-ul {
      li {
        padding: 0 24px;


      }
    }
  }
}

.page-vr-middle {
  margin-bottom: 22px;
}

.page-vr-top {
  margin-bottom: 22px;
}

.page-vl-top {
  margin-bottom: 22px;
}

.page-title-position {
  margin-bottom: 30px;
}

.page-title-cnt {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .more-btn {
    line-height: 20px;
    font-weight: 400;
    font-size: 14px;
    color: #959da6;
    cursor: pointer;

    .el-icon-arrow-right,
    .el-icon-setting {
      margin-left: 2px;
    }
  }
}

.page-btm {
  margin-bottom: 20px;
}

.indicator-top {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;

  >div {
    flex: 1;
    border-radius: 16px;
    position: relative;

    &:first-child {
      background-color: #f8fbff;

      .div-bg {
        width: 128px;
        height: 108px;
        position: absolute;
        right: 0;
        bottom: 0;
        background-image: url('../assets/imgs/loan_bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    &:last-child {
      background-color: #fffbf8;

      .div-bg {
        width: 128px;
        height: 108px;
        position: absolute;
        right: 0;
        bottom: 0;
        background-image: url('../assets/imgs/pain_bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }

  .vt-top {
    padding: 24px 10px 0 10px;
  }
}

.indicator-btm {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  margin-top: 18px;

  .indicator-btm-wrap {
    min-width: 300px;
    flex: 1;
    border-radius: 16px;
    padding: 24px 10px;
    background-color: #f8fbff;

    >div:first-child {
      margin-bottom: 25px;
    }
  }
}

.page-vl-main-wrap {
  display: flex;
  width: 100%;
  gap: 1%;
  flex-wrap: wrap;
  padding-left: 1%;
  height: 400px;
  overflow-y: scroll;

  .page-vl-main {
    width: 32%;
    // flex: 1;
    border-radius: 10px;
    background-color: #f1fbff;
    padding: 0 0 15px 0;
    margin-bottom: 10px;
    height: 136px;
  }
}

.vt-bg-cnt {
  padding-right: 100px;
}

.vt-main {
  display: flex;
  flex-direction: row;
  margin-top: 21px;
  padding-bottom: 30px;
  width: 100%;

  &.top-vt-main {
    padding-bottom: 0;
    // margin-top: 15px;
  }

  // justify-content: center;
  >div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &::after {

      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 10px;
      width: 1;
      border-right: 2px solid #959da6;
      opacity: 0.3;
      // background: linear-gradient(to right, transparent, #000 50%, transparent);
    }

    &:last-child {
      &::after {
        content: none;
      }
    }

    span:first-child {
      line-height: 20px;
      font-weight: 400;
      font-size: 14px;
      // color: #959da6;
      margin-bottom: 6px;
    }

    span:last-child {
      display: flex;
      align-items: center;
      line-height: 20px;
      font-size: 14px;
      font-weight: 400;

      i {
        margin-right: 5px;
      }
    }
  }
}

.top_num {
  width: 33%;
}

.business-title {
  line-height: 24px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  // border: 1px solid #959da6;
  padding: 10px;
  // border-radius: 25px;
  background-color: #4886F8;
  color: #fff;
  // margin: 0 15px;
}

.business-count {
  display: flex;
  align-items: center;

  .counts {
    line-height: 40px;
    font-size: 20px;
    color: #222222;
    font-weight: 900;
  }

  .unit {
    line-height: 24px;
    font-size: 12px;
    color: #959da6;
    font-weight: 400;
    margin-left: 5px;
  }
}

.tips {
  line-height: 24px;
  background-color: rgba($color: #00b453, $alpha: 0.1);
  border-radius: 14.5px;
  color: #00b453;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 400;
  width: fit-content;

  &.tip-margin {
    margin-left: 10px;
  }

  &.tip-top {
    margin-top: 8px;
  }
}

.indicator-btn-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.indicator-btm-vr {
  >li {
    margin-bottom: 6px;

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

    span {
      font-size: 12px;
      font-weight: 400;

      &:first-child {
        color: #959da6;
        line-height: 20px;
        margin-right: 10px;
      }
    }
  }
}

.page-vr-btm {
  height: 350px;
  overflow-y: scroll;
  margin-bottom: 22px;
}

::v-deep .el-badge__content {
  background-color: #f5441f;
  color: #ffffff;
  height: auto;
  top: 11px;
  right: 15px;
  scale: 0.8;
  box-shadow: 0 2px 4px 0 #f5452233;
  border-radius: 6px 6px 6px 0;
  min-width: 22px;
}

.common-ul {
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 40px;
    margin-bottom: 5px;
    cursor: default;

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

    &:hover {
      background-color: #f8fbff;

      span {
        color: #4886f8 !important;

        &.count-bold {
          text-decoration: underline;
          line-height: 40px;
          text-underline-offset: 5px;
          // padding-bottom: 5px;
          // border-bottom: 1px solid #4886f8;
        }
      }
    }

    span {
      font-size: 14px;
      font-weight: 400;
      color: #222222;

      &:first-child {}

      &:last-child {
        &.count-bold {
          font-weight: 500;
          text-decoration: underline;
          line-height: 40px;
          text-underline-offset: 5px;
        }
      }
    }
  }

  .url_li {
    cursor: pointer !important;
    padding: 0 8px;
    border-bottom: 1px solid #e8e8e8;
  }
}

.url-box {
  flex: 1;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}

.yjxxLi {
  background-color: rgb(253, 245, 238);
}

.yjxxLd {
  color: rgb(237, 154, 86);
  margin-right: 15px;
}

.operate-cnt {
  display: flex;
  flex-wrap: wrap;

  li {
    display: flex;





    &:nth-child(2n) {
      margin-left: 3%;
    }

    &:nth-child(-n + 2) {
      margin-bottom: 36px;
    }

    &:hover {
      span {
        color: #4886f8;
      }
    }

    span {
      font-size: 14px;
      font-weight: 400;
      color: #222222;
      line-height: 20px;
    }
  }
}

::v-deep .svg-icon-img {
  width: 50px !important;
  height: 50px !important;

  &:hover {
    fill: #4886f8;
  }
}

::v-deep .svg-icon-imgSetting {
  width: 50px !important;
  height: 50px !important;
}

.warnDrawer_mian {
  margin: 30px;
}

.warnPagination {
  margin-top: 20px;
}

.setIcon {
  // position: absolute;
  // top: 0;
  // right: 0;
  cursor: pointer;
}

.setIcon_box {
  height: 100%;
  margin-left: 20px;
}

.setLi {
  width: 48%;
  background-color: #f1fbff;
}

.noSetting {
  display: flex;
  align-items: center;
}

.cancle {
  margin-right: 10px;
}

.set_inp {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cancleIcon {
  margin-left: 95%;
  cursor: pointer;
}

.top_num {
  padding: 5px 10px;
}

.dbbox {
  display: flex;

  ::v-deep .el-radio-group {
    border: none;

  }

}

.header-radio {
  width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #4886f8;

  .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(2n) {

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

.main {
  padding: 20px;
}

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


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

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


.notice-wrap {
  margin-bottom: 22px;
}

.notice-title {
  display: flex;

  .page-title {
    margin-right: 20px;
  }
}

.notice-content {
  margin-top: 20px;
  height: 400px;
  overflow-y: auto;
  border-top: 1px solid #ddd;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    padding-right: 30px;

    .item-one {
      display: flex;
      padding-left: 10px;

      .content {
        margin-left: 10px;
      }
    }

    .quan {
      // display: inline-block;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      margin-top: 5px;
      padding: 0 6px;
    }

    .quan1 {
      background: #f5441f;
    }

    .quan2 {
      background: #b9b9b9;
    }

    .read {
      cursor: pointer;
      width: 150px;
      text-align: right;
      // margin-left: 10px;
    }

    .notread {
      color: #4886f8
    }

    .hasread {
      color: #b9b9b9
    }

    .date {
      color: #b9b9b9;
      margin-right: 10px;
      // margin-left: 10px;
    }
  }
}

.notice_li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(232, 232, 232);
}

.notice_title {
  width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.titlelog_title {
  font-size: 20px;
  font-weight: 600;
  line-height: 35px;
  margin-bottom: 15px;
  color: #000
}

.titlelog_content {
  font-size: 16px;
  color: #000;
  line-height: 35px;
}

.before_title {
  width: 80px;
  display: inline-block;
}

::v-deep .el-dialog__body {
  padding: 0 30px 50px 30px !important;
}

::v-deep .el-dialog {
  border-radius: 30px;
}

::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: 35px;
  left: 50%;
  transform: translateX(-50%);
}

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

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

::v-deep .v-step[data-popper-placement^="right"]::after {
  top: -154%;
  left: -224%;


}
.el-select-dropdown__item{
  margin-left: 10px
}
</style>
<style>
@import '../views/grid/tour.css';
</style>
