<template>
    <div
        class="relative flex flex-col w-full rounded-[10px] bg-[#ffffff] items-start my-auto gap-px py-0 mt-0 px-5 maincontine"
    >
        <Disclosure v-slot="{ open }">
            <ExpandBtn title="Register.pricing_serch" :open="open" />

            <DisclosurePanel
                class="panels mt-[10px] mb-[-8px] text-sm text-gray-300"
            >
                <div id="Fork" class="pl-2 formthree">
                    <FormKit
                        @input="$emit('update:Tricingarr', value)"
                        v-model="value"
                        type="checkbox"
                        :options="skil"
                    >
                        <template #label="context">
                            <label
                                :for="context.option.attrs.id"
                                :class="{
                                    chang_color: context._value.includes(
                                        context.option.value
                                    ),
                                }"
                                class="pl-4 pr-2"
                            >
                                {{ context.option.label }}
                            </label>
                        </template>
                    </FormKit>
                </div>
                <br />
            </DisclosurePanel>
        </Disclosure>
    </div>
</template>

<script>
import ExpandBtn from "./ExpandBtn.vue";

import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";

export default {
    props: ["Tric"],
    data() {
        return {
            value: [],
            checkstate: false,
            skil: [],
        };
    },

    created() {
        this.skil = this.Tric.map((user) => ({
            value: user.value,
            label: user.label,
            id: user.id,
        }));
    },

    components: {
        Disclosure,
        DisclosureButton,
        DisclosurePanel,
        ExpandBtn,
    },
};
</script>
<style>
.adddiv {
    margin-bottom: 15px;
}
.divpaneltwo {
    margin: -1;
}
/* style fromket */
.forkit_se .formkit-inner {
    width: 280px;
    background-color: #ebf0fe;
    margin-top: -15px;
}
.forkit_se .text-xs {
    margin-left: 25px !important;
    background-color: #ebf0fe !important;
}

.chang_color {
    color: blue;
}

.form-control {
    background-color: #ebf0fe !important;
    height: 38px;
}
.formthree label {
    margin-left: -15px;
    color: #aaaaaa;
    font-size: 14px;
    cursor: pointer;
}

.formkit-outer .formkit-option {
    border: none;
}
/* end style formkit */
.btn- h2 {
    margin-top: -7px !important;
}

/* .formthree input[type="checkbox"] {
    display: block;
    padding-left: 0;
    margin-left: -13px;
} */

.formthree input[type="serch"] {
    width: 100%;
}
.maincontine h2 {
    height: 22px;
    line-height: 22px;
}
.add-h2 {
    position: absolute;
    margin-left: 16px;
    padding-bottom: 3px !important ;
}

#Fork {
    margin-top: -25px;
}
/* svg one */
/* .maincontine .w-5 {
    margin-right: 32.82px;
} */
.maincontine svg {
    top: 10px !important;
}

/* style ul */
</style>
