<template>
  <div class="common-wrap-cnt">
    <section class="header-top">
      <div class="header_top_left">
        <div class="icon_box">
          <div class="header_icon_box">
            <i class="header_icon el-icon-s-custom" />
          </div>
        </div>
        <div class="base-info">
          <el-form ref="profileForm" :model="baseHeaderForm" class="headerForm">
            <el-form-item prop="custName" label-width="25px" label=" ">
              <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 || !iscustName"
                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-input
                v-if="isEditing"
                v-model="baseHeaderForm.custName"
                maxlength="18"
              />
            </el-form-item>
            <el-form-item
              label-width="82px"
              prop="socialCreditCode"
              label="身份证号："
            >
              <span>{{ baseHeaderForm.custIdc }}</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 type="primary" size="small" @click="editProfile">{{
          editText
        }}</el-button>
        <el-button
          type="primary"
          size="small"
          :disabled="isSaveDisable"
          @click="saveAll"
        >保存</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
        v-if="profile"
        ref="profileForm"
        :model="profile"
        :rules="rules"
        class="profileForm"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item prop="custGender" label-width="85px">
              <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">{{ profile.custGender }}</span>
              <el-radio-group v-if="isEditing" v-model="profile.custGender">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="custAge" label-width="85px">
              <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">{{ profile.custAge }}</span>
              <el-input
                v-if="isEditing"
                v-model="profile.custAge"
                maxlength="3"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="115px" 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>{{ profile.custIdc }}</span>
              <!-- <el-input v-model="profile.custIdc" v-if="isEditing" maxlength="18"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <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">{{ profile.birthday }}</span>
              <el-date-picker
                v-if="isEditing"
                v-model="profile.birthday"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                @change="handleChangeBirthday"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="113px" 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">{{ profile.custPhone }}</span>
              <el-input
                v-if="isEditing"
                v-model="profile.custPhone"
                maxlength="11"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="115px">
              <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">{{ profile.isMarried }}</span>
              <el-select v-if="isEditing" v-model="profile.isMarried">
                <el-option
                  v-for="(item, index) in isMarriedList"
                  :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="99px">
              <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">{{ profile.custSalary }}</span>
              <el-input
                v-if="isEditing"
                v-model="profile.custSalary"
                maxlength="18"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="85px" prop="custEdu">
              <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">{{ profile.custEdu }}</span>
              <el-select v-if="isEditing" v-model="profile.custEdu">
                <el-option
                  v-for="(item, index) in custEduList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="115px" prop="belongBusi">
              <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(profile.belongBusi))
                  ? belongBusiStr
                  : profile.belongBusi
              }}</span>
              <el-cascader
                v-if="isEditing"
                v-model="profile.belongBusi"
                :options="industryOptions"
                :props="{
                  expandTrigger: 'hover',
                  label: 'label',
                  value: 'value',
                  checkStrictly: true,
                }"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户号：" prop="custId">
              <span>{{ profile.custId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="113px" prop="custIsn">
              <span slot="label">
                <el-tooltip
                  placement="top"
                  trigger="hover"
                  content="取核心数据"
                >
                  <span class="quesiton"><i class="el-icon-question" /></span>
                </el-tooltip>
                客户内码：
              </span>
              <span>{{ profile.custIsn }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="更新时间："
              prop="updateTime"
              label-width="98px"
            >
              <span>{{ profile.updateTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <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>{{ profile.community }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="!isHeadOps" :span="8">
            <el-form-item label="行政网格客户经理(零售部)：">
              <span>{{ profile.xzLsGridUserName }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="!isHeadOps" :span="8">
            <el-form-item label="行政归属网格(零售部)：">
              <span>{{ profile.xzLsGridName }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="!isPrivate" :span="8">
            <el-form-item label="行政网格客户经理(运管部)：">
              <span>{{ profile.xzYgGridUserName }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="!isPrivate" :span="8">
            <el-form-item label="行政归属网格(运管部)：">
              <span>{{ profile.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 ? `${profile.belongUserName}-${profile.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 jtdzList"
                  :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 hjdzList"
                  :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 gzdzList"
                  :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 class="dzBox_top">
            <div class="dzBox_item">
              <div class="dzBox_title">常住地址</div>
              <div class="dzBox_wapper">
                <div
                  v-for="(item, index) in czdzList"
                  :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 lxdzList"
                  :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 sfzdzList"
                  :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>
          <el-row :gutter="24" class="socialItem">
            <el-col :span="8">
              <span class="socialLabel">浙江省社保缴纳状态：</span>
              <span class="social">{{ socialSecurity.paymentStatus }}</span>
            </el-col>
            <el-col :span="8">
              <span class="socialLabel">参保单位类型：</span>
              <span class="social">{{ socialSecurity.unitType }}</span>
            </el-col>
            <el-col :span="8">
              <span class="socialLabel">参保单位所属行业：</span>
              <span class="social">{{ socialSecurity.belongBusi }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="socialItem">
            <el-col :span="8">
              <span class="socialLabel">参保单位经济类型：</span>
              <span class="social">{{ socialSecurity.economicType }}</span>
            </el-col>
            <el-col :span="8">
              <span class="socialLabel">优质客户标签：</span>
              <span class="social">{{ socialSecurity.qualityLabel }}</span>
            </el-col>
            <el-col :span="8">
              <span class="socialLabel">参保单位缴费基数排名：</span>
              <span class="social">{{ socialSecurity.paymentBaseRank }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="socialItem">
            <el-col :span="8">
              <span class="socialLabel">参保单位缴费人数排名：</span>
              <span class="social">{{ socialSecurity.paymentCountRank }}</span>
            </el-col>
            <el-col :span="8">
              <span class="socialLabel">参保单位缴费类型：</span>
              <span class="social">{{ socialSecurity.paymentType }}</span>
            </el-col>
            <el-col :span="8">
              <span class="socialLabel">客户参保状态：</span>
              <span class="social">{{ socialSecurity.insuranceStatus }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="socialItem">
            <el-col :span="8">
              <span class="socialLabel">过去24个月参保单位数：</span>
              <span class="social">{{ socialSecurity.recentTwoYearsCount }}</span>
            </el-col>
            <el-col :span="8">
              <span class="socialLabel">过去12个月参保单位数：</span>
              <span class="social">{{ socialSecurity.recentOneYearsCount }}</span>
            </el-col>
            <el-col :span="8">
              <span class="socialLabel">过去24个月平均缴费基数：</span>
              <span class="social">{{ socialSecurity.paymentBase }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="socialItem">
            <el-col :span="8">
              <span class="socialLabel">单位/个人是否命中被劳动仲裁：</span>
              <span class="social">{{ socialSecurity.labourArbitration }}</span>
            </el-col>
            <el-col :span="8">
              <span class="socialLabel">单位/个人是否命中拖欠工资黑名单：</span>
              <span class="social">{{ socialSecurity.blackList }}</span>
            </el-col>
            <el-col :span="8">
              <span class="socialLabel">当前社保缴费基数：</span>
              <span class="social">{{ socialSecurity.paymentBase }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="socialItem">
            <el-col :span="8">
              <span class="socialLabel">领取养老待遇标签：</span>
              <span class="social">{{ socialSecurity.receivePensionBenefits }}</span>
            </el-col>
            <el-col :span="8">
              <span class="socialLabel">领取失业待遇标签：</span>
              <span class="social">{{ socialSecurity.receiveUnemploymentBenefits }}</span>
            </el-col>
            <el-col :span="8">
              <span class="socialLabel">当前社保缴费基数：</span>
              <span class="social">{{ socialSecurity.paymentBase }}</span>
            </el-col>
          </el-row>
        </el-collapse-item> -->
      <!-- <el-collapse-item name="2">
          <template slot="title">
            <p class="common-title">公积金信息</p>
          </template>
          <div style="margin-top: 30px">
            <el-empty description="公积金信息准备中..."></el-empty>
          </div>
        </el-collapse-item> -->
      <!-- <el-collapse-item name="3">
          <template slot="title">
            <p class="common-title">征信信息</p>
          </template>
          <div style="margin-top: 30px">
            <el-empty description="征信信息准备中..."></el-empty>
          </div>
          <div class="zxxx">
            <el-row class="zxxx_top">
              <el-col :span="4" class="zxxx_top_title">推荐利率：2.1%</el-col>
              <el-col :span="5"><el-button>利率测算</el-button></el-col>
              <el-col :span="5" class="zxxx_top_title">推荐利率测算时间：2024-12-31</el-col>
            </el-row>
            <div class="zxxx_table">
              <div class="add_btn">
                <el-button type="primary" size="small" @click="addzx">新增</el-button>
              </div>
              <el-table :data="zxData" class="zxData">
                <el-table-column label="他行名称" align="center" prop="bank"></el-table-column>
                <el-table-column label="利率" align="center" prop="rate"></el-table-column>
                <el-table-column label="数据来源" align="center" prop="source"></el-table-column>
                <el-table-column label="更新时间" align="center" prop="updateTime"></el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" @click="editzx(scope.row)">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-collapse-item> -->
      <el-collapse-item name="4">
        <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="5">
        <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>
      <!-- 莲都-特色客户标签 -->
      <el-collapse-item name="11" v-if="userName.indexOf('931') === 0">
        <template slot="title">
          <p class="common-title">特色客户标签</p>
        </template>
        <el-form class="lianduForm">
          <el-row>
            <el-col :span="8" v-for="item in ldCustomTags" :key="item.label">
              <el-form-item
                :label="item.label + '：'" 
                :prop="item.label"
              >
                <span>{{ item.value }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <Custom :tagManualList="tagManualList" name="自定义标签" nameKey="10" typeKey="ls" @getDetailData="getDetailData" />
      <el-collapse-item name="6">
        <template slot="title">
          <p class="common-title">
            走访记录（总共走访{{ visitRecords.length }}次）
          </p>
        </template>
        <el-timeline v-if="visitRecords.length > 0" style="margin-top: 30px">
          <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="custIdc"
              label="客户证件号"
              show-overflow-tooltip
              width="200px"
            ></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-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="plain"
                  size="small"
                  @click="handleCommitRecord(record, index)"
                >保存</el-button>
                <el-button
                  v-if="!record.isRemarkEdit"
                  type="primary"
                  size="small"
                  @click="handleCancleRecord(record, index)"
                >取消</el-button>
              </div>
            </el-card>
          </el-timeline-item> -->
        </el-timeline>
        <!-- <el-button v-if="!visitRecords.length > 0" type="text">暂无走访记录</el-button> -->
      </el-collapse-item>
      <CustContact :custId="pageId" v-if="is875" name="客户接触记录" nameKey="12" />
      <!-- <el-collapse-item name="7">
          <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>
          <div style="margin-top: 30px">
            <el-table :data="merchantList" class="affiliatedData">
              <el-table-column label="商户名称" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="goMerchantDetail(scope.row)">{{ scope.row.custName }}</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-table :data="businessList" class="affiliatedData">
              <el-table-column label="企业名称" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="goBusinessDetail(scope.row)">{{ scope.row.custName }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item> -->

      <el-collapse-item name="8">
        <template slot="title">
          <p class="common-title">关系图谱</p>
        </template>
        <div style="margin-top: 30px">
          <el-tabs v-model="tabActiveName">
            <el-tab-pane label="列表视角" name="1">
              <el-table :data="gxData" class="affiliatedData">
                <el-table-column label="姓名" align="center" prop="name" />
                <el-table-column label="关系" align="center" prop="callName" />
                <el-table-column
                  label="身份证号"
                  align="center"
                  prop="idCard"
                />
                <el-table-column label="年龄" align="center" prop="age" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="家族图谱" name="2">
              <el-button
                type="primary"
                @click="handleGoFamily"
              >家庭族谱</el-button>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-collapse-item>
    </el-collapse>

    <el-dialog
      title="添加成员信息"
      :visible.sync="familyVisible"
      width="500px"
      :before-close="handleClosefamily"
      class="fimalyDialog"
    >
      <el-form
        ref="fimalyForm"
        :model="fimalyForm"
        label-width="100px"
        :rules="familyRules"
      >
        <el-form-item prop="fmyName" label="姓名">
          <el-input v-model="fimalyForm.fmyName" maxlength="16" />
        </el-form-item>
        <el-form-item prop="fmyRln" label="关系">
          <el-select v-model="fimalyForm.fmyRln">
            <el-option
              v-for="(item, index) in FmyRlnList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="tel" label="手机号">
          <el-input v-model="fimalyForm.tel" />
        </el-form-item>
        <el-form-item prop="fmyCustIdc" label="身份证号">
          <el-input v-model="fimalyForm.fmyCustIdc" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="person-footer">
        <el-button @click="handleClosefamily">取消</el-button>
        <el-button
          type="primary"
          class="commit_btn"
          @click="handlFimalyCommit"
        >确定</el-button>
      </span>
    </el-dialog>
    <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="他行利率"
      :visible.sync="thllVisible"
      width="500px"
      :before-close="handleClosefamily"
      class="fimalyDialog"
    >
      <el-form
        ref="thllForm"
        :model="thllForm"
        label-width="100px"
        :rules="thllRules"
      >
        <el-form-item prop="bank" label="他行名称">
          <el-input v-model="thllForm.bank" maxlength="16" />
        </el-form-item>
        <el-form-item prop="rate" label="利率">
          <el-input v-model="thllForm.rate" maxlength="16" />
        </el-form-item>
        <el-form-item prop="source" label="数据来源">
          <el-input v-model="thllForm.source" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="person-footer">
        <el-button @click="handleClosethll">取消</el-button>
        <el-button
          type="primary"
          class="commit_btn"
          @click="handlThllcommit"
        >确定</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="remark" label="备注">
          <el-input v-model="secoureForm.remark" :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 {
  updateCust,
  getInfoByCustId,
  addFamily,
  getIndustryTree,
  getIndividualfold,
  addThll,
  editThll,
  getInfoByCustIdc,
  exportRetailDetail,
  listByIdCard,
  getVisitInfoList,
  editVisitInfo,
  editCustTag,
  editCustTag1,
  getcustomLevel,
  appointmentSecondVisit,
  systemUserAllTreeUser,
  appointmentResourceAssist
} from '@/api/system/listByRetailKeywords.js'
import { Message } from 'element-ui'
import { getVisitData } from '@/api/task/taskList.js'
import { getAddressTree, getDetailRegion, systemUserDeptTreeAll } from '@/api/grid/address/tree.js'
import { getCurrentExistTask,systemRecordEditLable } from '@/api/system/grouplist'
import { addAppointCustCamp, getTagSearch } from '@/api/grid/mycustomer.js'
import { getUserListByDeptIds } from "@/api/grid/region.js";
import { custEduList } from '../custEdu'
import { downloadFiles } from '@/utils'
import { mapGetters } from 'vuex'
import { cloneDeep, isEmpty } from 'lodash'
import _ from 'lodash'
import Custom from '../custom.vue'
import CustContact from '../custContact.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: '',
        custIdc: ''
      },
      custEduList,
      activeName: '',
      isSaveDisable: true,
      filingVisible: false,
      isShow: false,
      iscustName: false,
      iscustGender: false,
      isbelongBusi: false,
      iscustPhone: false,
      iscustSalary: false,
      isbirthday: false,
      isactiveBranchName: false,
      isbelongUserName: false,
      isrisk: false,
      isEditing: false,
      editText: '编辑',
      newTag: '',
      cliList: [],
      originTagList: [],
      editTag: false,
      tagsList: [],
      isAddTag: false,
      tabActiveName: '1',
      registerLocationNum: '',
      custLocationNum: '',
      jobLocationNum: '',
      profile: {},
      zfVisible: false,
      formObj: {
        campaignId: ''
      },
      taskOptions: [],
      formRules: {
        campaignId: [
          {
            required: true,
            message: '任务不能为空',
            trigger: 'blur'
          }
        ]
      },
      visitRecords: [],
      isMarriedList: [
        {
          label: '未婚',
          value: '未婚'
        },
        {
          label: '已婚',
          value: '已婚'
        },
        {
          label: '离异',
          value: '离异'
        }
      ],

      rules: {
        // custName: [{ required: true, message: '请输入', trigger: 'blur' }],
        // custGender: [{ required: true, message: '请选择', trigger: 'change' }],
        // custAge: [{ required: true, message: '请输入', trigger: 'blur' }],
        // custIdc: [{ required: true, validator: validateCustIdc, trigger: 'blur' }],
        // birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
        // custPhone: [{ validator: validatePhone, trigger: 'blur' }],
      },
      signedProducts: {},
      familyData: [],
      gxData: [],
      merchantList: [],
      businessList: [],
      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)
        }
      },
      familyVisible: false,
      fimalyForm: {
        fmyName: '',
        fmyRln: '',
        tel: '',
        fmyCustIdc: ''
      },
      familyRules: {
        fmyName: [{ required: true, message: '请输入', trigger: 'blur' }],
        fmyRln: [{ required: true, message: '请选择', trigger: 'change' }],
        tel: [{ required: true, validator: validatePhone, trigger: 'blur' }]
      },
      FmyRlnList: [
        { label: '父亲', value: '父亲' },
        { label: '母亲', value: '母亲' },
        { label: '祖父', value: '祖父' },
        { label: '祖母', value: '祖母' },
        { label: '儿子', value: '儿子' },
        { label: '女儿', value: '女儿' },
        { label: '孙子', value: '孙子' },
        { label: '孙女', value: '孙女' },
        { label: '兄弟', value: '兄弟' },
        { label: '表兄弟', value: '表兄弟' },
        { label: '堂兄弟', value: '堂兄弟' },
        { label: '姐妹', value: '姐妹' },
        { label: '表姐妹', value: '表姐妹' },
        { label: '堂姐妹', value: '堂姐妹' },
        { label: '妻子', value: '妻子' },
        { label: '丈夫', value: '丈夫' }
      ],
      belongBusiStr: '',
      registerLocationStr: '',
      custLocationStr: '',
      jobLocationStr: '',
      industryOptions: [],
      sbCustIdc: '',
      socialSecurity: '',
      zxData: [],
      thllVisible: false,
      thllForm: {},
      thllRules: {},
      thllDialog: '',
      addressTitle: '',
      addressVisible: false,
      addressList: [],
      adressArr: [],
      jtdzList: [],
      hjdzList: [],
      gzdzList: [],
      czdzList: [],
      lxdzList: [],
      sfzdzList: [],
      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,
        remark: null
      },
      secoureRules: {
        // userName: [{ required: true, message:'请选择客户经理', trigger:'change' }]
      },
      authUser: '',
      deptOptions: [],
      userDeptList: null,
      managerOptions: [],
      ldCustomTags: []
    }
  },
  watch: {
    userDeptList(val) {
      if (!val) {
        this.managerOptions = []
        this.authUser = ''
      }
    }
  },
  components: {
    Custom,
    CustContact
  },
  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(0, this.pageId).then(res => {
    //     if (res.code === 200) {
    //       this.customLevel = res.msg
    //     }
    //   })
    // }
    this.getDeptTreeSelect()
  },
  mounted() {
    this.getDetailData()
    // 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:"0",
        lable:this.bzForm.label
      }).then((res) => {
        this.$message.success('保存成功')
        this.bzFlag=true;
      })
    },
    initIndustryTree() {
      getIndustryTree().then((res) => {
        this.industryOptions = res.data.map((item) => {
          return {
            value: item.code,
            label: item.name,
            children: item.industryTrees
          }
        })
        console.log(this.industryOptions)
        this.industryOptions.forEach((item) => {
          item.children.forEach((el) => {
            el.value = el.code
            el.label = el.name
          })
        })
        this.initBelongBusiStr(this.profile.belongBusi)
      })
    },
    async getDetailData(fimId) {
      const id = fimId || this.pageId
      const { data } = await getInfoByCustId(id)
      this.initIndustryTree()
      this.profile = {
        ...data.custInfoRetail,
        custType:
          data.custInfoRetail.custType == 0
            ? '营销中'
            : data.custInfoRetail.custType == 1
              ? '已签约'
              : '未营销'
      }
      if (data.addressDetails && data.addressDetails.length > 0) {
        this.adressArr = data.addressDetails
      }
      this.baseHeaderForm.custName = this.profile.custName
      this.baseHeaderForm.custIdc = this.profile.custIdc
      this.profile.community = data.community
      this.profile.xzLsGridName = data.xzLsGridName
      this.profile.xzLsGridUserName = data.xzLsGridUserName
      this.profile.xzYgGridName = data.xzYgGridName
      this.profile.xzYgGridUserName = data.xzYgGridUserName
      this.cliList = data.cmpmUserLists
      this.sbCustIdc = data.custInfoRetail.custIdc
      this.customLevel = data.custInfoRetail.custLevel
      this.signedProducts = data.signedProducts ? data.signedProducts : {}
      this.familyData = data.familyMembers
      this.total = data.familyMembers ? data.familyMembers.length : []
      this.merchantList = data.merchantList
      this.businessList = data.businessList
      this.id = data.custInfoRetail.id
      this.originTagList = cloneDeep(data.tabEnmuVos) || []
      this.tagsList = cloneDeep(data.tabEnmuVos) || []

      if (this.profile.recordStatus && this.profile.recordStatus != '0') {
        this.isShow = false
      } else {
        this.isShow = true
      }
      // if ((!this.profile.recordStatus || this.profile.custIdc == '') && (!this.profile.custIsn || this.profile.custIsn == '')) {
      //   this.isShow = true
      // } else {
      //   this.isShow = false
      // }
      this.profile.belongBusi = data.custInfoRetail.belongBusi
      this.registerLocationStr = data.custInfoRetail.registerLocation
      this.custLocationStr = data.custInfoRetail.custLocation
      this.jobLocationStr = data.custInfoRetail.jobLocation
      this.bzForm.label = data.custInfoRetail.label||"";
      this.initGetVisitInfoList()
      this.selectTagsList=this.getTwoLevels(this.tagsList);
      this.tagName=[this.selectTagsList[0].names,this.selectTagsList[0].children[0].names];
      this.showTagsList=this.tagsList[0].children[0].children||[];

      this.tagManualList = cloneDeep(data.tagManual) || []
    },
    getTwoLevels(nodes){
      return _.map(nodes, parent => ({
        names: parent.names,
        children: _.map(parent.children, child => ({
          names: child.names // 清除子节点的 children 属性
          // 或：_.omit(child, ['children']) // 如果需要保留其他属性
        }))
      }));
    },
    initBelongBusiStr(data) {
      this.industryOptions.forEach((item) => {
        if (item.value == data) {
          this.belongBusiStr = item.label
        } else {
          item.children.forEach((el) => {
            if (el.value == data) {
              this.belongBusiStr = el.label
            }
          })
        }
      })
    },
    flattenArray(arr) {
      const result = []
      arr.forEach((item) => {
        if (Array.isArray(item)) {
          result.push(...this.flattenArray(item))
        } else {
          result.push(item)
        }
      })
      return result
    },
    handleChangeBirthday(val) {
      const currentYear = new Date().getFullYear()
      const birthdayYear = Number(val.slice(0, 4))
      this.profile.custAge = currentYear - birthdayYear
    },
    goBackToIndex() {
      const { query } = this.$route
      if (query.backUrl) {
        this.$router.replace({
          path: query.backUrl,
          query
        })
      } else {
        this.$router.go(-1)
      }
    },
    // splitTags() {
    //   const tagsArray = this.profile.label
    //     .replace(/,\s*/g, ',')
    //     .split(/,\s*|\s+/)
    //     .map((tag) => tag.trim())
    //   this.tags = tagsArray.filter((tag) => tag)
    // },
    editProfile() {
      this.isEditing = !this.isEditing
      if (this.isEditing === true) {
        this.editText = '退出编辑'
        this.isSaveDisable = false
      } else {
        this.editText = '编辑资料'
        this.$refs.profileForm.clearValidate()
        this.isSaveDisable = true
        this.getDetailData()
      }
    },
    saveAll() {
      if (
        this.profile.custPhone == '' &&
        this.profile.registerLocation == null &&
        this.profile.jobLocation == null &&
        this.profile.custLocation == null
      ) {
        Message.warning('请输入手机号或者任意一个地址!')
      } else {
        this.$refs.profileForm.validate((valid) => {
          if (valid) {
            let registerLocationStrs = ''
            let jobLocationStrs = ''
            let custLocationStrs = ''
            // 户籍地址
            if (Array.isArray(this.profile.registerLocation)) {
              const registerLocationArr = this.profile.registerLocation.map(
                (item) => {
                  return item.label
                }
              )
              registerLocationStrs = registerLocationArr
                .join(' ')
                .replace(/\s/g, '')
            }

            // 单位地址
            if (Array.isArray(this.profile.jobLocation)) {
              const jobLocationArr = this.profile.jobLocation.map((item) => {
                return item.label
              })
              jobLocationStrs = jobLocationArr.join(' ').replace(/\s/g, '')
            }

            // 住宅地址
            if (Array.isArray(this.profile.custLocation)) {
              const custLocationArr = this.profile.custLocation.map((item) => {
                return item.label
              })
              custLocationStrs = custLocationArr.join(' ').replace(/\s/g, '')
            }
            const params = {
              custName: this.baseHeaderForm.custName,
              custGender: this.profile.custGender,
              custAge: this.profile.custAge,
              custIdc: this.profile.custIdc,
              birthday: this.profile.birthday,
              custPhone: this.profile.custPhone,
              isMarried: this.profile.isMarried,
              custSalary: this.profile.custSalary,
              custEdu: this.profile.custEdu,
              belongBusi: Array.isArray(this.profile.belongBusi)
                ? this.profile.belongBusi.pop()
                : this.profile.belongBusi,
              custId: this.profile.custId,
              registerLocation: Array.isArray(this.profile.registerLocation)
                ? `${registerLocationStrs}${this.registerLocationNum}`
                : this.profile.registerLocation,
              custIsn: this.profile.custIsn,
              jobLocation: Array.isArray(this.profile.jobLocation)
                ? `${jobLocationStrs}${this.jobLocationNum}`
                : this.profile.jobLocation,
              custLocation: Array.isArray(this.profile.custLocation)
                ? `${custLocationStrs}${this.custLocationNum}`
                : this.profile.custLocation,
              updateTime: this.profile.updateTime,
              belongUserName: this.profile.belongUserName,
              XzlsGridUserName: this.profile.XzlsGridUserName,
              XzlsGridName: this.profile.XzlsGridName,
              XzYgGridUserName: this.profile.XzYgGridUserName,
              XzYgGridName: this.profile.XzYgGridName,
              community: this.profile.community,
              id: this.id
            }
            updateCust(params).then((response) => {
              if (response.code == 200) {
                Message.success('保存成功!')
                this.isSaveDisable = true
                this.getDetailData()
                this.initIndustryTree()
              }
            })
            this.isEditing = false
            this.editText = '编辑资料'
          } else {
            return false
          }
        })
      }
    },
    handleExport() {
      exportRetailDetail(this.pageId).then((res) => {
        downloadFiles(res, `个人详情_${new Date().getTime()}.xlsx`)
      })
    },
    cancelEdit() {
      this.isEditing = false
    },
    goFamilyDetail(item) {
      getInfoByCustIdc(item.fmyCustIdc).then((res) => {
        if (res.data) {
          const fimId = res.data.id
          this.getDetailData(fimId)
        } else {
          this.isShow = true
        }
      })
    },
    goMerchantDetail(item) {
      this.$router.push({
        path: '/360charts/commercial/',
        query: { custId: item.custId }
      })
    },
    goBusinessDetail(item) {
      this.$router.push({
        path: '/360charts/firm/',
        query: { custId: item.custId }
      })
    },
    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
        }
      })
    },
    handleCollapse(val) {
      if (val == '1' || val == '3') {
        // this.sbCustIdc
        // let custIdc = '142601199608096413'
        this.initFold(this.sbCustIdc)
      }
      if (val == '8') {
        this.initListByIdCard()
      }
      if (val == '0') {
        this.initgetVisitData()
      }
      if (val === '11' && this.userName.indexOf('931') === 0) {
        // 莲都特色客户标签
        this.queryLianduTag()
      }
    },
    initgetVisitData() {
      getVisitData({ custId: this.pageId }).then((res) => {
        if (res.code == 200) {
          const list = res.data.addressDetails
          this.jtdzList = list.filter((item) => item.addressName == '家庭地址')
          this.hjdzList = list.filter((item) => item.addressName == '户籍地址')
          this.gzdzList = list.filter((item) => item.addressName == '工作地址')
          this.czdzList = list.filter((item) => item.addressName == '常住地址')
          this.lxdzList = list.filter((item) => item.addressName == '联系地址')
          this.sfzdzList = list.filter(
            (item) => item.addressName == '身份证地址'
          )
        }
      })
    },
    queryLianduTag() {
      getTagSearch({ custIdc: this.profile.custIdc }).then((res) => {
        if (res.code == 200) {
          const { data = {} } = res
          this.ldCustomTags = Object.keys(data).map(key => {
            return {
              label: key,
              value: data[key]
            }
          }) 
        }
      })
    },
    initFold(custIdc) {
      if (custIdc != '') {
        getIndividualfold(custIdc).then((res) => {
          this.socialSecurity = res.data.socialSecurity
            ? res.data.socialSecurity
            : {}
          this.zxData = res.data.otherBankRates
        })
      }
    },
    initListByIdCard() {
      listByIdCard(this.profile.custIdc).then((res) => {
        if (res.code == 200) {
          this.gxData = res.rows
        }
      })
    },
    addFamily() {
      this.familyVisible = true
    },
    handleClosefamily() {
      this.fimalyForm = {}
      this.familyVisible = false
      this.$refs.fimalyForm.resetFields()
    },
    formDataPamars(json) {
      const params = []
      for (const key in json) {
        const value = json[key]
        if (value && typeof value === 'object' && !Array.isArray(value)) {
          params.push(
            ...Object.keys(value).map(
              (k) => `${key}[${k}]=${encodeURIComponent(value[k])}`
            )
          )
        } else if (Array.isArray(value)) {
          value.forEach((item) => {
            params.push(`${key}[]=${encodeURIComponent(item)}`)
          })
        } else {
          params.push(`${key}=${encodeURIComponent(value)}`)
        }
      }
      return params.join('&')
    },
    handlFimalyCommit() {
      this.$refs.fimalyForm.validate((valid) => {
        if (valid) {
          this.fimalyForm.custId = this.profile.custId
          addFamily(this.formDataPamars(this.fimalyForm)).then((res) => {
            if (res.code == 200) {
              Message.success(res.msg)
              this.familyVisible = false
              this.getDetailData()
              this.$refs.fimalyForm.resetFields()
            }
          })
        } else {
          return false
        }
      })
    },
    handleClosefiling() {
      this.filingVisible = false
    },
    handlFilingCommit() {
      this.$router.push({ path: '/individual' })
    },
    addzx() {
      this.thllVisible = true
      this.thllDialog = 'add'
    },
    editzx(row) {
      this.thllVisible = true
      this.thllForm = row
      this.thllDialog = 'edit'
    },
    handleClosethll() {
      this.thllVisible = false
      this.thllForm = {}
      this.initFold(this.sbCustIdc)
    },
    handlThllcommit() {
      if (this.thllDialog == 'add') {
        this.thllForm.custIdc = this.sbCustIdc
        addThll(this.formDataPamars(this.thllForm)).then((res) => {
          console.log(res, 'resssssssssss')
          this.thllVisible = false
          Message.success('新增成功!')
          this.initFold(this.sbCustIdc)
          this.thllForm = {}
        })
      } else {
        editThll(this.formDataPamars(this.thllForm)).then((res) => {
          console.log(res, 'edit')
          this.thllVisible = false
          Message.success('编辑成功!')
          this.initFold(this.sbCustIdc)
          this.thllForm = {}
        })
      }
    },
    handleViewRegisterLocation() {
      this.addressTitle = '户籍地址'
      this.addressVisible = true
      this.addressList = this.adressArr.filter(
        (item) => item.addressName == '户籍地址'
      )
    },
    handleViewJobLocation() {
      this.addressTitle = '工作地址'
      this.addressVisible = true
      this.addressList = this.adressArr.filter(
        (item) => item.addressName == '工作地址'
      )
    },
    handleViewCustLocation() {
      this.addressTitle = '家庭地址'
      this.addressVisible = true
      this.addressList = this.adressArr.filter(
        (item) => item.addressName == '家庭地址'
      )
    },
    handleGoFamily() {
      if (this.profile.custIdc) {
        this.$router.push({
          path: '/360charts/familyDetail',
          query: { custIdc: this.profile.custIdc }
        })
        // this.$confirm('是否跳转该客户家庭试图', '提示', {
        //   confirmButtonText: '确认',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //   this.$router.push({ path: '/360charts/familyDetail', query: { custIdc: this.profile.custIdc } })
        // }).catch(() => {
        //   Message.info('已取消')
        // })
      } else {
        Message.warning('改客户无证件号，故无法查看家庭图谱')
      }
    },
    initGetVisitInfoList() {
      getVisitInfoList((this.pageId+"").substring(3), 0).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
          console.log(this.visitRecords, 'this.visitRecordsthis.visitRecords')
        }
      })
    },
    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 = {
        custId: this.profile.custId,
        campaignId: this.formObj.campaignId,
        custType: 0
      }
      addAppointCustCamp(params).then((res) => {
        if (res.code == 200) {
          this.zfVisible = false
          this.formObj.campaignId = ''
          Message.success('添加成功!')
        }
      })
    },
    searchCurrentExistTask() {
      const params = {
        custType: 0
      }
      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.profile.custId,
            custName: this.baseHeaderForm.custName,
            custType: 0
          }
          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.remark = 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.profile.custId,
            custName: this.baseHeaderForm.custName,
            custType: 0,
            applyRemark: this.secoureForm.remark
          }
          appointmentResourceAssist(userName, nickName, params).then(res => {
            this.secoureShow = false
            this.$message.success(res.msg)
            // this.secoureForm.userName = null
            this.secoureForm.remark = 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>
@import "./create-style.scss";

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

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

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

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

.file-upload {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  height: 320px;

  .group-input {
    width: 702px;
    height: 288px;
    margin-top: 25px;
  }

  .group-select {
    width: 702px;
    height: 288px;
    margin-top: 25px;
  }

  .file-upload-bg {
    width: 702px;
    height: 288px;
    background: #f7f8fa;
    // display: flex;
    // align-items: center;
    // justify-content: center;
  }

  .el-icon-upload {
    text-align: center;
    font-size: 47.36px;
    color: #cccccc;
  }

  .file-upload-desc {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    letter-spacing: 0;
    text-align: center;
    line-height: 12px;
    margin-top: 8px;
  }

  .file-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin-top: 20px;
  }

  .file-upload-download {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    margin-top: 15px;
    font-size: 14px;
  }

  .file-upload-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    margin-top: 15px;
    font-size: 14px;
  }
}

.socialItem {
  padding-left: 20px;
  margin: 20px 0;
  font-size: 14px;
}

.preview-table {
  width: 100%;
  margin-top: 16px;
}

.preview-cnt {
  margin-top: 40px;
}

.chose-cnt {
  ::v-deep .el-form-item__content {
    display: flex;
    justify-content: space-between;

    .el-button {
      width: 88px;
      margin-left: 24px;
    }

    .el-select {
      flex: 1;
    }
  }
}

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

.lianduForm {
  ::v-deep label{
    font-weight: normal;
  }
  ::v-deep .el-form-item {
    margin-bottom: 2px;
  }
}

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

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

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

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

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

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

.add_btn {
  text-align: right;
  padding-bottom: 20px;
}

.fimalyDialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #ebedf0;
    padding-bottom: 10px;
  }

  ::v-deep .el-dialog__footer {
    border-top: 1px solid #ebedf0;
    padding-bottom: 10px;
  }

  ::v-deep .el-dialog__body {
    padding: 30px 37px;
  }

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

.zxxx_top {
  margin: 20px;
  font-size: 16px;
  font-weight: 600;
}

.zxxx_top_title {
  line-height: 36px;
}

.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: 33%;
  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;
}

.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 {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header_icon {
  font-size: 28px;
  color: #4886f8;
}

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

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

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

  ::v-deep .el-form {
    width: 100%;

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

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