<template>
	<Modal v-model="show" title="高级查询" @on-visible-change="onVisibleChange">
		<transition name="fade">
			<div style="background-color:white;transform-origin: 0 0;">
				<table class="table">
					<thead>
						<tr>
							<th>列</th>
							<th>查询类型</th>
							<th>查询值</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,idx) in fastqueryFormData" :key="idx">
							<td>
								<Select
									v-model="item.colId"
									:style="formItemStyle"
									filterable
									clearable
									size="small"
									@on-change="onColumnChange(item)"
								>
									<Option
										v-for="column in validColumns"
										:value="column.colId"
										:key="column.colId"
									>{{column.headerName}}</Option>
								</Select>
							</td>
							<td>
								<Select v-model="item.fastQueryType" :style="formItemStyle" size="small">
									<Option v-for="type in validQueryType(item)" :value="type.id" :key="type.id">{{type.text}}</Option>
								</Select>
							</td>
							<td>
								<span v-if="['su','sn'].includes(item.fastQueryType)"></span>
								<Select
									v-model="item.value"
									v-else-if="['boolean','dict','asyncTrans'].includes(item.column.type) && ['eq','ne'].includes(item.fastQueryType)"
									size="small"
									:style="formItemStyle"
								>
									<Option v-for="(value,key) in item.dict" :value="key" :key="key">{{value}}</Option>
								</Select>
								<Select
									v-model="item.value"
									v-else-if="['dict','asyncTrans'].includes(item.column.type) && item.fastQueryType==='in'"
									size="small"
									:style="formItemStyle"
									multiple
								>
									<Option v-for="(value,key) in item.dict" :value="key" :key="key">{{value}}</Option>
								</Select>
								<Date-picker
									v-else-if="['date','datetime'].includes(item.column.type)"
									v-model="item.value"
									type="datetime"
									format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期和时间"
									show-week-numbers
									clearable
									size="small"
								></Date-picker>
								<Input v-else v-model="item.value" placeholder="请输入查询值" :style="formItemStyle" size="small"></Input>
							</td>
							<td>
								<Button type="error" icon="md-trash-a" size="small" @click="remove(item)">删除</Button>
							</td>
						</tr>
					</tbody>
				</table>
				<Row>
					<Col span="24">
						<Button type="info" ghost long icon="md-add" @click="add">添加</Button>
					</Col>
				</Row>
			</div>
		</transition>
		<div class="footer" slot="footer">
			<Button type="default" @click="close">关闭</Button>
			<Button type="default" @click="onClear">清空</Button>
			<Button type="success" @click="onSearch">查询</Button>
		</div>
	</Modal>
