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

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

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

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

    const selectChildObj = (item: any) => {
      const obj: any = {};
      item?.forEach((child: any) => {
        if (child.id === forms.subjectId) {
          obj.selected = true;
          obj.name = child.name;
        }
      });
      return obj;
    };
    onMounted(async () => {
      resourceTypeArray.forEach((item: any) => {
        resourceType.value.push(item);
      });

      // 获取教材分类列表
      await catchStore.getMusicSheetCategory();
      // 获取声部
      await catchStore.getSubjects();
      catchStore.getSubjectInstruments.forEach((item: any) => {
        if (item.id == props.subjectId) {
          if (item.instruments.length > 0) {
            forms.subjectId = item.instruments[0].value;
          } else {
            forms.subjectId = item.value;
          }
        }
      });
    });
    return () => (
      <div class={styles.searchGroup}>
        <NForm labelAlign="left" labelPlacement="left">
          <NFormItem label="乐器：">
            <NSpace
              class={[
                styles.spaceSection,
                styles.spaceSection2,
                'spaceSectionBox'
              ]}>
              {catchStore.getSubjectInstruments.map((subject: any) =>
                subject.instruments && subject.instruments.length > 1 ? (
                  <NPopselect
                    options={subject.instruments}
                    trigger="hover"
                    scrollable
                    v-model:value={forms.subjectId}
                    onUpdate:value={() => {
                      onSearch();
                    }}
                    key={subject.value}
                    class={[styles.popSelect]}>
                    <span
                      class={[
                        styles.textBtn,
                        selectChildObj(subject.instruments).selected &&
                          styles.textBtnActive
                      ]}>
                      {selectChildObj(subject.instruments).name || subject.name}
                      <i class={styles.iconArrow}></i>
                    </span>
                  </NPopselect>
                ) : (
                  <span
                    class={[
                      styles.textBtn,
                      forms.subjectId === subject.value && styles.textBtnActive
                    ]}
                    onClick={() => {
                      forms.subjectId = subject.value;
                      onSearch();
                    }}>
                    {subject.name}
                  </span>
                )
              )}
            </NSpace>
          </NFormItem>

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