<!-- 搜索表单 -->
<template>
  <ele-card :body-style="{ padding: '0', paddingTop: '12px' }">
    <ProSearch
      :items="formItems"
      ref="searchRef"
      @search="search"
      :initKeys="initKeys"
    >
    </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', 'exportExcel']);

  const formItems = reactive([
    {
      type: 'input',
      label: '活动名称',
      prop: 'activityName',
      placeholder: '请输入活动名称'
    },
    {
      type: 'input',
      label: '活动地区',
      prop: 'activityRegion',
      placeholder: '请输入活动地区'
    },
    {
      type: 'date',
      label: '开始时间',
      prop: 'startTime',
      props: {
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        format: 'YYYY-MM-DD HH:mm:ss',
        placeholder: '开始时间',
      }
    },
    {
      type: 'date',
      label: '结束时间',
      prop: 'endTime',
      props: {
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        format: 'YYYY-MM-DD HH:mm:ss',
        placeholder: '结束时间',
      }
    },
    {
      type: 'input',
      label: '用户ID',
      prop: 'userId',
      placeholder: '请输入用户ID'
    },
    {
      type: 'input',
      label: '订单编号',
      prop: 'orderNo',
      placeholder: '请输入订单编号'
    }
  ]);

  const initKeys = reactive({
    activityName: '',
    activityRegion: '',
    startTime: '',
    endTime: '',
    userId: '',
    orderNo: ''
  });

  const searchRef = ref(null);

  /** 搜索 */
  const search = (data) => {
    emit('search', { ...data });
  };

  defineExpose({
    search
  });
</script>

<style lang="scss" scoped>
  :deep(.el-form-item__content) {
    width: 100%;
  }
</style>
