<template>
  <div 
       class="g-main ">
    <el-form 
             class="resi-form m-search"
             :model="form"
             ref="formId"
             >
             <el-form-item prop="gridId" :rules="rulesForm.gridId"
                            label="所属组织" label-width="100px" >
                  <el-select v-model.trim="form.gridId"
                             placeholder="请选择网格"
                             size="small"
                             clearable
                             class="u-item-width-normal"
                             @change="handleChangeGrid">
                    <el-option v-for="item in optionsG"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                  </el-select>
             
              </el-form-item>
              <el-form-item label="所属房屋"
              label-width="100px">
                  <div class="f-flex">
                    <el-form-item prop="villageId" class="u-item-width-communitycascader f-bto0" :rules="rulesForm.villageId" >
                      <el-select v-model.trim="form.villageId"
                                 placeholder="请选择小区"
                                 size="small"
                                 class="u-item-width-communitycascader f-bto0"
                                 clearable
                                 @change="handleChangeV">
                        <el-option v-for="item in optionsV"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="buildId" :rules="rulesForm.buildId">
                      <el-select v-model.trim="form.buildId"
                                 placeholder="楼号"
                                 size="small"
                                 clearable
                                 class="u-item-width-buildcascader f-bto0"
                                 @change="handleChangeB">
                        <el-option v-for="item in optionsB"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="unitId" :rules="rulesForm.unitId">
                      <el-select v-model.trim="form.unitId"
                                 placeholder="单元"
                                 size="small"
                                 clearable
                                 class="u-item-width-buildcascader f-bto0"
                                 @change="handleChangeD">
                        <el-option v-for="item in optionsD"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="homeId" :rules="rulesForm.homeId">
                      <el-select v-model.trim="form.homeId"
                                 placeholder="房号"
                                 size="small"
                                 clearable
                                 class="u-item-width-buildcascader f-bto0"
                                 @change="handleChangeH">
                        <el-option v-for="item in optionsH"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                
                
                </div>
              </el-form-item>
              <el-form-item v-for="(item,index)  in basicInformation" :label-width="'100px'" :label="item.label" :key="index" :class="item.itemType=='textarea'?'textareaDidth':''" :rules="item.rules" :prop="item.formName" >
                  <template v-if="item.itemType == 'radio'" >
                      <section class="u-item-width-normal">
                        <el-radio v-for="ns in item.opction"
                              :key="ns.value"
                              size="small"
                              v-model.trim="form[item.formName]"
                              :label="ns.value"
                           >
                      {{ ns.label }}
                    </el-radio>
                      </section>
                  </template>
                  <template v-if="item.itemType == 'input'" >
                    <el-input 
                              clearable
                              size="small"
                              :placeholder="`请输入${item.label}`"
                              v-model.trim="form[item.formName]"
                              class="u-item-width-normal"  @blur="handleValidBlur(item)"
                           >
                    </el-input>
                  </template>
                  <template v-else-if="item.itemType == 'select'">
                    <el-select
                             v-model="form[item.formName]"
                             :placeholder="`请选择${item.label}`"
                             size="small"
                             clearable
                             class="u-item-width-normal">
                    <el-option v-for="items in item.opction "
                               
                               :key="items.value"
                               :label="items.label"
                               :value="items.value">
                    </el-option>
                  </el-select>
                  </template>
                  <template v-else-if="item.itemType == 'textarea'">
                             <el-input
                              type="textarea"
                              placeholder="请输入内容"
                              class="item-width-textarea"
                              maxlength="120"
                              show-word-limit
                              resize="none"
                              rows="3"
                              v-model.trim="form[item.formName]"
                              
                            >
                            </el-input>
                  </template>
                  <template v-else-if="item.itemType == 'checkbox'"  :label="item.label">
                        <el-checkbox v-for="(items,indexs) in item.opction" style="width:70px" :key="indexs" :label="items.label" :true-label="'1'" :false-label="'0'" 
                        size="small"
                        v-model="form[items.formName]"
                        @change="val => handleChangeCheckbox(val,items)"
                        >
                        </el-checkbox>   
                  </template>
                  <template v-else-if="item.itemType == 'datepicker'"  :label="item.label">
                    <el-date-picker
                                  v-model.trim="form.birthday"
                                  class="u-item-width-normal"
                                  type="date"
                                  size="small"
                                  clearable
                                  placeholder="选择日期"
                                  format="yyyy 年 MM 月 dd 日"
                                  value-format="yyyy-MM-dd">
                  </el-date-picker>
                  </template>
                  
              </el-form-item>
              <!-- 这里开始就是底部的input了------------------------------------------------------------------->
              <el-tabs v-model="activeName"
                          @tab-click="handleClick">
                    <el-tab-pane v-for="item in tabsList"
                                :key="item.groupId"
                                :label="item.label"
                                :name="'group' + item.groupId">
                        <template v-for="itemj in footerInputList"  >
                            <section v-if="item.groupId == itemj.id" class="f-flex" style="flex-wrap: wrap;">
                              <el-form-item  v-for="(itemk,index) in itemj.children" :key="index" label-width="100px" :label="itemk.label" :class="itemk.itemType=='textarea'?'textareaDidth':''" >
                                  <template v-if="itemk.itemType == 'radio1'" >
                                      <section class="u-item-width-normal" >
                                        <el-radio 
                                              v-for="ns in itemk.opction"
                                              :key="ns.value"
                                              size="small"
                                              v-model.trim="form[itemj.id][itemk.formName]"
                                              :label="ns.value"
                                          >
                                      {{ ns.label }}
                                    </el-radio>
                                      </section>
                                  </template>
                                  <template v-else-if="itemk.itemType=='select1'" >
                                            <el-select
                                            v-model="form[itemj.id][itemk.formName]"
                                                  :placeholder="`请选择${itemk.label}`"
                                                  size="small"
                                                  :multiple="itemk.formName=='specialCategoryCode'" 
                                                  :collapse-tags="itemk.formName=='specialCategoryCode'"
                                                  clearable
                                                  class="u-item-width-normal">
                                                <el-option v-for="items in itemk.opction"
                                                    :key="items.value"
                                                    :label="items.label"
                                                    :value="items.value">
                                                    
                                                </el-option>
                                            </el-select>  
                                   </template>
                                  <template v-else-if="itemk.itemType=='textarea1'" >
                                            <el-input
                                            type="textarea"
                                            :placeholder="`请输入${itemk.label}`"
                                            class="item-width-textarea"
                                            maxlength="120"
                                            show-word-limit
                                            resize="none"
                                            rows="3"
                                            v-model.trim="form[itemj.id][itemk.formName]"
                                          >
                                         </el-input>
                                  </template>
                                  <template v-else-if="itemk.itemType=='input1'" >
                                            <el-input
                                            :placeholder="`请输入${itemk.label}`"
                                            class="u-item-width-normal"
                                            :style="{'margin-right':itemk.label == '备注'?'50px':''}"
                                            v-model.trim="form[itemj.id][itemk.formName]"
                                            clearable
                                          >
                                         </el-input>
                                  </template>
                                  <template  v-else-if="itemk.itemType=='checkbox'" >
                                  
                                    <el-checkbox-group 
                                      size="small"
                                      v-model="form[itemj.id][itemk.formName]"
                                    >
                                        <el-checkbox v-for="items in itemk.opction" :label="items.label != itemk.label? items.label :''"  :style="{'margin-right':items.label != itemk.label? '' :'19px'}"   :key="items.label" ></el-checkbox>
                                    </el-checkbox-group>   
                                  </template>
                                  <template v-else-if="itemk.itemType == 'datepicker1'">
                                      <el-date-picker
                                                    v-model.trim="form[itemj.id][itemk.formName]"
                                                    class="u-item-width-normal"
                                                    type="date"
                                                    size="small"
                                                    clearable
                                                    placeholder="选择日期"
                                                    format="yyyy 年 MM 月 dd 日"
                                                    value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </template>
                                <template v-else-if="itemk.itemType == 'cascader1'">
                                  <el-cascader
                                              :props="{ emitPath: false }"
                                              :options="itemk.opction"
                                              clearable
                                              size="small"

                                              ></el-cascader>
                                </template>
                                <template v-else-if="itemk.itemType == 'number'">
                                  <el-input-number class="u-item-width-normal" :min="1" :max="10" :label="itemk.label"></el-input-number>
                                </template>
                              </el-form-item>
                            </section>
                        </template>       
                    </el-tab-pane>
              </el-tabs>
    </el-form>
  </div>
