<template>
    <div class="check-box" @click="ischeck = !ischeck">
        <div class="check" :style="{ background, height, width }" :class="{ pitch: ischeck }"></div>
    </div>
</template>

<script>
export default {
    name: "qg-check",
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        color: {
            type: String,
            default: "green",
        },
        dese: {
            type: String,
            default: "",
        },
        width: {
            type: String,
            default: "20rem",
        },
        height: {
            type: String,
            default: "20rem",
        },
    },
    computed: {
        ischeck: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit("input", val);
            },
        },
        background() {
            let back = this.$checkColor || this.color;
            let color = this.color === "green" ? back : this.color;
            return this.ischeck ? color : "";
        },
    },
};
</script>

<style scoped>
.check-box {
    display: inline-flex;
}
.check {
    display: inline-flex;
    border-radius: 50%;
    border: 1rem solid #ccc;
    margin-right: 10rem;
}
.pitch {
    /* border: none !important;
    border: 1rem solid #ccc; */
    display: inline-flex;
    /* align-items: center;
    justify-content: center; */
    position: relative;
}
.pitch::before {
    content: "";
    display: inline-block;
    position: absolute;
    /* top: 30%;
    left: 15%; */
    top: 5rem;
    left: 3rem;
    /* transform: translate(-50%, -50%); */
    width: 9rem;
    height: 3rem;
    border-left: 3rem solid #fff;
    border-bottom: 3rem solid #fff;
    transform: rotate(-45deg);
}
</style>
