<template>
    <div :class="[{'zr-searchbox-border': border},{'zr-searchbox-radius': radius},{'zr-searchbox-backgroundColor': backgroundColor},'zr-button-box']">
        <div class="box-left">
            <slot name="buttonLeft"></slot>
        </div>
        <div class="box-right">
            <slot name="buttonRight"></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        border: {
            type: Boolean,
            default: false,
        },
        radius: {
            type: Boolean,
            default: false,
        },
        backgroundColor: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            
        }
    }
}
</script>

<style lang="less" scoped>
    .zr-button-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px;
        .box-left {
            flex: 1
        }
    }
    .zr-searchbox-border {
        padding: 15px 10px;
        border: 1px solid #ecf1f5;
    }
    .zr-searchbox-radius {
        padding: 15px 10px;
        border-radius: 6px;
    }
    .zr-searchbox-backgroundColor {
        padding: 15px 10px;
        background-color: #f6f8fa;
    }
</style>