<template>
	<view :animation="anidatamask" class="_mask" @tap="close('mask')" v-if="popsh" :style="{background:'#00000044',zIndex:50020,opacity:0}"></view>
	<view :animation="anidatapop" v-if="popsh" class="_dialog" :style="dialogstyle" @tap="nobtnclose" style="z-index:50020">
		<view class="_title" v-if="title">{{title}}</view>
		<view class="_content" :style="{maxHeight:maxheight,height:height}">
			<view v-if="html" v-html="html"></view>
			<view v-if="ele" style="padding:1em;">
				<view v-if="content" v-html="tobr(content)" style="padding-bottom:1em;"></view>
				<ciy-input v-if="ele == 'input'" bb v-model="inputtxt"></ciy-input>
				<view v-else>
					<ciy-textarea bb v-model="inputtxt"></ciy-textarea>
				</view>
			</view>
			<view v-else-if="content" v-html="tobr(content)" style="padding:1.5em 0.5em;" :style="{textAlign:align}"></view>
			<view style="display: flex;gap: 0.5em;justify-content: flex-end;padding: 0.5em 1em;" v-if="btns.length > 0">
				<view v-for="(item,index) in btns" :key="index" class="btn" :class="item.cls" @tap="chkbtn(item.btn)">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<style scoped>
	._mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	._dialog {
		position: fixed;
		left: 1.5em;
		right: 1.5em;
		border: 1px solid var(--bg6);
		border-radius: 0.5em;
		background: var(--bg1);
		transform: scale(0.8);
		opacity: 0;
	}

	._dialog ._title {
		line-height: 1.5em;
		background: linear-gradient(150deg, var(--bg2), var(--bg4));
		padding: 0.5em 1em;
		border-radius: 0.5em 0.5em 0 0;
	}

	._dialog ._content {
		overflow: scroll;
		margin-bottom: 0.5em;
	}
</style>

<script>
	export default {
		props: {},
		data() {
			return {
				popsh: false,
				dialogstyle: {},
				anidatamask: {},
				anidatapop: {},
				maxheight: 'auto',
				height: 'auto',
				title: '',
				content: '',
				align: '',
				ele: null,
				inputtxt: '',
				html: '',
				btns: [],
			};
		},
		methods: {
			async Open(res) {
				return new Promise(async (resolve, reject) => {
					if (this.popsh) {
						this.popsh = false;
						await this.sleep(500);
					}
					this.cb = resolve;
					res = res || {};
					if (typeof(res) == 'string') {
						res = {
							content: res
						};
					}
					this.title = res.title === undefined ? this.lang('alert.deftitle') : res.title;
					this.align = res.align || 'center';
					this.inputtxt = res.value ? res.value : '';
					this.ele = res.ele;
					if (res.content && res.content[0] == '<') {
						this.html = res.content;
						this.content = '';
					} else {
						this.html = '';
						this.content = res.content;
					}
					const {
						headerheight,
						footerheight
					} = await this.com_gethdft();
					var app = getApp();
					if (res.height) {
						this.height = res.height;
						this.maxheight = 'auto';
					} else {
						this.height = 'auto';
						var height = app.globalData._sysinfo.screenHeight - 80;
						this.maxheight = height + 'px';
					}
					this.btns = [];
					if (res.btns) {
						if (typeof(res.btns) == 'string') {
							var btns = res.btns.split(',');
							for (var i in btns) {
								this.btns.push({
									name: this.lang(btns[i]),
									btn: btns[i]
								});
							}
						} else {
							for (var i in res.btns) {
								this.btns.push(res.btns[i]);
							}
						}
					}
					var top = (app.globalData._sysinfo.windowHeight / 4);
					if (top < headerheight + 20)
						top = headerheight + 20;
					this.dialogstyle.marginTop = top + 'px';
					this.popsh = true;
					this.goani('sa0.8,op0|sa1,op1,400', data => this.anidatapop = data);
					this.goani('op0|op1,400', data => this.anidatamask = data);
				}).catch(e => {
					return e;
				});
			},
			chkbtn(btn) {
				if (!this.ele)
					return this.close(btn);
				if (btn == 'cancel')
					return this.close({
						text: '',
						btn
					});
				this.close({
					text: this.inputtxt,
					btn
				});
				this.inputtxt = '';
			},
			nobtnclose() {
				if (this.btns.length > 0)
					return;
				this.close('nobtnclose');
			},
			async close(btn) {
				this.goani('sa1,op1|sa0.8,op0,400', data => this.anidatapop = data);
				await this.goani('op0,400', data => this.anidatamask = data);
				this.popsh = false;
				this.cb(btn);
			}
		}
	}
</script>