import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import { NTabs, NTabPane, NModal } from 'naive-ui';
import SelectMusicModal from '../../model/select-music';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import SelectResources from '../../model/select-resources';
import SelectMusic from './components/select-music';
import ResourceItem from './components/resource-item';
import TrainUpdate from '/src/views/attend-class/model/train-update';
import requestOrigin from 'umi-request';

export default defineComponent({
  name: 'resource-main',
  setup() {
    const prepareStore = usePrepareStore();
    const forms = reactive({
      tabType: 'shareResources',
      selectMusicStatus: false,
      selectResourceStatus: false,
      editStatus: false,
      editItem: {} as any
    });

    const onAdd = async (item: any) => {
      let xmlStatus = 'init';
      // 第一个声部小节
      let firstMeasures: any = null;
      try {
        // 获取文件
        const res = await requestOrigin.get(item.xmlFileUrl, {
          mode: 'cors'
        });
        const xmlParse = new DOMParser().parseFromString(res, 'text/xml');
        const parts = xmlParse.getElementsByTagName('part');
        firstMeasures = parts[0]?.getElementsByTagName('measure');
        xmlStatus = 'success';
      } catch (error) {
        xmlStatus = 'error';
      }

      // 判断读取小节数
      if (xmlStatus == 'success') {
        item.practiceChapterMax = firstMeasures.length;
      } else {
        item.practiceChapterMax = 0;
      }
      item.coursewareKnowledgeDetailId = prepareStore.getSelectKey;
      item.subjectId = prepareStore.getSubjectId;

      forms.editItem = item;
      forms.editStatus = true;
    };

    return () => (
      <div
        class={[
          styles['resource-main'],
          forms.selectMusicStatus || forms.selectResourceStatus
            ? styles.resourceClose
            : ''
        ]}>
        {prepareStore.getTabType === 'courseware' ? (
          <NTabs
            animated
            value={forms.tabType}
            paneClass={styles.paneTitle}
            paneWrapperClass={styles.paneWrapperContainer}
            onUpdate:value={(val: string) => {
              forms.tabType = val;
            }}>
            {{
              suffix: () => (
                <div
                  class={styles.iconScreen}
                  onClick={() => {
                    forms.selectResourceStatus = true;
                    prepareStore.setSelectResourceStatus(true);
                  }}>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <g fill="none">
                      <path
                        d="M5 6a1 1 0 0 1 1-1h2a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v2a1 1 0 0 0 2 0V6zm0 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2zM18 5a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2zm1 13a1 1 0 0 1-1 1h-2a1 1 0 1 0 0 2h2a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2z"
                        fill="#198CFE"></path>
                    </g>
                  </svg>
                </div>
              ),
              default: () => (
                <>
                  <NTabPane
                    name="shareResources"
                    tab="共享资源"
                    displayDirective="show:lazy">
                    <ResourceItem type="shareResources" />
                  </NTabPane>
                  <NTabPane
                    name="myResources"
                    tab="我的资源"
                    displayDirective="show:lazy">
                    <ResourceItem type="myResources" />
                  </NTabPane>
                  <NTabPane
                    name="myCollect"
                    tab="我的收藏"
                    displayDirective="show:lazy">
                    <ResourceItem type="myCollect" />
                  </NTabPane>
                </>
              )
            }}
          </NTabs>
        ) : (
          <NTabs
            animated
            value="selectMusic"
            paneClass={styles.paneTitle}
            justifyContent="center"
            paneWrapperClass={styles.paneWrapperContainer}>
            {{
              suffix: () => (
                <div
                  class={styles.iconScreen}
                  onClick={() => {
                    forms.selectMusicStatus = true;
                    prepareStore.setSelectMusicStatus(true);
                  }}>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <g fill="none">
                      <path
                        d="M5 6a1 1 0 0 1 1-1h2a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v2a1 1 0 0 0 2 0V6zm0 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2zM18 5a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2zm1 13a1 1 0 0 1-1 1h-2a1 1 0 1 0 0 2h2a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2z"
                        fill="#198CFE"></path>
                    </g>
                  </svg>
                </div>
              ),
              default: () => (
                <NTabPane name="selectMusic" tab="选择曲目">
                  <SelectMusic />
                </NTabPane>
              )
            }}
          </NTabs>
        )}
        <NModal
          v-model:show={forms.selectResourceStatus}
          onUpdate:show={(val: any) => {
            if (!val) {
              prepareStore.setSelectResourceStatus(val);
            }
          }}
          class={['modalTitle', styles.selectMusicModal]}
          preset="card"
          title={'选择资源'}>
          <SelectResources />
        </NModal>

        <NModal
          v-model:show={forms.selectMusicStatus}
          onUpdate:show={(val: any) => {
            if (!val) {
              prepareStore.setSelectMusicStatus(val);
            }
          }}
          class={['modalTitle', styles.selectMusicModal]}
          preset="card"
          title={'选择曲目'}>
          <SelectMusicModal onAdd={(item: any) => onAdd(item)} />
        </NModal>
        <NModal
          v-model:show={forms.editStatus}
          class={['modalTitle background', styles.trainEditModal]}
          preset="card"
          title="训练设置">
          <TrainUpdate
            item={forms.editItem}
            onClose={() => (forms.editStatus = false)}
            onConfirm={() => {
              forms.editItem = {};
              prepareStore.setIsAddTrain(true);
            }}
          />
        </NModal>
      </div>
    );
  }
});