<template>
	<view class="menus" v-if="visible">
		<view class="menus_mask" @click.stop="onClickHide"></view>
		<view class="menus_list" :style="menusStyle">
			<view class="item" @click.stop="link('/pages/index/communication')">
				<view class="ico">
					<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/campus_icon1.png"></image>
				</view>
				<view class="txt">发起交流</view>
			</view>
			<view class="item" @click.stop="link('/pages/team/add')">
				<view class="ico">
					<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/campus_icon2.png"></image>
				</view>
				<view class="txt">创建小队</view>
			</view>
			<view class="item" @click.stop="link('/pages/campus/add')">
				<view class="ico">
					<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/campus_icon3.png"></image>
				</view>
				<view class="txt">添加校园</view>
			</view>
		</view>
	</view>
</template>

<script>
	import imgDict from '@/utils/img'
	import VanOverlay from '@/wxcomponents/dist/overlay/index'
	
	export default {
		components: {
			VanOverlay
		},
		props: {
			visible: {
				type: [Boolean, String],
				default: false
			},
			params: Object
		},
		data() {
			return {
				imgDict
			}
		},
		computed: {
			menusStyle() {
				if (this.params) {
					return `right: ${this.params.right}px; top: ${this.params.top}px; display: block;`
				}
			}
		},
		methods: {
			onClickHide() {
				this.$emit('callback', true)
			},
			// 跳转
			link (path) {
				this.$emit('callback', true)
				uni.navigateTo({
					url: path
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.menus {
		.menus_mask {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 9998;
		}
		.menus_list {
			display: none;
			background-color: $E72727;
			border-radius: 12rpx;
			position: absolute;
			z-index: 9999;
			&::before {
				border-left: 20rpx solid transparent;
				border-right: 20rpx solid transparent;
				border-bottom: 20rpx solid $E72727;
				position: absolute;
				content: '';
				top: -20rpx;
				right: 25rpx;
				height: 0;
				width: 0;
			}
			.item {
				display: flex;
				align-items: center;
				padding: 0 54rpx;
				min-width: 220rpx;
				height: 108rpx;
				position: relative;
				& + .item::before {
					content: '';
					position: absolute;
					top: 0;
					right: 0;
					left: 150rpx;
					height: 2rpx;
					background-color: rgba($color: $C2C2C2, $alpha: 0.1);
				}
				.ico {
					height: 40rpx;
					width: 40rpx;
				}
				.txt {
					padding-left: 40rpx;
					line-height: 44rpx;
					text-align: right;
					font-size: 32rpx;
					font-weight: 400;
					color: $C2C2C2;
					flex: 1;
				}
			}
		}
	}
</style>
