
<template>
	<view class="tm-menu relative d-inline-block">
		<view @click.stop="toogle">
			<slot></slot>
		</view>
		<view v-if="showMenu" class="tm-menu-block absolute animation" :class="[direction,mentDirection]">
			<view v-if="direction==='bottom'" class="px-16" :class="[tipFangx]">
				<text class="iconfont icon-sort-up  " style="font-size: 46upx;line-height: 0.5;margin-bottom: -6upx;"
					:class="{
					'text-white':!black_tmeme,
					'text-grey-darken-3':black_tmeme
					}"></text>
			</view>
			<view class="round-3 overflow-x" :style="{maxHeight:maxHeight+'rpx'}">
				<listitem  
					:fllowTheme="fllowTheme"
					@click="showMenu=false;$emit('change',{index:index,value:item})" 
					:black="black_tmeme"
					v-for="(item,index) in list" 
					:key="index" 
					:isShowBorder="index != list.length - 1"
					dense
					:left-icon="item['icon']"
					:left-icon-color="item['iconColor']"
					:left-icon-size="item['iconSize']"
					:round="0"
					>
					<text>{{ listType?item:item[rangKey] }}</text>
				</listitem>
			
			</view>

			<view v-if="direction==='top'" class=" px-16" :class="[tipFangx]">
				<text class="iconfont icon-sort-down  " style="font-size: 46upx;line-height: 0.5;margin-top: -4upx;"
					:class="{
				'text-white':!black_tmeme,
				'text-grey-darken-3':black_tmeme
				}"></text>
			</view>

		</view>
		<maskFlow :blur='false' v-model="showMenu" bgColor='none'></maskFlow>
	</view>
</template>

<script>
	import props from './props.js';
	// import tmGrouplist from "@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue"
	import listitem from "./listitem.vue"
	import maskFlow from "./maskFlow.vue"
	export default {
		name: "s-menu",
		mixins: [uni.$s.mpMixin, uni.$s.mixin,props],
		components:{listitem, maskFlow},
		computed: {
			listType: function() {
				return typeof this.list[0] === 'string';
			},
			tipFangx: function() {
				if (this.tipDirection === 'left') return 'flex-start';
				if (this.tipDirection === 'center') return 'flex-center';
				if (this.tipDirection === 'right') return 'flex-end';
			},
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$s.vx.state().swanTheme.black;
			}
		},
		data() {
			return {
				showMenu: false,
			};
		},
		mounted() {
			if(this.disabled) return;
			this.showMenu = this.show;
		},
		methods: {
			toogle() {
				if (!this.list || this.list.length == 0) return;
				if(this.disabled) return;
				this.showMenu = !this.showMenu;
				this.$emit("update:show",this.showMenu)
			},
			open() {
				if (!this.list || this.list.length == 0) return;
				if(this.disabled) return;
				this.showMenu = true;
				this.$emit("update:show",true)
			},
			off() {
				if (!this.list || this.list.length == 0) return;
				if(this.disabled) return;
				this.showMenu = false;
				this.$emit("update:show",false)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.flex-start {
		display: flex;
	    justify-content: flex-start;
	    align-items: center;
	    align-content: center;
	}
	.flex-end {
		display: flex;
	    justify-content: flex-end;
	    align-items: center;
	    align-content: center;
	}
	.flex-center {
		display: flex;
	    justify-content: center;
	    align-items: center;
	    align-content: center;
	}
	.d-inline-block {
	    display: inline-block;
	}
	.relative {
	    position: relative;
	}
	.absolute {
	    position: absolute;
	}
	.round-3 {
	    border-radius: 6px !important;
	}
	.overflow-x {
	    overflow-x: hidden;
	    overflow-y: auto;
	}
	.text-size-n {
	    font-size: 14px;
	}
	.tm-menu {
		position: relative;
		text-align: center;
		.tm-menu-block {
			z-index: 501;
			width: 320upx;
			
			
			&.bottom {
				top: 100%;
				bottom: inherit;
				animation: roteScale 0.3s ease-in-out;
			}

			&.top {
				top: inherit;
				bottom: 100%;
				animation: roteScaleTop 0.3s ease-in-out;
			}

			&.center {
				// left: calc(50% - 160upx);
			}

			&.left {
			
				left: 0upx;
			}

			&.right {
				right: 0upx;
				
			}
		}
	}
	
	@keyframes roteScale{
		0%{
			transform: scale(0.9) translateY(-20rpx);
			opacity: 0;
		}
		100%{
			transform: scale(1)  translateY(0rpx);
			opacity: 1;
		}
	}
	@keyframes roteScaleTop{
		0%{
			transform: scale(0.9) translateY(20rpx);
			opacity: 0;
		}
		100%{
			transform: scale(1)  translateY(0rpx);
			opacity: 1;
		}
	}
</style>
