import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import { NButton, NInput, NSelect, NSpace } from 'naive-ui';
import { resourceTypeArray } from '/src/utils/searchArray';
import { useCatchStore } from '/src/store/modules/catchData';
import { useThrottleFn } from '@vueuse/core';

export default defineComponent({
  name: 'resource-search-group',
  emits: ['search'],
  props: {
    type: {
      type: String as PropType<'shareResources' | 'myResources' | 'myCollect'>,
      default: 'shareResources'
    }
  },
  setup(props, { emit }) {
    const catchStore = useCatchStore();
    const forms = reactive({
      type: 'MUSIC', //
      name: '',
      bookVersionId: null
    });
    const resourceType = ref([] as any);

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

    const debouncedRequest = useThrottleFn(() => onSearch(), 500);

    onMounted(async () => {
      // 获取教材分类列表
      await catchStore.getMusicSheetCategory();
      // if (props.type === 'myCollect') {
      //   resourceType.value.push({
      //     label: '全部',
      //     value: ''
      //   });
      //   forms.type = ''; // 默认全部
      // }
      resourceTypeArray.forEach((item: any) => {
        // if (props.type === 'myResources') {
        //   item.value !== 'MUSIC' && resourceType.value.push(item);
        // } else {
        resourceType.value.push(item);
        // }
      });
    });
    return () => (
      <>
        <div class={styles.searchGroup}>
          <NSpace size="small" class={styles.btnType}>
            {resourceType.value.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;
                  debouncedRequest();
                }}>
                {item.label}
              </NButton>
            ))}
          </NSpace>

          {forms.type === 'MUSIC' && props.type === 'shareResources' && (
            <div class={styles.searchSelect}>
              <NSelect
                placeholder="全部教材"
                options={[
                  { name: '全部教材', id: null },
                  ...catchStore.getMusicCategories
                ]}
                clearable
                labelField="name"
                valueField="id"
                v-model:value={forms.bookVersionId}
                onUpdate:value={() => {
                  onSearch();
                }}
              />
            </div>
          )}

          <NInput
            type="text"
            placeholder="请输入搜索关键词"
            clearable
            v-model:value={forms.name}
            class={styles.inputSearch}
            onKeyup={(e: KeyboardEvent) => {
              if (e.code === 'Enter') {
                debouncedRequest();
              }
            }}
            onClear={() => {
              forms.name = '';
              debouncedRequest();
            }}>
            {{
              prefix: () => (
                <span
                  class={'icon-search-input'}
                  onClick={() => debouncedRequest()}></span>
              )
            }}
          </NInput>
        </div>
      </>
    );
  }
});
