<template>
  <div>
    <SearchBlock v-model="query" :menus="menus" @change="handleChange"></SearchBlock>
  </div>
</template>

<script>

export default {
  name: 'Test',
  data() {
    return {
      query: {

      },
      menus: [
      {
          label: '搜索1',
          prop: 'search1',
          type: 'text',
          default: '666',
        },
        {
          label: '搜索2',
          prop: 'search2',
          type: 'select',
          options: ['和辉煌', 'ggg'],
          optionsMethod: () => {
            return new Promise((resolve) => {
              setTimeout(() => {
                resolve([
                  { id: 1, name: '和辉煌' },
                  { id: 2, name: 'ggg' },
                ]);
              }, 3000);
            });
          },
          optionsProp: 'id',
          optionsLabel: 'name',
          multiple: true,
        },
        {
          label: '搜索3',
          prop: 'search3',
          type: 'date',
        },
        {
          label: '搜索4',
          prop: 'search4',
          type: 'daterange',
        }
      ],
    }
  },
  methods: {
    handleChange(query) {
      console.log(query);
    }
  }
}
</script>

<style>

</style>