<!-- 搜索表单 -->
<template>
  <ele-card :body-style="{ paddingBottom: '8px' }">
    <ProSearch
      :items="formItems"
      ref="searchRef"
      @search="search"
      :initKeys="initKeys"
    >
      <template #buttons>
        <el-button type="primary" @click="searchRef.handleSearch()">查询</el-button>
        <el-button @click="searchRef.handleReset()">重置</el-button>
      </template>
    </ProSearch>
  </ele-card>
</template>

<script setup>
  import { reactive, ref, defineEmits, getCurrentInstance } from 'vue';
  import ProSearch from '@/components/CommonPage/ProSearch2.vue';

  let { proxy } = getCurrentInstance();
  const emit = defineEmits(['search']);

  const props = defineProps({
    status: {
      type: String,
      default: ''
    }
  });

  const formItems = reactive([
    { type: 'input', label: '输入用户UID', prop: 'userId' },
    {
      type: 'select',
      label: '请选择状态',
      prop: 'status',
      options: [
        { label: '待审核', value: 1 },
        { label: '已审核', value: 2 }
      ]
    },
    {
      type: 'select',
      label: '请选择交易类型',
      prop: 'type',
      options: [
        { label: '变与必箱', value: 1 },
        { label: '超时审核', value: 2 }
      ]
    },
    {
      type: 'daterange',
      label: '时间',
      prop: 'timeRange',
      props: {
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间',
        onChange: (value) => {
          initKeys.startTime = value ? value[0] : '';
          initKeys.endTime = value ? value[1] : '';
          searchRef.value?.setData(initKeys);
        }
      }
    }
  ]);

  const initKeys = reactive({
    startTime: '',
    endTime: '',
    userId: '',
    status: '',
    type: ''
  });

  const searchRef = ref(null);
  /** 搜索 */
  const search = (data) => {
    emit('search', { ...data });
  };
</script>
