<template>
	<view class="_lnte" @tap="toggle">
		<view class="_search">
			<view v-if="!qshow" class="_itm">
				<view class="itm" v-for="(item,index) in items" :key="index" :class="item.cls">{{item.txt}}</view>
			</view>
			<view v-if="qshow" class="_txt">{{lang('query.pselect')}}</view>
		</view>
		<view class="_sbtn" :class="{queryed}">
			<view class="itm"></view>{{lang('query.btn_query')}}
		</view>
	</view>
	<view :animation="anidatapop" v-if="qshow" class="_qshow">
		<view :style="{height:qmtop+'px'}" @tap="close"></view>
		<view class="_main">
			<view class="_form" :style="{maxHeight: fheight + 'px'}">
				<view class="ciy-form" v-for="(item,index) in qry" :key="index">
					<label v-if="item.label != 'no'">{{item.name}}</label>
					<view v-if="item.type == 'input'">
						<ciy-input bb :name="item.form" v-model="data[item.form]" type="text"></ciy-input>
					</view>
					<view v-else-if="item.type == 'select'">
						<ciy-select :name="item.form" v-model="data[item.form]"
							:range="loadrange(gdict, item)"></ciy-select>
					</view>
					<view v-else-if="item.type == 'num'"
						style="display:flex;align-items: center;justify-content: flex-end;">
						<ciy-input bb :name="item.form + '_1'" v-model="data[item.form+'_1']" type="digit" style="width:4em;text-align:center;"></ciy-input>
						<view style="margin-left:0.5em;">~</view>
						<ciy-input bb :name="item.form + '_2'" v-model="data[item.form+'_2']" type="digit" style="width:4em;text-align:center;"></ciy-input>
					</view>
					<view v-else-if="item.type == 'bool'">
						<ciy-selbool left :name="item.form" v-model="data[item.form]"></ciy-selbool>
					</view>
					<view v-else-if="item.type == 'radio'">
						<ciy-radio left :name="item.form" v-model="data[item.form]" :range="loadrange(gdict, item)"></ciy-radio>
					</view>
					<view v-else-if="item.type == 'checkbox'">
						<ciy-checkbox left :name="item.form" v-model="data[item.form]" :range="loadrange(gdict, item)"></ciy-checkbox>
					</view>
					<view v-else-if="item.type == 'daterange'">
						<ciy-inputdaterange :name="item.form" v-model="data[item.form]"></ciy-inputdaterange>
					</view>
					<view v-else-if="item.type == 'day'">
						<ciy-inputdatetime :name="item.form" v-model="data[item.form]"></ciy-inputdatetime>
					</view>
					<view v-else-if="item.type == 'month'">
						<ciy-inputdatetime selectmonth :name="item.form" v-model="data[item.form]"></ciy-inputdatetime>
					</view>
					<view v-else>
						<slot :itm="{item:item,data:data}"></slot>
					</view>
				</view>
			</view>
			<view class="_bottombtn">
				<button class="btn def" @tap="close">{{lang('query.btn_close')}}</button>
				<button class="btn lg" @tap="submit">{{lang('query.btn_run')}}</button>
				<button class="btn def" @tap="reset">{{lang('query.btn_reset')}}</button>
			</view>
		</view>
		<view class="_mask" @tap="close"></view>
	</view>
</template>

<script>
	export default {
		emits: ['confirm'],
		props: {
			qry: {
				type: Object,
				default: {}
			},
			gdict: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				qshow: false,
				qmtop:0,
				fheight:0,
				anidatapop: {},
				data: {}
			}
		},
		mounted() {},
		computed: {
			items() {
				var itms = [];
				for (var i in this.qry) {
					if (this.hasdata(i))
						itms.push({
							txt: this.qry[i].name,
							cls: '_valed'
						});
				}
				for (var i in this.qry) {
					if (!this.hasdata(i))
						itms.push({
							txt: this.qry[i].name,
							cls: ''
						});
				}
				return itms;
			},
			queryed() {
				for (var i in this.qry) {
					if (this.hasdata(i))
						return '_queryed';
				}
				return '';
			}
		},
		methods: {
			toggle() {
				if (this.qshow)
					this.close();
				else
					this.open();
			},
			loadrange(gdict, item) {
				var sels = [];
				if (item.all)
					sels.push({
						id: '',
						name: item.all
					});
				var gg = [];
				if (item.select instanceof Array)
					gg = item.select;
				else {
					if (item.select.substring(0, 5) == 'cata_') {
						gg = gdict[item.select.substring(5)];
					} else {
						gg = gdict[item.select];
					}
				}
				for (var i in gg) {
					sels.push({
						...gg[i]
					});
				}
				return sels;
			},
			async open() {
				this.pagenoscroll(true);
				const {
					headerheight,
					footerheight
				} = await this.com_gethdft();
				var lnterect = await this.getrect('._lnte');
				if (!lnterect)
					return;

				var app = getApp();
				this.qmtop = lnterect.bottom;
				this.fheight = app.globalData._sysinfo.windowHeight - lnterect.bottom - footerheight - 110;
				this.qshow = true;
				this.$nextTick(() => {
					var animation = uni.createAnimation({
						transformOrigin: "100% " + (lnterect.bottom - 60) + "px"
					});
					animation.scale(1);
					animation.opacity(1);
					animation.step({
						duration: 200
					});
					this.anidatapop = animation.export();
				});
			},
			close() {
				this.pagenoscroll(false);
				var animation = uni.createAnimation({
					transformOrigin: "100% " + (this.qmtop - 60) + "px"
				});

				animation.scale(0);
				animation.opacity(0);
				animation.step({
					duration: 200
				});
				this.anidatapop = animation.export();
				setTimeout(() => {
					this.qshow = false;
				}, 300);
			},
			hasdata(idx) {
				var form = this.qry[idx].form;
				if (this.qry[idx].type == 'num') {
					return this.data[form + '_1'] || this.data[form + '_2'];
				} else if (this.qry[idx].type == 'bool') {
					return this.data[form] == 1;
				} else {
					return !!this.data[form];
				}
			},
			reset() {
				for (var i in this.data) {
					delete this.data[i];
				}
				this.$emit("confirm", {});
				this.close();
			},
			submit() {
				// #ifndef APP-PLUS
				uni.hideKeyboard();
				// #endif
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
				this.$emit("confirm", {...this.data});
				this.close();
			},
			setdata(where){
				if(!where)
					return;
				for(var i in this.data){
					if(where[i])
						this.data[i] = where[i];
				}
			}
		}
	};
