<template>
  <div class="customer-wrap">
    <div>
      <el-radio-group class="header-radio" v-model="selectedTab" @input="handleChange">
        <el-radio-button label="企业" :disabled="isPrivate" :class="{ 'btn-disabled': isPrivate }">企业</el-radio-button>
        <el-radio-button label="个人" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">个人</el-radio-button>
        <el-radio-button label="商户" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">商户</el-radio-button>
      </el-radio-group>
      <section class="search-box" v-if="showSearch">
        <section class="search-cnt">
          <el-input v-model="searchQuery" :placeholder="searchPlace" clearable @clear="handleSearch(searchQuery)"
            @keyup.enter.native="handleSearch(searchQuery)">
          </el-input>
          <section class="search-btn" @click="handleSearch(searchQuery)">
            <i class="el-icon-search"></i>
          </section>
        </section>
      </section>
      <section class="operate-cnt">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="handleRefersh"
          style="margin-left: auto"></right-toolbar>
        <el-button type="primary" size="small" style="margin-left: 10px" @click="handleAdd">营销建档</el-button>
      </section>
      <div class="personage-box" v-if="isPersonage">
        <section class="table-wrap">
          <el-table :data="tableData" style="width: 100%" v-loading="perLoading">
            <el-table-column align="center" key="custName" width="400" label="" show-overflow-tooltip>
              <template slot="header" slot-scope="scope">
                <span>客户姓名</span>
                <el-tooltip placement="top" trigger="hover" content="建档输入/取核心数据" width="200">
                  <span class="quesiton"><i class="el-icon-question"></i></span>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <el-button type="text" @click="handleCustDetail(scope.row.custId)">{{ scope.row.custName }}</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" key="custIdc" prop="custIdc" label="">
              <template slot="header" slot-scope="scope">
                <span>证件号</span>
                <el-tooltip placement="top" trigger="hover" content="建档输入/取核心数据" width="200">
                  <span class="quesiton"><i class="el-icon-question"></i></span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column align="center" key="custPhone" prop="custPhone" label="">
              <template slot="header" slot-scope="scope">
                <span>联系方式</span>
                <el-tooltip placement="top" trigger="hover" content="建档输入/取信贷中心数据" width="200">
                  <span class="quesiton"><i class="el-icon-question"></i></span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column align="center" key="custId" prop="custId" label="客户号"></el-table-column>
          </el-table>
          <!-- 分页区域 -->
          <div class="personPage">
            <el-pagination layout="prev, pager, next, sizes" @current-change="handleCurrentChange" :page-size="pageSize"
              :page-sizes="[10, 20, 30, 50]" @size-change="handleSizeChange"></el-pagination>
          </div>

        </section>
      </div>
      <div class="commercial-box" v-if="isCommercial">
        <section class="table-wrap">
          <el-table :data="commercialTableData" style="width: 100%" v-loading="comLoading">
          <el-table-column align="center" width="400" show-overflow-tooltip label="">
            <template slot="header" slot-scope="scope">
              <span>商户名称</span>
              <el-tooltip placement="top" trigger="hover" content="建档输入/取新华社数据" width="200">
                <span class="quesiton"><i class="el-icon-question"></i></span>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-button type="text" @click="handleCommercialDetail(scope.row.custId)">{{ scope.row.custName }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="lpName">
            <template slot="header" slot-scope="scope">
              <span>企业法人</span>
              <el-tooltip placement="top" trigger="hover" content="建档输入/取核心法人表信息" width="200">
                <span class="quesiton"><i class="el-icon-question"></i></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="custIdc">
            <template slot="header" slot-scope="scope">
              <span>证件号</span>
              <el-tooltip placement="top" trigger="hover" content="建档输入/取核心法人表信息" width="200">
                <span class="quesiton"><i class="el-icon-question"></i></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="custPhone">
            <template slot="header" slot-scope="scope">
              <span>联系方式</span>
              <el-tooltip placement="top" trigger="hover" content="建档输入/取核心法人表信息" width="200">
                <span class="quesiton"><i class="el-icon-question"></i></span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination @size-change="commercialSizeChange" @current-change="commercialCurrentChange"
          :page-sizes="[10, 20, 30, 40]" :page-size="commercialPageSize" layout="->,total,sizes,prev,pager,next,sizes"
          :total="commercialTotal" :current-page="commercialPageNum"></el-pagination>
        </section>
        
      </div>
      <div class="firm-box" v-if="isFirm">
       
        <el-table :data="firmTableData" style="width: 100%" v-loading="firmLoading">
          <el-table-column align="center" width="400" show-overflow-tooltip >
            <template slot="header" slot-scope="scope">
              <span>企业名称</span>
              <el-tooltip placement="top" trigger="hover" content="建档输入/取新华社数据" width="200">
                <span class="quesiton"><i class="el-icon-question"></i></span>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-button type="text" @click="handleFirmDetail(scope.row.custId)">{{ scope.row.custName }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="lpName">
            <template slot="header" slot-scope="scope">
              <span>企业法人</span>
              <el-tooltip placement="top" trigger="hover" content="建档输入/取核心法人表信息" width="200">
                <span class="quesiton"><i class="el-icon-question"></i></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="custIdc">
            <template slot="header" slot-scope="scope">
              <span>证件号</span>
              <el-tooltip placement="top" trigger="hover" content="建档输入/取核心法人表信息" width="200">
                <span class="quesiton"><i class="el-icon-question"></i></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="custPhone">
            <template slot="header" slot-scope="scope">
              <span>联系方式</span>
              <el-tooltip placement="top" trigger="hover" content="建档输入/取核心法人表信息" width="200">
                <span class="quesiton"><i class="el-icon-question"></i></span>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页区域 -->
        <el-pagination @size-change="firmSizeChange" @current-change="firmCurrentChange" :page-sizes="[10, 20, 30, 40]"
          :page-size="firmPageSize" layout="->,total,sizes,prev,pager,next,sizes" :total="firmTotal"
          :current-page="firmPageNum"></el-pagination>
      </div>

    </div>
    <el-dialog title="个人营销建档" :visible.sync="addPersonDialogVisible" width="50%" :before-close="handleAddPersonClose"
      class="addDialog">
      <el-form ref="addPersonForm" :model="addPersonForm" label-width="130px" :rules="personRules">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custIdc" label="身份证号">
              <el-input v-model="addPersonForm.custIdc" @blur="changePersonCusIds(addPersonForm.custIdc)"
                maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="custName" label="姓名">
              <el-input v-model="addPersonForm.custName" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custGender" label="性别">
              <el-select v-model="addPersonForm.custGender">
                <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="birthday" label="出生日期">
              <el-date-picker v-model="addPersonForm.birthday" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custAge" label="年龄">
              <el-input v-model="addPersonForm.custAge" maxlength="3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="custPhone" label="手机号">
              <el-input v-model="addPersonForm.custPhone" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="registerLocation" label="户籍地址">
              <el-cascader v-model='addPersonForm.registerLocation' :props="regAddress">
                <template slot-scope="{node,data}">
                  <span>{{ data.label }}</span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="registerLocationNum" label="户籍地址门牌号">
              <el-input v-model="addPersonForm.registerLocationNum" maxlength="10"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="jobLocation" label="单位地址">
              <el-cascader v-model='addPersonForm.jobLocation' :props="regAddress">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="jobLocationNum" label="单位地址门牌号">
              <el-input v-model="addPersonForm.jobLocationNum" maxlength="10"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custLocation" label="住宅地址">
              <el-cascader v-model='addPersonForm.custLocation' :props="regAddress">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="custLocationNum" label="住宅地址门牌号">
              <el-input v-model="addPersonForm.custLocationNum" maxlength="10"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="isMarried" label="婚姻状况">
              <el-select v-model="addPersonForm.isMarried">
                <el-option v-for="(item, index) in isMarriedList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="custEdu" label="学历">
              <el-input v-model="addPersonForm.custEdu" maxlength="10"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custSalary" label="年收入">
              <el-input v-model.number="addPersonForm.custSalary" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="belongBusi" label="行业名称">
              <el-cascader v-model='addPersonForm.belongBusi' :options="industryOptions"
                :props="{ expandTrigger: 'hover', label: 'label', value: 'value', checkStrictly: true }">
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">

          <el-col :span="12">
            <el-form-item prop="relateMerchant" label="关联商户">
              <el-input v-model="addPersonForm.relateMerchant" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="relateBusiness" label="关联企业">
              <el-input v-model="addPersonForm.relateBusiness" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">

          <el-col :span="12">
            <el-form-item prop="fmyName" label="家庭成员">
              <el-input v-model="addPersonForm.fmyName" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="fmyRln" label="成员与本人关系">
              <el-select v-model="addPersonForm.fmyRln">
                <el-option v-for="(item, index) in FmyRlnList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">

          <el-col :span="12">
            <el-form-item prop="fmyTel" label="成员手机号">
              <el-input v-model="addPersonForm.fmyTel" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="fmyBusi" label="成员行业">
              <el-cascader v-model='addPersonForm.fmyBusi' :options="industryOptions"
                :props="{ expandTrigger: 'hover', label: 'label', value: 'value', checkStrictly: true }"
                :show-all-levels="false">
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="belongBranchId" label="客户经理归属机构">
              <el-cascader v-model='addPersonForm.belongBranchId' :options="departOptions"
                :props="{ expandTrigger: 'hover', label: 'label', value: 'id', checkStrictly: true }"
                @change="changeBranchName(addPersonForm.belongBranchId)">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="perUserSelect" label="客户经理">
              <el-select v-model="addPersonForm.perUserSelect" @focus="selectUser">
                <el-option v-for="(item, index) in userList" :key="index" :label="item.label" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="person-footer">
        <el-button @click="handleAddPersonClose">取消</el-button>
        <el-button type="primary" @click="handleAddPersonCommit" class="commit_btn" :loading="isPerLoading">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="商户营销建档" :visible.sync="addCommercialVisible" width="50%" :before-close="handleCommercialClose"
      class="addDialog">
      <el-form ref="addCommercialForm" :model="addCommercialForm" label-width="130px" :rules="commercialRules">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custIdc" label="身份证号">
              <el-input v-model="addCommercialForm.custIdc" @blur="changeCommerCustIdc(addCommercialForm.custIdc)"
                maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="lpName" label="经营者姓名">
              <el-input v-model="addCommercialForm.lpName" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custGender" label="性别">
              <el-select v-model="addCommercialForm.custGender">
                <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="birthday" label="出生日期">
              <el-date-picker v-model="addCommercialForm.birthday" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custAge" label="年龄">
              <el-input v-model="addCommercialForm.custAge" maxlength="3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="custPhone" label="经营手机号">
              <el-input v-model="addCommercialForm.custPhone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custLocation" label="经营地址">
              <el-cascader v-model='addCommercialForm.custLocation' :props="regAddress">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="custLocationNum" label="经营地址门牌号">
              <el-input v-model="addCommercialForm.custLocationNum" maxlength="18"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="registerLocation" label="注册地址">
              <el-cascader v-model='addCommercialForm.registerLocation' :props="regAddress">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="registerLocationNum" label="注册地址门牌号">
              <el-input v-model="addCommercialForm.registerLocationNum" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="socialCreditCode" label="统信码">
              <el-input v-model="addCommercialForm.socialCreditCode" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="custName" label="商户名称">
              <el-input v-model="addCommercialForm.custName" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="businessScope" label="经营范围">
              <el-input v-model="addCommercialForm.businessScope" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="status" label="经营状态">
              <el-select v-model="addCommercialForm.status">
                <el-option v-for="(item, index) in statusList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="industry" label="行业名称">
              <el-cascader v-model='addCommercialForm.industry' :options="industryOptions"
                :props="{ expandTrigger: 'hover', label: 'label', value: 'value', checkStrictly: true }">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="relatePerson" label="关联人">
              <el-input v-model="addCommercialForm.relatePerson" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="belongBranchId" label="客户经理归属机构">
              <el-cascader v-model='addCommercialForm.belongBranchId' :options="departOptions"
                :props="{ expandTrigger: 'hover', label: 'label', value: 'id', checkStrictly: true }"
                @change="changeBranchName(addCommercialForm.belongBranchId)">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="comUserSelect" label="客户经理">
              <el-select v-model="addCommercialForm.comUserSelect" @focus="selectUser">
                <el-option v-for="(item, index) in userList" :key="index" :label="item.label" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="person-footer">
        <el-button @click="handleCommercialClose">取消</el-button>
        <el-button type="primary" @click="handleCommercialCommit" class="commit_btn"
          :loading="isCommerLoading">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="企业营销建档" :visible.sync="addFirmVisible" width="50%" :before-close="handleFirmlClose"
      class="addDialog">
      <el-form ref="addFirmForm" :model="addFirmForm" label-width="130px" :rules="firmRules">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custIdc" label="身份证号">
              <el-input v-model="addFirmForm.custIdc" @blur="changeFirmCustIdc(addFirmForm.custIdc)"
                maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="lpName" label="法人姓名">
              <el-input v-model="addFirmForm.lpName" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custGender" label="性别">
              <el-select v-model="addFirmForm.custGender">
                <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="birthday" label="出生日期">
              <el-date-picker v-model="addFirmForm.birthday" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custAge" label="年龄">
              <el-input v-model="addFirmForm.custAge" maxlength="3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="custPhone" label="法人手机号">
              <el-input v-model="addFirmForm.custPhone" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custLocation" label="经营地址">
              <el-cascader v-model='addFirmForm.custLocation' :props="regAddress">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="custLocationNum" label="经营地址门牌号">
              <el-input v-model="addFirmForm.custLocationNum" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="registerLocation" label="注册地址">
              <el-cascader v-model='addFirmForm.registerLocation' :props="regAddress">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="registerLocationNum" label="注册地址门牌号" label-width="130px">
              <el-input v-model="addFirmForm.registerLocationNum" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="socialCreditCode" label="统信码">
              <el-input v-model="addFirmForm.socialCreditCode" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="custName" label="企业名称">
              <el-input v-model="addFirmForm.custName" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="businessScope" label="经营范围">
              <el-input v-model="addFirmForm.businessScope" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="status" label="经营状态">
              <el-select v-model="addFirmForm.status">
                <el-option v-for="(item, index) in statusList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="custCapital" label="注册资本">
              <el-input v-model="addFirmForm.custCapital" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="industry" label="行业名称">
              <el-cascader v-model='addFirmForm.industry' :options="industryOptions"
                :props="{ expandTrigger: 'hover', label: 'label', value: 'value', checkStrictly: true }">
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="tel" label="企业电话">
              <el-input v-model="addFirmForm.tel" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="relatePerson" label="关联人">
              <el-input v-model="addFirmForm.relatePerson" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="belongBranchId" label="客户经理归属机构">
              <el-cascader v-model='addFirmForm.belongBranchId' :options="departOptions"
                :props="{ expandTrigger: 'hover', label: 'label', value: 'id', checkStrictly: true }"
                @change="changeBranchName(addFirmForm.belongBranchId)">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="firmUserSelect" label="客户经理">
              <el-select v-model="addFirmForm.firmUserSelect" @focus="selectUser">
                <el-option v-for="(item, index) in userList" :key="index" :label="item.label" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <span slot="footer" class="person-footer">
        <el-button @click="handleFirmlClose">取消</el-button>
        <el-button type="primary" @click="handleFirmCommit" class="commit_btn" :loading="isFirmLoading">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { listByKeyword, listSelectDetail, commerciaList, businessList, addRetailRecord, getIndustryTree, getInfoByCustIdc, addMerchantRecord, addBusinessRecord } from '@/api/system/listByRetailKeywords.js'
// const getToken = require('@/utils/auth.js')
import { getToken } from '@/utils/auth.js'
import Cookies from "js-cookie";
import { getUserProfile } from '@/api/grid/anchor.js'
import { Message } from 'element-ui'
import { getDeptTree, getDeptUserTree, getAddressTree, deptTreeByManager } from "@/api/grid/address/tree.js";
import { mapGetters } from 'vuex'
export default {

  data() {
    var validatePhone = (rule, value, callback) => {
      if (!value?.trim()) {
        return callback(new Error('请输入手机号'))
      }
      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 fmyTelPhone = (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 {
      perLoading: false,
      comLoading: false,
      firmLoading: false,
      isPerLoading: false,
      isCommerLoading: false,
      isFirmLoading: false,
      showSearch: true,
      selectedTab: '企业',
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      searchQuery: '',

      isPersonage: false,
      isCommercial: false,
      isFirm: true,
      searchPlace: '输入客户名/证件号/手机号',
      commercialTableData: [],
      commercialPageSize: 10,
      commercialPageNum: 1,
      commercialTotal: 0,
      firmTableData: [],
      firmTotal: 0,
      firmPageSize: 10,
      firmPageNum: 1,
      addPersonDialogVisible: false,
      addCommercialVisible: false,
      addFirmVisible: false,
      addPersonForm: {
        custIdc: '',
        custName: '',
        custGender: '',
        birthday: '',
        custAge: '',
        custPhone: '',
        registerLocation: '',
        registerLocationNum: '',
        jobLocation: '',
        jobLocationNum: '',
        custLocation: '',
        custLocationNum: '',
        isMarried: '',
        custEdu: '',
        custSalary: '',
        belongBusi: '',
        relateMerchant: '',
        relateBusiness: '',
        fmyName: '',
        fmyRln: '',
        fmyTel: '',
        fmyBusi: '',
        belongUserId: '',
        belongBranchName: '',
        belongBranchId: '',
        perUserSelect: null
      },
      adressOptions: [],
      isMarriedList: [
        {
          label: '未婚',
          value: '未婚'
        },
        {
          label: '已婚',
          value: '已婚'
        },
        {
          label: '离异',
          value: '离异'
        }
      ],
      industryOptions: [],
      userList: [],
      departOptions: [],
      deptOptions: [],
      personRules: {
        custIdc: [{ required: true, validator: validateCustIdc, trigger: 'blur' }],
        custName: [{ required: true, message: '请输入', trigger: 'blur' }],
        custGender: [{ required: true, message: '请输入', trigger: 'change' }],
        birthday: [{ required: true, message: '请输入', trigger: 'blur' }],
        custAge: [{ required: true, message: '请输入', trigger: 'blur' }],
        custPhone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        registerLocation: [{ required: true, message: '请选择', trigger: 'change' }],
        registerLocationNum: [{ required: true, message: '请输入', trigger: 'blur' }],
        jobLocation: [{ required: true, message: '请选择', trigger: 'change' }],
        jobLocationNum: [{ required: true, message: '请输入', trigger: 'blur' }],
        custLocation: [{ required: true, message: '请选择', trigger: 'change' }],
        custLocationNum: [{ required: true, message: '请输入', trigger: 'blur' }],
        isMarried: [{ required: true, message: '请选择', trigger: 'change' }],
        custEdu: [{ required: true, message: '请输入', trigger: 'blur' }],
        custSalary: [{ required: true, message: '请输入', trigger: 'blur' }, { type: 'number', message: '请输入数字', trigger: 'blur' }],
        belongBusi: [{ required: true, message: '请选择', trigger: 'change' }],
        perUserSelect: [{ required: true, message: '请选择', trigger: 'change' }],
        fmyTel: [{ validator: fmyTelPhone, trigger: 'blur' }]
      },

      addCommercialForm: {
        custIdc: '',
        lpName: '',
        custGender: '',
        birthday: '',
        custAge: '',
        custPhone: '',
        registerLocation: '',
        registerLocationNum: '',
        custLocation: '',
        custLocationNum: '',
        socialCreditCode: '',
        custName: '',
        businessScope: '',
        status: '',
        industry: '',
        relatePerson: '',
        belongUserId: '',
        belongBranchId: '',
        belongBranchName: '',
        comUserSelect: null,
      },
      commercialRules: {
        custIdc: [{ required: true, validator: validateCustIdc, trigger: 'blur' }],
        lpName: [{ required: true, message: '请输入', trigger: 'blur' }],
        custGender: [{ required: true, message: '请输入', trigger: 'change' }],
        birthday: [{ required: true, message: '请输入', trigger: 'blur' }],
        custAge: [{ required: true, message: '请输入', trigger: 'blur' }],
        custPhone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        registerLocation: [{ required: true, message: '请选择', trigger: 'change' }],
        registerLocationNum: [{ required: true, message: '请选择', trigger: 'blur' }],
        custLocation: [{ required: true, message: '请选择', trigger: 'change' }],
        custLocationNum: [{ required: true, message: '请输入', trigger: 'blur' }],
        socialCreditCode: [{ required: true, message: '请选择', trigger: 'blur' }],

        custName: [{ required: true, message: '请选择', trigger: 'blur' }],
        businessScope: [{ required: true, message: '请输入', trigger: 'blur' }],
        status: [{ required: true, message: '请输入', trigger: 'blur' }],
        industry: [{ required: true, message: '请选择', trigger: 'change' }],
        comUserSelect: [{ required: true, message: '请选择', trigger: 'change' }],
        belongBranchId: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      addFirmForm: {
        custIdc: '',
        lpName: '',
        custGender: '',
        birthday: '',
        custAge: '',
        custPhone: '',
        registerLocation: '',
        registerLocationNum: '',
        custLocation: '',
        custLocationNum: '',
        socialCreditCode: '',
        custName: '',
        businessScope: '',
        status: '',
        custCapital: '',
        industry: '',
        tel: '',
        relatePerson: '',
        belongUserId: '',
        belongBranchId: '',
        belongBranchName: '',
        firmUserSelect: '',
      },
      firmRules: {
        custIdc: [{ required: true, validator: validateCustIdc, trigger: 'blur' }],
        lpName: [{ required: true, message: '请输入', trigger: 'blur' }],
        custGender: [{ required: true, message: '请输入', trigger: 'change' }],
        birthday: [{ required: true, message: '请输入', trigger: 'blur' }],
        custAge: [{ required: true, message: '请输入', trigger: 'blur' }],
        custPhone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        registerLocation: [{ required: true, message: '请选择', trigger: 'change' }],
        registerLocationNum: [{ required: true, message: '请输入', trigger: 'blur' }],
        custLocation: [{ required: true, message: '请选择', trigger: 'change' }],
        custLocationNum: [{ required: true, message: '请输入', trigger: 'blur' }],
        socialCreditCode: [{ required: true, message: '请选择', trigger: 'blur' }],
        custName: [{ required: true, message: '请选择', trigger: 'blur' }],
        businessScope: [{ required: true, message: '请输入', trigger: 'blur' }],
        status: [{ required: true, message: '请输入', trigger: 'blur' }],
        industry: [{ required: true, message: '请选择', trigger: 'change' }],
        firmUserSelect: [{ required: true, message: '请选择', trigger: 'change' }],
        belongBranchId: [{ required: true, message: '请选择', trigger: 'change' }],
        custCapital: [{ required: true, message: '请输入', trigger: 'blur' }],
        tel: [{ required: true, validator: validatePhone, trigger: 'blur' }],
      },
      deptId: '',
      deptName: '',
      statusList: [
        { label: '正常', value: 1 },
        { label: '特殊', value: 2 },
        { label: '其他', value: 3 },
        { label: '黑名单客户', value: 4 },
        { label: '灰名单', value: 5 },
        { label: '未知', value: 6 },
      ],
      genderList: [
        { label: '男', value: '男' },
        { label: '女', value: '女' },
      ],
      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: '丈夫' },
      ],
      regAddress: {
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            const nodes = []
            let query = {
              level: node.level + 1,
              code: node.level == 0 ? '33' : node.value.value,
            }

            getAddressTree(query).then(res => {
              res.data.map(item => {
                let obj = {
                  value: item,
                  label: item.label,
                  leaf: item.level >= 5
                }
                nodes.push(obj)
              })

              resolve(nodes)
            })
          }, 500)
        }
      }
    }
  },
  computed: {
    ...mapGetters(['roles']),
    //对公
    isPublic() {
      return this.roles.includes('headPublic')
    },
    //对私
    isPrivate() {
      return this.roles.includes('headPrivate')
    },

  },
  created() {
    this.initIndustryTree()
    this.getUser()
    if (this.isPublic) {
      this.selectedTab = '企业'
      this.getBusinessList()
      this.isPersonage = false
      this.isCommercial = false
      this.isFirm = true

    } else if (this.isPrivate) {
      this.selectedTab = '个人'
      this.isPersonage = true
      this.isCommercial = false
      this.isFirm = false
      this.getPersonageList()

    } else {
      this.selectedTab = '企业'
      this.getBusinessList()
      this.isPersonage = false
      this.isCommercial = false
      this.isFirm = true

    }


  },
  methods: {
    handleChange(val) {
      this.searchQuery = ''
      if (val == '个人') {
        this.isPersonage = true
        this.isCommercial = false
        this.isFirm = false
        this.searchPlace = '输入客户名/证件号/手机号'
        this.getPersonageList()
      } else if (val == '商户') {
        this.isPersonage = false
        this.isCommercial = true
        this.isFirm = false
        this.searchPlace = '输入商户名/证件号/手机号'
        this.getCommerciaList()
      } else if (val == '企业') {
        this.isPersonage = false
        this.isCommercial = false
        this.isFirm = true
        this.searchPlace = '输入企业名/证件号/手机号'
        this.getBusinessList()
      }
    },
    getPersonageList() {
      this.perLoading = true
      listByKeyword({ keyword: this.searchQuery, pageSize: this.pageSize, pageNum: this.pageNum, orderByColumn: 'updateTime' })
        .then((res) => {

          this.tableData = res.data
          this.total = res.total
          this.perLoading = false
        })
        .catch((err) => console.error(err))
        .finally(() => {
          setTimeout(() => {
            this.perLoading = false
          }, 100)
        })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getPersonageList()
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage
      this.getPersonageList()
    },
    getCommerciaList() {
      this.comLoading = true
      commerciaList({ keyword: this.searchQuery, pageSize: this.commercialPageSize, pageNum: this.commercialPageNum }).then(
        res => {
          this.commercialTableData = res.rows
          this.commercialTotal = res.total
          this.comLoading = false
        }
      )
    },
    commercialSizeChange(val) {
      this.commercialPageSize = val
      this.getCommerciaList()
    },
    commercialCurrentChange(val) {
      this.commercialPageNum = val
      this.getCommerciaList()
    },
    getBusinessList() {

      this.firmLoading = true
      businessList({ keyword: this.searchQuery, pageSize: this.firmPageSize, pageNum: this.firmPageNum }).then(
        res => {
          this.firmTableData = res.rows
          this.firmTotal = res.total
          this.firmLoading = false
        }
      )
    },
    firmSizeChange(val) {
      this.firmPageSize = val
      this.getBusinessList()
    },
    firmCurrentChange(val) {
      this.firmPageNum = val
      this.getBusinessList()
    },
    handleSearch() {
      if (this.selectedTab == '个人') {
        this.getPersonageList()
      } else if (this.selectedTab == '商户') {
        this.getCommerciaList()
      } else if (this.selectedTab == '企业') {
        this.getBusinessList()
      }
    },
    handleRefersh() {
      this.searchQuery = ''
      if (this.selectedTab == '个人') {
        this.getPersonageList()
      } else if (this.selectedTab == '商户') {
        this.getCommerciaList()
      } else if (this.selectedTab == '企业') {
        this.getBusinessList()
      }
    },
    handleCustDetail(custId) {
      this.$router.push({ path: '/360charts/indexcharts/', query: { custId: custId } })

    },
    handleCommercialDetail(custId) {
      this.$router.push({ path: '/360charts/commercial/', query: { custId: custId } })
    },
    handleFirmDetail(custId) {
      this.$router.push({ path: '/360charts/firm/', query: { custId: custId } })
    },

    handleAdd() {
      // if (this.selectedTab == '个人') {
      //   this.addPersonDialogVisible = true
      //   this.isPerLoading = false
      // } else if (this.selectedTab == '商户') {
      //   this.addCommercialVisible = true
      //   this.isCommerLoading = false
      // } else if (this.selectedTab == '企业') {
      //   this.addFirmVisible = true
      //   this.isFirmLoading = false
      // }
      if (this.selectedTab == '个人') {
        this.$router.push({ path: '/customer/charts/filing/personFiling' })
      } else if (this.selectedTab == '商户') {
        this.$router.push({ path: '/customer/charts/filing/commercialFiling' })
      } else if (this.selectedTab == '企业') {
        this.$router.push({ path: '/customer/charts/filing/firmFiling' })
      }
    },
    changePersonCusIds(val) {
      this.initInfoByCustIdc(val)
    },
    changeCommerCustIdc(val) {
      this.initInfoByCustIdc(val)
    },
    changeFirmCustIdc(val) {
      this.initInfoByCustIdc(val)
    },
    initInfoByCustIdc(data) {
      getInfoByCustIdc(data).then(res => {

        if (this.selectedTab == '个人') {
          this.addPersonForm.custName = res.data.custName ? res.data.custName : ''
          this.addPersonForm.custGender = res.data.custGender ? res.data.custGender : ''
          this.addPersonForm.birthday = res.data.birthday ? res.data.birthday : ''
          this.addPersonForm.custAge = res.data.custAge ? res.data.custAge : ''
          this.addPersonForm.custPhone = res.data.custPhone ? res.data.custPhone : ''
        } else if (this.selectedTab == '商户') {
          this.addCommercialForm.lpName = res.data.custName ? res.data.custName : ''
          this.addCommercialForm.custGender = res.data.custGender ? res.data.custGender : ''
          this.addCommercialForm.birthday = res.data.birthday ? res.data.birthday : ''
          this.addCommercialForm.custAge = res.data.custAge ? res.data.custAge : ''
          this.addCommercialForm.custPhone = res.data.custPhone ? res.data.custPhone : ''
        } else if (this.selectedTab == '企业') {
          this.addFirmForm.lpName = res.data.custName ? res.data.custName : ''
          this.addFirmForm.custGender = res.data.custGender ? res.data.custGender : ''
          this.addFirmForm.birthday = res.data.birthday ? res.data.birthday : ''
          this.addFirmForm.custAge = res.data.custAge ? res.data.custAge : ''
          this.addFirmForm.custPhone = res.data.custPhone ? res.data.custPhone : ''
        }

      }).catch(() => {
        console.log(data, 'data')
        //性别
        let sexCode = data.charAt(16)
        let gender = parseInt(sexCode, 10) % 2 === 0 ? '女' : '男'
        //年龄
        let today = new Date()
        let birthDate = new Date(data.substring(6, 10))
        let age = today.getFullYear() - birthDate.getFullYear()
        //出生日期
        let year = data.substring(6, 10)
        let mounth = data.substring(10, 12)
        let day = data.substring(12, 14)
        let csDate = `${year}-${mounth}-${day}`

        if (this.selectedTab == '个人') {

          this.addPersonForm.custGender = gender
          this.addPersonForm.birthday = csDate
          this.addPersonForm.custAge = age

        } else if (this.selectedTab == '商户') {

          this.addCommercialForm.custGender = gender
          this.addCommercialForm.birthday = csDate
          this.addCommercialForm.custAge = age

        } else if (this.selectedTab == '企业') {

          this.addFirmForm.custGender = gender
          this.addFirmForm.birthday = csDate
          this.addFirmForm.custAge = age

        }

      })
    },
    initAddressTree() {
      getAddressTree({ code: '33' }).then(res => {
        this.adressOptions = res.data
      })
    },

    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
          })
        })
      })
    },
    getUser() {
      getUserProfile().then(res => {
        this.deptId = res.data.dept.deptId
        this.deptName = res.data.dept.deptName
        let roleName = res.data.roleName
        if (roleName == '普通客户经理') {
          this.initdeptTreeByManager()
        } else {
          // this.initDeptTree()
        }
      })
    },
    initGetDeptTree() {

      const params = {
        deptid: this.userId
      }
      getDeptUserTree(params).then(res => {
        if (res.length > 0) {
          this.userList = res.map(item => {
            return {
              value: item.userName,
              label: item.nickName,
            }
          })
        } else {
          Message.warning('该机构下无客户经理')
        }

      })
    },
    selectUser(value) {

      this.initGetDeptTree()
    },
    changeUser(value) {


    },
    initDeptTree() {

      console.log(this.deptId, 'this.deptId')

      getDeptTree(this.deptId).then(res => {

        this.departOptions = res.data
      })
    },
    initdeptTreeByManager() {
      deptTreeByManager(this.deptId).then(res => {
        this.departOptions = res.data
      })
    },
    changeBranchName(value) {
      this.addPersonForm.perUserSelect = ''
      this.addCommercialForm.comUserSelect = ''
      this.addFirmForm.firmUserSelect = ''
      this.userList = []
      this.userId = value ? value[value.length - 1] : ''
    },
    handleAddPersonClose() {

      this.$refs.addPersonForm.resetFields()
      this.addPersonDialogVisible = false
    },
    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('&')
    },
    handleAddPersonCommit() {
      //户籍地址
      let registerLocationArr = this.addPersonForm.registerLocation.map(item => { return item.label })
      let registerLocationStr = registerLocationArr.join(' ').replace(/\s/g, '')
      //单位地址
      let jobLocationArr = this.addPersonForm.jobLocation.map(item => { return item.label })
      let jobLocationStr = jobLocationArr.join(' ').replace(/\s/g, '')
      //住宅地址
      let custLocationArr = this.addPersonForm.custLocation.map(item => { return item.label })
      let custLocationStr = custLocationArr.join(' ').replace(/\s/g, '')
      this.isPerLoading = true
      this.$refs.addPersonForm.validate((valid) => {
        if (valid) {
          const params = {
            custIdc: this.addPersonForm.custIdc,
            custName: this.addPersonForm.custName,
            custGender: this.addPersonForm.custGender,
            birthday: this.addPersonForm.birthday,
            custAge: this.addPersonForm.custAge,
            custPhone: this.addPersonForm.custPhone,
            registerLocation: `${registerLocationStr} ${this.addPersonForm.registerLocationNum}`,
            jobLocation: `${jobLocationStr} ${this.addPersonForm.jobLocationNum}`,
            custLocation: `${custLocationStr} ${this.addPersonForm.custLocationNum}`,
            isMarried: this.addPersonForm.isMarried,
            custEdu: this.addPersonForm.custEdu,
            custSalary: this.addPersonForm.custSalary,
            belongBusi: this.addPersonForm.belongBusi ? this.addPersonForm.belongBusi[this.addPersonForm.belongBusi.length - 1] : '',
            relateMerchant: this.addPersonForm.relateMerchant,
            relateBusiness: this.addPersonForm.relateBusiness,
            fmyName: this.addPersonForm.fmyName,
            fmyRln: this.addPersonForm.fmyRln,
            fmyTel: this.addPersonForm.fmyTel,
            fmyBusi: this.addPersonForm.fmyBusi ? this.addPersonForm.fmyBusi.join(' ') : '',
            belongUserId: this.addPersonForm.perUserSelect.value,
            belongBranchName: this.addPersonForm.belongBranchName,
            belongBranchId: this.addPersonForm.belongBranchId[this.addPersonForm.belongBranchId.length - 1],
            belongUserName: this.addPersonForm.perUserSelect.label
          }
          addRetailRecord(this.formDataPamars(params)).then(res => {
            if (res.code == 200) {
              this.isPerLoading = false
              Message.success(res.msg)
              this.addPersonDialogVisible = false
              this.addPersonForm = {}
              this.$refs.addPersonForm.resetFields()
              this.getPersonageList()
            }
          })
        } else {
          return false
        }
      })

    },
    handleCommercialClose() {

      this.$refs.addCommercialForm.resetFields()
      this.addCommercialVisible = false
    },
    handleCommercialCommit() {
      //户籍地址
      let registerLocationArr = this.addCommercialForm.registerLocation.map(item => { return item.label })
      let registerLocationStr = registerLocationArr.join(' ').replace(/\s/g, '')
      //住宅地址
      let custLocationArr = this.addCommercialForm.custLocation.map(item => { return item.label })
      let custLocationStr = custLocationArr.join(' ').replace(/\s/g, '')
      this.isCommerLoading = true
      this.$refs.addCommercialForm.validate((valid) => {
        if (valid) {
          const params = {
            custIdc: this.addCommercialForm.custIdc,
            lpName: this.addCommercialForm.lpName,
            custGender: this.addCommercialForm.custGender,
            birthday: this.addCommercialForm.birthday,
            custAge: this.addCommercialForm.custAge,
            custPhone: this.addCommercialForm.custPhone,
            registerLocation: `${registerLocationStr} ${this.addCommercialForm.registerLocationNum}`,
            custLocation: `${custLocationStr} ${this.addCommercialForm.custLocationNum}`,
            socialCreditCode: this.addCommercialForm.socialCreditCode,
            custName: this.addCommercialForm.custName,
            businessScope: this.addCommercialForm.businessScope,
            status: this.addCommercialForm.status,
            industry: this.addCommercialForm.industry ? this.addCommercialForm.industry[this.addCommercialForm.industry.length - 1] : '',
            relatePerson: this.addCommercialForm.relatePerson,
            belongBranchId: this.addCommercialForm.belongBranchId[this.addCommercialForm.belongBranchId.length - 1],
            belongBranchName: this.addCommercialForm.belongBranchName,
            belongUserId: this.addCommercialForm.comUserSelect.value,
            belongUserName: this.addCommercialForm.comUserSelect.label
          }
          addMerchantRecord(this.formDataPamars(params)).then(res => {
            if (res.code == 200) {
              this.isCommerLoading = false
              Message.success(res.msg)
              this.addCommercialVisible = false
              this.$refs.addCommercialForm.resetFields()
              this.getCommerciaList()
            }
          })
        } else {
          return false
        }
      })

    },
    handleFirmlClose() {

      this.$refs.addFirmForm.resetFields()
      this.addFirmVisible = false
    },
    handleFirmCommit() {
      //户籍地址
      let registerLocationArr = this.addFirmForm.registerLocation.map(item => { return item.label })
      let registerLocationStr = registerLocationArr.join(' ').replace(/\s/g, '')
      //住宅地址
      let custLocationArr = this.addFirmForm.custLocation.map(item => { return item.label })
      let custLocationStr = custLocationArr.join(' ').replace(/\s/g, '')
      this.isFirmLoading = true
      this.$refs.addFirmForm.validate((valid) => {
        if (valid) {
          const params = {
            custIdc: this.addFirmForm.custIdc,
            lpName: this.addFirmForm.lpName,
            custGender: this.addFirmForm.custGender,
            birthday: this.addFirmForm.birthday,
            custAge: this.addFirmForm.custAge,
            custPhone: this.addFirmForm.custPhone,
            registerLocation: `${registerLocationStr} ${this.addFirmForm.registerLocationNum}`,
            custLocation: `${custLocationStr} ${this.addFirmForm.custLocationNum}`,
            socialCreditCode: this.addFirmForm.socialCreditCode,
            custName: this.addFirmForm.custName,
            businessScope: this.addFirmForm.businessScope,
            status: this.addFirmForm.status,
            custCapital: this.addFirmForm.custCapital,
            industry: this.addFirmForm.industry ? this.addFirmForm.industry[this.addFirmForm.industry.length - 1] : '',
            tel: this.addFirmForm.tel,
            relatePerson: this.addFirmForm.relatePerson,
            belongBranchId: this.addFirmForm.belongBranchId[this.addFirmForm.belongBranchId.length - 1],
            belongBranchName: this.addFirmForm.belongBranchName,
            belongUserId: this.addFirmForm.firmUserSelect.value,
            belongUserName: this.addFirmForm.firmUserSelect.label,
          }

          addBusinessRecord(this.formDataPamars(params)).then(res => {
            if (res.code == 200) {
              this.isFirmLoading = false
              Message.success(res.msg)
              this.addFirmVisible = false
              this.$refs.addCommercialForm.resetFields()
              this.getBusinessList()
            }
          })
        } else {
          return false
        }
      })

    }
  },

}
</script>
<style lang="scss" scoped>
.customer-wrap {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px 16px 0 0;

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

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

    .el-radio-button {
      flex: 1;

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

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

      &:nth-child(2) {

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

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

      &.is-active {

        &::before,
        &::after {
          content: none;
        }
      }
    }
  }

  .search-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 24px 0 0 0;

    .search-cnt {
      position: relative;
      width: 70%;
    }

    ::v-deep .el-input {
      width: 100%;
      position: relative;

      .el-input__inner {
        height: 44px;
        line-height: 44px;
        border-radius: 23px;
        border: 1px solid #ebebeb;
        padding-left: 30px;
      }

      .el-input__suffix {
        right: 85px;
      }
    }

    .search-btn {
      width: 80px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 0;
      top: 2px;
      border: 1px solid #4886f8;
      background-color: #4886f8;
      border-radius: 20px;
      cursor: pointer;
      z-index: 1;

      .el-icon-search {
        color: #ffffff;
        font-size: 14px;
      }
    }
  }
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.checkBox {
  display: flex;

  .el-checkbox-group {
    display: flex;
    align-items: center;

    ::v-deep .el-checkbox__label {
      color: #3d3d3d;
      font-size: 12px;
      font-weight: 400;
      padding-left: 6px;
    }
  }
}

