import { PropType, defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import { teacherChapterLessonCoursewareList } from '/src/views/prepare-lessons/api';
import { NCascader, NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
import CoursewareType from '/src/views/prepare-lessons/model/courseware-type';
import TheEmpty from '/src/components/TheEmpty';

export default defineComponent({
  name: 'select-class',
  props: {
    courseId: {
      type: String as PropType<'' | null>,
      default: ''
    },
    instrumentId: {
      type: String,
      default: ''
    },
    lessonCoursewareSubjectList: {
      type: Array,
      default: () => []
    },
    classId: {
      type: String,
      default: ''
    }
  },
  emits: ['confirm', 'close'],
  setup(props, { emit }) {
    const forms = reactive({
      loading: false,
      instrumentId: props.instrumentId ? Number(props.instrumentId) : '',
      tableList: [] as any
    });

    const getDetail = async () => {
      forms.loading = true;
      try {
        // 如果是上课则查询班级声部，预览查询全部
        // console.log(props.classId, props.instrumentId);
        const { data } = await teacherChapterLessonCoursewareList({
          coursewareDetailKnowledgeId: props.courseId,
          instrumentId: props.classId ? forms.instrumentId : null
        });

        if (!Array.isArray(data)) {
          return;
        }
        const tempList: any = [];
        data.forEach((item: any) => {
          const firstItem: any =
            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
          tempList.push({
            id: item.id,
            openFlag: item.openFlag,
            openFlagEnable: item.openFlagEnable,
            subjectNames: item.subjectNames,
            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
            name: item.name,
            coverImg: firstItem?.bizInfo.coverImg,
            type: firstItem?.bizInfo.type,
            updateTime: item.updateTime,
            coursewareType: item.coursewareType
          });
        });
        forms.tableList = tempList;
      } catch {
        //
      }
      forms.loading = false;
    };

    onMounted(() => {
      console.log(
        props.instrumentId,
        props.lessonCoursewareSubjectList,
        'props.lessonCoursewareSubjectList'
      );
      if (props.instrumentId) {
        const s = Number(props.instrumentId);
        let isE = false;
        props.lessonCoursewareSubjectList.forEach((item: any) => {
          if (item.id === s) {
            isE = true;
          }
        });
        if (!isE) {
          forms.instrumentId = '';
        }
      }
      getDetail();
    });
    return () => (
      <div class={styles.selectClass}>
        {props.classId && (
          <div class={styles.searchGroup}>
            <NSelect
              options={[
                { id: '', name: '全部乐器' },
                ...(props.lessonCoursewareSubjectList as any)
              ]}
              valueField="id"
              labelField="name"
              style={{ width: '220px' }}
              placeholder={'请选择乐器'}
              v-model:value={forms.instrumentId}
              onUpdate:value={() => {
                getDetail();
              }}
            />
            {/* <NCascader
              options={[
                { id: '', name: '全部声部' },
                ...(props.lessonCoursewareSubjectList as any)
              ]}
              valueField="id"
              labelField="name"
              style={{ width: '220px' }}
              placeholder={'请选择声部'}
              v-model:value={forms.instrumentId}
              onUpdate:value={() => {
                getDetail();
              }}
              checkStrategy="child"
              showPath
              childrenField="instruments"
              expandTrigger="hover"
              clearable
              filterable
            /> */}
          </div>
        )}

        <NSpin show={forms.loading}>
          <NScrollbar class={styles.selectClassScroll}>
            <div
              class={[
                styles.list,
                !forms.loading &&
                  forms.tableList.length <= 0 &&
                  styles.listEmpty
              ]}>
              {forms.tableList.map((item: any) => (
                <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
                  <div class={styles.itemWrapBox}>
                    <CoursewareType
                      isShowPreviewBtn
                      isShowOpenFlag={false}
                      item={item}
                      onClick={() => {
                        emit('confirm', {
                          itemActive: props.courseId,
                          chapterId: item.id
                        });
                      }}
                    />
                  </div>
                </div>
              ))}
              {!forms.loading && forms.tableList.length <= 0 && <TheEmpty />}
            </div>
          </NScrollbar>
        </NSpin>
      </div>
    );
  }
});