</template>
<script>
import { tools } from 'hq-tools';
import queryType from './queryType';
export default {
	name: 'fast-query-modal',
	props: {
		value: Boolean,
		columns: {
			type: Array,
			default: () => {
				return []
			}
		},
		dicts: {
			type: Object,
			default: () => {
				return {}
			}
		},
		gridDicts: {
			type: Object,
			default: () => {
				return {}
			}
		},
	},
	data() {
		return {
			show: false,
			queryType: queryType,
			fastqueryFormData: [],
			formItemStyle: "width:120px"
		}
	},
	computed: {
		validColumns() {
			return this.columns.filter(column => column.type !== 'button' && !['_selection', '_rowIndex'].includes(column.field) && (!column.cellRendererParams || (column.cellRendererParams && column.cellRendererParams.fastquery)))
		}
	},
	beforeDestroy() {
		this.fastqueryFormData = null;
		this.queryType = null;
	},
	watch: {
		value(to) {
			this.show = to;
		}
	},
	methods: {
		add() {
			this.fastqueryFormData.push({
				colId: null,
				columnId: null,
				title: null,
				fastQueryType: null,
				value: null,
				dataType: null,
				validQueryType: [],
				column: {},
				dict: {}
			})
		},
		remove(item) {
			this.fastqueryFormData.splice(this.fastqueryFormData.indexOf(item), 1);
		},
		onColumnChange(item) {
			let column = this.columns.filter(column => column.colId === item.colId)[0];
			let defaultObj;
			if (column) {
				item.title = column.headerName;
				this.$set(item, 'columnId', column.field);
				defaultObj = this.getDefault(column);
				this.$set(item, 'column', column);
			} else {
				item.title = null;
				defaultObj = { dataType: null, defualtQueryType: null, validQueryType: [] };
			}
			let fastqueryTypeList = defaultObj.validQueryType;
			let defualtQueryType = defaultObj.defualtQueryType;

			if (column && column.cellRendererParams && column.cellRendererParams.fastqueryType) {
				if (typeof column.cellRendererParams.fastqueryType === 'string') {
					fastqueryTypeList = [column.cellRendererParams.fastqueryType];
					defualtQueryType = column.cellRendererParams.fastqueryType;
				} else if (Array.isArray(column.cellRendererParams.fastqueryType)) {
					fastqueryTypeList = column.cellRendererParams.fastqueryType;
					defualtQueryType = column.cellRendererParams.fastqueryType[0];
				}
			}
			this.$set(item, 'dataType', defaultObj.dataType);
			this.$set(item, 'fastQueryType', defualtQueryType);
			this.$set(item, 'value', null);
			this.$set(item, 'validQueryType', fastqueryTypeList);
			this.$set(item, 'dict', defaultObj.dict);


		},
		validQueryType(item) {
			return item.validQueryType.map(item => {
				return this.queryType.find(type => type.id === item)
			})
		},
		onVisibleChange(show) {
			this.$emit('input', show)
		},
		onSearch() {
			this.emit();
		},
		dictFormat(dict) {
			return tools.dictFormat(dict);
		},
		reset() {
			this.fastqueryFormData = [];
		},
		onClear() {
			this.reset();

		},
		close() {
			this.show = false;
		},
		emit() {
			this.show = false;
			this.$emit("on-search", tools.clone(this.fastqueryFormData).map(item => {
				let dataType = item.dataType;
				if (item.dataType === 'date' || item.dataType === 'datetime') {
					dataType = 'yyyy-MM-dd HH:mm:ss'
				}
				if (item.fastQueryType === 'in') {
					dataType = 'list';
				}
				return {
					columnId: item.columnId,
					title: item.title,
					fastQueryType: item.fastQueryType,
					value: item.dataType === 'date' ? tools.dateFormat(item.value, 'yyyy-MM-dd HH:mm:ss') : item.value,
					dataType: dataType
				}
			}));
		},
		getDefault(column) {
			if (column.dataType) {
				return column.dataType;
			}
			const config = {
				undefined: {
					dataType: 'string',
					validQueryType: ['lk', 'll', 'rl', 'ne', 'su', 'sn'],
					defualtQueryType: 'lk',
				},
				string: {
					dataType: 'string',
					validQueryType: ['lk', 'll', 'rl', 'eq', 'ne', 'gt', 'ge', 'lt', 'le', 'su', 'sn'],
					defualtQueryType: 'lk',
				},
				number: {
					dataType: 'number',
					validQueryType: ['gt', 'ge', 'lt', 'le', 'eq'],
					defualtQueryType: 'eq',
				},
				datetime: {
					dataType: 'date',
					validQueryType: ['gt', 'ge', 'lt', 'le', 'eq', 'ne', 'su', 'sn'],
					defualtQueryType: 'gt'
				},
				date: {
					dataType: 'date',
					validQueryType: ['gt', 'ge', 'lt', 'le', 'eq', 'ne', 'su', 'sn'],
					defualtQueryType: 'gt'
				},
				dict: {
					dataType: 'string',
					validQueryType: ['eq', 'in', 'ne', 'su', 'sn'],
					defualtQueryType: 'eq',
					dict: (column.cellRendererParams && column.cellRendererParams.dict) ? (typeof column.cellRendererParams.dict === 'string' ? this.dicts[column.cellRendererParams.dict] : column.cellRendererParams.dict) : {}
				},
				boolean: {
					dataType: 'string',
					validQueryType: ['eq', 'ne', 'su', 'sn'],
					defualtQueryType: 'eq',
					dict: { '0': '否', '1': '是' }
				},
				asyncTrans: {
					dataType: 'string',
					validQueryType: ['eq', 'in', 'ne', 'su', 'sn'],
					defualtQueryType: 'eq',
					dict: this.gridDicts[column.colId]
				}
			}
			return tools.clone(Object.assign({ column }, config[column.type]))
		}
	}
}
</script>
<style lang="less" scoped>
.table {
	width: 100%;
	td,
	th {
		text-align: center;
		padding: 4px 0;
	}
}
</style>

