<script setup lang="ts" name="QueryForm">
import { ref, computed,onMounted } from 'vue'
const emit = defineEmits(['update:modelValue', 'query', 'reset', 'add'])
const props = defineProps<{
  modelValue: any
}>()

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

const ElFormRef = ref()

// 新增
function handleAdd() {
  emit('add')
}

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

// 重置
function onReset() {
  const formRef = ElFormRef.value
  emit('reset', formRef)
}

onMounted(() => {
  
})

</script>

<template>
  <el-form ref="ElFormRef" :model="queryForm" label-width="90px">
    <el-row :gutter="9">
      <el-col :span="8">
        <el-form-item label="数据源名称" prop="sysname">
          <el-input v-model="queryForm.sysname" placeholder="请输入客户名称" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="IP" prop="ip">
          <el-input v-model="queryForm.ip" placeholder="请输入客户名称" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-button icon="Refresh" @click="onReset">重置</el-button>
        <el-button type="primary" icon="Search" @click="onSearch">搜索</el-button>
        <el-button type="primary" icon="Plus" style="background: rgba(0, 189, 207, 1);border-color: rgba(0, 189, 207, 1);" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>
  </el-form>
  <!-- <page-wrapper-search
    :model="queryForm"
    @search="onSearch"
    @reset="onReset"
    label-width='90'>
    
  </page-wrapper-search> -->
</template>
