classroom-instruments/src/views/natural-resources/components/my-resources/search-group-resources.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import { NButton, NForm, NFormItem, NSpace } from 'naive-ui';
import iconUpload from '../../images/icon-upload.svg';
import iconEdit from '../../images/icon-edit.svg';
import iconSelectAll from '../../images/icon-selectall.svg';
import iconSelectAllDefault from '../../images/icon-selectall-default.svg';
import iconPen from '../../images/icon-pen.svg';
import iconDelete from '../../images/icon-delete.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', 'upload', 'edit', 'selectAll', 'delete', 'update'],
  setup(props, { emit }) {
    const resourceList = ref([] as any[]);
    const catchStore = useCatchStore();
    const forms = reactive({
      type: '', //
      keyword: '',
      bookVersionId: null,
      subjectId: null
    });
    const state = reactive({
      isEdit: false, // 是否编辑
      isSelectAll: false
    });

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

    onMounted(async () => {
      resourceList.value = [
        {
          label: '全部',
          value: ''
        },
        ...resourceTypeArray
      ];

      // 获取声部列表
      await catchStore.getSubjects();
    });
    return () => (
      <div class={styles.searchGroup}>
        <div class={styles.searchCatatory}>
          <NSpace size="small" class={styles.btnType}>
            {resourceList.value.map(
              (item: any) =>
                item.value !== 'MUSIC' && (
                  <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>

          <NSpace>
            {state.isEdit ? (
              <>
                <NButton
                  type="primary"
                  class={styles.addTrain}
                  focusable={false}
                  strong
                  onClick={() => {
                    state.isSelectAll = !state.isSelectAll;
                    emit('selectAll', state.isSelectAll);
                  }}>
                  <img
                    src={
                      state.isSelectAll ? iconSelectAll : iconSelectAllDefault
                    }
                    class={styles.iconSelectAll}
                  />
                  全选
                </NButton>
                <NButton
                  type="error"
                  class={[styles.addTrain, styles.error]}
                  focusable={false}
                  strong
                  onClick={() => emit('delete')}>
                  <img src={iconDelete} class={styles.iconDelete} />
                  删除
                </NButton>
                <NButton
                  type="primary"
                  class={styles.addTrain}
                  focusable={false}
                  strong
                  onClick={() => emit('update')}>
                  <img src={iconPen} class={styles.iconPen} />
                  修改
                </NButton>
                <NButton
                  type="primary"
                  class={styles.addTrain}
                  focusable={false}
                  strong
                  onClick={() => {
                    state.isEdit = false;
                    emit('edit', state.isEdit);
                  }}>
                  完成编辑
                </NButton>
              </>
            ) : (
              <>
                <NButton
                  type="primary"
                  class={styles.addTrain}
                  focusable={false}
                  {...{ id: 'myResources-0' }}
                  strong
                  onClick={() => emit('upload')}>
                  <img src={iconUpload} class={styles.iconUpload} />
                  上传资源
                </NButton>
                <NButton
                  type="primary"
                  class={styles.addTrain}
                  focusable={false}
                  strong
                  onClick={() => {
                    state.isEdit = true;
                    emit('edit', state.isEdit);
                  }}>
                  <img src={iconEdit} class={styles.iconEdit} />
                  编辑资源
                </NButton>
              </>
            )}
          </NSpace>
        </div>
        <NForm labelAlign="left" labelPlacement="left">
          <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>
    );
  }
});