import { onMounted, ref } from 'vue'

export default function useModuleItem() {
    const budgetRef = ref<HTMLLIElement>()
    const estimateRef = ref<HTMLLIElement>()
    const utilRef = ref<HTMLLIElement>()
    const settlementRef = ref<HTMLLIElement>()
    const finalRef = ref<HTMLLIElement>()
    const checkRef = ref<HTMLLIElement>()

    const moduleRef = ref<HTMLUListElement>()

    onMounted(() => {
        if (moduleRef.value) {
            const ul = moduleRef.value
            const list = ul.querySelectorAll('.item')
            list.forEach(item => {
                item.classList.remove('animate__animated')
                item.classList.add('can-hover')
            })
        }
    })

    return {
        budgetRef,
        estimateRef,
        utilRef,
        settlementRef,
        finalRef,
        checkRef,
        moduleRef
    }
}
