import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import { NButton, NInput, NSelect, NSpace } from 'naive-ui';
import { instrumentArray, teachingArray } from '@/utils/searchArray';
import iconSearch from '../../components/resource-main/images/icon-search.png';

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

          <div class={styles.searchSelect}>
            <NSelect placeholder="教材" options={teachingArray} clearable />
            <NSelect placeholder="乐器" options={instrumentArray} clearable />
          </div>

          <NInput
            type="text"
            placeholder="请输入搜索关键词"
            clearable
            v-model:value={forms.search}
            class={styles.inputSearch}>
            {{
              prefix: () => <img src={iconSearch} class={styles.iconSearch} />,
              suffix: () => (
                <NButton
                  type="primary"
                  class={styles.searchBtn}
                  disabled={forms.search ? false : true}>
                  搜索
                </NButton>
              )
            }}
          </NInput>
        </div>
      </>
    );
  }
});