import { defineComponent, reactive, ref } from 'vue';
import styles from './index.module.less';
import { NButton, NForm, NFormItem, NInput, NSpace } from 'naive-ui';
import TheSearch from '/src/components/TheSearch';

export default defineComponent({
  name: 'search-group',
  setup() {
    const isFocus = ref(false);
    const forms = reactive({
      search: ''
    });
    return () => (
      <div class={styles.searchGroup}>
        <NForm labelAlign="left" labelPlacement="left">
          <NFormItem label="教材：">
            <NSpace>
              <NButton secondary strong type="primary" focusable={false}>
                全部
              </NButton>
              <NButton quaternary focusable={false}>
                人教版
              </NButton>
              <NButton quaternary focusable={false}>
                声部训练
              </NButton>
              <NButton quaternary focusable={false}>
                小曲目
              </NButton>
              <NButton quaternary focusable={false}>
                考级曲目
              </NButton>
            </NSpace>
          </NFormItem>
          <NFormItem label="乐器：">
            <NSpace>
              <NButton secondary strong type="primary">
                全部
              </NButton>
              <NButton quaternary focusable={false} type="default">
                竖笛
              </NButton>
              <NButton quaternary focusable={false} type="default">
                排萧
              </NButton>
              <NButton quaternary focusable={false} type="default">
                口风琴
              </NButton>
              <NButton quaternary focusable={false} type="default">
                陶笛
              </NButton>
              <NButton quaternary focusable={false} type="default">
                葫芦丝
              </NButton>
            </NSpace>
          </NFormItem>
        </NForm>
        {/* <NInput
          type="text"
          placeholder="请输入搜索关键词"
          clearable
          round
          v-model:value={forms.search}
          class={styles.inputSearch}>
          {{
            prefix: () => <span class={'icon-search-input'}></span>,
            suffix: () => (
              <NButton round type="primary" class={styles.searchBtn}>
                搜索
              </NButton>
            )
          }}
        </NInput> */}
        <TheSearch class={styles.inputSearch} />
      </div>
    );
  }
});
