<template>
	<div class="page-search">
		<el-form class="flex-center search-form" :label-width="searchLabelWidth">
			<slot></slot>
			<template v-for="(item, index) in search">
				<el-form-item
					v-if="item.show ? item.show(item) : true"
					:key="index"
					:label="item.label"
					:label-width="item.labelWidth"
				>
					<div :style="{ width: item.width }">
						<template v-if="item.mode === 'input'">
							<el-input
								v-model="item.value"
								clearable
								:placeholder="item.placeholder"
								@keyup.enter.native="events(item)"
							></el-input>
						</template>
						<template v-if="item.mode === 'daterange'">
							<el-date-picker
								v-model="item.value"
								type="daterange"
								value-format="yyyy-MM-dd"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								:picker-options="pickerOptions"
								@change="events(item)"
							></el-date-picker>
						</template>
						<template v-if="item.mode === 'monthrange'">
							<el-date-picker
								v-model="item.value"
								type="monthrange"
								value-format="yyyy-MM"
								range-separator="至"
								start-placeholder="开始月份"
								end-placeholder="结束月份"
								@change="events(item)"
							></el-date-picker>
						</template>
						<template v-if="item.mode === 'button'">
							<el-button
								v-model="item.value"
								:type="item.type"
								:size="item.size"
								:loading="item.loading"
								:plain="item.plain"
								@click="events(item)"
							>
								{{ item.placeholder }}
							</el-button>
						</template>
						<template v-if="item.mode === 'select'">
							<el-select
								v-model="item.value"
								clearable
								:placeholder="item.placeholder"
								@change="events(item)"
							>
								<el-option
									v-for="selectItem in item.options"
									:key="selectItem.value"
									:label="selectItem.label"
									:value="selectItem.value"
								></el-option>
							</el-select>
						</template>
						<template v-if="item.mode === 'checkbox'">
							<label>
								<el-checkbox
									v-model="item.value"
									@change="events(item)"
								></el-checkbox>
								<span class="ml5">{{ item.placeholder }}</span>
							</label>
						</template>
					</div>
				</el-form-item>
			</template>
		</el-form>
	</div>
</template>

<script>
export default {
	props: {
		search: {
			type: Array,
			default() {
				return [];
			},
		},
		searchLabelWidth: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			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]);
						},
					},
				],
			},
		};
	},
	methods: {
		events(item) {
			// 清空日期时，重置为数组
			if (item.mode === 'daterange' || item.mode === 'monthrange') {
				if (!item.value) {
					item.value = [];
				}
			}
			let obj = {};
			this.search.map(searchItem => {
				searchItem.key && (obj[searchItem.key] = searchItem.value);
			});
			this.$emit('events', item, obj);
		},
	},
};
</script>
<style scoped lang="scss">
</style>
