<script setup lang="ts">
import Task from './Task.vue'
import TaskTemplate from './TaskTemplate/index.vue'
import { nextTick, ref } from 'vue'

const taskTemplateRef = ref<{ changeTask: () => void; clear: () => void }>()

function handleSearch() {
  nextTick(() => {
    taskTemplateRef.value?.changeTask()
  })
}
</script>

<template>
  <div class="p-[24px] h-[calc(100%-60px)]">
    <Task @search="handleSearch" @search-start="taskTemplateRef?.clear" />
    <TaskTemplate ref="taskTemplateRef" />
  </div>
</template>

<style scoped lang="scss"></style>
