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

<template>
<label class="checkbox">
	<span class="checkbox-inner">
		<input :name="name" :value="value"  class="checkbox-input" type="checkbox" :disabled="disabled" :checked="checked" @change="onChanged"/>
		<i class="checkbox-icon"></i>
	</span>
	<span class="checkbox-text">{{text}}</span>
</label>
</template>

<script>
export default{
	props:{
			name:String,
			checked:String,
			disabled:String,
			text:String,
			value:String,
			option:Object//继承父组件传递的options参数
	},
	data(){
		return{
			
		}
	},
	created:function(){
		var _option=this.option;
		if(_option!=undefined){
			this.name=_option.name;
			this.checked=_option.checked=="checked"?"checked":null;
			this.disabled=_option.disabled=="disabled"?"disabled":null;
			this.text=_option.text!=undefined?_option.text:"";
			this.value=_option.value!=undefined?_option.value:"";
		}
	},
	methods:{
		onChanged:function(){
			var checked=this.checked;
			if(checked=="checked") {
				this.checked=null;
			}
			else{
				this.checked="checked";
			}
			this.$emit("changed",{
				value:this.value,
				text:this.text,
				checked:this.checked
			});
		}
	}
}

</script>