<template>
	<el-row class="box">
		<el-col :span="24">
			<el-row>
				<el-col :span="18">
					<el-form :inline="true" class="demo-form-inline" label-width="106px">
						<el-form-item label="">
							<el-date-picker
									v-model="chooseDate"
									type="datetimerange"
									:picker-options="pickerOptions"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="yyyy-MM-dd HH:mm:ss"
									align="right">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="登记类型">
							<el-select v-model="djlx" placeholder="请选择">
								<el-option
										v-for="item in options"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="6" aria-rowspan="3">
					<el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
					<el-button type="warning" @click="reset" icon="el-icon-refresh">重置</el-button>
				</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,
			chooseDate:[],
			djlx:'',
			options: [{
				value: '选项1',
				label: '黄金糕'
			}, {
				value: '选项2',
				label: '双皮奶'
			}, {
				value: '选项3',
				label: '蚵仔煎'
			}, {
				value: '选项4',
				label: '龙须面'
			}, {
				value: '选项5',
				label: '北京烤鸭'
			}],
			queryData: {
				page:0,
				size:20,
				current:false,
				currentUser:true,
				createDateStart:"",
				createDateEnd:"",
				title:"",
				templateName:""
			},
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
		};
	},
	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 = {
				page:0,
				size:20,
				current:false,
				currentUser:true,
				createDateStart:"",
				createDateEnd:"",
				title:"",
				templateName:""
			};
			this.query();
        },
        //查询
		query() {
			console.log(this.chooseDate,"chooseDate")
			console.log(this.djlx,"djlx")
			if(this.chooseDate.length>0){
				this.queryData.createDateStart = this.chooseDate[0];
				this.queryData.createDateEnd = this.chooseDate[1];
			}
			this.queryData.templateName = this.djlx;
			//子组件点击查询时将表单数据发送给父组件
			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: {},
};
</script>
<style scoped lang="less">
.box{
	background-color: #FFFFFF;
	box-sizing: border-box;
	padding: 18px 0 0 25px;
	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>