import { PropType, defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import { NButton, NSpace } from 'naive-ui';
import TheSearch from '/src/components/TheSearch';
export default defineComponent({
  name: 'search-group',
  props: {
    categoryChildList: {
      type: Array as PropType<any>,
      default: () => []
    },
    wikiCategoryId: {
      type: String,
      default: ''
    }
  },
  emits: ['search', 'add'],
  expose: ['init'],
  setup(props, { emit }) {
    // const catchStore = useCatchStore();
    const forms = reactive({
      keyword: '',
      wikiCategoryId: props.wikiCategoryId || ''
    });

    const onSearch = () => {
      emit('search', forms);
    };
    onMounted(async () => {
      // 获取教材分类列表
      // await catchStore.getMusicSheetCategory()
    });
    return () => (
      <div class={styles.searchGroup}>
        <div class={[styles.searchCatatory]}>
          <NSpace size="small" class={styles.btnType}>
            {props.categoryChildList.length > 0 ? (
              <NButton
                type={
                  forms.wikiCategoryId === props.wikiCategoryId
                    ? 'primary'
                    : 'default'
                }
                secondary={
                  forms.wikiCategoryId === props.wikiCategoryId ? false : true
                }
                round
                size="small"
                focusable={false}
                onClick={() => {
                  forms.wikiCategoryId = props.wikiCategoryId;
                  onSearch();
                }}>
                全部
              </NButton>
            ) : (
              <span></span>
            )}
            {props.categoryChildList.map((item: any) => (
              <NButton
                type={forms.wikiCategoryId === item.id ? 'primary' : 'default'}
                secondary={forms.wikiCategoryId === item.id ? false : true}
                round
                size="small"
                focusable={false}
                onClick={() => {
                  forms.wikiCategoryId = item.id;
                  onSearch();
                }}>
                {item.name}
              </NButton>
            ))}
          </NSpace>
          <TheSearch
            class={styles.inputSearch}
            placeholder="请输入乐器名称"
            round
            onSearch={(val: string) => {
              forms.keyword = val;
              onSearch();
            }}
          />
        </div>
      </div>
    );
  }
});