import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import { NButton, NForm, NFormItem, NSpace } from 'naive-ui';
import iconAdd from '../../images/icon-add.svg';
import TheSearch from '/src/components/TheSearch';
import { resourceTypeArray } from '/src/utils/searchArray';
import { useCatchStore } from '/src/store/modules/catchData';

export default defineComponent({
  name: 'search-group',
  emits: ['search', 'add'],
  setup(props, { emit }) {
    const catchStore = useCatchStore();
    const forms = reactive({
      type: 'MUSIC', //
      keyword: '',
      bookVersionId: null,
      subjectId: null
    });

    const onSearch = () => {
      emit('search', forms);
    };

    onMounted(async () => {
      // 获取教材分类列表
      await catchStore.getMusicSheetCategory();
      // 获取声部列表
      await catchStore.getSubjects();
    });
    return () => (
      <div class={styles.searchGroup}>
        <div class={styles.searchCatatory}>
          <NSpace size="small" class={styles.btnType}>
            {resourceTypeArray.map((item: any) => (
              <NButton
                type={forms.type === item.value ? 'primary' : 'default'}
                secondary={forms.type === item.value ? false : true}
                round
                size="small"
                focusable={false}
                onClick={() => {
                  forms.type = item.value;
                  onSearch();
                }}>
                {item.label}
              </NButton>
            ))}
          </NSpace>

          <NButton
            type="primary"
            class={styles.addTrain}
            focusable={false}
            strong
            onClick={() => emit('add')}>
            <img src={iconAdd} />
            添加自定义教材
          </NButton>
        </div>
        <NForm labelAlign="left" labelPlacement="left">
          {forms.type === 'MUSIC' && (
            <NFormItem label="教材：">
              <NSpace class={styles.spaceSection}>
                {catchStore.getAllMusicCategories.map((music: any) => (
                  <NButton
                    secondary={forms.bookVersionId === music.id}
                    quaternary={forms.bookVersionId !== music.id}
                    strong
                    focusable={false}
                    type={
                      forms.bookVersionId === music.id ? 'primary' : 'default'
                    }
                    onClick={() => {
                      forms.bookVersionId = music.id;
                      onSearch();
                    }}>
                    {music.name}
                  </NButton>
                ))}
              </NSpace>
            </NFormItem>
          )}

          <NFormItem label="乐器：">
            <NSpace class={styles.spaceSection}>
              {catchStore.getSubjectAllList.map((subject: any) => (
                <NButton
                  secondary={forms.subjectId === subject.id}
                  quaternary={forms.subjectId !== subject.id}
                  strong
                  focusable={false}
                  type={forms.subjectId === subject.id ? 'primary' : 'default'}
                  onClick={() => {
                    forms.subjectId = subject.id;
                    onSearch();
                  }}>
                  {subject.name}
                </NButton>
              ))}
            </NSpace>
          </NFormItem>

          <TheSearch
            class={styles.inputSearch}
            round
            onSearch={(val: string) => {
              forms.keyword = val;
              onSearch();
            }}
          />
        </NForm>
      </div>
    );
  }
});