<script setup lang="ts" name="QueryForm">
import { computed,ref,watch } from 'vue'
import type { FormInstance } from 'element-plus'
import PageWrapperSearch from '@/components/search/PageWrapperSearch.vue'
// import { useDict } from '@/utils/dict'
// import { listDept } from '@/api/system/dept'// 部门



// const { approve_status, invoice_status} = useDict('approve_status', 'invoice_status')
const emit = defineEmits(['update:modelValue', 'query', 'reset'])
const invoice_status_filter = ref([])
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) {
  queryForm.value.datasource = ''
  queryForm.value.schema = ''
  queryForm.value.tableName = ''
  queryForm.value.fieldName = ''
  queryForm.value.status = ''
  emit('reset', formRef)
}


</script>

<template>
  <!-- el-form -->
  <page-wrapper-search
    :model="queryForm"
    @search="onSearch"
    @reset="onReset">
    <el-form-item label="数据源名称" prop="datasource">
      <el-input
        v-model="queryForm.datasource"
        placeholder="请输入数据源名称"
        clearable
      />
    </el-form-item>
    
    <el-form-item label="SCHEMA" prop="schema">
      <el-input
        v-model="queryForm.schema"
        placeholder="请输入SCHEMA"
        clearable
      />
    </el-form-item>
    
    <el-form-item label="表名称" prop="tableName">
      <el-input
        v-model="queryForm.tableName"
        placeholder="请输入表名称"
        clearable
      />
    </el-form-item>
    
    <el-form-item label="字段名称" prop="fieldName">
      <el-input
        v-model="queryForm.fieldName"
        placeholder="请输入字段名称"
        clearable
      />
    </el-form-item>
    
    <el-form-item label="状态" prop="status">
      <el-select
        v-model="queryForm.status"
        placeholder="请选择状态"
        clearable
      >
        <el-option label="启用" value="active" />
        <el-option label="禁用" value="inactive" />
      </el-select>
    </el-form-item>
  </page-wrapper-search>
</template>

<style scoped>

</style>
