<template>
	<view class="s-shareSheet">
		<s-popup :round="round" @close="$emit('input',false)" :closeOnClickOverlay="closeOnClickOverlay" :show="showpop" >
			<view class="s-shareSheet-title relative" >
				
				<!-- title插槽 -->
				<template  v-if="$slots.title">
					<slot name="title"></slot>
				</template>
				
				<template v-else>
					<view :style="[$s.addStyle(titleStyle)]" class="share-title text-align-center text-grey-lighten-1">{{title}}</view>
				</template>
			</view>
			<block v-for="(item2,index2) in actions" :key="index2">
				<view class="py-32 pa-32">
					<scroll-view scroll-x class="s-shareSheet-wk flex-start">
						<view @click="onclick(index2,index,item)" v-for="(item,index) in item2" :key="index" class="s-shareSheet-zuti">
							<view class="s-shareSheet-zuti-img flex-center" :class="mode === 'square' ? 'rounded-mini' : 'rounded'" :style="[{background:item.bgColor},$s.addStyle(itemStyle)]">
								<s-icon v-if="item.icon" :fllowTheme="fllowTheme" :name="item.icon" size="25"
									:color="item.iconColor"></s-icon>
								<image v-else style="width: 25px;height: 25px;" :src="item.url" :class="mode === 'square' ? 'rounded-mini' : 'rounded'" mode=""></image>
							</view>
							<view class="s-shareSheet-zuti-text text-size-xs my-10 text-grey">{{item.name}}</view>
						</view>
					</scroll-view>
				</view>
				<view v-if="(index2+1)%2!=0&&actions.length>1" class="mx-32">
					<view class="border-b-1"></view>
				</view>
			</block>
			
			<view class="close-btn">
				<s-button :customStyle="{borderRadius: '10rpx'}" type="primary" @click="close">点我关闭</s-button>
			</view>

			<view class="safe--hei"></view>
		</s-popup>
	</view>
</template>

<script>
	/**
	 * 分享面板
	 * @description 动作面板,从底部弹出的操作菜单。
	 * @property {Boolean}		 	value  						默认：false，显示菜单，推荐使用v-model,使用value.sync达到双向绑定。
	 * @property {Boolean} 		 	clickClose 					默认：true，点击图标后是否立即关闭弹层。
	 * @property {Boolean}		 	closeOnClickOverlay  		默认：true，点击遮罩层是否关闭弹窗。
	 * @property {String}		 	title  						默认：'请操作',弹出层的标题。
	 * @property {String/Number} 	round  						默认值20 
	 * @property {Object}		 	itemStyle 					默认值{}
	 * @property {Object} 		 	titleStyle 					默认值{}
	 * @property {Object}		 	mode 						默认值square 可选择circle
	 * @property {Array}		 	actions  					默认：[],格式见文档，操作数组。{name:"微信",bgColor:"#07c160",icon:"icon-weixin",color:"white"}
	 * @property {Boolean}		 	fllowTheme 					默认值 true 如果跟随主题变换以后当切换主题以后图标颜色会变成主色调
	 * @property {Function} 	 	select						点击项目时触发,返回：{firstIndex,secondIndex,data} 返回点击当前项的下标以及数据
	 * @property {Function}		 	cancel 						点击头部右上角关闭按钮触发
	 * @example <s-share-sheet ></s-share-sheet>
	 */
	import props from './props.js';
	export default {
		name:"s-shareSheet",
		mixins: [uni.$s.mpMixin, uni.$s.mixin],
		props,
		model:{
			prop:'value',
			event:'input'
		},
		watch:{
			value:{
				handler: function(newVal){
					this.showpop = this.value;
				},
				immediate: true
			}
		},
		data() {
			return {
				showpop:false,
				
				black_tmeme: false,
			};
		},
		mounted() {
		},
		methods: {
			// 点击右上角关闭按钮
			close(){
				this.$emit("cancel")
			},
			// 点击每一个选项
			onclick(firstIndex,secondIndex,item){
				this.$emit('select',{firstIndex:firstIndex,secondIndex:secondIndex,data:item})
				if(this.clickClose === true){
					this.$emit("input",false)
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.close-btn{
		padding: 0 42rpx 30rpx;
	}
	.s-shareSheet{
		.s-shareSheet-title {
			padding-top: 32rpx;
			.s-shareSheet-close {
				top: 32upx;
				right: 32upx;
				width: 50upx;
				height: 50upx;
			}
		}
		.share-title{
			font-size: 30rpx;
		}
		.rounded-mini{
			border-radius: 10rpx;
		}
		
		.s-shareSheet-wk {
			white-space: nowrap;
			width: 100%;
		
			.s-shareSheet-zuti {
				width: 140upx;
				flex-shrink: 0;
				text-align: center;
				display: inline-block;
		
				.s-shareSheet-zuti-img {
					margin: auto;
					width: 100upx;
					height: 100upx;
				}
			}
		}
		
		.text-size-xs{
			font-size: 22rpx;
		}
		
		.pa-32{
			padding: 32rpx;
		}
		
		.white{
			background-color: #ffffff;
			color: #000000;
		}
		
		.flex-start{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
		}
		
		.flex-center{
			display: flex;
			justify-content: center;
			align-items: center;
			align-content: center;
		}
		.grey-lighten-3{
			    background-color: #eee!important;
			    color: #0a0a0a;
		}
		.rounded{
			    border-radius: 50%!important;
		}
		.border-b-1{
			border-bottom: solid 1px #f0f0f0;
		}
		
		.absolute{
			position: absolute;
		}
		
		.text-grey-lighten-1{
			color: #bdbdbd !important;
		}
		.text-align-center{
			text-align: center;
		}
		
		.text-size-s{
			font-size: 24rpx;
		}
		
		.py-32{
			padding-top: 32rpx;
			padding-bottom: 32rpx;
		}
		.my-5{
			margin-top: 10rpx;
			margin-bottom: 10rpx;
		}
		.mx-32{
			margin-left: 32rpx;
			margin-right: 32rpx;
		}
		
	}
	
</style>
