<template>
    <Button 
    :type="value?type:'default'" 
    @click="toggle" 
    :disabled="disabled" 
    :loading="loading"
    :ghost="ghost"
    :shape="shape"
    :size="size">
        <span v-if="value">
            <Icon :type="onIcon" v-if="!loading"/>{{ onLabel}}</span>
        <span v-else>
            <Icon :type="offIcon" v-if="!loading"/>{{offLabel}}</span>
    </Button>
</template>
<script>
//切换按钮，布尔值
export default {
    name:'ToggleButton',
    props: {
        value: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        //开启的文字，true
        onLabel: {
            type: String,
            default: () => {
                return "开启";
            }
        },
        //关闭的文字，false
        offLabel: {
            type: String,
            default: () => {
                return "关闭";
            }
        },
        //开启的图标
        onIcon: {
            type: String,
            default: () => {
                return "md-checkmark";
            }
        },
        //关闭的图标
        offIcon: {
            type: String,
            default: () => {
                return "md-close";
            }
        },
        //以下都是iview按钮控件的属性
        type: {
            type: String,
            default: () => {
                return "primary";
            }
        },
        disabled: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        loading: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        size: {
            type: String,
            default: () => {
                return "default";
            }
        },
        shape: {
            type: String,
            default: () => {
                return null;
            }
        },
        ghost: {
            type: Boolean,
            default: () => {
                return false;
            }
        }
    },
    watch:{
        value() {
            this.$emit('on-change',this.value);
        }
    },
    methods: {
        toggle() {
            this.$emit("input", !this.value);
        }
    }
};
</script>

