<template>
<div class="app-switch">
    <el-switch  v-model="curValue" :disabled ="disabled"></el-switch><span v-if="isShowText">{{text}}</span>
</div>

</template>

<script lang="ts">
import { Vue, Component, Prop, Model } from 'vue-property-decorator';

@Component({})
export default class AppSwitch extends Vue {

   	    /**
         * checked选中状态
         *
         * @type {boolean}
         * @memberof Appswitch
         */
        @Prop() public value?: any;

        /**
         * checked显示文本
         *
         * @type {boolean}
         * @memberof Appswitch
         */
        public text:string = "";

        /**
         * 是否显示文本
         *
         * @type {boolean}
         * @memberof Appswitch
         */
        @Prop() public isShowText?: boolean;
        
        get curValue(){
            return this.value == 1 ? true:false;
        }

        set curValue(value:any){
            let emitValue = value == true ? 1:0;
            this.$emit('change',emitValue);
            this.valueChange(value);
        }
        
		/**
         * 禁用
         *
         * @type {boolean}
         * @memberof Appswitch
         */
        @Prop() public disabled?: boolean;
        
    	/**
         * 生命周期
         *
         * @memberof Appswitch
         */
        mounted(){
            this.valueChange(this.curValue);
        }
	    
    	/**
         * 文本更新
         *
         * @memberof Appswitch
         */
        public valueChange(value:boolean) {
            if(value){
                this.text="是"
            }else{
                this.text="否"
            }
        }
}
</script>

<style lang='less'>
@import './app-switch.less';
</style>