<template>
	<ciy-header ref="header" title="ciy-alert组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">弹窗组件</view>
			<view class="content">
				一般无需在页面中添加html。<br />
				通过vite.config.js自动在每个页面添加。<br />
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				<view class="fun">(await) this.alert</view>
				<view class="tip">
					调用本弹窗组件。<br />
					<button class="btn sm" @tap="tsalert(1)">多行</button>
					<button class="btn sm" @tap="tsalert(2)">HTML</button>
					<button class="btn sm" @tap="tsalert(3)">自定标题</button>
					<button class="btn sm" @tap="tsalert(4)">对齐</button>
					<button class="btn sm" @tap="tsalert(5)">多按钮</button>
					<button class="btn sm" @tap="tsalert(6)">自定高度</button>
				</view>
				<view class="fun">(await) this.askmsg(content, btns)</view>
				<view class="tip">
					询问弹窗。<br />
					btns支持string，array。<br />
					返回: 按钮的btn文本。<br />
					<button class="btn sm" @tap="askalert(1)">默认按钮</button>
					<button class="btn sm" @tap="askalert(2)">按钮文字</button>
					<button class="btn sm" @tap="askalert(3)">自定按钮</button>
				</view>
				<view class="fun">(await) this.inputmsg(opn)</view>
				<view class="tip">
					简易录入弹窗。<br />
					返回: json{text,btn}。<br />
					<button class="btn sm" @tap="inputalert(1)">默认弹窗</button>
					<button class="btn sm" @tap="inputalert(2)">多行弹窗</button>
					<button class="btn sm" @tap="inputalert(3)">无头弹窗</button>
					<button class="btn sm" @tap="inputalert(4)">标题弹窗</button>
					<button class="btn sm" @tap="inputalert(5)">多按钮</button>
					<button class="btn sm" @tap="inputalert(6)">赋值</button>
				</view>
				<view v-html="tobr(formdata, true)" class="formdata"></view>
				<view class="hr"></view>
				<view class="fun">(await) app.alert</view>
				<view class="tip">调用系统showModal，一般在页面可能没准备好，但需要提醒用户时调用。</view>
				<button class="btn sm" @tap="appalert">调用</button>
				<view class="hr"></view>
				<view class="fun">原生alert</view>
				<view class="tip">调用浏览器alert。</view>
				<button class="btn sm" @tap="jsalert">调用</button>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">Open方法</view>
			<view class="content">
				<view class="prp">content</view>
				<view class="tip">
					文本内容，支持 "\n" 换行，支持html。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">title</view>
				<view class="tip">
					标题。<br />
					默认 温馨提示
				</view>
				<view class="hr"></view>
				<view class="prp">align</view>
				<view class="tip">
					内容对齐方式。<br />
					默认 center
				</view>
				<view class="hr"></view>
				<view class="prp">btns</view>
				<view class="tip">
					按钮组合。<br />
					支持逗号分隔的string。<br />
					支持自定义array，应包含btn,name,cls。<br />
					btn，回调原样带回<br />
					name，按钮文字<br />
					cls，按钮class (可选)<br />
				</view>
				<view class="hr"></view>
				<view class="prp">ele</view>
				<view class="tip">
					支持输入框。<br />
					input单行文本框，textarea多行文本框。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">value</view>
				<view class="tip">
					支持输入框。<br />
					框内默认文字。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">height</view>
				<view class="tip">
					弹框高度。<br />
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				无
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<style>
	@import '@/pages/demo/zdemo.css';
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				alc: '',
				aln: ''
			}
		},
		onLoad() {},
		methods: {
			async tsalert(type) {
				if (type == 1) {
					var btn = await this.alert('提示内容\n第二行');
				}
				if (type == 2) {
					var btn = await this.alert('<b>加粗</b><div style="text-align:center;">自定义html</div>');
				}
				if (type == 3) {
					var btn = await this.alert({
						title: '自定标题',
						content: '提示内容\n第二行'
					});
				}
				if (type == 4) {
					var btn = await this.alert({
						align: 'left',
						content: '提示内容\n第二行'
					});
				}
				if (type == 5) {
					var btn = await this.alert({
						btns: [{
							name: '删除',
							btn: 'del',
							cls: 'dag'
						}, {
							name: '确定',
							btn: 'ok'
						}, {
							name: '取消',
							btn: 'cancel',
							cls: 'def'
						}],
						content: '提示内容\n第二行'
					});
				}
				if (type == 6) {
					var btn = await this.alert({
						height: '20em',
						content: '自定义高度效果'
					});
				}
				this.formdata = JSON.stringify(btn);
			},
			async askalert(type) {
				if (type == 1) {
					var btn = await this.askmsg('提示内容\n第二行');
				}
				if (type == 2) {
					var btn = await this.askmsg('提示内容\n第二行', '删除');
				}
				if (type == 3) {
					var btn = await this.askmsg('提示内容\n第二行', [{
						name: '通过',
						btn: 'ok'
					}, {
						name: '驳回',
						btn: 'ng',
						cls: 'dag'
					}, {
						name: '取消',
						btn: 'cancel',
						cls: 'def'
					}]);
				}
				this.formdata = JSON.stringify(btn);
			},
			async inputalert(type) {
				if (type == 1) {
					var btn = await this.inputmsg('输入文字');
				}
				if (type == 2) {
					var btn = await this.inputmsg({
						content: '提示内容\n第二行',
						ele: 'textarea'
					});
				}
				if (type == 3) {
					var btn = await this.inputmsg({
						content: '提示内容\n第二行',
						title: ''
					});
				}
				if (type == 4) {
					var btn = await this.inputmsg({
						title: '请输入内容',
						ele: 'textarea'
					}, '提交');
				}
				if (type == 5) {
					var btn = await this.inputmsg({
						title: '请填写驳回理由',
						ele: 'textarea'
					}, [{
						name: '审核通过',
						btn: 'ok'
					}, {
						name: '驳回',
						btn: 'ng',
						cls: 'dag liner'
					}, {
						name: '取消',
						btn: 'cancel',
						cls: 'def'
					}]);
				}
				if (type == 6) {
					var btn = await this.inputmsg({
						title: '请填写修改项',
						ele: 'textarea',
						value: '内容1\n内容2'
					});
				}
				this.formdata = JSON.stringify(btn);
			},
			appalert() {
				var app = getApp();
				app.alert('提示内容\n第二行');
			},
			jsalert() {
				alert('提示内容\n第二行');
			}
		}
	}
</script>

<style>
</style>