import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import {
  NBreadcrumb,
  NBreadcrumbItem,
  // NScrollbar,
  NSlider,
  NSpace,
  NSpin
} from 'naive-ui';
import icon_back from '../../xiaoku-music/images/icon_back.png';
// import icon_default from '../../xiaoku-music/images/icon_default.png';
// import icon_separator from '../../xiaoku-music/images/icon_separator.png';
import iconT from '../images/icon-t.png';
import iconAddT from '../images/icon-add-t.png';
import iconPlusT from '../images/icon-plus-t.png';
import {
  api_lessonCoursewareDetail_listKnowledge,
  api_lessonCoursewareKnowledgeDetail
} from '../api';
import TheEmpty from '/src/components/TheEmpty';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'cotnent-knowledge',
  setup() {
    const router = useRouter();
    const show = ref(false);
    const content = ref(false);
    const musicContentRef = ref();
    const state = reactive({
      fontSize: 18,
      tableList: [] as any,
      selectKey: null,
      details: {} as any
    });

    const getDetails = async () => {
      show.value = true;
      content.value = true;
      try {
        const { data } = await api_lessonCoursewareDetail_listKnowledge({
          type: 'COURSEWARE'
        });

        state.tableList = data || [];
        if (state.tableList.length) {
          const item =
            state.tableList[0].lessonCoursewareDetailKnowledgeDetailList;
          state.tableList[0].selected = true;
          if (item && item.length) {
            const child = item[0];
            state.selectKey = child.id;
            await getDetail();
          }
        }
      } catch {
        //
      }
      content.value = false;
      show.value = false;
    };

    const getDetail = async () => {
      content.value = true;
      try {
        const { data } = await api_lessonCoursewareKnowledgeDetail({
          id: state.selectKey
        });

        state.details = data;
      } catch {
        //
      }
      content.value = false;
    };

    onMounted(() => {
      getDetails();
    });
    return () => (
      <div class={styles.container}>
        <NSpace align="center" wrapItem={false} size={16}>
          <img
            style={{ cursor: 'pointer' }}
            src={icon_back}
            class={styles.iconBack}
            onClick={() => {
              //
              router.push('/');
            }}
          />
          <NBreadcrumb separator="">
            <NBreadcrumbItem
              onClick={() => {
                //
              }}>
              乐理知识
            </NBreadcrumbItem>
          </NBreadcrumb>
        </NSpace>
        <div class={[styles.wrap]}>
          <div class={styles.content}>
            <div class={styles.contentWrap}>
              <div class={styles.directoryList}>
                <div
                  class={[
                    styles.scrollBar,
                    !show.value && state.tableList.length <= 0
                      ? styles.empty
                      : ''
                  ]}
                  style={{ minHeight: '100%' }}>
                  <NSpin show={show.value}>
                    <div class={[styles.listSection]}>
                      {state.tableList.map((item: any, index: number) => (
                        <div class={styles.treeParent} key={'parent' + index}>
                          <div
                            class={[styles.treeItem, styles.parentItem]}
                            onClick={() => {
                              state.tableList.forEach((child: any) => {
                                if (item.id !== child.id) {
                                  child.selected = false;
                                }
                              });
                              item.selected = item.selected ? false : true;
                            }}>
                            {item.lessonCoursewareDetailKnowledgeDetailList &&
                              item.lessonCoursewareDetailKnowledgeDetailList
                                .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.lessonCoursewareDetailKnowledgeDetailList &&
                            item.lessonCoursewareDetailKnowledgeDetailList.map(
                              (child: any, j: number) => (
                                <div
                                  key={'child' + j}
                                  class={[
                                    styles.treeItem,
                                    styles.childItem,
                                    styles.animation,
                                    state.selectKey === child.id
                                      ? styles.childSelect
                                      : ''
                                  ]}
                                  onClick={() => {
                                    if (state.selectKey === child.id) return;
                                    state.selectKey = child.id;
                                    getDetail();
                                    musicContentRef.value.$el.scrollTo(0, 0);
                                  }}>
                                  <span class={styles.childArrow}></span>
                                  <p class={styles.title}>{child.name}</p>
                                </div>
                              )
                            )}
                        </div>
                      ))}
                    </div>
                  </NSpin>
                  {!show.value && state.tableList.length <= 0 && (
                    <TheEmpty style={{ height: '100%' }} />
                  )}
                </div>
              </div>

              <div class={styles.musicStaff}>
                <NSpin
                  show={content.value}
                  ref={musicContentRef}
                  class={
                    !content.value && !state.details?.desc ? styles.empty : ''
                  }>
                  {state.details?.desc ? (
                    <div
                      class={styles.musicContent}
                      v-html={state.details?.desc}
                      style={{ fontSize: state.fontSize + 'px' }}></div>
                  ) : (
                    ''
                  )}
                  {!content.value && !state.details?.desc && <TheEmpty />}
                </NSpin>
              </div>

              <div class={styles.changeSizeSection}>
                <img src={iconT} class={styles.iconT} />
                <img
                  src={iconAddT}
                  class={styles.iconAddT}
                  onClick={() => {
                    if (state.fontSize >= 32) return;
                    state.fontSize += 1;
                  }}
                />
                <NSlider
                  v-model:value={state.fontSize}
                  vertical
                  min={12}
                  max={32}
                />
                <img
                  src={iconPlusT}
                  class={styles.iconPlusT}
                  onClick={() => {
                    if (state.fontSize <= 12) return;
                    state.fontSize -= 1;
                  }}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
});