ibs-fullstack/ruoyi-ui/src/views/customer/charts/360charts/commercial/index.vue

<template>
  <div class="common-wrap-cnt">
    <section class="header-top">
      <div class="header_top_left">
        <div class="icon_box">
          <div class="header_icon_box">
            <img
              src="../../../../../assets/imgs/icon_company.png"
              alt=""
              class="header_icon"
            >
          </div>
        </div>
        <div class="base-info">
          <el-form ref="profileForm" :model="baseHeaderForm" class="headerForm">
            <el-form-item prop="custName" label-width="20px">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="建档输入/取新华社数据"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
              </span>
              <span
                v-if="!isEditing"
                style="font-size: 24px; font-weight: 600; text-align: center"
              >{{ baseHeaderForm.custName }}</span>
              <!-- <el-tag v-if="isShow" type="danger" class="wjd">未建档</el-tag> -->
              <el-tag v-if="canEdit" type="danger" class="wjd">行外客户</el-tag>
              <el-input
                v-if="isEditing"
                v-model="baseHeaderForm.custName"
                maxlength="18"
              />
            </el-form-item>
            <el-form-item
              label-width="62px"
              prop="socialCreditCode"
              label="统信码："
            >
              <span>{{ baseHeaderForm.socialCreditCode }}</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <section class="form-operate">
        <span style="margin-right: 20px; color: #f50;font-weight: bold;">{{ customLevel }}</span>
        <el-button
          type="plain"
          size="small"
          @click="goBackToIndex"
        >返回</el-button>
        <el-button
          v-if="!isEditing"
          type="primary"
          size="small"
          :disabled="canEdit"
          @click="handleEdit"
        >编辑</el-button>
        <el-button
          v-if="isEditing"
          type="primary"
          size="small"
          @click="handleCancle"
        >取消</el-button>
        <el-button
          type="primary"
          size="small"
          :disabled="isSaveDisable"
          @click="handleSave"
        >保存</el-button>
        <el-button
          type="primary"
          size="small"
          @click="handleExport"
        >导出</el-button>
        <el-button
          v-if="
            isHeadAdmin || isPublic || isPrivate || isHeadOps || isBranchAdmin
          "
          type="primary"
          size="small"
          @click="handleAddZf"
        >添加走访</el-button>
        <el-button
          type="primary"
          size="small"
          @click="handleSecondVisit"
        >二次走访</el-button>
        <el-button
          type="primary"
          size="small"
          @click="handleRecource"
        >资源申请</el-button>
      </section>
    </section>
    <section class="common-create-main">
      <p class="common-title">基础信息</p>
      <div class="line" />
      <el-form
        ref="profileForm"
        :model="baseForm"
        :rules="rules"
        class="profileForm"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item prop="lpName" label-width="113px">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="建档输入/取核心法人表信息"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                法人姓名：
              </span>
              <span v-if="!isEditing">{{ baseForm.lpName }}</span>

              <el-input
                v-if="isEditing"
                v-model="baseForm.lpName"
                maxlength="18"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="85px" prop="custGender">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="取身份证号17位值计算"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                性别：
              </span>
              <span v-if="!isEditing">{{ baseForm.custGender }}</span>
              <el-select v-if="isEditing" v-model="baseForm.custGender">
                <el-option
                  v-for="(item, index) in genderList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="85px" prop="custAge">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="取身份证号7-14位值计算"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                年龄：
              </span>
              <span v-if="!isEditing">{{ baseForm.custAge }}</span>
              <el-input
                v-if="isEditing"
                v-model="baseForm.custAge"
                maxlength="3"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="113px" prop="custIdc">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="建档输入/取核心法人信息表"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                身份证号：
              </span>
              <span>{{ baseForm.custIdc }}</span>

              <!-- <el-input v-model="baseForm.custIdc" v-if="isEditing"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="141px" prop="custPhone">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="建档输入/取核心法人信息表数据"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                法人联系方式：
              </span>
              <span v-if="!isEditing">{{ baseForm.custPhone }}</span>

              <el-input v-if="isEditing" v-model="baseForm.custPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="113px" prop="birthday">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="取身份证号7-14位值计算"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                出生日期：
              </span>
              <span v-if="!isEditing">{{ baseForm.birthday }}</span>
              <el-date-picker
                v-if="isEditing"
                v-model="baseForm.birthday"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                @change="handleChangeBirthday"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="84px">
              <span slot="label">
                <!-- <el-tooltip placement="top" trigger="hover" content="新华社数据">
                  <span class="quesiton"><i class="el-icon-question"></i></span>
                </el-tooltip> -->
                实控人：
              </span>
              <span v-if="!isEditing">{{ baseForm.actualController }}</span>
              <el-input v-if="isEditing" v-model="baseForm.actualController" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="113px">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="新华社数据"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                客户内码：
              </span>
              <span>{{ baseForm.custIsn }}</span>

              <!-- <el-input v-model="baseForm.custIsn" v-if="isEditing"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户号：">
              <span>{{ baseForm.custId }}</span>
              <!-- <el-input v-model="baseForm.custId" v-if="isEditing"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="100px" prop="socialCreditCode">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="建档输入/新华社数据"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                统信码：
              </span>
              <span>{{ baseForm.socialCreditCode }}</span>

              <!-- <el-input v-model="baseForm.socialCreditCode" v-if="isEditing" maxlength="18"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="113px">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="建档输入/新华社数据"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                行业名称：
              </span>
              <span v-if="!isEditing">{{
                !isNaN(Number(baseForm.industry))
                  ? baseForm.industry
                    ? industryStr
                    : baseForm.belongBusiness
                  : baseForm.industry
              }}</span>
              <el-cascader
                v-if="isEditing"
                v-model="baseForm.industry"
                :options="industryOptions"
                :props="{
                  expandTrigger: 'hover',
                  label: 'label',
                  value: 'value',
                  checkStrictly: true,
                }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="113px">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="建档输入/新华社数据"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                经营状态：
              </span>
              <span v-if="!isEditing">
                <span>{{ initStatus(baseForm.status) }}</span>
              </span>
              <el-select v-if="isEditing" v-model="baseForm.status">
                <el-option
                  v-for="(item, index) in statusList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="113px">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="建档输入/新华社数据"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                经营范围：
              </span>
              <span
                v-if="!isEditing"
                :title="baseForm.businessScope"
                class="ccyc"
              >{{ baseForm.businessScope }}</span>

              <el-input
                v-if="isEditing"
                v-model="baseForm.businessScope"
                maxlength="18"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="更新时间：" label-width="96px">
              <span>{{ baseForm.updateTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="113px" prop="tel">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="建档输入/新华社数据"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                联系方式：
              </span>
              <span v-if="!isEditing">{{ baseForm.tel }}</span>
              <el-input v-if="isEditing" v-model="baseForm.tel" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="8">
            <el-form-item label="资产情况：">
              <span>{{ profile.asset }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="信用状况：">
              <span>{{ profile.credit }}</span>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="行政归属网格区划：">
              <span>{{ baseForm.community }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="!isHeadOps" :span="8">
            <el-form-item label="行政网格客户经理(零售部)：">
              <span>{{ baseForm.xzLsGridUserName }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="!isHeadOps" :span="8">
            <el-form-item label="行政归属网格(零售部)：">
              <span>{{ baseForm.xzLsGridName }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="!isPrivate" :span="8">
            <el-form-item label="行政网格客户经理(运管部)：">
              <span>{{ baseForm.xzYgGridUserName }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="!isPrivate" :span="8">
            <el-form-item label="行政归属网格(运管部)：">
              <span>{{ baseForm.xzYgGridName }}</span>
            </el-form-item>
          </el-col>
          <el-col v-for="(item, index) in cliList" :key="index" :span="8">
            <el-form-item
              v-if="item.cmpmType == '贷款客户经理'"
              :label="`${item.cmpmType}：`"
            >
              <span>{{ is932Dept ? `${baseForm.belongUserName}-${baseForm.belongUserId}` : item.cmpmUserList }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <el-collapse v-model="activeName" accordion @change="handleCollapse">
      <el-collapse-item name="0">
        <template slot="title">
          <p class="common-title">地址信息</p>
        </template>
        <div class="dzBox">
          <div class="dzBox_top">
            <div class="dzBox_item">
              <div class="dzBox_title">经营地址</div>
              <div class="dzBox_wapper">
                <div
                  v-for="(item, index) in jydzList"
                  :key="index"
                  class="dzBox_content"
                >
                  <div>
                    <span>{{ item.address }}</span>
                    <el-tag style="margin-left: 5px">{{ item.source }}</el-tag>
                  </div>
                </div>
              </div>
            </div>
            <div class="dzBox_item">
              <div class="dzBox_title">注册地址</div>
              <div class="dzBox_wapper">
                <div
                  v-for="(item, index) in zcdzList"
                  :key="index"
                  class="dzBox_content"
                >
                  <div>
                    <span>{{ item.address }}</span>
                    <el-tag style="margin-left: 5px">{{ item.source }}</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item name="1">
        <template slot="title">
          <p class="common-title">签约产品</p>
        </template>
        <div style="height: 250px">
          <div
            v-if="Object.keys(this.signedProducts).length != 0"
            class="t360-production"
          >
            <div class="title_box1">
              <div
                v-if="this.signedProducts.deposit"
                class="t360-production-item"
              >
                存款
              </div>
              <div class="ejTitle">
                <div class="ejTitle_item">
                  {{
                    this.signedProducts.deposit
                      ? this.signedProducts.deposit.currdeposFlag
                        ? this.signedProducts.deposit.currdeposFlag
                        : ""
                      : ""
                  }}
                </div>
              </div>
            </div>
            <div class="t360-production">
              <div class="title_box2">
                <div
                  v-if="this.signedProducts.loan"
                  class="t360-production-item"
                >
                  贷款
                </div>
                <div class="ejTitle">
                  <div class="ejTitle_item">
                    {{
                      this.signedProducts.loan
                        ? this.signedProducts.loan.hatflowcostbookFlag
                          ? this.signedProducts.loan.hatflowcostbookFlag
                          : ""
                        : ""
                    }}
                  </div>
                  <div class="ejTitle_item">
                    {{
                      this.signedProducts.loan
                        ? this.signedProducts.loan.zheliloanFlag
                          ? this.signedProducts.loan.zheliloanFlag
                          : ""
                        : ""
                    }}
                  </div>
                  <div class="ejTitle_item">
                    {{
                      this.signedProducts.loan
                        ? this.signedProducts.loan.phmortgloanFlag
                          ? this.signedProducts.loan.phmortgloanFlag
                          : ""
                        : ""
                    }}
                  </div>
                </div>
              </div>
            </div>
            <div class="t360-production">
              <div class="title_box3">
                <div
                  v-if="this.signedProducts.wealth"
                  class="t360-production-item"
                >
                  财富
                </div>
                <div class="ejTitle">
                  <div class="ejTitle_item">
                    {{
                      this.signedProducts.wealth
                        ? this.signedProducts.wealth.bondbookFlag
                          ? this.signedProducts.wealth.bondbookFlag
                          : ""
                        : ""
                    }}
                  </div>
                  <div class="ejTitle_item">
                    {{
                      this.signedProducts.wealth
                        ? this.signedProducts.wealth.financialbookFlag
                          ? this.signedProducts.wealth.financialbookFlag
                          : ""
                        : ""
                    }}
                  </div>
                  <div class="ejTitle_item">
                    {{
                      this.signedProducts.wealth
                        ? this.signedProducts.wealth.fundbookFlag
                          ? this.signedProducts.wealth.fundbookFlag
                          : ""
                        : ""
                    }}
                  </div>
                  <div class="ejTitle_item">
                    {{
                      this.signedProducts.wealth
                        ? this.signedProducts.wealth.frcdFlag
                          ? this.signedProducts.wealth.frcdFlag
                          : ""
                        : ""
                    }}
                  </div>
                  <div class="ejTitle_item">
                    {{
                      this.signedProducts.wealth
                        ? this.signedProducts.wealth.insurbookFlag
                          ? this.signedProducts.wealth.insurbookFlag
                          : ""
                        : ""
                    }}
                  </div>
                </div>
              </div>
            </div>
            <div class="t360-production">
              <div class="title_box4">
                <div
                  v-if="this.signedProducts.intermediate"
                  class="t360-production-item"
                >
                  中间业务
                </div>
                <div class="ejTitle">
                  <div class="ejTitle_item">
                    {{
                      this.signedProducts.intermediate
                        ? this.signedProducts.intermediate.elefeeWhcFlag
                          ? this.signedProducts.intermediate.elefeeWhcFlag
                          : ""
                        : ""
                    }}
                  </div>
                  <div class="ejTitle_item">
                    {{
                      this.signedProducts.intermediate
                        ? this.signedProducts.intermediate.gasfeeWhcFlag
                          ? this.signedProducts.intermediate.gasfeeWhcFlag
                          : ""
                        : ""
                    }}
                  </div>
                  <div class="ejTitle_item">
                    {{
                      this.signedProducts.intermediate
                        ? this.signedProducts.intermediate.watfeeWhcFlag
                          ? this.signedProducts.intermediate.watfeeWhcFlag
                          : ""
                        : ""
                    }}
                  </div>
                  <div class="ejTitle_item">
                    {{
                      this.signedProducts.intermediate
                        ? this.signedProducts.intermediate.etcFlag
                          ? this.signedProducts.intermediate.etcFlag
                          : ""
                        : ""
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="Object.keys(this.signedProducts).length == 0">
            <el-empty description="无签约产品" />
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item name="9">
        <template slot="title">
          <p class="common-title">自定义备注</p>
        </template>
        <el-form
          ref="bzFormRef"
          :model="bzForm"
          :rules="bzRules"
          class="special_bzform"
          style="margin-top:20px"
        >
          <el-row>
            <el-col :span="16">
              <el-form-item label="备注" prop="label" label-width="85px">
                <el-input
                  v-model="bzForm.label"
                  placeholder="请输入备注"
                  style="width:100%"
                  :disabled="bzFlag"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="bz_row_end">
                <el-button
                  type="primary"
                  size="small"
                  @click="bzEditFn"
                >{{bzFlag?'编辑':'退出编辑'}}</el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="bzSaveFn"
                  v-if="!bzFlag"
                >保存</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <p class="common-title">省行客户标签</p>
        </template>
        <div class="message-box">
          <div class="message-box-right">
            <div style="margin-bottom:20px">
              <el-cascader v-model="tagName" :options="selectTagsList" :props="tagProps" @change="tagChangeFn"></el-cascader>
            </div>
            <el-tag
              v-for="(item, index) in showTagsList"
              :key="index"
              :type="item.enableFlag == true ? '' : 'info'"
              :style="{
                'margin-right': '15px',
                'margin-bottom': '12px',
                cursor: editTag ? 'pointer' : 'default',
              }"
              :closable="editTag && item.enableFlag == true"
              @click="handleClickTag(item)"
              @close="handleCloseTag(item)"
            >{{ item.names }}</el-tag>
            <div>
              <el-button
                v-if="!editTag"
                size="mini"
                type="primary"
                @click="handleEditTag"
              >编辑标签</el-button>
              <el-button
                v-if="editTag"
                type="success"
                size="mini"
                @click="handleSaveTag"
              >保存</el-button>
              <el-button
                v-if="editTag"
                size="mini"
                @click="handleCancelEditTag"
              >取消</el-button>
            </div>
            <!-- <div style="margin-top:20px">
              <el-input
                v-if="editTag"
                v-model="addTagName"
                placeholder="请输入新增客户标签"
              />
              <el-button
                style="margin-left:20px"
                v-if="editTag"
                type="success"
                @click="handleAddTag"
              >新增</el-button>
            </div> -->
          </div>
        </div>
      </el-collapse-item>
      <Custom :tagManualList="tagManualList" nameKey="10" typeKey="ls" @getDetailData="initMerchantDetail" />
      <el-collapse-item name="4">
        <template slot="title">
          <p class="common-title">特色商户标签</p>
        </template>
        <div>
          <div class="message-box-right">
          <el-table ref="multipleTable" :data="tableData" class="table" style="width: 100%">
            <template v-for="(item, index) in columns">
                <el-table-column :prop="item" :label="item" :key="index">
                </el-table-column>
            </template>
          </el-table>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template slot="title">
          <p class="common-title">
            走访记录（总共走访{{ visitRecords.length }}次）
          </p>
        </template>
        
        <el-table
          :data="visitRecords"
          style="width: 100%"
          max-height="600"
        >
          <el-table-column
            align="left"
            prop="campaignName"
            label="活动名称"
            show-overflow-tooltip
            width="150px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="visName"
            label="柜员名称"
            show-overflow-tooltip
            width="150px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="visId"
            label="柜员号"
            show-overflow-tooltip
            width="150px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="deptId"
            label="柜员部门"
            show-overflow-tooltip
            width="150px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="deptName"
            label="部门名称"
            show-overflow-tooltip
            width="200px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="custName"
            label="走访客户名称"
            show-overflow-tooltip
            width="150px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="socialCreditCode"
            label="企业（商户）统信码"
            show-overflow-tooltip
            width="150px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="custType"
            label="客户类型"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.custType == '0'">个人</span>
              <span v-if="scope.row.custType == '1'">商户</span>
              <span v-if="scope.row.custType == '2'">企业</span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="signInTime"
            label="签到时间"
            show-overflow-tooltip
            width="180px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="signOutTime"
            label="签退时间"
            show-overflow-tooltip
            width="180px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="signInAddress"
            label="签到地址"
            show-overflow-tooltip
            width="150px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="signOutAddress"
            label="签退地址"
            show-overflow-tooltip
            width="150px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="signInCoordinate"
            label="签到坐标"
            show-overflow-tooltip
            width="150px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="signOutCoordinate"
            label="签退坐标"
            show-overflow-tooltip
            width="150px"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="abnormalVisitTag"
            label="异常走访标签"
            show-overflow-tooltip
            width="150px"
            v-if="is875"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.abnormalVisitTag == '0'">正常</span>
              <span v-if="scope.row.abnormalVisitTag == '1'">走访频率异常</span>
              <span v-if="scope.row.abnormalVisitTag == '2'">走访持续时长异常</span>
              <span v-if="scope.row.abnormalVisitTag == '3'">签退时间异常</span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="abnormalVisitInfo"
            label="异常走访信息"
            show-overflow-tooltip
            width="150px"
            v-if="is875"
          ></el-table-column>
          <el-table-column
            align="left"
            prop="isValidCust"
            label="是否为有效客户"
            show-overflow-tooltip
            width="150px"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.isValidCust == '0'">否</span>
              <span v-if="scope.row.isValidCust == '1'">是</span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="remark"
            label="走访备注"
            show-overflow-tooltip
            width="150px"
          ></el-table-column>
        </el-table>
        <!-- <el-timeline v-if="visitRecords.length > 0" style="margin-top: 30px">
          <el-timeline-item
            v-for="(record, index) in visitRecords"
            :key="index"
            :timestamp="record.date"
          >
            <el-card>
              <p class="record_item">任务名称：{{ record.campaignName }}</p>
              <p class="record_item">走访时间：{{ record.visTime }}</p>
              <p class="record_item">走访机构：{{ record.deptName }}</p>
              <p class="record_item">走访人：{{ record.visName }}</p>
              <p class="zfRemark record_item">
                走访备注：
                <span v-if="record.isRemarkEdit">{{ record.remark }}</span>
                <el-input
                  v-if="!record.isRemarkEdit"
                  v-model="record.remark"
                  class="remarkTitle"
                  type="textarea"
                  :row="3"
                />
              </p>
              <div class="record_btn">
                <el-button
                  v-if="record.isRemarkEdit && record.isZfEdit"
                  type="primary"
                  size="small"
                  @click="handleClickRecord(record, index)"
                >编辑</el-button>
                <el-button
                  v-if="!record.isRemarkEdit"
                  type="primary"
                  size="small"
                  @click="handleCommitRecord(record, index)"
                >保存</el-button>
                <el-button
                  v-if="!record.isRemarkEdit"
                  type="plain"
                  size="small"
                  @click="handleCancleRecord(record, index)"
                >取消</el-button>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline> -->
      </el-collapse-item>

      <!-- <el-collapse-item>
          <template slot="title">
            <p class="common-title">关联经营人
              <el-tooltip placement="top" trigger="hover" content="大信贷股东信息表">
                <span class="quesiton"><i class="el-icon-question"></i></span>
              </el-tooltip>
            </p>
          </template>
          <el-table :data="affiliatedData" class="affiliatedData">
            <el-table-column label="姓名" align="center" prop="name"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="goIndexcharts(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item> -->
    </el-collapse>
    <el-dialog
      title="该客户尚未建档，请先进行营销建档"
      :visible.sync="filingVisible"
      width="25%"
      :before-close="handleClosefiling"
      class="filingDialog"
    >
      <span slot="footer" class="person-footer">
        <el-button @click="handleClosefiling">取消</el-button>
        <el-button
          type="primary"
          class="commit_btn"
          @click="handlFilingCommit"
        >确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="addressTitle"
      :visible.sync="addressVisible"
      width="500px"
      class="fimalyDialog"
    >
      <el-table :data="addressList">
        <el-table-column label="地址类型" align="center" prop="addressName" />
        <el-table-column label="地址" align="center" prop="address" />
        <el-table-column label="来源" align="center" prop="source" />
      </el-table>
    </el-dialog>
    <el-dialog
      title="添加走访"
      :visible.sync="zfVisible"
      width="25%"
      :before-close="handleCloseZf"
      class="zfDialog"
    >
      <el-form
        ref="formObj"
        :model="formObj"
        :rules="formRules"
        class="my-form"
      >
        <el-form-item label="" prop="campaignId" label-width="50px">
          <el-select
            v-model="formObj.campaignId"
            style="width: 300px"
            placeholder="请选择任务"
            filterable
          >
            <el-option
              v-for="item in taskOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="person-footer">
        <el-button @click="handleCloseZf">取消</el-button>
        <el-button
          type="primary"
          class="commit_btn"
          @click="handlZfCommit"
        >确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="二次走访"
      :visible.sync="secondVisitShow"
      width="500px"
      class="fimalyDialog"
    >
      <el-form ref="secondRef" :model="secondForm" :rules="secondRules" label-width="100px">
        <el-form-item prop="visitTime" label="走访时间">
          <el-date-picker
            v-model="secondForm.visitTime"
            align="right"
            type="date"
            clearable
            placeholder="请选择走访时间"
            value-format="yyyy-MM-DD"
            format="yyyy-MM-DD"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="person-footer">
        <el-button @click="handleCloseSecond">取消</el-button>
        <el-button
          type="primary"
          class="commit_btn"
          @click="handleSubmitSecond"
        >确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="资源申请"
      :visible.sync="secoureShow"
      width="500px"
      class="fimalyDialog"
    >
      <el-form ref="secoureRef" :model="secoureForm" :rules="secoureRules" label-width="100px">
        <!-- <el-form-item prop="userName" label="客户经理">
          <el-select v-model="secoureForm.userName" filterable clearable>
            <el-option
              v-for="(item, index) in secoureOption"
              :key="index"
              :label="item.nickName"
              :value="item.userName"
            />
          </el-select>
        </el-form-item> -->

        <el-form-item label="" label-width="0">
          <section class="user-info">
          <span>归属机构</span>
          <treeselect
            ref="orgTree"
            size="small"
            v-model="userDeptList"
            :options="deptOptions"
            placeholder="请选择"
            :show-count="true"
            noOptionsText="暂无数据"
            noResultsText="暂无数据"
            @select="(node) => onDeptTreeSelect(node)"
            @deselect="clearTreeSelect"
            @open="onOrgTreeFocus"
            :flat="false"
            style="margin-bottom: 10px"
          />
          </section>
        <section class="user-info">
          <span>客户经理</span>
          <el-select
            @focus="onClientManagerFocus"
            ref="clientManager"
            v-model="authUser"
            :multiple-limit="0"
            filterable
            placeholder="请选择"
            class="input-box"
            style="width: 100%"
          >
              <el-option
                v-for="option in managerOptions"
                :key="option.userId"
                :label="`${option.deptName}-${option.userName}-${option.nickName}`"
                :value="`${option.userName}-${option.nickName}`"
              ></el-option>
          </el-select>
        </section>
        </el-form-item>
        <el-form-item prop="applyRemark" label="备注">
          <el-input v-model="secoureForm.applyRemark" :rows="5" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="person-footer">
        <el-button @click="handleCloseSecoure">取消</el-button>
        <el-button
          type="primary"
          class="commit_btn"
          @click="handleSubmitSecoure"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getMerchantDetail,
  updateMerchantDetail,
  getIndustryTree,
  exportMerchantDetail,
  getRegStatus,
  visitInfoList,
  editVisitInfo,
  editCustTag,
  getcustomLevel,
  appointmentSecondVisit,
  systemUserAllTreeUser,
  appointmentResourceAssist
} from '@/api/system/listByRetailKeywords.js'
import { getAddressTree, getDetailRegion, systemUserDeptTreeAll } from '@/api/grid/address/tree.js'
import { getVisitData } from '@/api/task/taskList.js'
import { getCurrentExistTask,systemRecordEditLable } from '@/api/system/grouplist'
import { addAppointCustCamp } from '@/api/grid/mycustomer.js'
import { getUserListByDeptIds } from "@/api/grid/region.js";
import { downloadFiles } from '@/utils'
import { mapGetters } from 'vuex'
import { Message } from 'element-ui'
import { cloneDeep, isEmpty } from 'lodash'
import _ from 'lodash'
import Custom from '../custom.vue'
export default {
  data() {
    var validatePhone = (rule, value, callback) => {
      if (!value?.trim()) {
        callback()
      }
      const regExp = /^1(3|4|5|6|7|8|9)[0-9]{9}$/
      if (!regExp.test(value)) {
        this.showCode = false
        this.canClick = false
        callback(new Error('请输入正确的手机号'))
      } else {
        this.canClick = true
        callback()
      }
    }
    var validateCustIdc = (rule, value, callback) => {
      if (!value?.trim()) {
        return callback(new Error('请输入身份证号码'))
      }
      const regex =
        /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      if (!regex.test(value)) {
        callback(new Error('请输入正确的身份证号码'))
      } else {
        callback()
      }
    }
    return {
      customLevel: '',
      baseHeaderForm: {
        custName: '',
        socialCreditCode: ''
      },
      activeName: '',
      isSaveDisable: true,
      filingVisible: false,
      jydzList: [],
      zcdzList: [],
      isShow: false,
      baseForm: {
        lpName: '',
        custGender: '',
        custAge: '',
        custIdc: '',
        custPhone: '',
        birthday: '',
        custIsn: '',
        custId: '',
        socialCreditCode: '',
        industry: '',
        registerLocation: '',
        custLocation: '',
        status: '',
        businessScope: '',
        gridUserName: '',
        belongUserName: '',
        belongUserId: '',
        updateTime: ''
      },
      registerLocationNum: '',
      registerLocationStr: '',
      custLocationNum: '',
      custLocationStr: '',
      rules: {
        // socialCreditCode: [{ required: true, message: '请输入', trigger: 'blur' }],
        // custName: [{ required: true, message: '请输入', trigger: 'blur' }],
        // lpName: [{ required: true, message: '请输入', trigger: 'blur' }],
        // custGender: [{ required: true, message: '请选择', trigger: 'change' }],
        // custAge: [{ required: true, message: '请选择', trigger: 'change' }],
        // custIdc: [{ required: true, validator: validateCustIdc, trigger: 'blur' }],
        // custPhone: [{ validator: validatePhone, trigger: 'blur' }],
        // birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
      },
      statusList: [],
      genderList: [
        { label: '男', value: '男' },
        { label: '女', value: '女' }
      ],
      canEdit: false,
      isEditing: false,
      visitList: [{ date: '2020-12-12' }, { date: '2020-12-16' }],
      zfVisible: false,
      formObj: {
        campaignId: ''
      },
      taskOptions: [],
      formRules: {
        campaignId: [
          {
            required: true,
            message: '任务不能为空',
            trigger: 'blur'
          }
        ]
      },
      isAddTag: false,
      newTag: '',
      affiliatedData: [],
      signedProducts: {},
      adressOptions: [],
      regAddress: {
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            const nodes = []
            const query = {
              level: node.level + 1,
              code: node.level == 0 ? '33' : node.value.value
            }
            getAddressTree(query).then((res) => {
              res.data.map((item) => {
                const obj = {
                  value: item,
                  label: item.label,
                  leaf: item.level >= 5
                }
                nodes.push(obj)
              })

              resolve(nodes)
            })
          }, 500)
        }
      },
      originTagList: [],
      editTag: false,
      tagsList: [],
      cliList: [],
      industryOptions: [],
      industryStr: '',
      addressTitle: '',
      addressVisible: false,
      addressList: [],
      adressArr: [],
      visitRecords: [],
      bzForm:{
        label:"",
        oldLabel:"",
      },
      bzRules:{},
      bzFlag:true,
      tagName:[],
      tagProps:{
        label:"names",
        value:"names",
        children:"children"
      },
      selectTagsList:[],
      showTagsList:[],
      addTagName:"",
      newCustTag:[],
      tagManualList: [],
      secondVisitShow: false,
      secoureShow: false,
      secondForm: {
        visitTime: null
      },
      secondRules: {
        visitTime: [{ required: true, message:'请选择走访时间', trigger:'change' }]
      },
      secoureOption: [],
      secoureForm: {
        // userName: null,
        applyRemark: null
      },
      secoureRules: {
        // userName: [{ required: true, message:'请选择客户经理', trigger:'change' }],

      },
      authUser: '',
      deptOptions: [],
      userDeptList: null,
      managerOptions: [],
      tableData: [],
      columns: []
    }
  },
  watch: {
    userDeptList(val) {
      if (!val) {
        this.managerOptions = []
        this.authUser = ''
      }
    }
  },
  components: {
    Custom
  },
  computed: {
    ...mapGetters(['roles', 'userName', 'deptId']),
    isHeadAdmin() {
      return this.roles.includes('headAdmin')
    },
    // 公司部
    isPublic() {
      return this.roles.includes('headPublic')
    },
    // 零售部
    isPrivate() {
      return this.roles.includes('headPrivate')
    },
    // 是否932开头部门
    is932Dept() {
      return String(this.deptId || '').substring(0, 3) === '932'
    },
    // 运管部
    isHeadOps() {
      return this.roles.includes('headOps')
    },
    // 支行
    isBranchAdmin() {
      return this.roles.includes('branchAdmin')
    },
    // 网点主任
    isOutletAdmin() {
      return this.roles.includes('outletAdmin')
    },
    // 客户经理
    isCommonManager() {
      return this.roles.includes('commonManager')
    },
    pageId() {
      return this.$route.query.custId
    },
    // 海宁
    is875() {
      return this.userName.slice(0, 3) === '875'
    }
  },
  created() {
    // console.log(this.userName, 'userNameuserNameuserName')
    // if (this.userName.indexOf('875') === 0 || this.userName.indexOf('965') === 0) {
    //   if (!this.pageId) return
    //   getcustomLevel(1, this.pageId).then(res => {
    //     if (res.code === 200) {
    //       this.customLevel = res.data
    //     }
    //   })
    // }
    this.initRegStatus()
    this.initIndustryTree()
    this.initMerchantDetail()
    this.getDeptTreeSelect()
  },
  mounted() {
    // systemUserAllTreeUser().then(res => {
    //   this.secoureOption = res
    // })
  },
  methods: {
    handleAddTag(){
      if(!this.addTagName){
        this.$message.error('请输入客户标签')
        return;
      }
      let existsFlag=_.includes(_.map(this.showTagsList,'names'),this.addTagName)
      if(existsFlag){
        this.$message.error('客户标签已存在')
        return;
      }
      this.showTagsList.push({
        children: [],
        enableFlag: true,
        names: this.addTagName,
        type: "",
        useFlag: false,
      })
      this.updateListFn(this.showTagsList);
      this.newCustTag.push({
        custTagLevel1:this.tagName[0],
        custTagLevel2:this.tagName[1],
        custTagName:this.addTagName,
      })
      this.addTagName="";
    },
    bzEditFn(){
      if(this.bzFlag){
        this.bzForm.oldLabel=this.bzForm.label
      }else{
        this.bzForm.label=this.bzForm.oldLabel
      }
      this.bzFlag=!this.bzFlag
    },
    bzSaveFn(){
      systemRecordEditLable({
        custId:this.pageId,
        custType:"1",
        lable:this.bzForm.label
      }).then((res) => {
        this.$message.success('保存成功')
        this.bzFlag=true;
      })
    },
    initRegStatus() {
      getRegStatus().then((res) => {
        if (res.code == 200) {
          this.statusList = res.data.map((item) => {
            return {
              label: item.dictLabel,
              value: item.dictValue
            }
          })
        }
      })
    },
    initStatus(data) {
      const arr = this.statusList.filter((item) => item.value === data)
      if (arr && arr.length > 0) {
        return arr[0].label
      }
    },
    initIndustryTree() {
      getIndustryTree().then((res) => {
        this.industryOptions = res.data.map((item) => {
          return {
            value: item.code,
            label: item.name,
            children: item.industryTrees
          }
        })
        this.industryOptions.forEach((item) => {
          item.children.forEach((el) => {
            el.value = el.code
            el.label = el.name
          })
        })
        this.initIndustryBusiStr(this.baseForm.industry)
      })
    },
    initMerchantDetail() {
      getMerchantDetail(this.pageId).then((res) => {
        console.log(res, '0000000000000')
        if (res.code == 200) {
          this.baseForm = res.data.custInfoMerchant
          if (res.data.addressDetails && res.data.addressDetails.length > 0) {
            this.adressArr = res.data.addressDetails
          }
          this.baseHeaderForm.custName = res.data.custInfoMerchant.custName
          this.baseHeaderForm.socialCreditCode =
            res.data.custInfoMerchant.socialCreditCode
          this.signedProducts = res.data.signedProducts
            ? res.data.signedProducts
            : {}
          this.affiliatedData = res.data.corporateShareholders
          this.id = res.data.custInfoMerchant.id
          this.baseForm.community = res.data.community
          this.baseForm.xzLsGridName = res.data.xzLsGridName
          this.baseForm.xzLsGridUserName = res.data.xzLsGridUserName
          this.baseForm.xzYgGridName = res.data.xzYgGridName
          this.baseForm.xzYgGridUserName = res.data.xzYgGridUserName
          this.cliList = res.data.cmpmUserLists
          this.originTagList = cloneDeep(res.data.tabEnmuVos) || []
          this.tagsList = cloneDeep(res.data.tabEnmuVos) || []
          this.canEdit = res.data.radarCustFlag == '1'
          this.customLevel = res.data.custInfoMerchant.custLevel
          if (this.baseForm.recordStatus && this.baseForm.recordStatus != '0') {
            this.isShow = false
          } else {
            this.isShow = true
          }
          // if ((!this.baseForm.socialCreditCode || this.baseForm.socialCreditCode == '') && (!this.baseForm.custIsn || this.baseForm.custIsn == '')) {

          //   this.isShow = true
          // } else {

          //   this.isShow = false
          // }
          this.baseForm.industry = res.data.custInfoMerchant.industry
          this.baseForm.belongBusiness =
            res.data.custInfoMerchant.belongBusiness
          this.registerLocationStr = res.data.custInfoMerchant.registerLocation
          this.custLocationStr = res.data.custInfoMerchant.custLocation
          this.bzForm.label = res.data.custInfoMerchant.label||"";
          this.initGetVisitInfoList()
          this.selectTagsList=this.getTwoLevels(this.tagsList);
          this.tagName=[this.selectTagsList[0].names,this.selectTagsList[0].children[0].names];
          this.tableData = res.data.specialTagList
          if (this.tableData.length !== 0) {
            this.columns = Object.keys(this.tableData[0])
          }
          console.log(111, this.columns, this.tableData)
          this.showTagsList=this.tagsList[0].children[0].children||[];

          this.tagManualList = cloneDeep(res.data.tagManual) || []
        }
      })
    },
    getTwoLevels(nodes){
      return _.map(nodes, parent => ({
        names: parent.names,
        children: _.map(parent.children, child => ({
          names: child.names // 清除子节点的 children 属性
          // 或：_.omit(child, ['children']) // 如果需要保留其他属性
        }))
      }));
    },
    initIndustryBusiStr(data) {
      this.industryOptions.forEach((item) => {
        if (item.value == data) {
          this.industryStr = item.label
        } else {
          item.children.forEach((el) => {
            if (el.value == data) {
              this.industryStr = el.label
            }
          })
        }
      })
    },
    handleChangeBirthday(val) {
      const currentYear = new Date().getFullYear()
      const birthdayYear = Number(val.slice(0, 4))
      this.baseForm.custAge = currentYear - birthdayYear
    },
    handleClosefiling() {
      this.filingVisible = false
    },
    handlFilingCommit() {
      this.$router.push({ path: '/individual' })
    },
    goBackToIndex() {
      const { query } = this.$route
      if (query.backUrl) {
        this.$router.replace({
          path: query.backUrl,
          query
        })
      } else {
        this.$router.go(-1)
      }
    },
    handleEdit() {
      this.isEditing = true
      this.isSaveDisable = false
    },
    handleCancle() {
      this.isEditing = false
      this.isSaveDisable = true
      this.$refs.profileForm.clearValidate()
      this.initMerchantDetail()
    },
    handleCollapse(val) {},
    initgetVisitData() {
      getVisitData({ custId: this.pageId }).then((res) => {
        if (res.code == 200) {
          const list = res.data.addressDetails
          this.jydzList = list.filter((item) => item.addressName == '经营地址')
          this.zcdzList = list.filter((item) => item.addressName == '注册地址')
        }
      })
    },
    handleSave() {
      if (
        this.baseForm.custPhone == '' &&
        this.baseForm.registerLocation == null &&
        this.baseForm.custLocation == null
      ) {
        Message.warning('请输入手机号或者任意一个地址!')
      } else {
        this.$refs.profileForm.validate((valid) => {
          if (valid) {
            let registerLocationStrs = ''
            let custLocationStrs = ''
            // 户籍地址
            if (Array.isArray(this.baseForm.registerLocation)) {
              const registerLocationArr = this.baseForm.registerLocation.map(
                (item) => {
                  return item.label
                }
              )
              registerLocationStrs = registerLocationArr
                .join(' ')
                .replace(/\s/g, '')
            }
            // 住宅地址
            if (Array.isArray(this.baseForm.custLocation)) {
              const custLocationArr = this.baseForm.custLocation.map((item) => {
                return item.label
              })
              custLocationStrs = custLocationArr.join(' ').replace(/\s/g, '')
            }
            this.baseForm.registerLocation = Array.isArray(
              this.baseForm.registerLocation
            )
              ? `${registerLocationStrs}${this.registerLocationNum}`
              : this.baseForm.registerLocation
            this.baseForm.custLocation = Array.isArray(
              this.baseForm.custLocation
            )
              ? `${custLocationStrs}${this.custLocationNum}`
              : this.baseForm.custLocation
            this.baseForm.industry = Array.isArray(this.baseForm.industry)
              ? this.baseForm.industry.pop()
              : this.baseForm.industry
            updateMerchantDetail(this.baseForm).then((res) => {
              console.log(res, 'ressssssssssssss')
              if (res.code == 200) {
                Message.success('保存成功!')
                this.isEditing = false
                this.isSaveDisable = true
                this.initMerchantDetail()
                this.initIndustryTree()
              }
            })
          } else {
            return false
          }
        })
      }
    },
    handleExport() {
      exportMerchantDetail(this.pageId).then((res) => {
        downloadFiles(res, `商户详情_${new Date().getTime()}.xlsx`)
      })
    },
    handleClickTag(val) {
      if (!this.editTag || val.enableFlag == true) return
      this.showTagsList.filter(
        (item) => item.names === val.names
      )[0].enableFlag = true
      this.updateListFn(this.showTagsList);
    },
    handleCloseTag(val) {
      this.showTagsList.filter(
        (item) => item.names === val.names
      )[0].enableFlag = false
      this.updateListFn(this.showTagsList);
    },
    updateListFn(showTagsList){
      for(let i=0;i<this.tagsList.length;i++){
        if(this.tagsList[i].names == this.tagName[0]){
          for(let j=0;j<this.tagsList[i].children.length;j++){
            if(this.tagsList[i].children[j].names == this.tagName[1]){
              this.tagsList[i].children[j].children=showTagsList;
            }
          }
        }
      }
    },
    handleEditTag() {
      this.editTag = true
    },
    handleCancelEditTag() {
      this.editTag = false
      this.tagsList = cloneDeep(this.originTagList)
    },
    tagChangeFn(){
      for(let i=0;i<this.tagsList.length;i++){
        if(this.tagsList[i].names == this.tagName[0]){
          for(let j=0;j<this.tagsList[i].children.length;j++){
            if(this.tagsList[i].children[j].names == this.tagName[1]){
              this.showTagsList=this.tagsList[i].children[j].children||[];
            }
          }
        }
      }
    },
    collectNamesWithFlagTrue(nodes){
      return _.flatMap(nodes, (node) => {
        // 1. 收集当前节点的name（若 flag 为 true）
        const current = node.enableFlag ? [{custTagName: node.names, id: node.id}] : [];
        // 2. 递归处理 children（若存在）并获取子节点中符合的 name
        const children = _.get(node, 'children', []);
        const childNames = children.length
          ? this.collectNamesWithFlagTrue(children) // 递归处理子节点
          : [];
        // 3. 合并当前节点和子节点的结果
        return [...current, ...childNames];
      });
    },
    handleSaveTag() {
      const custTagList = this.collectNamesWithFlagTrue(this.tagsList)
      editCustTag({
        custTagList: custTagList,
        custId: this.$route.query.custId,
        newCustTags:this.newCustTag,
        custTagType:"ls"
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success('修改成功')
          this.originTagList = cloneDeep(this.tagsList)
          this.editTag = false
        }
      })
    },
    goIndexcharts(row) {
      // this.$router.push({ path: '/360charts/indexcharts/', query: { id: row.id } })
    },
    handleViewRegisterLocation() {
      this.addressTitle = '注册地址'
      this.addressVisible = true
      this.addressList = this.adressArr.filter(
        (item) => item.addressName == '注册地址'
      )
    },
    handleViewCustLocationStr() {
      this.addressTitle = '经营地址'
      this.addressVisible = true
      this.addressList = this.adressArr.filter(
        (item) => item.addressName == '经营地址'
      )
    },
    handleCollapse(val) {
      if (val == '0') {
        this.initgetVisitData()
      }
    },
    initGetVisitInfoList() {
      visitInfoList((this.pageId+"").substring(3), 1).then((res) => {
        if (res.code == 200) {
          // const arr = res.rows.map((item) => {
          //   return item.infoList
          // })
          // const list = arr.flat()
          // list.forEach((item) => {
          //   item.isRemarkEdit = true
          //   item.isZfEdit = item.visId == this.userName
          // })
          // this.visitRecords = JSON.parse(JSON.stringify(list))
          this.visitRecords = res.rows
        }
      })
    },
    handleClickRecord(item, index) {
      this.$set(this.visitRecords[index], 'isRemarkEdit', false)
    },
    handleCancleRecord(item, index) {
      this.initGetVisitInfoList()
    },
    handleCommitRecord(item, index) {
      const params = {
        id: item.id,
        remark: item.remark
      }
      editVisitInfo(params).then((res) => {
        if (res.code == 200) {
          Message.success('修改成功!')
          this.initGetVisitInfoList()
        }
      })
    },
    handleAddZf() {
      this.zfVisible = true
      this.searchCurrentExistTask()
    },
    handleCloseZf() {
      this.zfVisible = false
      this.formObj.campaignId = ''
    },
    handlZfCommit() {
      const params = {
        custName: this.baseForm.custName,
        custIdc: this.baseForm.custIdc,
        custPhone: this.baseForm.custPhone,
        custIsn: this.baseForm.custIsn,
        socialCreditCode: this.baseForm.socialCreditCode,
        lpName: this.baseForm.lpName,
        custId: this.baseForm.custId,
        campaignId: this.formObj.campaignId,
        custType: 1
      }
      addAppointCustCamp(params).then((res) => {
        if (res.code == 200) {
          this.zfVisible = false
          this.formObj.campaignId = ''
          Message.success('添加成功!')
        }
      })
    },
    searchCurrentExistTask() {
      const params = {
        custType: 1
      }
      getCurrentExistTask(params).then((res) => {
        if (res.code == 200) {
          this.taskOptions = res.data.map((item) => {
            return {
              label: item.campaignName,
              value: item.campaignId
            }
          })
        }
      })
    },
    handleSecondVisit() {
      this.secondVisitShow = true
    },
    handleCloseSecond() {
      this.secondVisitShow = false
      this.secondForm.visitTime = null
    },
    handleSubmitSecond() {
      this.$refs.secondRef.validate((valid) => {
        if(valid) {
          const params = {
            custIdc: this.baseForm.custId,
            custName: this.baseHeaderForm.custName,
            custType: 1
          }
          appointmentSecondVisit(this.secondForm.visitTime, params).then(res => {
            this.secondVisitShow = false
            this.$message.success(res.msg)
            this.secondForm.visitTime = null
          })
        }
      })
    },
    handleRecource() {
      this.secoureShow = true
    },
    handleCloseSecoure() {
      this.secoureShow = false
      this.secoureForm.userName = null
      this.secoureForm.applyRemark = null
    },
    handleSubmitSecoure() {
      this.$refs.secoureRef.validate((valid) => {
        if(valid) {
          // const nickName = this.secoureOption.filter(item => item.userName === this.secoureForm.userName)[0].nickName
          if (!this.authUser) {
            Message.success('客户经理不能为空!')
            return
          }
          const nickName = this.authUser.split('-')[1]
          const userName = this.authUser.split('-')[0]
          const params = {
            custIdc: this.baseForm.custId,
            custName: this.baseHeaderForm.custName,
            custType: 1,
            applyRemark: this.secoureForm.applyRemark
          }
          appointmentResourceAssist(userName, nickName, params).then(res => {
            this.secoureShow = false
            this.$message.success(res.msg)
            // this.secoureForm.userName = null
            this.secoureForm.applyRemark = null
            this.authUser = ''
            this.userDeptList = null
          })
        }
      })
    },
    getDeptTreeSelect() {
      systemUserDeptTreeAll().then((response) => {
        this.deptOptions = response.data
      })
    },
      // 选择归属机构
    onDeptTreeSelect(node) {
      this.fetchSelectOptions([node.id]);
    },
    // 取消勾选归属机构
    clearTreeSelect(node) {
      const index = this.checkedArr.findIndex((id) => id === node.id);
      if (index > -1) {
        this.checkedArr.splice(index, 1);
      }
      const { children = [] } = node;
      if (children.length > 0) {
        children.map((child) => {
          const index = this.checkedArr.findIndex((id) => id === child.id);
          if (index > -1) {
            this.checkedArr.splice(index, 1);
          }
        });
      }
    },
    onOrgTreeFocus() {
      // this.$refs.clientManager.blur()
    },
    onClientManagerFocus() {
      // this.$refs.orgTree.blurInput()
    },
    fetchSelectOptions(deptIds) {
      if (isEmpty(deptIds)) {
        return (this.managerOptions = []);
      }
      getUserListByDeptIds({ deptIds: deptIds }).then((response) => {
        this.managerOptions = response.data;
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.common-wrap-cnt {
  background-color: rgb(242, 243, 245);
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px 16px 0 0;
  height: calc(100vh - 135px);
  overflow-y: auto;
  padding: 10px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
}

.create-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  padding: 0 30px;

  .form-title {
    font-weight: 600;
    font-size: 18px;
    color: #222222;
    letter-spacing: 0.5px;
    line-height: 25px;
  }

  .form-operate {
  }
}

.common-create-main {
  padding: 20px;
  background-color: #ffffff;
  margin-top: 20px;
  border-radius: 10px;

  ::v-deep .el-form {
    .el-form-item {
      margin-bottom: 16px;

      .el-input__inner {
        border: 1px solid #ccc;
        color: #3d3d3d;
      }

      .el-input {
        width: 200px;
      }
    }

    .el-form-item__label {
      font-weight: 400;
      line-height: 38px;
      font-size: 14px;
      color: #3d3d3d;
      padding-right: 24px;
    }
  }
}

.edit-box {
  display: flex;
}

.t360-production {
  display: flex;
  align-items: center;
}

.t360-production-item {
  width: 250px;
  height: 43px;
  background: #eaf5ff;
  border-radius: 4px;
  text-align: center;
  line-height: 43px;
  margin-right: 20px;
  margin-top: 25px;
  margin-bottom: 25px;
}

.common-title {
  position: relative;
  color: #222222;
  line-height: 16px;
  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;
  }
}

.message-box {
  display: flex;
  margin: 20px;
}

.message-box-left {
  display: flex;
  width: 10%;
  justify-content: center;
  align-items: center;
}

.message-box-right-item {
  padding: 10px;
}

.tag-box {
  margin-bottom: 10px;
}

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

.wjd {
  background-color: rgb(222, 134, 143);
  color: #ffffff;
}

.affiliatedData {
  margin-top: 20px;
}

.title_box1 {
  position: relative;
}

.title_box1:hover .ejTitle {
  display: block;
}

.title_box2 {
  position: relative;
}

.title_box2:hover .ejTitle {
  display: block;
}

.title_box3 {
  position: relative;
}

.title_box3:hover .ejTitle {
  display: block;
}

.title_box4 {
  position: relative;
}

.title_box4:hover .ejTitle {
  display: block;
}

.profileForm {
  ::v-deep .el-form-item__content {
    padding-right: 20px;
  }
}

.ejTitle {
  width: 250px;
  line-height: 32px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 6px 16px 0 #1e1f2714;
  margin-right: 20px;
  margin-top: 8px;
  padding-left: 10px;
  padding-bottom: 10px;
  position: absolute;
  top: 80px;
  z-index: 10;
  display: none;
}

.ejTitle_item {
  line-height: 32px;
  font-size: 14px;
}

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

.qbdz {
  ::v-deep .el-form-item__content {
    display: flex;
  }
}

.quesiton {
  color: #b9b9b9;
}

.zfRemark {
  display: flex;
}

.remarkTitle {
  width: 70%;
}

.record_btn {
  margin-top: 20px;
}

.record_item {
  line-height: 30px;
}

.dzBox_top {
  display: flex;
}

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

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

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

  div {
    line-height: 25px;
  }
}

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

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

.headerForm {
  ::v-deep .el-form-item {
    margin-bottom: 0px;
  }

  ::v-deep .el-form-item__label {
    padding-right: 5px;
  }

  ::v-deep .el-form-item__content {
    display: flex;
    align-items: center;
  }
}

.header_top_left {
  display: flex;
}

.icon_box {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(231, 242, 255);
}

.header_icon_box {
  background-color: #4886f8;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header_icon {
  width: 28px;
  height: 28px;
}

.base-info {
  margin-left: 20px;
}

.wjd {
  margin-left: 20px;
}

.line {
  width: 100%;
  background-color: #ccc;
  height: 1px;
  margin: 15px 0;
}

::v-deep .el-collapse-item {
  margin-top: 15px;
  border-radius: 10px;
}

::v-deep .el-collapse-item__header {
  padding-left: 20px;
}

::v-deep .el-collapse-item__content {
  padding-left: 20px;
}

.my-form {
  ::v-deep .el-input {
    width: 300px;
  }
}

.bz_row_end{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 20px;
}

.user-info {
  margin-bottom: 5px;
  margin-left: 26px;
  display: flex;
  align-items: center;

  ::v-deep .vue-treeselect__control {
    width: 320px !important;
    height: 32px;
  }
  ::v-deep .el-input {
    width: 100%
  }

  span {
    width: 70px !important;
    margin-right: 10px;
    font-size: 14px;
    color: #606266;

    &::before {
      content: "*";
      left: -3px;
      color: #ff4d42;
      position: relative;
      top: 2px;
    }
  }

  .input-box {
    width: 320px !important;
  }
}
</style>