<template>
  <ArtSearchBar
    ref="searchBarRef"
    v-model="formData"
    :items="formItems"
    @reset="handleReset"
    @search="handleSearch"
  >
  </ArtSearchBar>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'

  interface RoleTemplateSearchForm {
    keyword: string
  }
  interface Props {
    modelValue: RoleTemplateSearchForm
  }
  interface Emits {
    (e: 'update:modelValue', value: RoleTemplateSearchForm): void
    (e: 'search', params: RoleTemplateSearchForm): void
    (e: 'reset'): void
  }
  const props = defineProps<Props>()
  const emit = defineEmits<Emits>()

  // 表单数据双向绑定
  const searchBarRef = ref()
  const formData = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
  })

  // 表单配置
  const formItems = computed(() => [
    {
      label: '关键词',
      key: 'keyword',
      type: 'input',
      placeholder: '请输入模板名称/编码',
      clearable: true
    }
  ])

  const handleReset = () => {
    emit('reset')
  }

  const handleSearch = () => {
    emit('search', formData.value)
  }
</script>
