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

<template>
<div class="checkbox-group" >
	<check-box v-for="item in options" :option="item" @changed="onChanged"></check-box>
</div>
</template>

<script>
import CheckBox from "./checkbox"

export default{
	props:{
		options:Array
	},
	data(){
		return{
			value:[]
		}
	},
	created:function(){
		for(var i=0,len=this.options.length;i<len;i++){
			if(this.options[i]['checked']=="checked"){
				this.value.push(this.options[i]['value']);
			}
		}
	},
	components:{
		CheckBox
	},
	methods:{
		onChanged:function(item){
			var value=this.value,
			checked=item.checked;
			var optionIndex=value.indexOf(item.value);
			if(checked=="checked"&&optionIndex===-1){
				value.push(item.value);
			}else{
				value.splice(optionIndex,1);
			}
			this.$emit("changed",value);
		}
	}
}
</script>