</template>

<script>
import { isCard, isPassport, isMobile, isPhone } from '@/utils/validate'
import { computedCard } from '@/utils/index'

export default {
  name: 'resiForm',
  props: {
    formId: {
        type: String,
        default: 'resiForm'
      },
  },
  data () {
   return {
    optionsV: [],
    optionsB: [],
    optionsH: [],
    optionsD: [],
    optionsG: [],
    activeName: 'groupeduInfoDto',
    validateFlag:null,
    disabilityCategoryCode:[],
    // 基本信息input
    basicInformation:[{
      label:"本地户籍",
      itemType:"radio",
      formName:"localResidenceFlag",
      opction:[
        {label:'是',value:'1'},
        {label:'否',value:'0'}
      ],
    },
    {
      label:"居民姓名",
      itemType:"input",
      requiredFlag:true,
      formName:"name",
      rules:[{required:true,message:'居民姓名不能为空',trigger:'blur'}],
      opction:[
        
      ],
    },
    {
      label:"联系电话",
      itemType:"input",
      formName:"mobile",
      opction:[
        
      ],
    },
    {
      label:"证件号",
      itemType:"input",
      formName:"idNum",
      rules:[{required:true,message:'证件号不能为空'},
      { validator: (rule, value, callback) => {
           if(!/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(value)){
            //  console.log(/^[a-zA-Z]\w{5,17}$/.test(value));
             return callback(new Error('证件格式不符合'));
           }
           callback()
         },trigger:'change' | blur }
    ],
      opction:[
        
      ],
    },{
      label:"性别",
      itemType:"radio",
      formName:"gender",
      opction:[
        {label:'男',value:'1'},
        {label:'女',value:'2'}
      ],
    },
    {
      label:"民族",
      itemType:"select",
      formName:"nation",
      opction:[],
    },{
      label:'生日',
      itemType:"datepicker",
      formName:'birthday'
    },{
      label:'备注',
      itemType:"textarea",
      formName:'remark'
    },{
      label:'居民分类',
      itemType:"checkbox",
      opction:[{label:'党员',value:'0', formName:"partyFlag",},{label:'低保人员',value:'0', formName:"subsistenceAllowanceFlag	",},{label:'保障房人员',value:'0', formName:"ensureHouseFlag",},{label:'失业人员',value:'0', formName:"unemployedFlag",},{label:'育龄妇女',value:'0', formName:"fertileWomanFlag",},{label:'退役军人',value:'0', formName:"veteranFlag",},{label:'统战人员',value:'0', formName:"unitedFrontFlag",},{label:'信访人员',value:'0', formName:"petitionOfficerFlag",},{label:'志愿者',value:'0', formName:"volunteerFlag",},{label:'失独人员',value:'0', formName:"bereavedPersonFlag",},{label:'租户',value:'0', formName:"tenantFlag",},{label:'流动人口',value:'0', formName:"floatingFlag",},{label:'特殊人群',value:'0', formName:"specialCrowdFlag",},{label:'老年人',value:'0', formName:"oldPeopleFlag",},{label:'空巢老人',value:'0', formName:"emptyNesterFlag",},{label:'独居老人',value:'0', formName:"liveAloneFlag",},{label:'失能老人',value:'0', formName:"disabledFlag",},{label:'失智老人',value:'0', formName:"dementedFlag",},{label:'残疾',value:'0', formName:"disabilityFlag",},{label:'大病',value:'0', formName:"seriousIllnessFlag",},{label:'慢病',value:'0', formName:"chronicDiseaseFlag",}]
    }
    ],
    // 底部input
    footerInputList:[
    {id:'eduInfoDto',
    children:[{
      label:"文化程度",
      itemType:"select1",
      formName:"cultureLevel",
      opction:[
        
      ]},
      {
       label:"备注",
      itemType:"textarea1",
      formName:"eduRemark",
      opction:[
      ]}
    ]
    },
    {
      id:'hobbyInfoDto',
      children:[{
        label:"兴趣特长",
        itemType:"checkbox",
        formName:"hobbyCode",
        opction:[
          {label:'治安巡逻',formName:'hobbyCode1'},
          {label:'人民调解',formName:'hobbyCode2'},
          {label:'民情采集',formName:'hobbyCode3'},
          {label:'问题辅导',formName:'hobbyCode4'},
          {label:'结对帮扶',formName:'hobbyCode5'},
          {label:'应急处理',formName:'hobbyCode6'},
          {label:'义务理发',formName:'hobbyCode7'},
          {label:'家电维修',formName:'hobbyCode8'},
          {label:'其他',formName:'9'},
      ]},
      {
        label:'兴趣',
        itemType:"input1",
        formName:"interestDesc",
      },
      {
        label:'备注',
        itemType:"textarea1",
        formName:"hobbyRemark",
      }
    ]
    },
    {id:'religionDto',
    children:[{
      label:"宗教",
      itemType:"input1",
      formName:"religion",
      opction:[
       
      ]},
      {
       label:"备注",
      itemType:"textarea1",
      formName:"religionRemark",
      opction:[
      ]}
    ]
    },
    {id:'healthDto',
    children:[{
      label:"残疾类别",
      itemType:"select1",
      formName:"disabilityCategoryCode",
      opction:this.disabilityCategoryCode
    },
      {
       label:"残疾等级",
      itemType:"select1",
      formName:"disabilityLevel",
      opction:[
      {label:'一级',value:'0'},
       {label:'二级',value:'1'}
      ]},
      {
       label:"残疾证号",
      itemType:"input1",
      formName:"disabilityNum",
      opction:[
      ]},
      {
       label:"残疾说明",
      itemType:"input1",
      formName:"disabilityDesc",
      opction:[
      ]},
      {
       label:"监护人",
      itemType:"radio1",
      formName:"guardianFlag",
      opction:[
        {label:'有',formName:'',value:1},
        {label:'无',formName:'',value:0}
      ]},
      {
       label:"技能特长",
      itemType:"radio1",
      formName:"specialSkillFlag",
      opction:[
        {label:'有',formName:'',value:1},
        {label:'无',formName:'',value:0}
      ]},
      {
       label:"劳动能力",
       itemType:"radio1",
      formName:"workCapacityFlag",
      opction:[
        {label:'有',formName:'',value:1},
        {label:'无',formName:'',value:0}
      ]},
      {
       label:"非义务教育阶段助学",
       itemType:"radio1",
      formName:"voluntaryEducationFlag",
      opction:[
        {label:'有',formName:'',value:1},
        {label:'无',formName:'',value:0}
      ]},
      {
       label:"所患大病",
      itemType:"select1",
      formName:"illnessCode",
      opction:[
        
      ]},
      {
       label:"大病患病时间",
      itemType:"datepicker1",
      formName:"illnessTime",
      opction:[
        
      ]},
      {
       label:"所患慢性病",
      itemType:"select1",
      formName:"chronicDiseaseCode",
      opction:[
        
      ]},
      {
       label:"慢病患病时间",
      itemType:"datepicker1",
      formName:"chronicDiseaseTime",
      opction:[
        
      ]},
      {
       label:"是否参保",
       itemType:"radio1",
      formName:"insuredFlag",
      opction:[
        {label:'是',formName:'',value:1},
        {label:'否',formName:'',value:0}
      ]},
      {
       label:"自付金额",
      itemType:"input1",
      formName:"selfPayAmount",
      opction:[
      ]},
      {
       label:"救助金额",
      itemType:"input1",
      formName:"deliveranceAmount",
      opction:[
      ]},
      {
       label:"救助时间",
      itemType:"datepicker1",
      formName:"deliveranceTime",
      opction:[
        
      ]},
      {
       label:"享受救助明细序号",
      itemType:"input1",
      formName:"deliveranceNum",
      opction:[
      ]},
      {
       label:"备注",
      itemType:"textarea1",
      formName:"healthRemark",
      opction:[
      ]}
    ]
    },
    {id:'workInfoDto',
    children:[{
      label:"工作单位",
      itemType:"input1",
      formName:"workUnit",
      opction:[
       
      ]},
      {
       label:"职业",
      itemType:"input1",
      formName:"occupation",
      opction:[
      ]},
      {
       label:"离退休时间",
      itemType:"datepicker1",
      formName:"retireTime",
      opction:[
      ]},
      {
       label:"备注",
      itemType:"textarea1",
      formName:"workRemark",
      opction:[
      ]}
    ]
    },{
      id:"economyDto",
      children:[
      {
       label:"退休金额",
      itemType:"input1",
      formName:"retirementAmount",
      opction:[
      ]}, 
      {
       label:"月收入",
      itemType:"input1",
      formName:"monthIncome",
      opction:[
      ]},
      ]
    },{
      id:"resideInfoDto",
      children:[
      {
       label:"籍贯",
      itemType:"input1",
      formName:"nativePlace",
      opction:[
      ]}, 
      {
       label:"户籍所在地",
      itemType:"input1",
      formName:"placeOfDomicile",
      opction:[
      ]}, 
      {
       label:"现居住地址",
      itemType:"input1",
      formName:"currentResidence",
      opction:[
      ]}, 
      {
       label:"人户状况",
      itemType:"select1",
      formName:"householdSituation",
      opction:[
      ]},
      {
       label:"备注",
      itemType:"textarea1",
      formName:"resiRemark",
      opction:[
      ]}
      ]
    },{
      id:"familyInfoDto",
      children:[
      {
       label:"与户主关系",
      itemType:"select1",
      formName:"houseHolderRel",
      opction:[
      ]},
      {
       label:"居住情况",
      itemType:"select1",
      formName:"resideSituation",
      opction:[
      ]}, 
      {
       label:"婚姻状况",
      itemType:"select1",
      formName:"marriage",
      opction:[
      ]}, 
      {
       label:"配偶情况",
      itemType:"select1",
      formName:"spouseSituation",
      opction:[
      ]},
      {
       label:"该居民有无赡养人",
      itemType:"radio1",
      formName:"elderlyFlag",
      opction:[
        {label:'是',value:1},
        {label:'否',value:0}
      ]},
       {
       label:"该居民与赡养人关系",
      itemType:"select1",
      formName:"elderlyRelation",
      opction:[
      ]},
      {
       label:"赡养人联系电话",
      itemType:"input1",
      formName:"dependantMobile",
      opction:[
      ]}, {
       label:"备注",
      itemType:"textarea1",
      formName:"familyInfoRemark",
      opction:[
      ]}
      ]
    },{
      id:"parymemberInfoDto",
      children:[
      {
       label:"入党时间",
      itemType:"datepicker1",
      formName:"joinTime",
      opction:[
      ]},
      {
       label:"转正时间",
      itemType:"datepicker1",
      formName:"positiveTime",
      opction:[
      ]}, 
      {
       label:"所属支部",
      itemType:"cascader1",
      formName:"branchId",
      opction:[
      ]}, 
      {
       label:"流动党员",
      itemType:"radio1",
      formName:"flowFlag",
      opction:[
        {label:'是',value:1},
        {label:'否',value:0},
      ]},
      {
       label:"流动党员活动证号",
      itemType:"input1",
      formName:"flowActNum",
      opction:[
        
      ]},
       {
       label:"职务",
      itemType:"select1",
      formName:"partyJob",
      opction:[
      ]},
      {
       label:"是否退休",
      itemType:"radio1",
      formName:"retiredFlag",
      opction:[
        {label:'是',value:1},
        {label:'否',value:0},
      ]}, {
       label:"党员中心户",
      itemType:"radio1",
      formName:"centerFlag",
      opction:[
        {label:'是',value:1},
        {label:'否',value:0},
      ]},{
       label:"入党时所在党支部	",
      itemType:"input1",
      formName:"joinBranchName",
      opction:[
        
      ]},{
       label:"组织关系转入社区时间",
      itemType:"datepicker1",
      formName:"joinCommunityTime",
      opction:[
      ]},{
       label:"是否请长假",
      itemType:"radio1",
      formName:"longHolidayFlag",
      opction:[
        {label:'是',value:1},
        {label:'否',value:0},
      ]}
      ]
    },{
      id:'ensureHouseDto',
      children:[
      
      {
       label:"住房性质",
      itemType:"select1",
      formName:"housingNature",
      opction:[
      ]}, 
      {
       label:"保障类型",
      itemType:"input1",
      formName:"securityType",
      opction:[
      ]},{
       label:"发证日期",
      itemType:"datepicker1",
      formName:"certificateDate",
      opction:[
      ]}, 
      {
       label:"补贴编号",
      itemType:"input1",
      formName:"subsidyNum",
      opction:[
        
      ]},
       {
       label:"补贴金额	",
      itemType:"input1",
      formName:"subsidyAmount",
      opction:[
      ]}
      ]
    },{
      id:'unemployedDto',
      children:[
      {
       label:"原工作单位",
      itemType:"input1",
      formName:"originWorkUnit",
      }, 
      {
       label:"失业时间",
      itemType:"datepicker1",
      formName:"unemploymentTime",
      opction:[
        {label:'是',value:1},
        {label:'否',value:0},
      ]},{
       label:"失业证号",
      itemType:"input1",
      formName:"unemploymentNum",
      opction:[
      ]}, 
      {
       label:"再就业优惠证号",
      itemType:"input1",
      formName:"employmentNum",
      opction:[
        
      ]},
       {
       label:"技术特长",
      itemType:"input1",
      formName:"specialSkill",
      opction:[
      ]},{
       label:"失业原因",
      itemType:"input1",
      formName:"unemploymentReason",
      opction:[
      ]} ,{
       label:"是否就业困难对象",
      itemType:"radio1",
      formName:"employmentHardFlag",
      opction:[
        {label:'是',value:1},
        {label:'否',value:0}
      ]}, {
       label:"劳动能力就业愿望",
      itemType:"input1",
      formName:"employmentWish",
      opction:[
      ]}
      ]
    },{
      id:'veteranDto',
      children:[
      {
       label:"入伍时间",
      itemType:"datepicker1",
      formName:"joinArmyTime",
      opction:[
      ]}, 
      {
       label:"退伍时间",
      itemType:"datepicker1",
      formName:"leaveArmyTime",
      opction:[
      ]}, 
      {
       label:"服役单位",
      itemType:"input1",
      formName:"serviceUnit",
      opction:[
      ]}, 
      {
       label:"接收单位",
      itemType:"input1",
      formName:"receiveUnit	",
      opction:[
      ]}, 
      {
       label:"待安置补助金",
      itemType:"input1",
      formName:"settlementAmount",
      opction:[
        
      ]},
       {
       label:"培训状况",
      itemType:"input1",
      formName:"trainDesc",
      opction:[
      ]},
      {
       label:"参战时间开始日期",
      itemType:"datepicker1",
      formName:"joinWarStartTime",
      opction:[
      ]},
      {
       label:"参战时间截止日期",
      itemType:"datepicker1",
      formName:"joinWarEndTime",
      opction:[
      ]} ,
       {
       label:"现就业情况",
      itemType:"input1",
      formName:"employmentSituation",
      opction:[
      ]},
       {
       label:"是否办理公益性岗位",
      itemType:"radio1",
      formName:"pubWelfareJobFlag",
      opction:[
        {label:'是',value:1},
        {label:'否',value:0},
      ]}
      ]
    },
    {
      id:'unitedFrontDto',
      children:[{
        label:"职务",
        itemType:"input1",
        formName:"duty",
      },
      {
        label:"探亲情况	",
        itemType:"input1",
        formName:"visitation",
      }]
    },{
      id:'volunteerDto',
      children:[{
        label:"志愿者类别",
        itemType:"checkbox",
        formName:"volunteerCategory",
        opction:[
          {label:'文化队伍',formName:'hobbyCode1'},
          {label:'楼委会',formName:'hobbyCode2'},
          {label:'能人达人',formName:'hobbyCode3'},
          {label:'老友俱乐部',formName:'hobbyCode4'},
          {label:'代办员',formName:'hobbyCode5'},
          {label:'调解员',formName:'hobbyCode6'},
          {label:'采集员',formName:'hobbyCode7'},
          {label:'治安巡逻员',formName:'9'},
      ]},
      {
        label:'备注',
        itemType:"textarea1",
        formName:"volunteerRemark",
      }
    ]
    },{
      id:'oldPeopleDto',
      children:[ {
        label:'高龄补助',
        itemType:"input1",
        formName:"oldSubsidy",
      },]
    },{
      id:'specialDto',
      children:[ {
        label:'人群类别',
        itemType:"select1",
        formName:"specialCategoryCode",
        opction:[]
      },]
    }
    
    ],

    form:{
          agencyName:this.$store.state.user.agencyName,
          agencyId:this.$store.state.user.agencyId,
          gridName:'',
          gridId:'', //所属网格id
          villageId: '', //小区id
          buildId: '', //楼栋id
          unitId: '', //单元id
          homeId: '', //房屋id
          name:'', //姓名
          nation:'', //民族
          remark:'', //备注
          localResidenceFlag:'', //本地户籍
          birthday:'', //生日
          idNum:'', //证件号
          gender:'', // 性别
          mobile:'', //手机
          partyFlag:'0',//党员
          subsistenceAllowanceFlag:'0', //低保
          ensureHouseFlag:'0', //保障房
          unemployedFlag:'0',//失业
          fertileWomanFlag:'0', //育龄妇女
          veteranFlag:'0', //退役军人
          unitedFrontFlag:'0',//统战人员
          petitionOfficerFlag:'0',//信访人员
          volunteerFlag:'0', //志愿者
          bereavedPersonFlag:'0', //失独
          tenantFlag:'0', //租户
          floatingFlag:'0',//流动人口
          specialCrowdFlag:'0',//特殊人群
          oldPeopleFlag:'0', //老年人
          emptyNesterFlag:'0', //空巢
          liveAloneFlag:'0', //独居老人
          disabledFlag:'0', //失能老人
          dementedFlag:'0', //失智老人
          disabilityFlag:'0',//是否残疾
          seriousIllnessFlag:'0', //大病
          chronicDiseaseFlag:'0', //慢病
          eduInfoDto:{ // 教育信息
            cultureLevel:'',
            eduRemark:''
          },
          hobbyInfoDto:{ //兴趣爱好
            hobbyCode:[],//兴趣特长
            interestDesc:'',//兴趣
            hobbyRemark:''//备注
          },
          religionDto:{
            religion:'',
            religionRemark:''
          },
          healthDto:{ // 健康
            disabilityCategoryCode:'',//残疾类别
            disabilityLevel:'',//残疾等级
            disabilityNum:'',//残疾证号
            disabilityDesc:'',//残疾说明
            guardianFlag:null,//有无监护人
            specialSkillFlag:null,//有无技能特长【有:1 无:0】
            workCapacityFlag:null,//有无劳动能力【有:1 无:0】
            voluntaryEducationFlag:null,//有无非义务教育阶段助学【有:1 无:0】
            illnessCode:'',//所患大病字典code
            illnessTime:'',//大病患病时间yyyy-MM-dd
            chronicDiseaseCode:'',//所患慢性病code
            chronicDiseaseTime:'',//慢病患病时间
            insuredFlag:'',//是否参保【是:1 否:0】
            selfPayAmount:'',//自付金额
            deliveranceAmount:'',//救助金额
            deliveranceTime:'',//救助时间
            deliveranceNum:'',//享受救助明细序号
            healthRemark:''//备注
          },
          workInfoDto:{ //工作
            workUnit:'',//工作单位
            occupation:'',//职业	
            retireTime:'',//离退休时间		
            workRemark:'',//备注		
          },
          economyDto:{//经济
            retirementAmount:'',//退休金额	
            monthIncome:'',//月收入
          },
          resideInfoDto:{//居住信息
            nativePlace:'',//籍贯
            placeOfDomicile:'',//户籍所在地	
            currentResidence:'',//现居住地	
            householdSituation:'',//人户情况，字典code
            resiRemark:'',//备注
          },
          familyInfoDto:{//家庭
            houseHolderRel:'',//与户主关系	
            resideSituation:'',//居住情况		
            marriage:'',//婚姻状况		
            spouseSituation:'',//配偶情况		
            elderlyFlag:null,//有无赡养人【有:1 无:0】		
            elderlyRelation:'',//与赡养人关系【字典表】		
            dependantMobile:'',//赡养人联系电话			
            familyInfoRemark:'',//备注		
          },
          parymemberInfoDto:{//党员信息
            joinTime:'',//入党时间yyyy-MM-dd
            positiveTime:'',//转正时间yyyy-MM-dd	
            branchId:'',//所属支部	
            flowFlag:null,//是否流动党员：1是，0否	
            flowActNum:'',//流动党员活动证号	
            partyJob:'',//职务，字典code
            retiredFlag:null,//是否退休：1是，0否
            centerFlag:null,//是否党员中心户：1是，0否
            joinBranchName:'',//入党时所在党支部
            joinCommunityTime:'',//组织关系转入社区时间yyyy-MM-dd
            longHolidayFlag:null,//是否请长假：1是，0否
          },
          ensureHouseDto:{//保障房信息
            housingNature:'',//住房性质，字典code
            securityType:'',//保障类型	
            certificateDate:'',//发证日期yyyy-MM-dd
            subsidyNum:'',//补贴编号	
            subsidyAmount:'',//补贴金额	
          },
          unemployedDto:{//失业信息
            originWorkUnit:'',//原工作单位
            unemploymentTime:'',//失业时间yyyy-MM-dd	
            unemploymentNum:'',//失业证号	
            employmentNum:'',//再就业优惠证号	
            specialSkill:'',//技术特长	
            unemploymentReason:'',//失业原因【字典表】code	
            employmentHardFlag:null,//是否就业困难对象；1是0不是	
            employmentWish:'',//劳动能力就业愿望	
          },
          veteranDto:{//退役军人
            joinArmyTime:'',//入伍时间
            leaveArmyTime:'',//退伍时间
            serviceUnit:'',//服役单位	
            receiveUnit:'',//接收单位	
            settlementAmount:'',//待安置补助金	
            trainDesc:'',//培训状况	
            employmentSituation:'',//现就业情况	
            joinWarStartTime:'',//参战时间开始日期yyyy-MM-dd	
            joinWarEndTime:'',//参战时间截止日期yyyy-MM-dd	
            pubWelfareJobFlag:null,//是否办理公益性岗位;1是0否
          },
          unitedFrontDto:{//统战人员
            duty:'',//职务
            visitation:'',//探亲情况	
          },
          volunteerDto:{//志愿者信息	
            volunteerCategory:[],//志愿者类别
            volunteerRemark:''//备注

          },
          oldPeopleDto:{
            oldSubsidy:''//高龄补助	
          },
          specialDto:{//特殊人群
            specialCategoryCode:[]//人群类别【字典表】,可多选，以英文逗号隔开；	
          }
    },
    rulesForm: {
          villageId: [{ required: true, message: `请选择小区`, trigger: 'blur' }],
          gridId: [{ required: true, message: `请选择网格`, trigger: 'blur' }],
          buildId: [{ required: true, message: `请选择楼号`, trigger: 'blur' }],
          unitId: [{ required: true, message: `请选择单元`, trigger: 'blur' }],
          homeId: [{ required: true, message: `请选择房号`, trigger: 'blur' }],
          NAME:[{ required: true, message: `请选择房号`, trigger: 'blur' }]
    },
    // 底部tabs选项
    tabsList:[
      {groupId:'eduInfoDto',label:'教育'},{groupId:'hobbyInfoDto',label:'兴趣爱好'},{groupId:'religionDto',label:'宗教信仰'},{groupId:'healthDto',label:'健康'},{groupId:'workInfoDto',label:'工作'},{groupId:'economyDto',label:'经济情况'},{groupId:'resideInfoDto',label:'居住'},{groupId:'familyInfoDto',label:'家庭'},
    ]
   }
  },
  computed: {
  },
  watch: {
    form:{
    handler (val, val2) {
      
    },
      deep:true,
      immediate:true
    },
  },
  created () {
    this.getGridList()
 
    this.getAllNation()
  },
  methods: {

    submit_from(){
      return this.form
      // this.$refs.formId.validate(v=>{
      //   this.validateFlag = v
      // })
    },

    getAllNation(){
         // 民族字典
    this.getDictList()
    // 关系字典
    this.getRelationship()
    // 学历信息
    this.getEducation()
    //残疾类别
    this.getdisabilityNation()
    this.getdisabilityNationClass()
    this.getillnessNation()
    this.getchronicNation()
    this.getHouseholdNation()
    this.getMarriageNation()
    this.getResideNation()
    this.getSpouseNation()
    this.getBranchlist()
    this.getPartyNation()
    this.getResidentNation()
    this.getHousing()
    },
      getGridList () {
        const { user } = this.$store.state
        this.$http
          .post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId, purpose: 'addorupdate' })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            } else {
              console.log('获取查询详情成功', res.data)
              this.optionsG = res.data
            }
          })
          .catch(() => {
            return this.$message.error('网络错误')
          })
      },
      getValiheList () {
        const { user } = this.$store.state
        this.$http
          .post('/gov/org/icneighborhood/neighborhoodoption', { gridId: this.form.gridId, agencyId: user.agencyId })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            } else {
              console.log('获取查询详情成功', res.data)
              this.optionsV = res.data
            }
          })
          .catch(() => {
            return this.$message.error('网络错误')
          })
      },
      async  getdisabilityNation(){
      try {
        const { data } = await this.$http.post('sys/dict/data/dictlist', {'dictType':'disability_category_code'})
        this.footerInputList.forEach(c => {
        
          for(let i of c.children){
              if(i.formName == 'disabilityCategoryCode'){
                  i.opction = data.data
              }
          }
        })

      } catch (error) {
        console.log(error,'获取残疾字典');
      }

      },
      async  getdisabilityNationClass(){
      try {
        const { data } = await this.$http.post('sys/dict/data/dictlist', {'dictType':'disability_level'})
        this.footerInputList.forEach(c => {
       
          for(let i of c.children){
              if(i.formName == 'disabilityLevel'){
                  i.opction = data.data
              }
          }
        })

      } catch (error) {
        console.log(error,'获取残疾等级字典');
      }

      },
      async  getillnessNation(){
      try {
        const { data } = await this.$http.post('sys/dict/data/dictlist', {'dictType':'illness_code'})
        this.footerInputList.forEach(c => {
          for(let i of c.children){
              if(i.formName == 'illnessCode'){
                  i.opction = data.data
              }
          }
        })

      } catch (error) {
        console.log(error,'获取所患大病字典');
      }
      }, 
       async  getchronicNation(){
        try {
          const { data } = await this.$http.post('sys/dict/data/dictlist', {'dictType':'chronic_disease_code'})
          this.footerInputList.forEach(c => {
            for(let i of c.children){
                if(i.formName == 'chronicDiseaseCode'){
                    i.opction = data.data
                }
            }
          })

        } catch (error) {
          console.log(error,'获取所患慢病字典');
        }
      },
      async  getHouseholdNation(){
        try {
          const { data } = await this.$http.post('sys/dict/data/dictlist', {'dictType':'household_situation'})
          this.footerInputList.forEach(c => {
            for(let i of c.children){
                if(i.formName == 'householdSituation'){
                    i.opction = data.data
                }
            }
          })

        } catch (error) {
          console.log(error,'获取人户状况字典');
        }
      },
      async  getMarriageNation(){
        try {
          const { data } = await this.$http.post('sys/dict/data/dictlist', {'dictType':'marriage'})
          this.footerInputList.forEach(c => {
            for(let i of c.children){
                if(i.formName == 'marriage'){
                    i.opction = data.data
                }
            }
          })

        } catch (error) {
          console.log(error,'获取婚姻状况字典');
        }
      },
      async  getResideNation(){
        try {
          const { data } = await this.$http.post('sys/dict/data/dictlist', {'dictType':'reside_situation'})
          this.footerInputList.forEach(c => {
            for(let i of c.children){
                if(i.formName == 'resideSituation'){
                    i.opction = data.data
                }
            }
          })

        } catch (error) {
          console.log(error,'获取居住情况字典');
        }
      },
      async  getSpouseNation(){
        try {
          const { data } = await this.$http.post('sys/dict/data/dictlist', {'dictType':'spouse_situation'})
          this.footerInputList.forEach(c => {
            for(let i of c.children){
                if(i.formName == 'spouseSituation'){
                    i.opction = data.data
                }
            }
          })

        } catch (error) {
          console.log(error,'获取配偶情况字典');
        }
      },
      async  getResidentNation(){
        try {
          const { data } = await this.$http.post('sys/dict/data/dictlist', {'dictType':'resident_category'})
          this.footerInputList.forEach(c => {
            for(let i of c.children){
                if(i.formName == 'specialCategoryCode'){
                    i.opction = data.data
                }
            }
          })

        } catch (error) {
          console.log(error,'获取配偶情况字典');
        }
      },
      async  getPartyNation(){
        try {
          const { data } = await this.$http.post('sys/dict/data/dictlist', {'dictType':'party_job'})
          this.footerInputList.forEach(c => {
            for(let i of c.children){
                if(i.formName == 'partyJob'){
                    i.opction = data.data
                }
            }
          })

        } catch (error) {
          console.log(error,'获取职务字典');
        }
      },
      getBuildList () {
        this.$http
          .post('/gov/org/icbuilding/buildingoption', { neighborHoodId: this.form.villageId })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            } else {
              console.log('获取查询详情成功', res.data)
              this.optionsB = res.data
            }
          })
          .catch(() => {
            return this.$message.error('网络错误')
          })
      },
      getUniList () {
        this.$http
          .post('/gov/org/icbuildingunit/unitoption', { buildingId: this.form.buildId })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            } else {
              console.log('获取查询详情成功', res.data)
              this.optionsD = res.data
            }
          })
          .catch(() => {
            return this.$message.error('网络错误')
          })
      },
      getHouseList () {
        this.$http
          .post('/gov/org/ichouse/houseoption', { unitId: this.form.unitId })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            } else {
              console.log('获取查询详情成功', res.data)
              this.optionsH = res.data
            }
          })
          .catch(() => {
            return this.$message.error('网络错误')
          })
      },
      handleChangeCheckbox(e,val){
          this.handleTabShow(val,e)
      },
      handleTabShow(val,e){
       if(e == 1){
              if(val.formName == 'partyFlag'){
                this.tabsList.push({label:'党员信息',id:'0',groupId:'parymemberInfoDto'})
              }else if(val.formName == 'ensureHouseFlag'){
                this.tabsList.push({label:'保障房信息',id:'1',groupId:'ensureHouseDto'})
              }else if(val.formName == 'unemployedFlag'){
                this.tabsList.push({label:'失业',id:'2',groupId:'unemployedDto'})
              }else if(val.formName == 'veteranFlag'){
                this.tabsList.push({label:'退役军人',id:'3',groupId:'veteranDto'})
              }else if(val.formName == 'unitedFrontFlag'){
                this.tabsList.push({label:'统战',id:'4',groupId:'unitedFrontDto'})
              }else if(val.formName == 'volunteerFlag'){
                this.tabsList.push({label:'志愿者信息',id:'5',groupId:'volunteerDto'})
              }else if(val.formName == 'oldPeopleFlag'){
                this.tabsList.push({label:'老年人',id:'6',groupId:'oldPeopleDto'})
              }else if(val.formName == 'specialCrowdFlag') {
                this.tabsList.push({label:'特殊人群',id:'7',groupId:'specialDto'})
              }
       }else {
           let i = val.formName == 'partyFlag'?'0': val.formName == 'ensureHouseFlag'?'1':val.formName == 'unemployedFlag'?'2':val.formName == 'veteranFlag'?'3':val.formName == 'unitedFrontFlag'?'4':val.formName == 'volunteerFlag'?'5':val.formName == 'oldPeopleFlag'?'6':val.formName == 'specialCrowdFlag'?'7':''

           if(i != ''){
              this.tabsList.forEach(item =>{
                if(i != item.id){
                  this.tabsList = this.tabsList.filter(items=>items.id!=i)
                }
            }) 
            }
       }
       
      },
      handleChangeGrid (val) {
        console.log('val', val)
        for(let n of this.optionsG){
           if(n.value == val){
            this.form.gridName = n.label
           }
        }
        this.form.villageId = ''
        this.form.buildId = ''
        this.form.unitId = ''
        this.form.homeId = ''
        this.getValiheList()
        if (!val) {
          this.getBuildList()
          this.getUniList()
          this.getHouseList()
        }
      },
      validateIdcard (idCard, type) {
        this.$http
          .post('/epmetuser/icresiuser/getUserRoleByIdCard', { idCard })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            } else {
              console.log('获取查询详情成功', res.data)
  
              if (res.data.isVolunteer == '1') this.form.volunteerFlag = true
              else this.form.volunteerFlag = false
  
              if (res.data.isPartyMember == '1') {
                this.form.partyFlag = true
                this.isParty = true
                this.partyInfo = res.data.detail.ic_party_member
              } else this.form.partyFlag = false
            }
          })
          .catch(() => {
            return this.$message.error('网络错误')
          })
      },
      // 身份证号失去焦点事件
      handleValidBlur (item) {
          console.log('n---', item)
          if (item.formName !== 'idNum') return
          if (!isCard(this.form.idNum) && !isPassport(this.form.idNum)) return
          const { user } = this.$store.state
          let huji = '', i = 0
          if (user.areaCodePath && user.areaCodePath.length > 0) {
              i = user.areaCodePath.length - 1
              huji = user.areaCodePath[i].length > 6 ? user.areaCodePath[i].substr(0, 6) : user.areaCodePath[i]
          }

          if (this.form.idNum.length === 18 || this.form.idNum.length === 15) {
              const _id = this.form.idNum.substr(0, 6)
              const { sex, birth, age } = computedCard(this.form.idNum)
              this.form.birthday = birth
              this.form.gender = sex == 1 ? '1' : '2'
              this.form.oldPeopleFlag = age >= 60 ? 1 : 0
              // this.form.IS_BDHJ = huji == _id ? '1' : ''
              this.validateIdcard(this.form.idNum)
              console.log('age-----', age, _id)
          }

  },
      handleChangeV (val) {
        console.log('val', val)
        this.form.buildId = ''
        this.form.unitId = ''
        this.form.homeId = ''
        this.getBuildList()
        this.getUniList()
        this.getHouseList()
      },
      handleChangeB (val) {
        console.log('val', val)
        this.form.unitId = ''
        this.form.homeId = ''
        this.getUniList()
        this.getHouseList()
      },
      handleChangeD () {
        this.form.homeId = ''
        this.getHouseList()
      },
      handleClick (tab, event) {
      },
      handleForm () {
        let newForm = []
        this.$refs[this.formId].validate((valid) => {
          if (valid) {
            var hash = {}
            var i = 0
            var res = []
            this.tempFormList.forEach(function (item) {
              var name = item.tableName
              hash[name] ? res[hash[name] - 1].list.push(item) : hash[name] = ++i && res.push({
                list: [item],
                tableName: name
              })
            })
            const itemTypes = ['cascader', 'daterange', 'timerange']
            res.forEach(item => {
              let _form = {}
              item.list.filter(n => n.isChange).forEach(r => {
                _form[r.columnName] = r.multiSelect || itemTypes.includes(r.itemType) ? this.form[r.columnName].toString() : this.form[r.columnName]
                // return _form
              })
              if (this.fixed) {
                for (let n in this.fixedList) {
                  _form[n] = this.fixedList[n]
                }
              }
              newForm.push({
                tableName: item.tableName,
                supportAdd: this.supportAdd,
                list: Object.keys(_form).length > 0 ? [{ ..._form }] : []
              })
              console.log(newForm);
            })
            return newForm
          } else {
            console.log('error submit!!')
            return false
          }
        })
        if (this.supportAdd) newForm = this.handlerMuscForm()
        return newForm
      },
      // 为了实现根据房屋类型改版是否租户的需求
      handleChangeH (val) {
        let item = this.optionsH.find(item => item.value === val);
        if (item && item.type == '1') {
          this.form.IS_TENANT = '1'
          console.log('item-----', item)
        } else this.form.IS_TENANT = '0'
      },
      //获取民族字典
    async  getDictList(){
      try {
        const { data } = await this.$http.post('sys/dict/data/nation',{formCode: "resi_base_info"})
        this.dictList = data
        this.basicInformation.forEach(c => {
          if(c.formName == 'nation'){
            c.opction = data.data
            console.log(c.opction);
          }
        })

      } catch (error) {
        console.log(error,'获取民族字典');
      }

      },
      // 获取人物关系字典
      async  getRelationship(){
      try {
        const { data } = await this.$http.post('sys/dict/data/relationship',{formCode: "resi_base_info"})
        this.footerInputList.forEach(c => {
          for(let i of c.children){
              if(i.formName == 'houseHolderRel' ||i.formName == 'elderlyRelation' ){ 
                  i.opction = data.data
              }
          }
        })

        } catch (error) {
          console.log(error,'获取民族字典');
        }

      },
      async  getBranchlist(){
      try {
        const { data } = await this.$http.post('resi/partymember/icPartyOrg/branchlist',{formCode: "resi_base_info"})
        this.footerInputList.forEach(c => {
          for(let i of c.children){
              if(i.formName == 'branchId' ){ 
                  i.opction = data.data
              }
          }
        })

        } catch (error) {
          console.log(error,'获取支部字典');
        }
      },
      getTreeData (data) {
      if (!Array.isArray(data)) return [];
      let arr = data.map((item) => {
        let _item = {};
        if (item.children) {
          if (item.children.length === 0)
            _item = { ...item, children: undefined };
          else _item = { ...item, children: this.getTreeData(item.children) };
        } else {
          _item = { ...item };
        }
        return _item;
      });
      return arr;
    },
   
      async  getEducation(){
      try {
        let { data } = await this.$http.post('sys/dict/data/education',{formCode: "resi_base_info"})
        data.data = this.getTreeData(data.data)
        this.footerInputList.forEach(c => {
          for(let i of c.children){
              if(i.formName == 'cultureLevel'){
                  i.opction = data.data
                  console.log( i.opction );
              }
          }
        })
        } catch (error) {
          console.log(error,'获取民族字典');
        }

      },
      async  getHousing(){
      try {
        let { data } = await this.$http.post('sys/dict/data/house',{formCode: "resi_base_info"})
        data.data = this.getTreeData(data.data)
        this.footerInputList.forEach(c => {
          for(let i of c.children){
              if(i.formName == 'housingNature'){
                  i.opction = data.data
              }
          }
        })

        } catch (error) {
          console.log(error,'获取住房性质字典');
        }

      },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/modules/management/list-main.scss";
.resi-form{
    display: flex;
    flex-wrap: wrap;
}
.textareaDidth{
  width: 100%;
}
.f-flex ::v-deep .el-form-item--medium{
  margin-right: 2px;
}
.item-width-textarea{
  width: 437px;
  height: 80px;
}
::v-deep .el-textarea__inner{
  padding: 6px 15px;
}
::v-deep .el-tabs--top{
  width: 100%;
  .el-tabs__content{
    width: 100%;
    display: flex;
  }
}
.m-search{
  padding: 0 !important;
  margin: 0 !important;
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
}
.f-bto0{
  margin-bottom: 0px !important;
}
</style>
