<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="110px">
      <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="idCard">
        <el-input
          v-model="queryParams.idCard"
          placeholder="请输入居民身份证号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="原户主姓名" prop="yName">
        <el-input
          v-model="queryParams.yName"
          placeholder="请输入原户主姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="原户主身份证号" prop="yIdCard">
        <el-input
          v-model="queryParams.yIdCard"
          placeholder="请输入原户主身份证号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="变更原因" prop="bgReason">
        <el-select v-model="queryParams.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="xName">
        <el-input
          v-model="queryParams.xName"
          placeholder="请输入新户主姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="新户主身份证号" prop="xIdCard">
        <el-input
          v-model="queryParams.xIdCard"
          placeholder="请输入新户主身份证号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="户号" prop="acountNo">
        <el-input
          v-model="queryParams.acountNo"
          placeholder="请输入户号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </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="变更时间" prop="bgTime">
        <el-date-picker clearable
                        v-model="queryParams.bgTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择变更时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="户籍地址" prop="hjAddress">
        <el-input
          v-model="queryParams.hjAddress"
          placeholder="请输入户籍地址"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="户籍性质" 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="是否常住" 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="所属网格" prop="deptId">
        <treeselect v-model="queryParams.deptId" :options="deptOptions" :disable-branch-nodes="true" style="width:215px;"
                    placeholder="请选择所属网格"/>
      </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-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="recardList" border>
      <el-table-column label="ID" align="center" prop="id" min-width="45"/>
      <el-table-column label="户号" align="center" prop="acountNo"/>
      <el-table-column label="居民姓名" align="center" prop="name" />
      <el-table-column label="居民身份证号" align="center" prop="idCard" min-width="140" show-overflow-tooltip/>
      <el-table-column label="原户主姓名" align="center" prop="yName" />
      <el-table-column label="原户主身份证号" align="center" prop="yIdCard" min-width="140" show-overflow-tooltip/>
      <el-table-column label="变更原因" align="center" prop="bgReason">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.szxc_hkbg_reason" :value="scope.row.bgReason"/>
        </template>
      </el-table-column>
      <el-table-column label="新户主姓名" align="center" prop="xName" />
      <el-table-column label="新户主身份证号" align="center" prop="xIdCard" min-width="140" show-overflow-tooltip/>
      <el-table-column label="与户主关系" align="center" prop="relation">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.szxc_hzgx" :value="scope.row.relation"/>
        </template>
      </el-table-column>
      <el-table-column label="变更时间" align="center" prop="bgTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.bgTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="户籍地址" align="center" prop="hjAddress" />
      <el-table-column label="户籍性质" align="center" prop="jgNature">
        <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="deptName" />
      <el-table-column label="是否常住" align="center" prop="longLive" min-width="70">
        <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="remark" />
    </el-table>

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

<script>
  import { listRecard } from "@/api/szxc/recard";
  import { deptTreeSelect } from "@/api/system/user";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "Recard",
    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'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 户口变更记录表格数据
        recardList: [],
        // 组织树选项
        deptOptions: undefined,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          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,
          deptId: null,
          userId: null,
          deptName: null
        },
      };
    },
    created() {
      this.getList();
      this.getDeptTree();
    },
    methods: {
      /** 查询组织下拉树结构 */
      getDeptTree() {
        deptTreeSelect().then(response => {
          this.deptOptions = response.data;
        });
      },
      /** 查询户口变更记录列表 */
      getList() {
        this.loading = true;
        listRecard(this.queryParams).then(response => {
          this.recardList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
    }
  };
</script>
