<template>
  <div id="estateSerach">
      <cmpTitle v-if="title!=='社区查询'" :title="title"></cmpTitle>
      <el-input v-model="formData.name" placeholder="请输入姓名" size="mini" prefix-icon="el-icon-user"></el-input>
      <el-input v-if="title=='社区查询'" v-model="formData.idCard" placeholder="请输入身份证" size="mini" prefix-icon="el-icon-postcard"></el-input>
      <el-input v-if="title=='社区查询'||title=='车辆查询'" v-model="formData.carNumber" placeholder="请输入车牌号" size="mini" prefix-icon="el-icon-s-flag"></el-input>
      <el-input v-if="title=='人员查询'&&!userInfo" v-model="formData.buildingName" placeholder="请输入楼栋号" size="mini" prefix-icon="el-icon-s-flag"></el-input>
      <el-input v-if="title=='人员查询'&&!userInfo" v-model="formData.roomName" placeholder="请输入房间号" size="mini" prefix-icon="el-icon-s-flag"></el-input>
      <el-input v-if="title=='人员查询'&&userInfo" v-model="formData.tel" placeholder="请输入手机号" size="mini" prefix-icon="el-icon-s-flag"></el-input>
      <div style="display: flex;justify-content: space-around;margin-top: 20px;">
        <el-button @click="handleSubmit" icon="el-icon-search" size="mini" plain>查 询</el-button>
        <el-button @click="handleEmpty" icon="el-icon-delete"  size="mini" plain >清 空</el-button>
      </div>
  </div>
</template>
<script>
// import {getPage} from "@/api/community/houseuser";
import {getUserInfo} from "../../../util/util.js"
import cmpTitle from "../common/cmpTitle.vue"
export default {
  components:{
    cmpTitle
  },
      data() {
        return {
          input:'',
          obj0:{},
          formData:{
            name:'',
            idCard:'',
            carNumber:'',
            buildingName:'',
            roomName:'',
            tel:''
          },
          userInfo:false

        }
      },
      props:['title'],
      mounted() {
        this.userInfo = getUserInfo()
      },
      methods:{
        handleEmpty(){
          this.formData.name = '';
          this.formData.idCard = '';
          this.formData.carNumber = '';
          this.formData.buildingName = '';
          this.formData.roomName = '';
          this.formData.tel = '';
        },
        handleSubmit(){
          var _this = this;
          let page = {};
          page.currentPage = 1;
          page.pageSize = 10;
          getPage(page.currentPage, page.pageSize, this.formData).then(res => {
            let data = res.data.data;
            _this.$emit("onSearch",data.records)
          });
        }
      }
    }
</script>
<style lang="less">
  #estateSerach{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-right: 20px;
    .rose-chart-title {
        height: 30px;
        font-weight: bold;
        font-size: 16px;
        display: flex;
        align-items: center;
      }
      .el-input{
        margin-top: 10px;
      }
      .el-input--mini .el-input__inner{
        color: #fff;
        background-color: rgba(6, 30, 93, 0);
      }
    .el-button{
      background-color: rgba(6, 30, 93, 0);
      color: #fff;
      border-color: #fff;
    }
    .el-button:hover{
      background-color: rgba(6, 30, 93, 1);
      color: #fff;
      border-color: #fff;
    }
  }
</style>
