<template>
  <div class="common-wrap-cnt">
    <section class="header-top">
      <p class="common-title">基础信息</p>
      <section class="form-operate">
        <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" @click="saveAll" :disabled="isSaveDisable">保存</el-button>
      </section>
    </section>
    <section v-if="this.$route.query.type == '0'">
      <el-form ref="profileForm" :model="profile" label-width="120px" :rules="rules">
        <el-row :gutter="24" type="flex" justify="content" align="middle">
          <el-col :span="24">
            <div class="base-info">
              <el-form-item prop="custName" style=" margin-top: 15px" label-width="50px" label=" ">
                <span v-if="!isEditing || !iscustName" style="font-size: 24px; font-weight: 600; text-align: center">{{
                  profile.custName }}</span>
                <el-input v-model="profile.custName" v-if="isEditing" maxlength="18"></el-input>
              </el-form-item>

            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="custGender" label="性别：">
              <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 label="年龄：" prop="custAge">
              <span v-if="!isEditing">{{ profile.custAge }}</span>
              <el-input v-model="profile.custAge" v-if="isEditing" maxlength="3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号：" prop="custIdc">
              <span v-if="!isEditing">{{ profile.custIdc }}</span>
              <el-input v-model="profile.custIdc" v-if="isEditing" maxlength="18" @blur="initInfoByCustIdc(profile.custIdc)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="出生日期：" prop="birthday">
              <span v-if="!isEditing">{{ profile.birthday }}</span>
              <el-date-picker v-model="profile.birthday" type="date" placeholder="选择日期" @change="dateChange"
                value-format="yyyy-MM-dd" v-if="isEditing"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号：" prop="custPhone">
              <span v-if="!isEditing">{{ profile.custPhone }}</span>
              <el-input v-model="profile.custPhone" v-if="isEditing" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="婚姻状况：">
              <span v-if="!isEditing">{{ profile.isMarried }}</span>
              <el-select v-model="profile.isMarried" v-if="isEditing">
                <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-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="年收入：">
              <span v-if="!isEditing">{{ profile.custSalary }}</span>
              <el-input v-model="profile.custSalary" v-if="isEditing" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学历：" prop="custEdu">
              <span v-if="!isEditing">{{ profile.custEdu }}</span>
              <!-- <el-input v-model="profile.custEdu" v-if="isEditing" maxlength="10"></el-input> -->
              <el-select v-model="profile.custEdu" v-if="isEditing">
                <el-option v-for="(item, index) in custEduList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行业名称：" prop="industry">
              <span v-if="!isEditing">{{ industryStr }}</span>
              <el-cascader v-model='profile.industry' :options="industryOptions"
                :props="{ expandTrigger: 'hover', label: 'label', value: 'value', checkStrictly: true }" v-if="isEditing">
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="户籍地址：" prop="registerLocation">
              <span :title="registerLocationStr" class="ccyc">{{ registerLocationStr }}</span>

              <!-- <el-cascader v-model='profile.registerLocation' :props="regAddress" v-if="isEditing">
              </el-cascader>
              <el-input v-model="registerLocationNum" v-if="isEditing" maxlength="10" placeholder="输入门牌号"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位地址：" prop="jobLocation">
              <span :title="jobLocationStr" class="ccyc">{{ jobLocationStr }}</span>

              <!-- <el-cascader v-model='profile.jobLocation' v-if="isEditing" :props="regAddress">
              </el-cascader>
              <el-input v-model="jobLocationNum" v-if="isEditing" maxlength="10" placeholder="输入门牌号"></el-input> -->
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="住宅地址：" prop="custLocation">
              <span :title="custLocationStr" class="ccyc">{{ custLocationStr }}</span>

              <!-- <el-cascader v-model='profile.custLocation' v-if="isEditing" :props="regAddress">
              </el-cascader>
              <el-input v-model="custLocationNum" v-if="isEditing" maxlength="10" placeholder="输入门牌号"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="管户客户经理：" prop="belongUserName">
              <span>{{ profile.belongUserName }}</span>
              <!-- <el-input v-model="profile.belongUserName" v-if="isEditing"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="更新时间：" prop="updateTime">
              <span>{{ profile.updateTime }}</span>

            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <p class="common-title">关联商户/企业</p>
      <div style="margin-top: 30px">
        <div class="glShBox">
          <div class="left">关联商户</div>
          <div class="right">{{ this.relateMerchant }}</div>
        </div>
        <div class="glShBox">
          <div class="left">关联企业</div>
          <div class="right">{{ this.relateBusiness }}</div>
        </div>
      </div>
      <section class="preview-cnt">
        <p class="common-title">家庭成员</p>
        <div style="margin-top: 30px">
          <div class="add_btn">
            <el-button type="primary" size="small" @click="addFamily">新增</el-button>
          </div>
          <el-table :data="familyData" class="affiliatedData">
            <el-table-column label="姓名" align="center" prop="fmyName"></el-table-column>
            <el-table-column label="关系" align="center" prop="fmyRln"></el-table-column>
            <el-table-column label="身份证号" align="center" prop="fmyCustIdc"></el-table-column>
            <el-table-column label="手机号" align="center" prop="tel"></el-table-column>
            <el-table-column label="行业" align="center">
              <template slot-scope="scope">
                {{ initFmilyBelongBusi(scope.row.belongBusi) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="handleFimlyEdit(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
    </section>
    <section v-if="this.$route.query.type == '1' || this.$route.query.type == '2'">
      <el-form ref="profileForm" :model="profile" label-width="120px" :rules="rules">
        <el-row :gutter="24" type="flex" justify="content" align="middle">
          <el-col :span="24">
            <div class="base-info">
              <el-form-item prop="custName" style=" margin-top: 15px" label-width="50px" label=" ">
                <span v-if="!isEditing || !iscustName" style="font-size: 24px; font-weight: 600; text-align: center">{{
                  profile.custName }}</span>
                <el-input v-model="profile.custName" v-if="isEditing" maxlength="18"></el-input>
              </el-form-item>

            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" v-if="this.$route.query.type == '1'">
            <el-form-item label="经营人姓名：" prop="lpName">
              <span v-if="!isEditing">{{ profile.lpName }}</span>

              <el-input v-model="profile.lpName" v-if="isEditing" maxlength="18"></el-input>


            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="this.$route.query.type == '2'">
            <el-form-item label="法人姓名：" prop="lpName">
              <span v-if="!isEditing">{{ profile.lpName }}</span>

              <el-input v-model="profile.lpName" v-if="isEditing" maxlength="18"></el-input>


            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="custGender" label="性别：">
              <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 label="年龄：" prop="custAge">
              <span v-if="!isEditing">{{ profile.custAge }}</span>
              <el-input v-model="profile.custAge" v-if="isEditing" maxlength="3"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="身份证号：" prop="custIdc">
              <span v-if="!isEditing">{{ profile.custIdc }}</span>
              <el-input v-model="profile.custIdc" v-if="isEditing" maxlength="18" @blur="initInfoByCustIdc(profile.custIdc)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="this.$route.query.type == '1'">
            <el-form-item label="手机号：" prop="custPhone">
              <span v-if="!isEditing">{{ profile.custPhone }}</span>
              <el-input v-model="profile.custPhone" v-if="isEditing" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="this.$route.query.type == '2'">
            <el-form-item label="法人手机号：" prop="custPhone">
              <span v-if="!isEditing">{{ profile.custPhone }}</span>
              <el-input v-model="profile.custPhone" v-if="isEditing" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期：" prop="birthday">
              <span v-if="!isEditing">{{ profile.birthday }}</span>
              <el-date-picker v-model="profile.birthday" type="date" placeholder="选择日期" @change="dateChange"
                value-format="yyyy-MM-dd" v-if="isEditing"></el-date-picker>
            </el-form-item>
          </el-col>


        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="统信码：">
              <span>{{ profile.socialCreditCode }}</span>
              <!-- <el-input v-model="profile.socialCreditCode" v-if="isEditing" maxlength="18"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行业名称：" prop="industry">
              <span v-if="!isEditing">{{ industryStr }}</span>
              <el-cascader v-model='profile.industry' :options="industryOptions"
                :props="{ expandTrigger: 'hover', label: 'label', value: 'value', checkStrictly: true }" v-if="isEditing">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="注册地址：">
              <span :title="registerLocationStr" class="ccyc">{{ registerLocationStr }}</span>
              <!-- <el-cascader v-model='profile.registerLocation' v-if="isEditing" :props="regAddress">
              </el-cascader>
              <el-input v-model="registerLocationNum" v-if="isEditing" maxlength="10" placeholder="输入门牌号"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="经营状态：">
              <span v-if="!isEditing">
                <span>{{ initStatus(profile.status) }}</span>
              </span>
              <el-select v-model="profile.status" v-if="isEditing">
                <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-col :span="8">
            <el-form-item label="经营地址：">
              <span :title="custLocationStr" class="ccyc">{{ custLocationStr }}</span>
              <!-- <el-cascader v-model='profile.custLocation' v-if="isEditing" :props="regAddress">
              </el-cascader>
              <el-input v-model="custLocationNum" v-if="isEditing" maxlength="10" placeholder="输入门牌号"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经营范围：">
              <span v-if="!isEditing" :title="profile.businessScope" class="ccyc">{{ profile.businessScope }}</span>
              <el-input v-model="profile.businessScope" v-if="isEditing" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="注册资本：" v-if="this.$route.query.type == '2'">
              <span v-if="!isEditing">{{ profile.custCapital }}</span>
              <el-input v-model="profile.custCapital" v-if="isEditing" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话：" v-if="this.$route.query.type == '2'">
              <span v-if="!isEditing">{{ profile.tel }}</span>
              <el-input v-model="profile.tel" v-if="isEditing" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">

            <el-form-item label="管户客户经理：" prop="belongUserName">
              <span>{{ profile.belongUserName }}</span>
              <!-- <el-input v-model="profile.belongUserName" v-if="isEditing"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="this.$route.query.type == '1'">
            <el-form-item label="更新时间：" prop="updateTime">
              <span>{{ profile.updateTime }}</span>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="this.$route.query.type == '2'">
          <el-col :span="8">
            <el-form-item label="更新时间：" prop="updateTime">
              <span>{{ profile.updateTime }}</span>

            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <p class="common-title">关联经营人</p>
      <div style="margin-top: 30px">
        <el-table :data="jyrtableData">
          <el-table-column align="center" prop="relatePerson"  label="姓名"></el-table-column>
          <el-table-column align="center" prop="relateCustIdc"  label="身份证号"></el-table-column>
        </el-table>
      </div>

    </section>
    <el-dialog :title="familyTitle" :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-input>
        </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-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="fmyCustIdc" label="身份证号">
          <el-input v-model="fimalyForm.fmyCustIdc"></el-input>
        </el-form-item>
        <el-form-item prop="tel" label="手机号">
          <el-input v-model="fimalyForm.tel"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="person-footer">
        <el-button @click="handleClosefamily">取消</el-button>
        <el-button type="primary" @click="handlFimalyCommit" class="commit_btn">确定</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" @click="handlFilingCommit" class="commit_btn">确定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>
<script>
import { updateCust, getIndividualAttempt, addFamilyRecord, editFamilyRecord, getIndustryTree, getRecordDetail, editRecord ,getRegStatus} from '@/api/system/listByRetailKeywords.js'
import { Message } from 'element-ui'
import { getAddressTree, getDetailRegion } from "@/api/grid/address/tree.js";
import { custEduList } from '../../charts/360charts/custEdu'

export default {
  data() {

    var validatePhone = (rule, value, callback) => {
      
      if (!value?.trim()) {
        callback(new Error('请输入手机号'))
      }else{
        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 {
      custEduList,
      isSaveDisable: true,
      filingVisible: false,
      iscustName: false,
      iscustGender: false,
      isbelongBusi: false,
      iscustPhone: false,
      iscustSalary: false,
      isbirthday: false,
      isactiveBranchName: false,
      isbelongUserName: false,
      isrisk: false,
      iscustPhone: false,
      isEditing: false,
      editText: '编辑',
      newTag: '',
      tagsList: [],
      isAddTag: false,
      registerLocationNum: '',
      custLocationNum: '',
      jobLocationNum: '',
      profile: {


      },
      visitRecords: [
        {
          date: '2024-08-10',
          product: '定期存单',
          record: '在2024-08-10 13:45进行了走访',
          feedback: '客户标签：待定'
        },
        {
          date: '2024-08-11',
          product: '存货款',
          record: '结束了综合营销活动',
          feedback: '客户反馈：无反馈'
        }
      ],
      isMarriedList: [
        {
          label: '未婚',
          value: '未婚'
        },
        {
          label: '已婚',
          value: '已婚'
        },
        {
          label: '离异',
          value: '离异'
        }
      ],
      statusList: [
       
      ],
      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: [],
      merchantList: [],
      businessList: [],
      adressOptions: [],
      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)
        }
      },
      familyVisible: false,
      fimalyForm: {
        fmyName: '',
        fmyCustIdc: '',
        fmyRln: '',
        tel: ''
      },
      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: '丈夫' },
      ],
      industryStr: '',
      registerLocationStr: '',
      custLocationStr: '',
      jobLocationStr: '',
      pageNum: 1,
      pageSize: 5,
      total: null,
      industryOptions: [],
      relateMerchant: '',
      relateBusiness: '',
      familyTitle: '',
      jyrtableData: [],
    }
  },
  computed: {
    pageId() {
      return this.$route.query.id
    },
  },
  created() {

  },
  mounted() {
    this.initRegStatus()
    this.initdata()
    this.initIndustryTree()
  },
  computed: {
    pageId() {
      return this.$route.query.id
    }
  },
  methods: {
    initRegStatus(){
      getRegStatus().then(res=>{
        if(res.code == 200){
          this.statusList = res.data.map(item=>{
            return {
              label:item.dictLabel,
              value:item.dictValue
            }
          })
        }
      })
    },
    initStatus(data){
      let arr = this.statusList.filter(item=>item.value ===data)
      if(arr&&arr.length>0){
        return arr[0].label
      }
    },
    initdata() {
      this.jyrtableData = []
      getRecordDetail(this.pageId).then(res => {
        if (res.code == '200') {
          this.profile = res.data.custInfoRecord
          this.id = res.data.custInfoRecord.id
          this.registerLocationStr = res.data.custInfoRecord.registerLocation
          this.custLocationStr = res.data.custInfoRecord.custLocation
          this.jobLocationStr = res.data.custInfoRecord.jobLocation
          if (this.$route.query.type == '0') {
            this.familyData = res.data.familyMembersRecords
            this.relateMerchant = res.data.recordRelates.length>0?res.data.recordRelates[0].relateMerchant:''
            this.relateBusiness = res.data.recordRelates.length>0?res.data.recordRelates[0].relateBusiness:''
          } else {
            this.jyrtableData=res.data.recordRelates
          }
         
        }
      })
    },
    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.industry)

      })
    },

    initBelongBusiStr(data) {
      this.industryOptions.forEach(item => {
        if (item.value == data) {
          this.industryStr = item.label
        } else {
          item.children.forEach(el => {
            if (el.value == data) {
              this.industryStr = el.label
            }
          })
        }
      })
    },
    initFmilyBelongBusi(data) {
      for (let i = 0; i < this.industryOptions.length; i++) {
        if (this.industryOptions[i].value == data) {
          return this.industryOptions[i].label
        } else {
          for (let j = 0; j < this.industryOptions[i].children.length; j++) {
            if (this.industryOptions[i].children[j].value == data) {
              return this.industryOptions[i].children[j].label
            }
          }
        }
      }
    },
    handleFimlyEdit(row) {
      this.familyVisible = true
      this.familyTitle = '编辑家庭成员'
      this.fimalyForm = row
    },
    flattenArray(arr) {
      let result = []
      arr.forEach(item => {
        if (Array.isArray(item)) {
          result.push(...this.flattenArray(item))
        } else {
          result.push(item)
        }
      })
      return result
    },
    dateChange(val) {
      console.log(val)
    },
    initInfoByCustIdc(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}`
      this.profile.custGender = gender
      this.profile.birthday = csDate
      this.profile.custAge = age

    },
    goBackToIndex() {
      // this.$router.go(-1)
      const {query} = this.$route;
      this.$router.replace({
          path:'/customer/filingHome',
          query
      })
    },
    // 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.initdata()
      }
    },
    saveAll() {
      this.$refs.profileForm.validate((valid) => {
        if (valid) {
          let registerLocationStrs = ''
          let jobLocationStrs = ''
          let custLocationStrs = ''
          //户籍地址
          if (Array.isArray(this.profile.registerLocation)) {
            let registerLocationArr = this.profile.registerLocation.map(item => { return item.label })
            registerLocationStrs = registerLocationArr.join(' ').replace(/\s/g, '')
          }

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

          //住宅地址
          if (Array.isArray(this.profile.custLocation)) {
            let custLocationArr = this.profile.custLocation.map(item => { return item.label })
            custLocationStrs = custLocationArr.join(' ').replace(/\s/g, '')
          }
          const params = {
            custName: this.profile.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,
            industry: Array.isArray(this.profile.industry) ? this.profile.industry[this.profile.industry.length - 1] : this.profile.industry,
            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.custId,
            belongUserName: this.profile.belongUserName,
            gridUserName: this.profile.gridUserName,
            socialCreditCode: this.profile.socialCreditCode,
            status: this.profile.status,
            businessScope: this.profile.businessScope,
            lpName: this.profile.lpName,
            custCapital: this.profile.custCapital,
            id: this.id,
          }
          editRecord(params).then((response) => {
            if (response.code == 200) {
              Message.success('保存成功!')
              this.isSaveDisable = true
              this.initdata()
              this.initIndustryTree()
            }
          })
          this.isEditing = false
          this.editText = '编辑资料'
        } else {
          return false

        }
      })

    },

    addFamily() {
      this.familyVisible = true
      this.familyTitle = '添加家庭成员'
    },
    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.custIdc = this.profile.custIdc
          if (this.familyTitle == '添加家庭成员') {
            this.fimalyForm.recordId = this.id
            addFamilyRecord(this.formDataPamars(this.fimalyForm)).then(res => {
              if (res.code == 200) {
                Message.success(res.msg)
                this.fimalyForm = {}
                this.familyVisible = false
                this.initdata()
                this.$refs.fimalyForm.resetFields()
              }
            })
          } else if (this.familyTitle == '编辑家庭成员') {
            editFamilyRecord(this.formDataPamars(this.fimalyForm)).then(res => {
              if (res.code == 200) {
                Message.success(res.msg)
                this.familyVisible = false

                this.initdata()
                this.$refs.fimalyForm.resetFields()
              }
            })
          }
        } else {
          return false
        }
      })

    },
    handleClosefiling() {
      this.filingVisible = false

    },
    handlFilingCommit() {
      this.$router.push(
        { path: '/individual' }
      )
    },
  }
}
</script>
<style lang="scss" scoped>
.common-wrap-cnt {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px 16px 0 0;
  height: calc(100vh - 135px);
  overflow-y: auto;
  padding: 30px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

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

.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;
}
.ccyc {
  display: inline-block;
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.common-title {
  position: relative;
  color: #222222;
  line-height: 16px;
  font-weight: 600;
  font-size: 16px;
  padding-left: 10px;
  margin: 0;

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

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

.glShBox {
  display: flex;
  margin-top: 20px;
}

.bottomBox {
  display: flex;

}

.left {
  text-align: center;
  min-width: 250px;
  height: 60px;
  background-color: rgb(221, 233, 244);
  line-height: 60px;
}

.right {
  text-align: center;
  min-width: 250px;
  height: 60px;
  background-color: rgb(247, 247, 247);
  line-height: 60px;
}
</style>
