<template>
    <div>
        <div style="display: flex;align-items: center;justify-content: space-between;">
            <div>
                <a-space direction="vertical">
                    <a-select v-model:value="value1" :size="size" style="width: 200px" :options="options"></a-select>
                </a-space>
                <a-input-search v-model:value="value" placeholder="input search text" style="width: 200px"
                    @search="onSearch" />
                <a-space direction="vertical">
                    <a-select v-model:value="value1" :size="size" style="width: 200px" :options="options"></a-select>
                </a-space>
            </div>
            <div>
                <a-button type="primary" block>新建支付项</a-button>
            </div>
        </div>
        <div style="margin-top: 10px;">
            <a-table :dataSource="dataSource" :columns="columns" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { SelectProps } from 'ant-design-vue';
import { ref, defineExpose } from 'vue';
const popupScroll = () => {
    console.log('popupScroll');
};
const value = ref<string>('');

const onSearch = (searchValue: string) => {
    console.log('use value', searchValue);
    console.log('or use this.value', value.value);
};
const options = [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))
const dataSource = [
    {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
    },
    {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
    },
]

const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
    },
]
defineExpose({
    size: ref<SelectProps['size']>('middle'),
    value1: ref('a1'),
    options,
    value,
    onSearch,
    dataSource,
    columns
})
</script>
<style lang="less" scoped>
</style>