<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 maincontiner"
    >
        <Disclosure v-slot="{ open }">
            <ExpandBtn title="Register.category_serch" :open="open" />

            <DisclosurePanel class="text-sm text-gray-300 mb-[10px]">
                <div class="adddiv" v-for="cat in userData" :key="cat.id">
                    <Disclosure v-slot="{ open }">
                        <DisclosureButton
                            class="flex justify-between text-sm btn-two mb-[6px] gap-x-2"
                        >
                            <svg
                                :class="!open ? 'rotate-45 transform' : ''"
                                width="9"
                                height="8"
                                viewBox="0 0 9 8"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    d="M8.29183 0.972246L7.52808 0.208496L4.50016 3.23641L1.47225 0.208496L0.708496 0.972246L3.73641 4.00016L0.708496 7.02808L1.47225 7.79183L4.50016 4.76391L7.52808 7.79183L8.29183 7.02808L5.26391 4.00016L8.29183 0.972246Z"
                                    fill="#222222"
                                />
                            </svg>

                            <h2
                                :class="
                                    open ? 'text-gray-300' : 'text-gray-200'
                                "
                                class="text-sm font-medium normal font-Inter -mt-1.5 text-start"
                            >
                                {{ cat.name }}
                            </h2>
                        </DisclosureButton>

                        <DisclosurePanel class="divpaneltwo">
                            <div class="category">
                                <FormKit
                                    @input="
                                        $emit('update:selectedcategory', value)
                                    "
                                    v-model="value"
                                    type="checkbox"
                                    :options="cat.descendants"
                                >
                                    <template #label="context">
                                        <label
                                            :for="context.option.attrs.id"
                                            :class="{
                                                chang_color:
                                                    context._value.includes(
                                                        context.option.id
                                                    ),
                                            }"
                                            >{{ context.option.label }}</label
                                        >
                                    </template>
                                </FormKit>
                            </div>
                        </DisclosurePanel>
                    </Disclosure>
                </div>
            </DisclosurePanel>
        </Disclosure>
    </div>
</template>

<script>
import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
import { ChevronUpIcon } from "@heroicons/vue/solid";
import ExpandBtn from "./ExpandBtn.vue";
export default {
    props: ["categories"],
    components: {
        ExpandBtn,
        Disclosure,
        DisclosureButton,
        DisclosurePanel,
        ChevronUpIcon,
    },
    data() {
        return {
            value: [],
            userData: [],
        };
    },
    mounted() {
        this.userData = this.categories.map((user) => ({
            name: user.name,

            descendants: user.descendants.map((sub) => {
                return { value: sub.id, label: sub.name, id: sub.id };
            }),
        }));
    },
};
</script>
<style>
/* style continer */

.adddiv {
    margin-bottom: 15px;
    margin-top: 20px;
}
.divpaneltwo {
    margin: -1;
}
/* style fromket */
.category label {
    margin-left: 8px;
    color: #aaaaaa;
    cursor: pointer;
}
.chang_color {
    color: #29419b !important;
}

.maincontiner #input_0 {
    padding-left: 0;
    margin-left: 6px;
}
.maincontiner .formkit-label {
    margin-left: 10px;
    color: #aaaaaa;
    font-size: 14px;
}

.maincontiner .formkit-label:checked {
    color: blue !important;
}

.maincontiner .formkit-outer .formkit-option {
    border: none;
}
/* end style formkit */

/* style ul */
.category ul {
    border-left: 1px solid #7e8299;
    margin-bottom: -10px;
}
.maincontiner ul li {
    line-height: 20px;
    margin-top: 10px;
}
</style>
