<template>
    <div class='app-triple-switch'>
        <span :class='{"switch-core":true,disabled:disabled || readonly,[swtichStatus]:true}' @click='switchClick'></span>
    </div>
</template>

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

@Component({})
export default class AppTripleSwitch extends Vue {
    /**
     * 当前选中状态
     *
     * @type {string}
     * @memberof Appswitch
     */
    swtichStatus:string = 'default';

    /**
     * 最后一次选中状态
     *
     * @type {string}
     * @memberof Appswitch
     */
    lastStatus:string='default';

    /**
     * checked选中状态
     *
     * @type {boolean}
     * @memberof Appswitch
     */
    @Prop() public value?: any;
    @Watch('value')
    valueChange(val:any) {
        if(val === 0) {
            this.swtichStatus = 'close';
            this.lastStatus = 'close';
        }else if(val === 1) {
            this.swtichStatus = 'open';
            this.lastStatus = 'open';
        }else {
            this.swtichStatus = 'default';
        }
    }

    /**
     * 禁用
     *
     * @type {boolean}
     * @memberof Appswitch
     */
    @Prop() public disabled?: boolean;

    /**
	 * 只读模式
	 * 
	 * @type {boolean}
	 */
	@Prop({default: false}) public readonly?: boolean;

    /**
     * checked选中状态
     *
     * @type {boolean}
     * @memberof Appswitch
     */
    switchClick() {
        let curValue;
        if(this.disabled || this.readonly) {
            return;
        }
        if(this.swtichStatus === 'default') {
            if(this.lastStatus === 'close' || this.lastStatus === 'default'){
                curValue = 1;
            }else {
                curValue = 0;
            }
        }else {
            curValue = null;
        }
        this.$emit('change', curValue);
    }
}
</script>

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