<template>
	<view class="my-action-sheet">
		<u-action-sheet :show="show" cancelText="取消" :title="title" round="10" @close="close">
			<view class="list">
				<view class="list_item" :class="value==item.value?'active':''" v-for="item in info" :key="item.value" @click="select(item.value)">
					<view class="label">
						{{item.label}}
					</view>
					<view class="icon">
						<u-icon name="checkmark" color="#69BB73" v-if="value==item.value"></u-icon>
					</view>
				</view>
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		props:{
			value:{
				type:[String,Number]
			},
			list:{
				type:Array,
				default:()=>[]
			},
			title:{
				type:String,
				default:null
			},
			show:{
				type:Boolean,
				default:false
			},
			keyName:{
				type:String,
				default:null
			},
			valueName:{
				type:String,
				default:null
			}
		},
		name:"my-action-sheet",
		data() {
			return {
				
			};
		},
		computed:{
			info(){
				let arr = this.list.map(item=>{
					if(this.keyName&&this.valueName){
						return {
							label:item[keyName],
							value:item[valueName]
						}
					}else{
						return{
							...item
						}
					}
				})
				return arr
			}
		},
		methods:{
			close(){
				this.$emit("update:show",false)
			},
			select(val){
				this.$emit("input",val)
				this.$emit("update:show",false)
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.my-action-sheet{
	.list{
		height: 500rpx;
		overflow: auto;
		.list_item{
			height: 80rpx;
			line-height:80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;
			&.active{
				background: rgba(105, 187, 115, 0.1);
			}
		}
	}
}
</style>