<template>
	<view class="message-popup" :class="{ 'show': config.show }">

		<view class="mask" @click="closeMenu" :class="{ 'show': config.show }"
			:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}">

		</view>
		<view class="bottom-slide-menu" :style="{ backgroundColor: config.bgColor }" :class="{ 'show': config.show }"
			@touchmove.stop.prevent>
			<view class="menu-header" :class="config.showHeader?'':'displayNone'">
				<view class="title" :style="{ color: config.textColor}">{{ config.title }}</view>
				<view class="close-icon" @click="closeMenu" :style="{display:(config.showClose?'':'none')}">
					<image src="/static/Images/public/close.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="menu-items" v-if="config.menuItems && config.menuItems.length>0">
				<view class="menu-item" v-for="(item, index) in config.menuItems" :key="index" :style="{ 
				color: config.textColor, 
				textAlign: config.textAlign,
				height:config.itemHeight,
				lineHeight:config.itemHeight,				
				paddingLeft: config.dividerMargin,
				paddingRight: config.dividerMargin
				}" @click="handleItemClick(item, index)">

					<view class="p100" :data-acIdx="config.activeIndex" :data-ac="config.activeIndex==index" :style="{backgroundColor:(config.activeIndex==index || (item[config.valueMember]==config.value && config.value)  ) ?config.itemBgColor:'',
				justifyContent:config.textAlign
				}">
						<view class="imgContent" v-if="item.icon" :style="{ 					
				height:config.itemHeight,
				width:config.itemHeight
				}">
							<image v-if="item.icon" :src="item.icon" mode="aspectFit"></image>
						</view>

						<text class="itemTxt">{{ item.text }}</text>
					</view>


					<view v-if="index<config.menuItems.length-1" class="menu-line"
						:style="{paddingLeft: config.dividerMargin,paddingRight: config.dividerMargin}">
						<view class="menu-divider"
							:style="{borderTopWidth: config.dividerThickness,borderTopColor: config.dividerColor}">
						</view>
					</view>


				</view>
			</view>
			<slot v-else></slot>
			<view @click="btnClick" class="bottom-btn" :class="config.showBtn?'':'displayNone'"
				:style="{ backgroundColor: config.btnBgColor ,color:config.btnTextColor}">
				{{config.btnText}}
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'BottomSlideMenuPlus',
		props: {
			config: {
				type: Object,
				default: () => ({
					show: false, //是否显示
					showHeader: false, //是否显示标头
					showMask: true, //是否显示mask
					showDivider: false, //是否在两个项之间显示分隔线
					showBtn: false, //是否显示底部按钮
					showClose: false, //是否显示右上角关闭按钮
					maskBgColor: '', //mask的颜色
					menuItems: [], //菜单项 包含icon text
					activeIndex: -1, //当前已选中的项编号
					valueMember:'',
					value:null,
					bgColor: '#2a2a2a', //主体背景
					itemBgColor: '#3a3a3a', //各项被选中后的背景
					textColor: '#ffffffde', //各项的文字颜色
					textAlign: 'flex-start', //各项的文字居中方式
					title: '', //header的文字					
					dividerColor: '#00000000', //分隔线颜色
					dividerThickness: '0rpx', //分隔线宽度
					dividerMargin: '10rpx', //分隔线距离两边的宽度
					itemHeight: '80rpx', //各项的调试					
					btnBgColor: "#bbe600", //按钮颜色
					btnText: "确定", //按钮文字
					btnTextColor: "#000000", //按钮文字颜色

				})
			},


		},
		created(){
			if(this.config.value && this.config.valueMember){
				this.config.menuItems.find((v,i)=>{
					if(v[this.config.valueMember]==this.config.value){
						this.config.activeIndex=i;
						return true;
					}
				});
			}
		},
		methods: {
			closeMenu() {

				this.$emit('close');
			},
			handleItemClick(item, index) {


				this.$emit('itemClick', item, index);
			},
			btnClick() {

				let item = null;
				let index = null;
				if (this.config.activeIndex > -1) {
					item = this.config.menuItems[this.config.activeIndex];
				}else{
					for (let i = 0; i < this.config.menuItems.length; i++) {
						var element = this.config.menuItems[i];
						if(element[this.config.valueMember]==this.config.value){
							item=element;
							index=i;
							break;
						}
					}
					
				}
				index = this.config.activeIndex;
				this.$emit('btnClick', item, index);
			}

		}
	}
</script>

<style>
	.itemTxt{
		text-indent: 20rpx;
	}
	.message-popup {
		position: relative;
		display: none;
	}

	.message-popup.show {
		display: block;
	}

	.p100 {
		width: calc(100% - 20rpx);
		height: 100%;
		border-radius: 8rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding: 0rpx 20rpx 0rpx 0rpx;
		margin-left: 20rpx;
	}

	.displayNone {
		display: none !important;
	}

	.bottom-slide-menu {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		transition: transform 0.3s ease-out;
		transform: translateY(100%);
		border-radius: 32rpx 32rpx 0 0;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.mask {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9998;
		width: 100%;
		height: 100%;
	}


	.bottom-slide-menu.show {
		transform: translateY(0);
	}

	.menu-header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 30rpx;
		/* border-bottom: 0.03125rem solid #eeeeee; */
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: auto;
		position: relative;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
	}

	.close-icon {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top: 30rpx;
		right: 30rpx;

	}

	.close-icon image {
		width: 100%;
		height: 100%;
	}

	.menu-items {
		padding: 20rpx 0;
	}

	.menu-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-wrap: nowrap;
		box-sizing: border-box;
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 20rpx;
	}

	.menu-item image {
		width: 40rpx;
		height: 40rpx;

	}

	.imgContent {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		background: #4a4a4a;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	/* 分隔线样式 */

	.menu-line {
		width: 100%;
		box-sizing: border-box;
		position: absolute;
		bottom: 0px;
		height: auto;
	}

	.menu-divider {
		border-top-style: solid;
		width: 100%;
		height: 0px;


	}

	.bottom-btn {
		width: 100%;
		height: 90rpx;
		text-align: center;
		color: rgba(35, 35, 35, 0.87);
		font-family: PingFang SC;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 90rpx;
		letter-spacing: 12rpx;
		text-align: center;
	}
</style>