<script setup lang="ts" name="QueryForm">
import { ref, computed } from 'vue'
import type { FormInstance } from 'element-plus'
import PageWrapperSearch from '@/components/Search/PageWrapperSearch.vue'
import { useDict } from '@/utils/dict'

const emit = defineEmits(['update:modelValue', 'query', 'reset'])
const employeesList = ref([])
const props = defineProps<{
  modelValue: any
}>()

const queryForm = computed({
  get() {
    return props.modelValue
  },
  set(val: any) {
    console.log('query computed', val)
    emit('update:modelValue', val)
  }
})

// 搜索
function onSearch() {
  emit('query')
}

// 重置
function onReset(formRef: FormInstance) {
  emit('reset', formRef)
}

</script>

<template>
  <page-wrapper-search
    :model="queryForm"
    @search="onSearch"
    @reset="onReset"
    label-width='100'>
    <el-form-item label="数据源名称" prop="customerName">
      <el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable />
    </el-form-item>
    <el-form-item label="IP" prop="customerName">
      <el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable />
    </el-form-item>
    <el-form-item label="数据源类型" prop="customerName">
      <el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable />
    </el-form-item>
  </page-wrapper-search>
</template>
