
<template>
	<div class="container" :style="toggle?{'height':'auto'}:{'height':'0'}">
		<transition name="fade">
			<div class="content" v-if="toggle">
				<Form
					label-position="right"
					ref="value"
					:model="fastqueryParams"
					:label-width="100"
					style="padding:20px"
				>
					<Row type="flex">
						<Col :span="8" v-for="(column,idx) in formatedColumns" :key="idx" v-if="column.fastqueryType">
							<FormItem :label="column.title" v-if="column.fastqueryType">
								<!-- select -->
								<Select
									v-model="fastqueryParams[idx]"
									:placeholder="queryType(column)"
									v-if="column.dict"
									clearable
								>
									<Option
										v-for="(opts,optsIndex) in dictFormat(column.dict)"
										:key="optsIndex"
										:value="opts.id"
									>{{ opts.text }}</Option>
								</Select>

								<!-- string -->
								<Input
									v-model="fastqueryParams[idx]"
									:placeholder="queryType(column)"
									v-else-if=" column.type === 'string'"
									:maxlength="column.fastqueryMax"
								></Input>

								<!-- number range-->
								<NumberRange
									v-else-if="isNumberRange(column)"
									v-model="fastqueryParams[idx]"
									:placeholder="queryType(column)"
									:max="column.fastqueryMax"
									:min="column.fastqueryMin"
								></NumberRange>

								<!-- number -->
								<Input-number
									v-else-if=" column.type === 'number'"
									:max="column.fastqueryMax"
									:min="column.fastqueryMin"
									v-model="fastqueryParams[idx]"
									:placeholder="queryType(column)"
								></Input-number>

								<!-- boolean -->
								<Select
									v-model="fastqueryParams[idx]"
									:placeholder="queryType(column)"
									v-else-if=" column.type === 'boolean'"
									clearable
								>
									<Option value="1">是</Option>
									<Option value="0">否</Option>
								</Select>

								<!-- dateTime -->
								<DatePicker
									:type="column.fastqueryType"
									:format="column.format"
									:placeholder="'请选择' + column.title + '范围' "
									v-model="fastqueryParams[idx] "
									v-else-if="column.type=='date' "
									style="width: 100% "
								></DatePicker>
							</FormItem>
						</Col>
					</Row>
				</Form>
				<div class="footer">
					<Button type="default" @click="close">关闭</Button>
					<Button type="default" @click="clean( 'value')">清空</Button>
					<Button type="success" @click="search">查询</Button>
				</div>
			</div>
		</transition>
	</div>
</template>
<script>
import { createColumnListWithTemplate } from "./../../hongqi-table/src/columnsFormat";
import NumberRange from "./../../hongqi-table/src/numberRange";
import fastqueryFormat from "./../../hongqi-table/src/fastqueryFormat";
import { tools } from 'hq-tools';
export default {
	name: "AdvanceSearch",
	components: {
		NumberRange
	},
	data() {
		return {
			show: false,
			fastqueryParams: {},
			formatedColumns: []
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.formatedColumns = createColumnListWithTemplate(this.columns);
		},
		queryType(column) {
			return {
				'eq': "等于 ",
				'lk': "包含 ",
				'll': "右匹配 ",
				'rl': "左匹配 ",
				'ne': "不等于 ",
				'gt': "大于 ",
				'ge': "大于等于 ",
				'lt': "小于 ",
				'le': "小于等于 "
			}[column.fastqueryType];
		},
		isNumberRange(column) {
			if (
				column &&
				column.type == "number" &&
				column.fastqueryType == "range"
			) {
				return true;
			}
		},
		dictFormat(dict) {
			return tools.dictFormat(this.dicts[dict]);
		},
		clean(name) {
			this.reset();
			this.$emit("on-search", []);
		},
		reset() {
			this.fastqueryParams = {};
			if (this.$refs.value) {
				this.$refs.value.resetFields();
			}
		},
		search() {
			let params = [];
			for (let index in this.formatedColumns) {
				const column = this.formatedColumns[index]
				fastqueryFormat(
					column,
					this.fastqueryParams[index],
					params
				);
			}
			this.$emit("on-search", params);
		},
		close() {
			this.$emit("on-search", null);
		}
	},
	props: ["columns", "dicts", "toggle"]
};
</script>
<style lang="less" scoped>
.container {
	position: absolute;
	top: 54px;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 999;

	.content {
		background-color: white;
		transform-origin: 0 0;
		box-shadow: 0 6px 6px 0px #eee;
		// border: 4px outset #ddd;
		border-top: none;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}
}
.fade-enter-active,
.fade-leave-active {
	transition: transform 0.8s;
}
.fade-enter,
.fade-leave-to {
	transform: scale3d(1, 0, 1);
}
.search-btn {
	height: 33px;
	color: #3cc24c;
	background-color: white;
	border: 1px solid #ddd;
}
.fastqueryCard {
	position: absolute;
	width: 1000px;
	height: auto;
	background-color: white;
	z-index: 999;
	box-shadow: 0 0 15px #777;
}
.footer {
	text-align: center;
	padding: 8px;
	> * {
		margin: 4px;
	}
}
</style>
