<style lang=sass>
@import "../../assets/components/_actionsheet.scss";
</style>

<template>
<div class="panel-wrap" :class="{'active':visible}">
    <div class="overlay" v-show="visible" ></div>
    <div class="bottom-panel panel--actionsheet" v-show="visible">
        <ul class="line-list line-list--center">
            <li v-for="item in items" class="line-item" v-text="item.text" @click="changed($index)"></li>
        </ul>
        <ul class="line-list line-list--center" @click="close">
            <li class="line-item">取消</li>
        </ul>
    </div>
</div>
</template>

<script>
export default{
	props:{
		visible:{
			type:Boolean,
			default:false,
			twoWay:true
		},
		items:{
			type:Array,
			default:[]
		}
	},
	methods:{
		changed(index){
			this.close();
			this.$emit("change",this.items[index]);
		},
		close(){
			this.visible=false;
		}
	}
}

</script>