import {
  PropType,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  ref,
  toRef,
  toRefs,
  watch
} from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NForm,
  NFormItem,
  NImage,
  NPopselect,
  NSpace
} from 'naive-ui';
import { resourceTypeArray2 } from '/src/utils/searchArray';
import { useCatchStore } from '/src/store/modules/catchData';
import { useThrottleFn } from '@vueuse/core';
import TheSearch from '/src/components/TheSearch';

export default defineComponent({
  name: 'resource-search-group',
  props: {
    type: {
      type: String as PropType<
        'relateResources' | 'shareResources' | 'myResources' | 'myCollect'
      >,
      default: 'shareResources'
    },
    subjectId: {
      type: String,
      default: null
    }
  },
  emits: ['search'],
  setup(props, { emit }) {
    const subjectId = toRef(props.subjectId);
    const catchStore = useCatchStore();
    const forms = reactive({
      type: 'IMG', //
      name: '',
      subjectId: subjectId.value as any
    });
    const state = reactive({
      tempSubjectId: null,
      gradeList: [] as any[],
      musicCategory: [] as any
    });
    const data = reactive({
      selectParents: {}, // 选中的数据
      tags: [] as any[],
      tagActiveId: '' as any,
      tagActive: {} as any,
      childSelectId: null as any
    });

    const resourceType = ref([] as any);

    const onSearch = (type?: string) => {
      emit(
        'search',
        {
          ...forms
        },
        type
      );
    };

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

    onMounted(async () => {
      resourceTypeArray2.forEach((item: any) => {
        resourceType.value.push(item);
      });

      if (props.type === 'shareResources') {
        onSearch('timer');
      }
    });
    return () => (
      <div class={styles.searchGroup}>
        <div class={styles.searchCatatory}>
          <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;
                  forms.subjectId = null;
                  data.tagActiveId = '';
                  data.childSelectId = null;
                  data.selectParents = {};
                  onSearch();
                }}>
                {item.label}
              </NButton>
            ))}
          </NSpace>

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