<template>
	<view class="action-sheet" @tap="close" v-if="show">
		<view class="box">
			<slot name="title">
			</slot>
			<view class="item" @tap.stop="itemClick(index)" v-for="(item,index) in props.list" :key="index">
				<button class="bg-fff btn" hover-class="btn-hover-class" :class="{'color-main':active==index}">{{item}}</button>
			</view>
			<view class="bock-gary"></view>
			<view class="cancel-btn" @tap="close">
				<button>取消</button>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const props=defineProps({
		//那个按钮文字高亮
		active:{
			type:Number,
			default:-1
		},
		autoClose:{
			type:Boolean,
			default:true
		},
		title:{
			type:String,
			default:''
		},
		list:{
			type:Array,
			default:['编辑','删除']
		},
		show:{
			type:Boolean,
			default:false
		}
	})
	const emits=defineEmits(['itemClick','close'])
	let show=ref(false)
	function open(){
		show.value=true
	}
	function close(){
		show.value=false
		emits('close')
	}
	function itemClick(index){
		if(props.autoClose){
			close()
		}
		emits('itemClick',index)
	}
	defineExpose({
		open,close
	})
</script>

<style lang="scss">
	$bg:rgb(240, 240, 240);
	.action-sheet{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: rgba(51,51,51,.5);
		z-index: 999;
		.box{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			overflow: hidden;
			background-color: #fff;
			/* #ifndef H5 */
			padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
			 padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
			/* #endif */
		
			.item{
				text-align: center;
				font-size: 32rpx;
				border-bottom: 1px solid $bg;
				.btn{
					border-radius: 0;
				}
			}
		}
	}
	.bock-gary{
		background-color: $bg;
		height: 20rpx;
	}
	.cancel-btn{
		text-align: center;
		font-size: 32rpx;
	}
	.btn-hover-class{
		background-color: rgb(222, 222, 222);
	}
</style>