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

export default defineComponent({
  name: 'search-group',
  setup() {
    const forms = reactive({
      search: ''
    });
    return () => (
      <div class={styles.searchGroup}>
        <div class={styles.searchCatatory}>
          <NSpace size="small" class={styles.btnType}>
            <NButton type="primary" round size="small" focusable={false}>
              全部
            </NButton>
            <NButton secondary round size="small" focusable={false}>
              乐谱
            </NButton>
            <NButton secondary round size="small" focusable={false}>
              图片
            </NButton>
            <NButton secondary round size="small" focusable={false}>
              音频
            </NButton>
            <NButton secondary round size="small" focusable={false}>
              视频
            </NButton>
          </NSpace>

          <NButton
            type="primary"
            class={styles.addTrain}
            focusable={false}
            strong>
            <img src={iconAdd} />
            添加自定义教材
          </NButton>
        </div>
        <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>

          {/* <NInput
            type="text"
            placeholder="请输入搜索关键词"
            clearable
            round
            v-model:value={forms.search}
            class={styles.inputSearch}>
            {{
              prefix: () => <span class={'icon-search-input'}></span>,
              suffix: () => (
                <NButton
                  round
                  size="small"
                  type="primary"
                  class={styles.searchBtn}>
                  搜索
                </NButton>
              )
            }}
          </NInput> */}
          <TheSearch class={styles.inputSearch} round />
        </NForm>
      </div>
    );
  }
});