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

const appStore = useAppStore()
const emit = defineEmits(['update:modelValue', 'query', 'reset'])
const dataTypeList = 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)
}

onMounted(() => {
  
})

</script>

<template>
  <page-wrapper-search
    :model="queryForm"
    @search="onSearch"
    @reset="onReset"
    label-width='100'>
    <el-form-item label="数据源名称" prop="sysname">
      <el-input v-model="queryForm.sysname" placeholder="请输入客户名称" clearable />
    </el-form-item>
    <el-form-item label="IP" prop="ip">
      <el-input v-model="queryForm.ip" placeholder="请输入客户名称" clearable />
    </el-form-item>
    <el-form-item label="数据源类型" prop="dbtype">
      <el-select v-model="queryForm.dbtype" placeholder="请选择">
        <el-option
          v-for="item in appStore.DATABASE_TYPE"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </page-wrapper-search>
</template>
