<script setup lang="ts" xmlns="http://www.w3.org/1999/html">
import { ref, computed } from 'vue';
import { Form } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
interface SearchModel {
  pageNum: number;
  pageSize: number;
  userName?: string;
  type?: number;
  status?: number;
}

const props = withDefaults(defineProps<{
  model: SearchModel;
}>(), {
  model: () => ({
    pageNum: 1,
    pageSize: 10,
    userName: '',
    type: undefined,
    status: undefined
  })
});

const emit = defineEmits<{
  'update:model': [value: SearchModel];
  'search': [];
  'reset': [];
}>();

const formRef = ref<FormInstance>();
const { resetFields } = Form.useForm(props.model);

const formModel = computed({
  get: () => props.model,
  set: (val: SearchModel) => emit('update:model', val)
});

function handleReset() {
  resetFields();
  emit('reset');
}

function handleSearch() {
  emit('search');
}

const orderTypeOptions =computed(()=> [
  { label: t('page.bill.packagebill'), value: 0 },
  { label: t('page.bill.rechargebill'), value: 1 }
]);

const orderStatusOptions =computed(()=> [
  { label: t('page.bill.wait'), value: 0 },
  { label: t('page.bill.done'), value: 1 },
  { label: t('page.bill.close'), value: 2 }
]);
</script>

<template>
  <ACard :bordered="false" class="search-card">
    <AForm
      ref="formRef"
      :model="formModel"
      layout="inline"
      class="flex flex-wrap gap-16px items-center"
    >
      <AFormItem :label="t('page.bill.username')">
        <AInput
          v-model:value="formModel.userName"
          :placeholder="t('page.bill.pleusername')"
          allow-clear
        />
      </AFormItem>
      <AFormItem :label="t('page.bill.billtype')">
        <ASelect
          v-model:value="formModel.type"
          :placeholder="t('page.bill.plebilltype')"
          :options="orderTypeOptions"
          allow-clear
          style="width: 200px"
        />
      </AFormItem>
      <AFormItem :label="t('page.bill.status')">
        <ASelect
          v-model:value="formModel.status"
          :placeholder="t('page.bill.plestatus')"
          :options="orderStatusOptions"
          allow-clear
          style="width: 200px"
        />
      </AFormItem>
      <AFormItem class="flex-1 justify-end">
        <ASpace>
          <div class="w-full flex-y-center justify-end gap-12px">
          <AButton type="primary" ghost @click="handleSearch">
            <div class="flex-y-center gap-8px">
            <icon-mdi-search class="text-icon"/>
              {{ t('page.bill.search') }}</div></AButton>
          <AButton @click="handleReset">
            <div class="flex-y-center gap-8px">
              <icon-mdi-refresh class="text-icon"/>
              {{ t('page.bill.reset') }}</div></AButton>
          </div>
        </ASpace>
      </AFormItem>
    </AForm>
  </ACard>
</template>

<style scoped>
.search-card {
  :deep(.ant-card-body) {
    padding: 16px;
  }
}
</style>