</script>
<style scoped>
	._qshow {
		position: fixed;
		left: 0;
		right: 0;
		opacity: 0;
		top: 0;
		transform-origin: 100% 0;
		transform: scale(0);
	}

	._qshow>._main {
		border-radius: 0 0 1em 1em;
		background: linear-gradient(0deg, var(--man3), var(--bg1));
		padding: 0 1em;
		border-bottom: 2px solid var(--man7);
	}

	._qshow>._mask {
		height: 100vh;
		backdrop-filter: blur(2px);
	}

	._qshow ._form {
		overflow: auto;
	}

	._qshow ._bottombtn {
		margin: 1em 0px;
		display: flex;
		width: 100%;
		align-items: flex-end;
		justify-content: space-between;
	}

	._lnte {
		display: flex;
		padding: 0.5em;
		background: var(--bg2);
		align-items: center;
		border-bottom: 1px solid var(--bg5);
		height: 3.5em;
	}

	._lnte ._search {
		flex: 1;
		position: relative;
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
	}

	._lnte ._search ._itm {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
	}

	._lnte ._search ._itm>.itm {
		margin: 0.2em;
		border-radius: 1em;
		border: 1px solid var(--bg6);
		color: var(--txt1);
		padding: 0 0.5em;
		line-height: 1.5em;
		font-size: 0.8em;
		white-space: nowrap;
	}

	._lnte ._search ._itm>.itm._valed {
		border: 1px solid transparent;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to right, var(--bg1), var(--bg1)), linear-gradient(331deg, var(--man5), var(--man7));
		color: var(--man6);
	}

	._lnte ._search::after {
		content: ' ';
		position: absolute;
		bottom: 0;
		right: 0;
		top: 0;
		width: 4em;
		background: linear-gradient(90deg, transparent, var(--bg2));
	}

	._lnte ._search ._txt {
		background: linear-gradient(331deg, var(--man5), var(--man7));
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		letter-spacing: 0.1em;
		font-size: 0.9em;
		font-weight: bolder;
		padding-left: 1em;
	}

	._lnte ._sbtn {
		display: flex;
		align-items: center;
		font-size: 0.8em;
		margin: 0 0.5em;
		opacity: 0.6;
	}

	._lnte ._sbtn._queryed {
		opacity: 1;
	}

	._lnte ._sbtn>.itm {
		width: 1.8em;
		height: 1.8em;
		margin-right: 0.5em;
		display: inline-block;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTc0Ny45IDk4LjVIMjc2LjFjLTQ4LjUgMC03NC45IDU2LjctNDMuNiA5My44TDM2MiAzNDUuOHY0MDkuNmgwLjJjLTEuNSAxNS4yIDUuNyAzMC42IDE5LjggMzguN2wyMTguNSAxMjYuMWMxOS4xIDExIDQzLjYgNC41IDU0LjYtMTQuNnM0LjUtNDMuNi0xNC42LTU0LjZMNDQyIDczNi4zVjM0NS44YzAtMTguOS02LjctMzcuMS0xOC44LTUxLjZsLTk3LjYtMTE1LjdoMzcyLjlsLTk3LjYgMTE1LjdjLTEyLjIgMTQuNC0xOC44IDMyLjctMTguOCA1MS42djU5LjRjMCAyMi4xIDE3LjkgNDAgNDAgNDBzNDAtMTcuOSA0MC00MHYtNTkuNGwxMjkuNS0xNTMuNWMzMS4xLTM3LjEgNC44LTkzLjgtNDMuNy05My44eiIgZmlsbD0iIzRhNWZlMiI+PC9wYXRoPjxwYXRoIGQ9Ik02ODIgNDY0LjNINTYyYy0yMi4xIDAtNDAgMTcuOS00MCA0MHMxNy45IDQwIDQwIDQwaDEyMGMyMi4xIDAgNDAtMTcuOSA0MC00MCAwLTIyLTE3LjktNDAtNDAtNDB6TTY4MiA1ODIuM0g1NjJjLTIyLjEgMC00MCAxNy45LTQwIDQwczE3LjkgNDAgNDAgNDBoMTIwYzIyLjEgMCA0MC0xNy45IDQwLTQwIDAtMjItMTcuOS00MC00MC00MHpNNjgyIDcwMC4zSDU2MmMtMjIuMSAwLTQwIDE3LjktNDAgNDBzMTcuOSA0MCA0MCA0MGgxMjBjMjIuMSAwIDQwLTE3LjkgNDAtNDAgMC0yMi0xNy45LTQwLTQwLTQweiIgZmlsbD0iIzdjNDRlMiI+PC9wYXRoPjwvc3ZnPg==");
	}
</style>