<template>
  <BasicDrawer
    v-bind="$attrs"
    destroyOnClose
    @register="registerDrawer"
    :title="getTitle"
    :width="width"
    @ok="handleSubmit"
    :showFooter="true"
    cancelText=""
    okText="筛选"
    :showCancelBtn="false"
  >
    <BasicForm @register="registerForm" layout="vertical" class="!px-6 !pt-2" />
    <template #insertFooter>
      <a-button @click="handleCancel" class="mr-2"> 重置 </a-button>
    </template>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicForm, useForm } from '/@/components/Form';
  import { siftFormSchema } from './data';

  const emit = defineEmits(['success', 'register']);

  const getTitle = ref(`筛选条件`);
  const width = '25%';
  const [registerForm, { setFieldsValue, resetFields, validate, getFieldsValue }] = useForm({
    schemas: siftFormSchema,
    showActionButtonGroup: false,
    baseColProps: {
      span: 24,
    },
  });
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async data => {
    await resetFields();
    setDrawerProps({ confirmLoading: false });
    console.log('🚀 ~ file: FormDrawer.vue:49 ~ data:', data);
    const resData = {} as any;
    (data.record.length &&
      data.record.map(ele => {
        console.log('🚀 ~ file: FormDrawerSift.vue:46 ~ ele:', ele);
        resData[ele.field] = ele.value;
      })) ||
      [];
    console.log('🚀 ~ file: FormDrawerSift.vue:44 ~ resData:', resData);
    await setFieldsValue({ ...resData });
  });

  // 提交按钮事件
  async function handleSubmit() {
    try {
      const values = await validate();
      setDrawerProps({ confirmLoading: true });
      closeDrawer();
      emit('success', values);
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }

  async function handleCancel() {
    console.log('关闭', await getFieldsValue());
    await resetFields();
  }
</script>
<style lang="less" scoped>
  ::v-deep(.ant-picker) {
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
</style>
