<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 {
  Plus
} from '@element-plus/icons-vue'
import { color } from 'echarts'
// 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','handleAdd'])
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.realname = ''
  queryForm.value.username = ''
  queryForm.value.remark = ''

  emit('reset', formRef)
}

function handleAdd() {
  emit('handleAdd')
}

</script>

<template>
  <!-- el-form -->
  <page-wrapper-search
    :model="queryForm"
    :extraButtons="[
      {
        text: '新增',
        icon: Plus,
        color: 'rgba(0, 189, 207, 1)',
        type: 'success',
        class: 'btn-fff',
        onClick: handleAdd
      }
    ]"
    @search="onSearch"
    @reset="onReset">
    <el-form-item label="姓名:">
      <el-input v-model="queryForm.realname" clearable placeholder="请输入姓名"></el-input>
    </el-form-item>
    <el-form-item label="用户名:">
      <el-input v-model="queryForm.username" clearable placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="备注:">
      <el-input v-model="queryForm.remark" clearable placeholder="请输入备注"></el-input>
    </el-form-item>
  </page-wrapper-search>



    <!-- <page-wrapper-search
      :model="queryForm"
      :extraButtons="[
        {
          text: '导出',
          icon: Edit,
          type: 'success',
          onClick: handleExport
        },
        {
          text: '打印',
          type: 'warning',
          onClick: handlePrint
        }
      ]"
      @search="onSearch"
      @reset="onReset">
      <el-form-item label="项目名称" prop="proName">
        <el-input
            v-model="queryForm.proName"
            placeholder="请输入项目名称"
            clearable
        />
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input
            v-model="queryForm.note"
            placeholder="请输入备注"
            clearable
        />
      </el-form-item>
    </page-wrapper-search> -->
</template>

<style scoped lang="scss">
:deep(.btn-fff){
  span{
    color: #fff;
  }
}
</style>
