import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import { NIcon, NSpin, NScrollbar, NModal } from 'naive-ui';
import {
  lessonCoursewareDetail,
  lessonCoursewarePage,
  tagUseCourseware
} from '../../api';
import SelectLessonware from './select-lessonware';
import TheEmpty from '/src/components/TheEmpty';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import { useUserStore } from '/src/store/modules/users';
import { useRoute } from 'vue-router';
import { eventGlobal } from '/src/utils';

export default defineComponent({
  name: 'directory-main',
  setup() {
    const route = useRoute();
    const prepareStore = usePrepareStore();
    const userStore = useUserStore();
    const show = ref(true);
    const forms = reactive({
      lastUseCoursewareId: route.query.lastUseCoursewareId
        ? route.query.lastUseCoursewareId + ''
        : null, // 专辑编号
      unit: route.query.unit ? route.query.unit + '' : null, // 声部
      showSelectBookStatus: false,
      coursewareStatus: false
    });

    // console.log(forms.lastUseCoursewareId, 'route.query.lastUseCoursewareId');
    const getLessonCourseware = async () => {
      try {
        const { data } = await lessonCoursewarePage({
          page: 1,
          rows: 99,
          type: 'COURSEWARE',
          enableFlag: 1
        });
        const result = data.rows || [];
        if (result.length > 0) {
          // 判断是否有默认数据
          const selectItem = result.find(
            (item: any) =>
              item.id ===
              (forms.lastUseCoursewareId ||
                userStore.getUserInfo?.lastUseCoursewareId)
          );
          let id: any = null;
          if (selectItem) {
            prepareStore.setBaseCourseware(selectItem);
            id = selectItem.id;

            prepareStore.setSubjectList(selectItem.subjectList || []);
          } else {
            prepareStore.setBaseCourseware(result[0]);
            id = result[0]?.id;

            prepareStore.setSubjectList(result[0].subjectList || []);
          }
          setLastUseCoursewareId(id);
        }

        forms.showSelectBookStatus = true;
      } catch {
        //
      }
    };

    const getLessonCoursewareDetail = async () => {
      try {
        const baseCourseware: any = prepareStore.getBaseCourseware;
        if (!baseCourseware.id) return;
        const { data } = await lessonCoursewareDetail({
          id: baseCourseware.id
        });
        const tempList: any = data.lessonList || [];
        const defaultUnitIds = formatParentId(forms.unit, tempList);
        tempList.forEach((item: any, index: number) => {
          item.selected = false;
          // 处理从备课页面带过来的参数
          if (defaultUnitIds.length > 1) {
            if (item.id === defaultUnitIds[0]) {
              item.selected = true;
              item.knowledgeList.forEach((know: any) => {
                if (know.id === defaultUnitIds[1]) {
                  prepareStore.setSelectKey(know?.id);
                  prepareStore.setLessonCoursewareId(know?.lessonCoursewareId);
                  prepareStore.setLessonCoursewareDetailId(
                    know?.lessonCoursewareDetailId
                  );
                }
              });
            }
          } else {
            if (index === 0) {
              item.selected = true;
              const temp = item['knowledgeList'][0];
              prepareStore.setSelectKey(temp?.id);
              prepareStore.setLessonCoursewareId(temp?.lessonCoursewareId);
              prepareStore.setLessonCoursewareDetailId(
                temp?.lessonCoursewareDetailId
              );
            }
          }
        });
        prepareStore.setTreeList(tempList);
      } catch {
        //
      }
    };

    const formatParentId = (id: any, list: any, ids = [] as any) => {
      for (const item of list) {
        if (item.knowledgeList && item.knowledgeList.length > 0) {
          const cIds: any = formatParentId(id, item.knowledgeList, [
            ...ids,
            item.id
          ]);
          if (cIds.includes(id)) {
            return cIds;
          }
        }
        if (item.id === id) {
          return [...ids, id];
        }
      }
      return ids;
    };

    const setLastUseCoursewareId = async (id: any) => {
      try {
        await tagUseCourseware({ coursewareId: id });
        userStore.getInfo();
      } catch {
        //
      }
    };

    const onChangeClass = async (item: any) => {
      show.value = true;
      forms.lastUseCoursewareId = item.lastUseCoursewareId;
      forms.unit = item.unit;
      await getLessonCourseware();
      await getLessonCoursewareDetail();
      show.value = false;
    };

    onMounted(async () => {
      show.value = true;
      await getLessonCourseware();
      await getLessonCoursewareDetail();
      show.value = false;

      // 切换班级时触发
      eventGlobal.on('onChangeClass', async (item: any) => {
        onChangeClass(item);
      });
    });
    return () => (
      <div class={styles.directoryList}>
        {forms.showSelectBookStatus && (
          <div
            id="lessons-0"
            class={styles['select-directory']}
            onClick={() => (forms.coursewareStatus = true)}>
            <span
              class={['cr-ellipsis']}
              title={prepareStore.getBaseCourseware.name}>
              {prepareStore.getBaseCourseware.name || '请选择教材'}
            </span>
            <NIcon class={styles.iconArrow}>
              <svg
                width="11px"
                height="15px"
                viewBox="0 0 11 15"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg">
                <g
                  stroke="none"
                  stroke-width="1"
                  fill="none"
                  fill-rule="evenodd"
                  opacity="0.699999988">
                  <g
                    transform="translate(-445.000000, -137.000000)"
                    fill="#131415">
                    <g transform="translate(152.000000, 120.000000)">
                      <path
                        d="M299.326227,20.2118001 L304.934089,28.4366632 C305.245211,28.8929759 305.127511,29.515105 304.671198,29.8262273 C304.505147,29.9394437 304.308836,30 304.107861,30 L292.892139,30 C292.339854,30 291.892139,29.5522847 291.892139,29 C291.892139,28.7990254 291.952695,28.6027139 292.065911,28.4366632 L297.673773,20.2118001 C297.984895,19.7554873 298.607024,19.6377872 299.063337,19.9489096 C299.16663,20.0193364 299.255801,20.1085074 299.326227,20.2118001 Z"
                        id="三角形"
                        transform="translate(298.500000, 24.500000) rotate(-270.000000) translate(-298.500000, -24.500000) "></path>
                    </g>
                  </g>
                </g>
              </svg>
            </NIcon>
          </div>
        )}

        <NScrollbar class={styles.scrollBar}>
          <NSpin show={show.value}>
            <div
              class={[
                styles.listSection,
                !show.value && prepareStore.getTreeList.length <= 0
                  ? styles.emptySection
                  : ''
              ]}>
              {prepareStore.getTreeList.map((item: any, index: number) => (
                <div class={styles.treeParent} key={'parent' + index}>
                  <div
                    class={[styles.treeItem, styles.parentItem]}
                    onClick={() => {
                      prepareStore.getTreeList.forEach((child: any) => {
                        if (item.id !== child.id) {
                          child.selected = false;
                        }
                      });
                      item.selected = item.selected ? false : true;
                    }}>
                    {item.knowledgeList && item.knowledgeList.length > 0 && (
                      <span
                        class={[
                          styles.arrow,
                          item.selected ? styles.arrowSelect : ''
                        ]}></span>
                    )}
                    <p
                      class={[
                        styles.title,
                        item.selected ? styles.titleSelect : ''
                      ]}>
                      <span
                        class={[
                          styles.dir,
                          item.selected ? styles.dirSelect : ''
                        ]}></span>
                      {item.name}
                    </p>
                  </div>

                  {item.selected &&
                    item.knowledgeList &&
                    item.knowledgeList.map((child: any, j: number) => (
                      <div
                        key={'child' + j}
                        class={[
                          styles.treeItem,
                          styles.childItem,
                          styles.animation,
                          prepareStore.getSelectKey === child.id
                            ? styles.childSelect
                            : ''
                        ]}
                        onClick={() => {
                          prepareStore.setSelectKey(child.id);
                          prepareStore.setLessonCoursewareId(
                            child.lessonCoursewareId
                          );
                          prepareStore.setLessonCoursewareDetailId(
                            child.lessonCoursewareDetailId
                          );
                        }}>
                        <span class={styles.childArrow}></span>
                        <p class={styles.title}>{child.name}</p>
                      </div>
                    ))}
                </div>
              ))}
            </div>
            {!show.value && prepareStore.getTreeList.length <= 0 && (
              <TheEmpty />
            )}
          </NSpin>
        </NScrollbar>

        {/* 选择教材 */}
        <NModal
          v-model:show={forms.coursewareStatus}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.coursewareModal]}
          title={'选择教材'}
          blockScroll={false}>
          <SelectLessonware
            onClose={() => (forms.coursewareStatus = false)}
            onConfirm={(item: any) => {
              prepareStore.setBaseCourseware(item);
              prepareStore.setSubjectList(item.subjectList);
              const index = item.subjectList.findIndex(
                (subject: any) => subject.id == prepareStore.getSubjectId
              );
              // 判断教材里面是否有当前选择的声部，如果没有则默认选择第一个
              if (index < 0) {
                const subjectId = item.subjectList[0].id
                  ? Number(item.subjectList[0].id)
                  : '';
                prepareStore.setSubjectId(subjectId);
              }

              getLessonCoursewareDetail();
              setLastUseCoursewareId(item.id);
            }}
          />
        </NModal>
      </div>
    );
  }
});
