<template>
    <div class="border-box" :style="{ color, cursor: isDisabled ? 'not-allowed' : 'pointer' }" :class="$attrs.ggclass" @click="onClick">
        <div class="flex_1 e1">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "qg-border-box",
    inject: {
        elForm: {
            default: "",
        },
    },
    props: {
        color: {
            type: String,
            default: "",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        isDisabled() {
            return this.disabled || (this.elForm || {}).disabled;
        },
    },
    methods: {
        onClick(e) {
            if (this.isDisabled) return;
            this.$debounce(() => {
                this.$emit("click", e);
            });
        },
    },
};
</script>

<style scoped>
.border-box {
    width: 100%;
    flex: 1;
    height: 32rem;
    background-color: #ffffff;
    border-radius: 4rem;
    border: solid 1rem #dddddd;
    display: flex;
    align-items: center;
    padding: 0 2rem 0 10rem;
}
</style>
