<!-- 搜索表单 -->
<template>
  <ele-card :body-style="{ paddingBottom: '8px' }">
    <ProSearch :columns="columns" v-model:form="form" ref="searchRef">
      <el-col :span="6" style="min-width: 160px">
        <el-button style="width: 90px" type="primary" @click="search"
          >查询</el-button
        >
        <el-button style="width: 90px" type="info" @click="reset"
          >重置</el-button
        >
      </el-col>
    </ProSearch>
  </ele-card>
</template>

<script setup>
  import { reactive, ref, defineEmits } from 'vue';
  import { useFormData } from '@/utils/use-form-data';
  import ProSearch from '@/components/CommonPage/ProSearch.vue';

  const emit = defineEmits(['search']);
  const columns = reactive([
    { tag: 'el-input', label: '退回编号', prop: 'refundOrderId', span: 4 },
    { tag: 'el-input', label: '原始订单ID', prop: 'originOrderId', span: 4 },
    { tag: 'el-input', label: '物流单号', prop: 'waybillCode', span: 4 },
    { tag: 'el-input', label: '收件人姓名', prop: 'receiveName', span: 4 },
    { tag: 'el-input', label: '收件人手机', prop: 'receiveMobile', span: 4 },
    { tag: 'el-input', label: '收件地址', prop: 'receiveAddress', span: 4 },
    {
      tag: 'dict-data',
      label: '状态',
      prop: 'status',
      span: 4,
      tagAttrs: { code: 'refund_status', type: 'select' }
    },
    {
      tag: 'dict-data',
      label: '是否首单',
      prop: 'firstOrder',
      span: 4,
      tagAttrs: { code: 'is_first_order', type: 'select' }
    },
    // {
    //   tag: 'dict-data',
    //   label: '是否推送',
    //   prop: 'isPush',
    //   span: 4,
    //   tagAttrs: { code: 'is_push', type: 'select' }
    // }
  ]);

  const initKeys = {};
  for (let i = 0; i < columns.length; i++) {
    initKeys[columns[i].prop] = '';
  }

  /** 表单数据 */
  const [form, resetFields] = useFormData({
    ...initKeys
  });

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

  /** 重置 */
  const reset = () => {
    resetFields();
    search();
  };
</script>
