<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="所属网格" prop="deptId">
        <treeselect v-model="queryParams.deptId" :options="deptOptions" :disable-branch-nodes="true" style="width:215px;"
                    placeholder="请选择所属网格"/>
      </el-form-item>
      <el-form-item label="身份证号" prop="cardId">
        <el-input
          v-model="queryParams.cardId"
          placeholder="请输入身份证号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入手机号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select
          v-model="queryParams.sex"
          placeholder="性别"
          clearable
          style="width:100%"
        >
          <el-option
            v-for="dict in dict.type.sys_user_sex"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否注销" prop="off">
        <el-select
          v-model="queryParams.off"
          placeholder="是否注销"
          clearable
          style="width:100%"
        >
          <el-option
            v-for="dict in dict.type.szxc_off"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="籍贯" prop="jg">
        <el-input
          v-model="queryParams.jg"
          placeholder="请输入籍贯"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否户主" prop="head">
        <el-select v-model="queryParams.head" placeholder="是否户主"
                   clearable style="width:100%">
          <el-option
            v-for="dict in dict.type.szxc_head"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="与户主关系" prop="relation">
        <el-select v-model="queryParams.relation" placeholder="与户主关系"
                   clearable style="width:100%">
          <el-option
            v-for="dict in dict.type.szxc_hzgx"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="国籍" v-if="queryMore" prop="nationality">
        <el-select
          v-model="queryParams.nationality"
          placeholder="国籍"
          clearable
          style="width:100%"
        >
          <el-option
            v-for="dict in dict.type.szxc_gj"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="曾用名" v-if="queryMore" prop="oldName">
        <el-input
          v-model="queryParams.oldName"
          placeholder="请输入曾用名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="户籍性质" v-if="queryMore" prop="jgNature">
        <el-select
          v-model="queryParams.jgNature"
          placeholder="户籍性质"
          clearable
          style="width:100%"
        >
          <el-option
            v-for="dict in dict.type.szxc_hjxz"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否常住" v-if="queryMore" prop="longLive">
        <el-select
          v-model="queryParams.longLive"
          placeholder="是否常住"
          clearable
          style="width:100%"
        >
          <el-option
            v-for="dict in dict.type.szxc_yes_no"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="户籍地址" v-if="queryMore" prop="hjAddress">
        <el-input
          v-model="queryParams.hjAddress"
          placeholder="请输入户籍地址"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="出生日期" v-if="queryMore" prop="bornDate">
        <el-date-picker clearable
                        v-model="queryParams.bornDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择出生日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="现居住地" v-if="queryMore" prop="currentAddress">
        <el-input
          v-model="queryParams.currentAddress"
          placeholder="请输入现居住地"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="本人情况" v-if="queryMore" prop="brqk">
        <el-select
          v-model="queryParams.brqk"
          placeholder="本人情况"
          clearable
          style="width:100%"
        >
          <el-option
            v-for="dict in dict.type.szxc_brqk"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="婚姻" v-if="queryMore" prop="hy">
        <el-select
          v-model="queryParams.hy"
          placeholder="婚姻"
          clearable
          style="width:100%"
        >
          <el-option
            v-for="dict in dict.type.szxc_hyzk"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学历" v-if="queryMore" prop="xueli">
        <el-select
          v-model="queryParams.xueli"
          placeholder="学历"
          clearable
          style="width:100%"
        >
          <el-option
            v-for="dict in dict.type.szxc_xueli"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="政治面貌" v-if="queryMore" prop="zzmm">
        <el-select
          v-model="queryParams.zzmm"
          placeholder="政治面貌"
          clearable
          style="width:100%"
        >
          <el-option
            v-for="dict in dict.type.szxc_zzmm"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="宗教信仰" v-if="queryMore" prop="zjxy">
        <el-select
          v-model="queryParams.zjxy"
          placeholder="宗教信仰"
          clearable
          style="width:100%"
        >
          <el-option
            v-for="dict in dict.type.szxc_zjxy"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="健康状况" v-if="queryMore" prop="jkzk">
        <el-select
          v-model="queryParams.jkzk"
          placeholder="健康状况"
          clearable
          style="width:100%"
        >
          <el-option
            v-for="dict in dict.type.szxc_jkzk"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button icon="el-icon-caret-bottom" v-if="!queryMore" @click="queryMoreFun" size="mini">展开</el-button>
        <el-button icon="el-icon-caret-top" v-if="queryMore" @click="queryMoreFun" size="mini">收起</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['szxc:jminfo:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['szxc:jminfo:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['szxc:jminfo:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="jminfoList" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="45" align="center" fixed/>
      <el-table-column label="身份证号" align="center" prop="cardId" min-width="180" fixed/>
      <el-table-column label="姓名" align="center" prop="name" min-width="100" fixed/>
      <el-table-column label="曾用名" align="center" prop="oldName" min-width="100"/>
      <el-table-column label="国籍" align="center" prop="nationality" min-width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.szxc_gj" :value="scope.row.nationality"/>
        </template>
      </el-table-column>
      <el-table-column label="出生日期" align="center" prop="bornDate" min-width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.bornDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
        </template>
      </el-table-column>
      <el-table-column label="籍贯" align="center" prop="jg" min-width="180" show-overflow-tooltip/>
      <el-table-column label="核查状态" align="center" prop="hcStatus" min-width="120">
        <template slot-scope="scope">
          <el-link v-if="scope.row.hcStatus==='0'" icon="el-icon-thumb" type="primary" @click="handleCheck(scope.row)">待核查</el-link>
          <el-link v-if="scope.row.hcStatus==='1'" type="success">已核查</el-link>
        </template>
      </el-table-column>
      <el-table-column label="户信息" align="center">
        <el-table-column label="户号" align="center" prop="acountNo" min-width="120"/>
        <el-table-column label="所属网格" align="center" prop="deptName" min-width="120"/>
        <el-table-column label="户籍地址" align="center" prop="hjAddress" min-width="120" show-overflow-tooltip/>
      </el-table-column>
      <el-table-column label="户籍性质信息" align="center">
        <el-table-column label="户籍性质" align="center" prop="jgNature" min-width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_hjxz" :value="scope.row.jgNature"/>
          </template>
        </el-table-column>
        <el-table-column label="与户主关系" align="center" prop="relation" min-width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_hzgx" :value="scope.row.relation"/>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="联系信息" align="center">
        <el-table-column label="手机号" align="center" prop="phone" min-width="120"/>
        <el-table-column label="现居住地" align="center" prop="currentAddress" min-width="120"/>
      </el-table-column>
      <el-table-column label="本人情况" align="center">
        <el-table-column label="本人情况" align="center" prop="brqk" min-width="120">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_brqk" :value="scope.row.brqk"/>
          </template>
        </el-table-column>
        <el-table-column label="婚姻" align="center" prop="hy" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_hyzk" :value="scope.row.hy"/>
          </template>
        </el-table-column>
        <el-table-column label="学历" align="center" prop="xueli" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_xueli" :value="scope.row.xueli"/>
          </template>
        </el-table-column>
        <el-table-column label="政治面貌" align="center" prop="zzmm" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_zzmm" :value="scope.row.zzmm"/>
          </template>
        </el-table-column>
        <el-table-column label="宗教信仰" align="center" prop="zjxy" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_zjxy" :value="scope.row.zjxy"/>
          </template>
        </el-table-column>
        <el-table-column label="健康状况" align="center" prop="jkzk" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_jkzk" :value="scope.row.jkzk"/>
          </template>
        </el-table-column>
        <el-table-column label="疾病描述" align="center" prop="ills" />
      </el-table-column>
      <el-table-column label="是否常住" align="center" prop="longLive" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.szxc_yes_no" :value="scope.row.longLive"/>
        </template>
      </el-table-column>
      <el-table-column label="是否注销" align="center" prop="off" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.szxc_off" :value="scope.row.off"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['szxc:jminfo:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.off==='0'"
            @click="handleZx(scope.row)"
            v-hasPermi="['szxc:jminfo:remove']"
          >注销</el-button>
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" style="margin-left: 6px">
            <el-button size="mini" type="text">更多操作</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleJmtag">人员标签</el-dropdown-item>
              <el-dropdown-item command="handleBankInfo">银行卡信息</el-dropdown-item>
              <el-dropdown-item command="handleHzbg">户主变更</el-dropdown-item>
              <el-dropdown-item command="handleClxx">车辆信息</el-dropdown-item>
              <el-dropdown-item command="handleFwxx">房屋信息</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改居民信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body class="add-edit" top="15px">
      <el-form ref="form" :model="form" :rules="rules" label-width="95px">
        <el-divider content-position="left" v-if="!form.id">户信息</el-divider>
        <el-row :gutter="10" v-if="!form.id">
          <el-col :span="8">
            <el-form-item label="户号" prop="acountNo">
              <el-input readonly
                placeholder="请选择户主"
                v-model="form.acountNo">
                <el-button slot="append" icon="el-icon-search" @click="acountNoQuery(1)"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属网格" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions" :disable-branch-nodes="true" :disabled="true"
                          placeholder="请选择所属网格" style="width:100%;" @select="selectedTree"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="户籍地址" prop="hjAddress">
              <el-input v-model="form.hjAddress" placeholder="请输入户籍地址" readonly/>
            </el-form-item>
          </el-col>

        </el-row>

        <el-divider content-position="left" v-if="!form.id">户籍性质信息</el-divider>

        <el-row :gutter="10" v-if="!form.id">
          <el-col :span="8">
            <el-form-item label="户籍性质" prop="jgNature">
              <el-select
                v-model="form.jgNature"
                placeholder="户籍性质"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="dict in dict.type.szxc_hjxz"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="与户主关系" prop="relation">
              <el-select @change="relationChange"
                v-model="form.relation"
                placeholder="与户主关系"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="dict in dict.type.szxc_hzgx"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否常住" prop="longLive">
              <el-select
                v-model="form.longLive"
                placeholder="是否常住"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="dict in dict.type.szxc_yes_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">人员基本信息</el-divider>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="曾用名" prop="oldName">
              <el-input v-model="form.oldName" placeholder="请输入曾用名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="国籍" prop="nationality">
              <el-select
                v-model="form.nationality"
                placeholder="国籍"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="dict in dict.type.szxc_gj"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="身份证号" prop="cardId">
              <el-input v-model="form.cardId" placeholder="请输入身份证号" :disabled="form.id"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期" prop="bornDate">
              <el-date-picker clearable style="width:100%;" :disabled="form.id"
                              v-model="form.bornDate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择出生日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" prop="sex">
              <el-select :disabled="form.id"
                v-model="form.sex"
                placeholder="性别"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="籍贯" prop="jg">
              <el-input v-model="form.jg" placeholder="请输入籍贯" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">联系信息</el-divider>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="现居住地" prop="currentAddress">
              <el-input v-model="form.currentAddress" placeholder="请输入现居住地" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">本人情况</el-divider>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="本人情况" prop="brqk">
              <el-select
                v-model="form.brqk"
                placeholder="本人情况"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="dict in dict.type.szxc_brqk"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="婚姻" prop="hy">
              <el-select
                v-model="form.hy"
                placeholder="婚姻"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="dict in dict.type.szxc_hyzk"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学历" prop="xueli">
              <el-select
                v-model="form.xueli"
                placeholder="学历"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="dict in dict.type.szxc_xueli"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="政治面貌" prop="zzmm">
              <el-select
                v-model="form.zzmm"
                placeholder="政治面貌"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="dict in dict.type.szxc_zzmm"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宗教信仰" prop="zjxy">
              <el-select
                v-model="form.zjxy"
                placeholder="宗教信仰"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="dict in dict.type.szxc_zjxy"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="健康状况" prop="jkzk">
              <el-select @change="jkzkChange"
                v-model="form.jkzk"
                placeholder="健康状况"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="dict in dict.type.szxc_jkzk"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-if="form.jkzk==='4'">
          <el-col :span="16">
            <el-form-item label="疾病描述" prop="ills">
              <el-input v-model="form.ills" placeholder="请输入疾病描述" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择户主信息" :visible.sync="hzInfo.visible" width="900px" append-to-body>
      <el-form :model="hzInfo.queryParams" ref="queryForm" size="small" :inline="true" label-width="70px">
        <el-form-item label="身份证号" prop="idCard">
          <el-input
            v-model="hzInfo.queryParams.idCard"
            placeholder="请输入身份证号"
            clearable
            @keyup.enter.native="hzInfoQuery"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="hzInfo.queryParams.name"
            placeholder="请输入姓名"
            clearable
            @keyup.enter.native="hzInfoQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="hzInfoQuery">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-alert title="双击选择户主" type="warning" :closable="false"></el-alert>
      <el-table v-loading="hzInfo.loading" :data="hzInfo.addressList" border @cell-dblclick="hzInfoDblclick">
        <el-table-column label="序号" align="center" prop="index" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="户号" align="center" prop="acountNo" />
        <el-table-column label="身份证号" align="center" prop="idCard" />
        <el-table-column label="姓名" align="center" prop="name" />
        <el-table-column label="户籍地址" align="center" prop="hjAddress" />
        <el-table-column label="所属网格" align="center" prop="deptName" />
      </el-table>
      <pagination
        v-show="hzInfo.total>0"
        :total="hzInfo.total"
        :page.sync="hzInfo.queryParams.pageNum"
        :limit.sync="hzInfo.queryParams.pageSize"
        @pagination="getlistAddress"
      />
    </el-dialog>

    <el-dialog title="选择人员标签" :visible.sync="rybqInfo.visible" width="600px" append-to-body>
      <div class="personnelTags">
        <el-checkbox-group v-model="rybqInfo.checkListIds">
          <el-checkbox v-for="item in rybqInfo.checkboxList" :key="item.id" :label="item.id" border :disabled="item.checkEnable==='1'">{{ item.tagName }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="rybqSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="银行卡信息" :visible.sync="bankInfo.visible" width="900px" append-to-body>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="bankInfoAdd"
            v-hasPermi="['szxc:bankinfo:add']"
          >添加</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="bankInfo.loading" :data="bankInfo.list" border>
        <el-table-column label="银行卡号" align="center" prop="cardNum" min-width="140px"/>
        <el-table-column label="银行行号" align="center" prop="bankNum" min-width="140px"/>
        <el-table-column label="银行名称" align="center" prop="bankName" min-width="140px"/>
        <el-table-column label="开户行" align="center" prop="bankAddress" min-width="140px"/>
        <el-table-column label="默认卡" align="center" prop="defaultCard" min-width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.defaultCard==='0'">是</span>
            <el-button v-if="scope.row.defaultCard==='1'" type="text" @click="defaultCardChange(scope.row)">设为默认</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="120px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="bankInfoUpdate(scope.row)"
              v-hasPermi="['szxc:bankinfo:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="bankInfoDelete(scope.row)"
              v-hasPermi="['szxc:bankinfo:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 添加或修改银行卡信息对话框 -->
    <el-dialog title="添加银行卡" :visible.sync="bankInfo.add_open" width="500px" append-to-body>
      <el-form ref="bankInfoForm" :model="bankInfo.form" :rules="bankInfo.rules" label-width="100px">
        <el-form-item label="银行卡号" prop="cardNum">
          <el-input v-model="bankInfo.form.cardNum" placeholder="请输入银行卡号" />
        </el-form-item>
        <el-form-item label="银行行号" prop="bankNum">
          <el-input v-model="bankInfo.form.bankNum" placeholder="请输入银行行号" />
        </el-form-item>
        <el-form-item label="银行名称" prop="bankName">
          <el-input v-model="bankInfo.form.bankName" placeholder="请输入银行名称" />
        </el-form-item>
        <el-form-item label="开户行" prop="bankAddress">
          <el-input v-model="bankInfo.form.bankAddress" placeholder="请输入开户行" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bankSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 注销对话框 -->
    <el-dialog title="注销" :visible.sync="zxInfo.visible" width="500px" append-to-body>
      <el-form ref="bankInfoForm" :model="zxInfo.form" :rules="zxInfo.rules" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="zxInfo.form.name" placeholder="请输入姓名" disabled/>
        </el-form-item>
        <el-form-item label="身份证号" prop="cardId">
          <el-input v-model="zxInfo.form.cardId" placeholder="请输入身份证号" disabled/>
        </el-form-item>
        <el-form-item label="注销原因" prop="reason">
          <el-input v-model="zxInfo.form.reason" type="textarea" placeholder="请输入注销原因" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="zxInfo.form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="zxInfoSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 户主变更 -->
    <el-dialog title="户主变更" :visible.sync="hzbg.visible" width="600px" append-to-body>
      <el-form ref="form" :model="hzbg.form" :rules="hzbg.rules" label-width="120px">
        <el-form-item label="居民姓名" prop="name">
          <el-input v-model="hzbg.form.name" placeholder="请输入居民姓名" disabled/>
        </el-form-item>
        <el-form-item label="居民身份证号" prop="idCard">
          <el-input v-model="hzbg.form.idCard" placeholder="请输入居民身份证号" disabled/>
        </el-form-item>
        <el-form-item label="原户主姓名" prop="yName">
          <el-input v-model="hzbg.form.yName" placeholder="请输入原户主姓名" disabled/>
        </el-form-item>
        <el-form-item label="原户主身份证号" prop="yIdCard">
          <el-input v-model="hzbg.form.yIdCard" placeholder="请输入原户主身份证号" disabled/>
        </el-form-item>
        <el-form-item label="变更原因" prop="bgReason">
          <el-select
            v-model="hzbg.form.bgReason"
            placeholder="变更原因"
            clearable
            style="width:100%"
          >
            <el-option
              v-for="dict in dict.type.szxc_hkbg_reason"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="变更时间" prop="bgTime">
          <el-date-picker clearable style="width: 100%"
                          v-model="hzbg.form.bgTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择变更时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="新户主姓名" prop="xName">
          <el-input
            readonly
            placeholder="请选择新户主"
            v-model="hzbg.form.xName">
            <el-button slot="append" icon="el-icon-search" @click="acountNoQuery(2)"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="新户主身份证号" prop="xIdCard">
          <el-input v-model="hzbg.form.xIdCard" placeholder="请输入新户主身份证号" disabled/>
        </el-form-item>
        <el-form-item label="户号" prop="acountNo">
          <el-input v-model="hzbg.form.acountNo" placeholder="请输入户号" disabled/>
        </el-form-item>
        <el-form-item label="所属网格" prop="deptName">
          <el-input v-model="hzbg.form.deptName" placeholder="请输入所属网格" disabled/>
        </el-form-item>
        <el-form-item label="户籍地址" prop="hjAddress">
          <el-input v-model="hzbg.form.hjAddress" placeholder="请输入户籍地址" disabled/>
        </el-form-item>
        <el-form-item label="户籍性质" prop="jgNature">
          <el-select
            v-model="hzbg.form.jgNature"
            placeholder="户籍性质"
            clearable
            style="width:100%"
          >
            <el-option
              v-for="dict in dict.type.szxc_hjxz"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="与户主关系" prop="relation">
          <el-select
                     v-model="hzbg.form.relation"
                     placeholder="与户主关系"
                     clearable
                     style="width:100%"
          >
            <el-option
              v-for="dict in dict.type.szxc_hzgx"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否常住" prop="longLive">
          <el-select
            v-model="hzbg.form.longLive"
            placeholder="是否常住"
            clearable
            style="width:100%"
          >
            <el-option
              v-for="dict in dict.type.szxc_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="hzbg.form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="hzbgSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="车辆信息" :visible.sync="clxx.visible" width="1000px" append-to-body>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="clxxAdd"
            v-hasPermi="['szxc:bankinfo:add']"
          >添加</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="clxx.loading" :data="clxx.list" border>
        <el-table-column label="车主姓名" align="center" prop="ownerName" />
        <el-table-column label="联系方式" align="center" prop="phone" />
        <el-table-column label="车牌号" align="center" prop="carNo" />
        <el-table-column label="车类型" align="center" prop="carType" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_cartype" :value="scope.row.carType"/>
          </template>
        </el-table-column>
        <el-table-column label="颜色" align="center" prop="colour" />
        <el-table-column label="品牌" align="center" prop="carBand" />
        <el-table-column label="车辆照片" align="center" prop="carPicture" >
          <template slot-scope="scope">
            <image-preview :src="scope.row.carPicture" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column label="所属网格" align="center" prop="deptName" />
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="clxxUpdate(scope.row)"
              v-hasPermi="['szxc:bankinfo:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="clxxDelete(scope.row)"
              v-hasPermi="['szxc:bankinfo:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 添加或修改车辆信息对话框 -->
    <el-dialog :title="clxx.title" :visible.sync="clxx.open" width="500px" append-to-body>
      <el-form ref="clxxForm" :model="clxx.form" :rules="clxx.rules" label-width="100px">
        <el-form-item label="车主姓名" prop="ownerName">
          <el-input v-model="clxx.form.ownerName" placeholder="请输入联系方式" disabled/>
        </el-form-item>
        <el-form-item label="所属网格" prop="deptId">
          <treeselect v-model="clxx.form.deptId" :options="deptOptions" :disable-branch-nodes="true"
                      disabled placeholder="请选择所属网格" style="width:100%;"/>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="clxx.form.phone" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="车牌号" prop="carNo">
          <el-input v-model="clxx.form.carNo" placeholder="请输入车牌号" />
        </el-form-item>
        <el-form-item label="车类型" prop="carType">
          <el-select
                     v-model="clxx.form.carType"
                     placeholder="车类型"
                     clearable
                     style="width:100%"
          >
            <el-option
              v-for="dict in dict.type.szxc_cartype"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="颜色" prop="colour">
          <el-input v-model="clxx.form.colour" placeholder="请输入颜色" />
        </el-form-item>
        <el-form-item label="品牌" prop="carBand">
          <el-input v-model="clxx.form.carBand" placeholder="请输入品牌" />
        </el-form-item>
        <el-form-item label="车辆照片" prop="carPicture">
          <image-upload v-model="clxx.form.carPicture"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="clxx.form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="clxxSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="房屋信息" :visible.sync="fwxx.visible" width="1200px" append-to-body>
      <el-table v-loading="fwxx.loading" :data="fwxx.list" border>
        <el-table-column label="主键ID" align="center" prop="id" />
        <el-table-column label="所属网格" align="center" prop="deptName" />
        <el-table-column label="户主姓名" align="center" prop="ownerName" />
        <el-table-column label="身份证号" align="center" prop="cardId" />
        <el-table-column label="小区名称" align="center" prop="houseName" />
        <el-table-column label="楼栋名称" align="center" prop="ldName" />
        <el-table-column label="单元" align="center" prop="unit" />
        <el-table-column label="门牌号" align="center" prop="doorNo" />
        <el-table-column label="房屋类型" align="center" prop="houseType" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_xqfwlx" :value="scope.row.houseType"/>
          </template>
        </el-table-column>
        <el-table-column label="房屋面积" align="center" prop="houseArea" />
        <el-table-column label="房屋性质" align="center" prop="houseProp" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_fw_xz" :value="scope.row.houseProp"/>
          </template>
        </el-table-column>
        <el-table-column label="取暖方式" align="center" prop="qnfs" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_qnfs" :value="scope.row.qnfs"/>
          </template>
        </el-table-column>
        <el-table-column label="厕所类型" align="center" prop="toiletType" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.szxc_cs_type" :value="scope.row.toiletType"/>
          </template>
        </el-table-column>
        <el-table-column label="房屋简介" align="center" prop="houseIntro" />
        <el-table-column label="房屋照片" align="center" prop="housePicture" >
          <template slot-scope="scope">
            <image-preview :src="scope.row.housePicture" :width="50" :height="50"/>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { listJminfo, getJminfo, addJminfo, updateJminfo } from "@/api/szxc/jminfo";
import { listAddress } from "@/api/szxc/address";
import { listJmtag, addAllJmtag } from "@/api/szxc/jmtag";
import { listTag } from "@/api/szxc/tag";
import { listBankinfo, editDefault, addBankinfo, updateBankinfo, delBankinfo } from "@/api/szxc/bankinfo";
import { listCarinfo, delCarinfo, addCarinfo, updateCarinfo } from "@/api/szxc/carinfo";
import { listHouseinfo } from "@/api/szxc/houseinfo";
import { addRecard } from "@/api/szxc/recard";
import { addOffrecard } from "@/api/szxc/offrecard";
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Jminfo",
  components: { Treeselect },
  dicts: ['szxc_hjxz', 'szxc_gj', 'szxc_head', 'szxc_hzgx', 'szxc_yes_no', 'szxc_off', 'szxc_gj', 'sys_user_sex',
    'szxc_brqk', 'szxc_hyzk', 'szxc_xueli', 'szxc_zjxy', 'szxc_jkzk', 'szxc_zzmm', 'szxc_hkbg_reason',
    'szxc_cartype', 'szxc_qnfs', 'szxc_fw_xz', 'szxc_xq_type', 'szxc_wy_type', 'szxc_cs_type', 'szxc_xqfwlx'],
  data() {
    return {
      queryMore: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 居民信息表格数据
      jminfoList: [],
      // 弹出层标题
      title: "",
      // 组织树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: null,
        deptName: null,
        name: null,
        oldName: null,
        nationality: null,
        cardId: null,
        bornDate: null,
        age: null,
        sex: null,
        jg: null,
        relation: null,
        jgNature: null,
        longLive: null,
        hjAddress: null,
        phone: null,
        currentAddress: null,
        brqk: null,
        hy: null,
        xueli: null,
        zzmm: null,
        zjxy: null,
        jkzk: null,
        ills: null,
        head: null,
        acountNo: null,
        off: null,
        userId: null
      },
      // 表单参数
      form: {
        id: null,
        deptId: null,
        deptName: null,
        name: null,
        oldName: null,
        nationality: null,
        cardId: null,
        bornDate: null,
        age: null,
        sex: null,
        jg: null,
        relation: null,
        jgNature: null,
        longLive: null,
        hjAddress: null,
        phone: null,
        currentAddress: null,
        brqk: null,
        hy: null,
        xueli: null,
        zzmm: null,
        zjxy: null,
        jkzk: null,
        ills: null,
        head: null,
        acountNo: null,
        off: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        userId: null
      },
      // 表单校验
      rules: {
        acountNo: [
          { required: true, message: "户号不能为空", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "所属网格不能为空", trigger: "blur" }
        ],
        hjAddress: [
          { required: true, message: "户籍地址不能为空", trigger: "blur" }
        ],
        jgNature: [
          { required: true, message: "户籍性质不能为空", trigger: "blur" }
        ],
        relation: [
          { required: true, message: "与户主关系不能为空", trigger: "blur" }
        ],
        head: [
          { required: true, message: "是否户主不能为空", trigger: "blur" }
        ],
        longLive: [
          { required: true, message: "是否常住不能为空", trigger: "blur" }
        ],
        off: [
          { required: true, message: "是否注销不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        nationality: [
          { required: true, message: "国籍不能为空", trigger: "blur" }
        ],
        cardId: [
          { required: true, message: "身份证号不能为空", trigger: "blur" }
        ],
        bornDate: [
          { required: true, message: "出生日期不能为空", trigger: "blur" }
        ],
        sex: [
          { required: true, message: "性别不能为空", trigger: "blur" }
        ],
        jg: [
          { required: true, message: "籍贯不能为空", trigger: "blur" }
        ],
      },
      // 户主信息
      hzInfo: {
        visible: false,
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 选择种类  1、新增居民信息   2、户口变更
        type: 1,
        // 查询参数
        queryParams:{
          pageNum: 1,
          pageSize: 10,
          name: null,
          idCard: null,
          acountNo: null,
          hjAddress: null,
          deptId: null
        },
        // 查询列表
        addressList: [],
        // 选中数据
        selectRow: null
      },
      // 人员标签
      rybqInfo: {
        jmId: null,
        visible: false,
        // 选中人员标签列表
        checkList: [],
        // 选中人员标签列表Ids
        checkListIds: [],
        // 人员标签选择列表
        checkboxList: []
      },
      // 银行卡信息
      bankInfo: {
        visible: false,
        // 遮罩层
        loading: false,
        // 查询列表
        list: [],
        // 弹出层标题
        title: '',
        // 添加弹出层
        add_open: false,
        // 表单参数
        form: {},
        // 居民信息
        jminRow: null,
        // 表单校验
        rules: {
          cardNum: [
            { required: true, message: "银行卡号不能为空", trigger: "blur" }
          ],
          bankNum: [
            { required: true, message: "银行行号不能为空", trigger: "blur" }
          ],
          bankName: [
            { required: true, message: "银行名称不能为空", trigger: "blur" }
          ],
          bankAddress: [
            { required: true, message: "开户行不能为空", trigger: "blur" }
          ],
        },
      },
      // 注销登记
      zxInfo: {
        visible: false,
        // 表单参数
        form: {},
        // 校验
        rules: {
          reason: [
            { required: true, message: "注销原因不能为空", trigger: "blur" }
          ],
        }
      },
      // 户主变更
      hzbg: {
        visible: false,
        form:{
          id: null,
          acountNo: null,
          jmId: null,
          name: null,
          idCard: null,
          yJmId: null,
          yName: null,
          yIdCard: null,
          bgReason: null,
          xJmId: null,
          xName: null,
          xIdCard: null,
          relation: null,
          bgTime: null,
          hjAddress: null,
          jgNature: null,
          longLive: null,
          remark: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          deptId: null,
          userId: null,
          deptName: null
        },
        rules: {
          name: [
            { required: true, message: "居民姓名不能为空", trigger: "blur" }
          ],
          idCard: [
            { required: true, message: "居民身份证号不能为空", trigger: "blur" }
          ],
          yName: [
            { required: true, message: "原户主姓名不能为空", trigger: "blur" }
          ],
          yIdCard: [
            { required: true, message: "原户主身份证号不能为空", trigger: "blur" }
          ],
          bgReason: [
            { required: true, message: "变更原因不能为空", trigger: "blur" }
          ],
          xName: [
            { required: true, message: "新户主姓名不能为空", trigger: "blur" }
          ],
          xIdCard: [
            { required: true, message: "新户主身份证号不能为空", trigger: "blur" }
          ],
          acountNo: [
            { required: true, message: "户号不能为空", trigger: "blur" }
          ],
          deptName: [
            { required: true, message: "所属网格不能为空", trigger: "blur" }
          ],
          hjAddress: [
            { required: true, message: "户籍地址不能为空", trigger: "blur" }
          ],
          jgNature: [
            { required: true, message: "户籍性质不能为空", trigger: "blur" }
          ],
          relation: [
            { required: true, message: "与户主关系不能为空", trigger: "blur" }
          ],
          longLive: [
            { required: true, message: "是否常住不能为空", trigger: "blur" }
          ],
        }
      },
      // 车辆信息
      clxx: {
        visible: false,
        // 遮罩层
        loading: false,
        // 查询列表
        list: [],
        // 弹出层标题
        title: '',
        // 添加弹出层
        open: false,
        // 表单参数
        form: {},
        // 居民信息
        jminRow: null,
        // 表单校验
        rules: {
          ownerName: [
            { required: true, message: "车主姓名不能为空", trigger: "blur" }
          ],
          carNo: [
            { required: true, message: "车牌号不能为空", trigger: "blur" }
          ],
          carType: [
            { required: true, message: "车类型不能为空", trigger: "change" }
          ],
          colour: [
            { required: true, message: "颜色不能为空", trigger: "blur" }
          ],
          deptId: [
            { required: true, message: "所属网格不能为空", trigger: "blur" }
          ],
        },
      },
      // 房屋信息
      fwxx: {
        visible: false,
        // 遮罩层
        loading: false,
        // 查询列表
        list: [],
        // 居民信息
        jminRow: null,
      },
    };
  },
  created() {
    this.getList();
    this.getDeptTree();
  },
  methods: {
    /** 查询组织下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    selectedTree(node){
      this.form.deptId = node.id;
      this.form.deptName = node.label;
    },
    acountNoQuery(type){
      this.hzInfo.type = type
      this.hzInfo.visible = true;
      this.getlistAddress()
    },
    /** 查询居民信息列表 */
    getList() {
      this.loading = true;
      listJminfo(this.queryParams).then(response => {
        this.jminfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        deptId: null,
        deptName: null,
        name: null,
        oldName: null,
        nationality: null,
        cardId: null,
        bornDate: null,
        age: null,
        sex: null,
        jg: null,
        relation: null,
        jgNature: null,
        longLive: null,
        hjAddress: null,
        phone: null,
        currentAddress: null,
        brqk: null,
        hy: null,
        xueli: null,
        zzmm: null,
        zjxy: null,
        jkzk: null,
        ills: null,
        head: null,
        acountNo: null,
        off: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        userId: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 更多或收起
    queryMoreFun(){
      this.queryMore = !this.queryMore;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加居民信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getJminfo(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改居民信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateJminfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.form.off = '0';
            if(this.form.relation==='1'){
              this.form.head = '0';
            }else {
              this.form.head = '1';
            }
            addJminfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('szxc/jminfo/export', {
        ...this.queryParams
      }, `jminfo_${new Date().getTime()}.xlsx`)
    },
    // 审查
    handleCheck(row){
      this.$modal.confirm('是否确认身份证号【"' + row.cardId + '"】的数据项已核查没问题？').then(()=>{
        const detail = row
        detail.hcStatus = '1';
        updateJminfo(detail).then(response => {
          this.$modal.msgSuccess("核查成功");
          this.getList();
        });
      })
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleJmtag":
          this.handleJmtag(row);
          break;
        case "handleBankInfo":
          this.handleBankInfo(row);
          break;
        case "handleHzbg":
          this.handleHzbg(row);
          break;
        case "handleClxx":
          this.handleClxx(row);
          break;
        case "handleFwxx":
          this.handleFwxx(row);
          break;
        default:
          break;
      }
    },
    /** 查询户主信息列表 */
    getlistAddress() {
      this.hzInfo.loading = true;
      listAddress(this.hzInfo.queryParams).then(response => {
        this.hzInfo.addressList = response.rows;
        this.hzInfo.total = response.total;
        this.hzInfo.loading = false;
      });
    },
    // 户主信息查询
    hzInfoQuery(){
      this.hzInfo.queryParams.pageNum = 1;
      this.getlistAddress();
    },
    // 户主选择 选中数据
    hzInfoDblclick(row) {
      this.hzInfo.selectRow = row;
      if(this.hzInfo.type===1){
        this.form.acountNo = row.acountNo;
        this.form.deptId = row.deptId;
        this.form.deptName = row.deptName;
        this.form.hjAddress = row.hjAddress;
      }else if(this.hzInfo.type===2){
        this.hzbg.form.acountNo = row.acountNo;
        this.hzbg.form.xJmId = row.jmId;
        this.hzbg.form.xName = row.name;
        this.hzbg.form.xIdCard = row.idCard;
        this.hzbg.form.deptId = row.deptId;
        this.hzbg.form.deptName = row.deptName;
        this.hzbg.form.hjAddress = row.hjAddress;
      }
      this.hzInfo.visible = false
    },
    // 与户主关系
    relationChange(val){
      if(val==='1'){
        this.form.cardId = this.hzInfo.selectRow.idCard;
        this.form.name = this.hzInfo.selectRow.name;
      }else {
        this.form.cardId = '';
        this.form.name = '';
      }
    },
    // 健康状况
    jkzkChange(){
      this.form.ills = '';
    },
    // 点击人员标签
    handleJmtag(row){
      this.rybqInfo.visible = true;
      this.getlistTag(row);
      this.getlistJmtag(row);
    },
    /** 查询人员标签列表 */
    getlistTag() {
      listTag({
        pageNum: 1,
        pageSize: 100000000,
      }).then(response => {
        this.rybqInfo.checkboxList = response.rows;
      });
    },
    /** 查询关联人员标签列表 */
    getlistJmtag(row) {
      this.rybqInfo.jmId = row.id;
      listJmtag({
        pageNum: 1,
        pageSize: 100000000,
        jmId: row.id
      }).then(response => {
        this.rybqInfo.checkListIds = []
        this.rybqInfo.checkList = response.rows;
        this.rybqInfo.checkList.forEach(item =>{
          this.rybqInfo.checkListIds.push(item.tagId)
        })
      });
    },
    /** 人员标签选择提交 */
    rybqSubmit(){
      let szxcJmTags = [];
      let checkListIds = this.rybqInfo.checkListIds;
      let checkboxList = this.rybqInfo.checkboxList;
      for (let i = 0; i < checkboxList.length; i++) {
        for (let j = 0; j < checkListIds.length; j++) {
          if (checkboxList[i].id === checkListIds[j]) {
            szxcJmTags.push({
              jmId: this.rybqInfo.jmId,
              tagId: checkboxList[i].id,
              tagName: checkboxList[i].tagName
            });
          }
        }
      }

      addAllJmtag({
        szxcJmTags: szxcJmTags
      }).then(response => {
        this.$modal.msgSuccess("操作成功");
        this.rybqInfo.visible = false;
      });
    },
    /** 查询银行卡信息列表 */
    handleBankInfo(row){
      this.bankInfo.jminRow = row;
      this.bankInfo.visible = true;
      this.getlistBankinfo();
    },
    /** 查询银行卡信息列表 */
    getlistBankinfo() {
      listBankinfo({
        pageNum: 1,
        pageSize: 100000000,
        ownerId: this.bankInfo.jminRow.id
      }).then(response => {
        this.bankInfo.list = response.rows
      });
    },
    // 默认卡
    defaultCardChange(row) {
      this.$modal.confirm('确认将银行卡号为【"' + row.cardNum + '"】的银行卡设为默认卡吗？').then(()=> {
        editDefault({
          id: row.id,
          jmId: row.ownerId,
          defaultCard: '0'
        }).then(() => {
          this.$modal.msgSuccess("操作成功");
          this.getlistBankinfo()
        })
      })
    },
    // 添加银行卡
    bankInfoAdd(){
      this.resetForm("bankInfoForm");
      this.bankInfo.form = {
        id: null,
        ownerId: this.bankInfo.jminRow.id,
        ownerName: this.bankInfo.jminRow.name,
        cardId: this.bankInfo.jminRow.cardId,
        cardNum: null,
        bankNum: null,
        bankName: null,
        bankAddress: null,
        defaultCard: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        deptId: this.bankInfo.jminRow.deptId,
        deptName: this.bankInfo.jminRow.deptName,
        userId: null
      };
      this.bankInfo.title = '添加银行卡';
      this.bankInfo.add_open = true;
    },
    /** 修改按钮操作 */
    bankInfoUpdate(row) {
      this.bankInfo.form = row;
      this.bankInfo.title = '修改银行卡';
      this.bankInfo.add_open = true;
    },
    /** 删除按钮操作 */
    bankInfoDelete(row) {
      this.$modal.confirm('是否确认删除银行卡号为【"' + row.cardNum + '"】的数据项？').then(function() {
        return delBankinfo(row.id);
      }).then(() => {
        this.getlistBankinfo();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 添加提交银行卡
    bankSubmit(){
      this.$refs["bankInfoForm"].validate(valid => {
        if (valid) {
          if (this.bankInfo.form.id != null) {
            updateBankinfo(this.bankInfo.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.bankInfo.add_open = false;
              this.getlistBankinfo();
            });
          } else {
            this.bankInfo.form.defaultCard = '1'
            addBankinfo(this.bankInfo.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.bankInfo.add_open = false;
              this.getlistBankinfo();
            });
          }
        }
      });
    },
    // 点击注销
    handleZx(row){
      this.zxInfo.form = row;
      this.zxInfo.form.jmId = row.id;
      this.zxInfo.visible = true;
    },
    // 注销提交
    zxInfoSubmit(){
      addOffrecard(this.zxInfo.form).then(response => {
        this.$modal.msgSuccess("注销成功");
        this.zxInfo.visible = false;
        this.getList();
      });
    },
    // 户主变更
    handleHzbg(row){
      listAddress({
        pageNum: 1,
        pageSize: 10000,
        acountNo: row.acountNo
      }).then(response => {
        this.hzbg.form.acountNo = row.acountNo;
        this.hzbg.form.jmId = row.id;
        this.hzbg.form.name = row.name;
        this.hzbg.form.idCard = row.cardId;
        this.hzbg.form.yJmId = response.rows[0].yJmId;
        this.hzbg.form.yName = response.rows[0].name;
        this.hzbg.form.yIdCard = response.rows[0].idCard;
        this.hzbg.visible = true;
      });
    },
    // 户主变更提交
    hzbgSubmit(){
      addRecard(this.hzbg.form).then(response => {
        this.$modal.msgSuccess("变更成功");
        this.hzbg.visible = false;
        this.getList();
      });
    },
    // 车辆信息
    handleClxx(row){
      this.clxx.jminRow = row;
      this.clxx.visible = true;
      this.getlistClxx();
    },
    /** 查询车辆信息列表 */
    getlistClxx() {
      listCarinfo({
        pageNum: 1,
        pageSize: 100000000,
        ownerId: this.clxx.jminRow.id
      }).then(response => {
        this.clxx.list = response.rows
      });
    },
    // 添加车辆
    clxxAdd(){
      this.resetForm("clxxForm");
      this.clxx.form = {
        id: null,
        ownerId: this.clxx.jminRow.id,
        ownerName: this.clxx.jminRow.name,
        phone: null,
        carNo: null,
        carType: null,
        colour: null,
        carBand: null,
        carPicture: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        deptId: this.clxx.jminRow.deptId,
        deptName: this.clxx.jminRow.deptName,
        userId: null,
        remark: null
      };
      this.clxx.title = '添加车辆';
      this.clxx.open = true;
    },
    /** 修改按钮操作 */
    clxxUpdate(row) {
      this.clxx.form = row;
      this.clxx.title = '修改车辆';
      this.clxx.open = true;
    },
    /** 删除按钮操作 */
    clxxDelete(row) {
      this.$modal.confirm('是否确认删除车辆车牌号为【"' + row.carNo + '"】的数据项？').then(function() {
        return delCarinfo(row.id);
      }).then(() => {
        this.getlistClxx();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 添加车辆银行卡
    clxxSubmit(){
      this.$refs["clxxForm"].validate(valid => {
        if (valid) {
          if (this.clxx.form.id != null) {
            updateCarinfo(this.clxx.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.clxx.open = false;
              this.getlistClxx();
            });
          } else {
            addCarinfo(this.clxx.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.clxx.open = false;
              this.getlistClxx();
            });
          }
        }
      });
    },
    // 房屋信息
    handleFwxx(row){
      this.fwxx.jminRow = row;
      this.fwxx.visible = true;
      this.getlistHouseinfo();
    },
    /** 查询房屋信息列表 */
    getlistHouseinfo() {
      listHouseinfo({
        pageNum: 1,
        pageSize: 100000000,
        ownerId: this.fwxx.jminRow.id
      }).then(response => {
        this.fwxx.list = response.rows
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.add-edit{
  ::v-deep.el-dialog__header{
    padding: 20px 40px !important;
    padding-bottom: 10px !important;
  }

  ::v-deep.el-dialog{
    margin-top: 30px !important;
  }
  ::v-deep.el-dialog__body{
    padding: 0px 40px !important;

    .el-form-item{
      margin-bottom: 20px;
    }
    .el-divider--horizontal{
      height: 2px;
      margin-top: 15px;
      margin-bottom: 30px;
    }
    .el-divider__text{
      font-size: 16px;
      font-weight: bolder;
    }
  }
}

.personnelTags{
  padding: 0px 30px;

  .el-checkbox--medium{
    margin: 5px 10px !important;
  }
}

</style>
