<template>
	<el-row class="box">
		<el-col :span="24">
			<el-row>
				<el-col :span="24">
					<el-form :inline="true" class="demo-form-inline" label-width="106px">
						<el-form-item label="宗地编码">
							<el-input
								v-model="queryData.zddm"
								placeholder="输入宗地编码"
								@change="query"
							></el-input>
						</el-form-item>
						<el-form-item label="项目名称">
							<el-input
									placeholder="输入项目名称"
									v-model="queryData.xmmc"
									@change="query"
							></el-input>
						</el-form-item>
						<el-form-item label="不动产单元号">
							<el-input
								maxlength="28"
								v-model="queryData.bdcdyh"
								placeholder="输入不动产单元号"
								@change="query"
							></el-input>
						</el-form-item>
					<el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
					<el-button type="warning" @click="reset">重置</el-button>
					<el-button 
						type="primary"
						@click="moreSearch"
						>更多查询
					</el-button>
						<!-- @click="ismore = !ismore" -->
					</el-form>
				</el-col>
			</el-row>
			<el-row class="row3"  v-if="ismore">
				<el-col :span="22">
					<el-form :inline="true" class="demo-form-inline" label-width="106px">
						<el-form-item label="权利人名称">
							<el-input
								placeholder="输入权利人名称"
								v-model="queryData.qlrmc"
								@change="query"
							></el-input>
						</el-form-item>
						<el-form-item label="坐落">
							<el-input
									v-model="queryData.zl"
									placeholder="输入坐落地址"
									@change="query"
							></el-input>
						</el-form-item>
						<el-form-item label="不动产权证号">
							<el-input
								placeholder="输入不动产权证号"
								v-model="queryData.bdcqzh"
								@change="query"
							></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="2" :offset="offset">
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form :inline="true" :model="queryData" class="demo-form-inline" label-width="106px">
						<el-form-item class="demo-form-inline" label="单元范围">
							<el-checkbox-group v-model="queryData.dylxs" @change="query">
								<el-checkbox label="zd" name="type">宗地</el-checkbox>
								<el-checkbox label="dz" name="type">多幢</el-checkbox>
								<el-checkbox label="zrz" name="type">自然幢</el-checkbox>
								<el-checkbox label="h" name="type" v-show="type !== 'add'">户</el-checkbox>
								<!-- <el-checkbox label="gzw" name="type">构筑物</el-checkbox>
								<el-checkbox label="lq" name="type">林权</el-checkbox>
								<el-checkbox label="zh" name="type">宗海</el-checkbox> -->
							</el-checkbox-group>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="2">
				</el-col>
			</el-row>
		</el-col>
	</el-row>
</template>

<script>
export default {
	name: "",
	components: {},
	props: {
		type:{
			type:String,
			default:'all',
			required:true
		}
	},
	data() {
		return {
			offset: 22,
			ismore: false,
			queryData: {
				bdcdyh: "",
				bdcqzh: "",
				dylxs: [],
				qlrmc: "",
				qszt: [],
				xmmc: "",
				zddm: "",
				zl: "",
				type:this.type
			},
		};
	},
	created() {
	},
	mounted() {
		let self = this;
		document.onkeydown = function(e) {
			//按下回车提交
			let key = window.event.keyCode;
			//事件中keycode=13为回车事件
			if (key == 13) {
				// self.onSubmit();
			}
		};
	},
	methods: {
        //重置
		reset() {
			this.queryData = {
				bdcdyh: "",
				bdcqzh: "",
				dylxs: [],
				qlrmc: "",
				qszt: [],
				xmmc: "",
				zddm: "",
				zl: "",
			};
			this.query();
        },
        //查询
		query() {
			//子组件点击查询时将表单数据发送给父组件
			this.$emit("getSearchCondition", this.queryData);
        },
        // 高级查询
        moreSearch(){
			if(this.ismore === true){
				this.ismore = false;
				this.$parent.tableHeight+=55;
			}else {
				this.ismore = true;
				this.$parent.tableHeight-=55;
			}

            // this.$message('待开发');
        }
	},
	computed: {},
	watch: {
		ismore: function(val) {
			if (val) {
				this.offset = 0;
			} else {
				this.offset = 22;
				this.queryData.qlrmc = "";
				this.queryData.xmmc = "";
				this.queryData.bdcqzh = "";
			}
		},
	},
};
</script>
<style scoped lang="less">
.box{
	background-color: #FFFFFF;
	box-sizing: border-box;
	padding: 18px 0 0 0;
	border: 1px solid #E6E6E6;
	.el-col{
		.el-row{
			margin-left: -10px;
		}
	}
	margin-bottom: 10px;
}
.el-button {
	width: 100px;
}
.row3 {
	height: 55px;
}
.moreSearchBtn{
    background-color: #1AD6E1;
    border-color: #1AD6E1;
}
</style>