.radio-labels {
  height: 32px;
  line-height: 32px;
  color: #3d3d3d;
  font-size: 14px;
  font-weight: 400;
  margin-right: 30px;

  &::after {
    content: '*';
    left: 5px;
    color: #ff4d42;
    position: relative;
    top: 2px;
  }
}

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 24px 0;

  .search-cnt {
    position: relative;
    width: 70%;
  }

  ::v-deep .el-input {
    width: 100%;
    position: relative;

    .el-input__inner {
      height: 44px;
      line-height: 44px;
      border-radius: 23px;
      border: 1px solid #ebebeb;
    }

    .el-input__suffix {
      right: 85px;
    }
  }

  .search-btn {
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 2px;
    border: 1px solid #4886f8;
    background-color: #4886f8;
    border-radius: 20px;
    cursor: pointer;
    z-index: 1;

    .el-icon-search {
      color: #ffffff;
      font-size: 14px;
    }
  }
}

a {
  color: rgb(7, 58, 177);
  text-decoration: none;
}

.main-wrap {
  margin: 0 30px;

  .checkBox {
    margin-bottom: 12px;

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

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

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

  .plain-raido-btn {
    ::v-deep .el-radio-button__inner {
      color: #666666;
      font-size: 14px;
      font-weight: 400;
      border: 1px solid #ebebeb;
      border-radius: 0;
    }

    ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
      border: 1px solid #4886f8;
      color: #4886f8;
      background-color: #ffffff;
      box-shadow: none;
    }
  }
}

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

::v-deep .el-dialog__footer {
  text-align: center;
}

.commit_btn {
  margin-left: 50px;
}

.personPage {
  text-align: end;
  padding: 20px;
}
.quesiton{
  color: #b9b9b9;
}
</style>
