import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import { NButton, NInput, NSelect } from 'naive-ui';
import { useCatchStore } from '/src/store/modules/catchData';
import { useThrottleFn } from '@vueuse/core';
import { api_chapterLessonCoursewareTag_queryAll } from '/src/views/prepare-lessons/api';

export default defineComponent({
  name: 'resource-search-group',
  emits: ['search'],
  setup(props, { emit }) {
    const catchStore = useCatchStore();
    const forms = reactive({
      keyword: '',
      chapterLessonCoursewareTagId: ''
    });
    const tagList = ref<any[]>([]);

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

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

    const getTagAll = async () => {
      const { data } = await api_chapterLessonCoursewareTag_queryAll();
      const result = data || [];

      tagList.value = [{ name: '全部', id: '' }, ...result];
    };

    getTagAll();
    // onMounted(async () => {});
    return () => (
      <>
        <div class={styles.searchGroup}>
          <NSelect
            placeholder="请选择课件标签"
            class={styles.searchSelect2}
            options={tagList.value}
            labelField="name"
            valueField="id"
            v-model:value={forms.chapterLessonCoursewareTagId}
            onUpdate:value={() => {
              throttledFn();
            }}
          />
          <NInput
            type="text"
            placeholder="请输入课件/作者名称"
            clearable={false}
            v-model:value={forms.keyword}
            class={styles.inputSearch}
            onKeyup={(e: KeyboardEvent) => {
              if (e.code === 'Enter') {
                throttledFn();
              }
            }}
            onClear={() => {
              forms.keyword = '';
              throttledFn();
            }}>
            {{
              prefix: () => (
                <span
                  class={'icon-search-input'}
                  onClick={() => throttledFn()}></span>
              )
            }}
          </NInput>
        </div>
      </>
    );
  }
});