<template>
	<ciy-anipop v-model="popsh" maskbg="#00000055" @change="popclose">
		<view class="_menu">
			<view class="_title" v-if="title">{{title}}</view>
			<slot name="list" :data="{items:items, rowcount:rowcount}">
				<view class="_list" :class="rowcount<=1?'_flex':'_grid'" :style="'grid-template-columns: repeat('+rowcount+', 1fr);'">
					<template v-for="(item,index) in items" :key="index">
						<view v-if="item.br" style="grid-column: 1 / -1;"></view>
						<view v-else-if="item.line" style="grid-column: 1 / -1;height: 3px;width: 100%;background: linear-gradient(90deg, transparent, var(--bg5), transparent);"></view>
						<view v-else class="_item" @tap="selitem(index)">
							<view class="_icon" v-if="item.icon"><ciy-svgimg :src="item.icon"></ciy-svgimg></view>
							<view class="_name" :style="item.style" v-if="item.name">{{lang(item.name)}}</view>
							<view class="_sub" v-if="item.sub">{{item.sub}}</view>
						</view>
					</template>
				</view>
				<view style="height:2em;"></view>
			</slot>
		</view>
	</ciy-anipop>
</template>

<style scoped>
	._menu {
		background: var(--bg2);
		border-top: 1px solid var(--bg6);
	}

	._title {
		text-align: center;
		font-size: 1.2rem;
		padding: 0.5rem 0;
		font-weight: bold;
		background: var(--bg1);
	}

	._list {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	._list._flex {
		display: flex;
		flex-direction: column;
		width: 100%;
		overflow: auto;
		text-align: left;
	}

	._list._flex ._item {
		padding: 1em;
		text-align: center;
		width: 100%;
		border-top: 1px solid var(--bg4);
	}

	._list._grid {
		display: grid;
		width: 100%;
		overflow: auto;
		text-align: center;
	}

	._list._grid ._item {
		padding: 1em 1em;
		width: 100%;
	}

	._list ._icon {
		width: 2rem;
		height: 2rem;
		display: inline-block;
	}

	._list ._name {
		color: var(--txt7);
	}

	._list ._sub {
		font-size:0.7em;
		color: var(--txt1);
	}
</style>

<script>
	export default {
		props: {},
		data() {
			return {
				items: [],
				rowcount: 0,
				title: '',
				popsh: false
			};
		},
		watch: {},
		mounted() {},
		methods: {
			Open(opn) {
				return new Promise(async (resolve, reject) => {
					opn = opn || {};
					if(!opn.items || opn.items.length == 0)
						return;
					if(opn.one && opn.items.length == 1){
						resolve({...opn.items[0]});
						return;
					}
					this.resolvecb = resolve;
					this.items = opn.items;
					this.rowcount = opn.rowcount;
					this.title = opn.title;
					this.popsh = true;
				}).catch(e => {
				});
			},
			selitem(idx) {
				this.popsh = false;
				this.resolvecb({...this.items[idx]});
			},
			popclose(e) {
				if(!e.value)
					this.resolvecb({close:true});
			},
		}
	}
</script>