import { defineComponent, onMounted, reactive } from 'vue';
import { NImage, NScrollbar } from 'naive-ui';
import styles from './index.module.less';
import logo from './images/logo.png';
import classIcon from './images/classIcon.png';
import classNormal from './images/classNormal.png';
import indexIcon from './images/indexIcon.png';
import indexNormal from './images/indexNormal.png';
import kuIcon from './images/kuIcon.png';
import kuNormal from './images/kuNormal.png';
import palyIcon from './images/palyIcon.png';
import palyNormal from './images/palyNormal.png';
import resourceIcon from './images/resourceIcon.png';
import resourceNormal from './images/resourceNormal.png';
// import setIcon from './images/setIcon.png';
// import setNormal from './images/setNormal.png';
import studentIcon from './images/studentIcon.png';
import studentNormal from './images/studentNormal.png';
import dataIcon from './images/dataIcon.png';
import dataNormal from './images/dataNormal.png';
import SilderItem from './modals/silderItem';
import icon_1_1 from './images/icon_1_1.png';
import icon_1_2 from './images/icon_1_2.png';
import iconHomeWork from './images/icon-homework.png';
import iconHomeWorkActive from './images/icon-homework-active.png';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import { eventGlobal } from '/src/utils';
export default defineComponent({
  name: 'layoutSilder',
  setup() {
    const prepareStore = usePrepareStore();
    const router = useRouter();
    const route = useRoute();
    const itemInfoList = reactive([
      {
        activeIcon: indexIcon,
        name: '主页',
        normalIcon: indexNormal,
        isActive: true,
        id: 1,
        path: '/',
        lightList: [
          '/content-instruments',
          '/content-instruments-detail',
          '/content-musician',
          '/content-music',
          '/content-music-detail',
          '/content-knowledge'
        ]
      },
      {
        activeIcon: classIcon,
        name: '班级',
        normalIcon: classNormal,
        isActive: false,
        id: 3,
        path: '/classList',
        lightList: [
          '/classDetail',
          '/classStudentRecode',
          '/afterWorkDetail',
          '/classStudentDetail'
        ]
      },
      {
        activeIcon: studentIcon,
        name: '学生',
        normalIcon: studentNormal,
        isActive: false,
        id: 2,
        path: '/studentList',
        lightList: ['/studentDetail'] //小酷AI的灯光列表
      },

      {
        activeIcon: palyIcon,
        name: '备课',
        normalIcon: palyNormal,
        isActive: false,
        id: 4,
        path: '/prepare-lessons'
      },
      {
        activeIcon: iconHomeWorkActive,
        name: '作业',
        normalIcon: iconHomeWork,
        isActive: false,
        id: 9,
        path: '/homework-record',
        lightList: ['/homework-record-detail']
      },
      {
        activeIcon: icon_1_1,
        name: '制谱',
        normalIcon: icon_1_2,
        isActive: false,
        id: 8,
        path: '/notation'
      },
      {
        activeIcon: kuIcon,
        name: 'AI学练',
        normalIcon: kuNormal,
        isActive: false,
        id: 5,
        lightList: ['/xiaoku-detail'], //AI学练的灯光列表
        path: '/xiaoku-list'
      },
      {
        activeIcon: resourceIcon,
        name: '资源',
        normalIcon: resourceNormal,
        isActive: false,
        id: 6,
        path: '/natural-resources'
      },
      {
        activeIcon: dataIcon,
        name: '数据',
        normalIcon: dataNormal,
        isActive: false,
        id: 7,
        path: '/data-module'
      }

      // {
      //   activeIcon: setIcon,
      //   name: '设置',
      //   normalIcon: setNormal,
      //   isActive: false,
      //   id: 8,
      //   path: '/setting'
      // }
    ]);
    const checkNavBar = (item: any) => {
      itemInfoList.forEach((now: any) => {
        now.isActive = false;
        if (now.id == item.id) {
          now.isActive = true;
          if (item.path === route.path) return;
          item.path && router.push(item.path);
        }
      });
    };

    onBeforeRouteUpdate((to: any) => {
      checkPathChange(to.path);
    });

    const checkPathChange = (path: string) => {
      itemInfoList.forEach((now: any) => {
        now.isActive = false;
        if (now.path === path || now.lightList?.includes(path)) {
          now.isActive = true;
        }
      });
    };

    onMounted(() => {
      checkPathChange(route.path);
    });
    return () => (
      <div class={styles.silder}>
        <div class={styles.logoWrap}>
          <NImage
            class={styles.logo}
            src={logo}
            previewDisabled={true}></NImage>
        </div>
        <NScrollbar class={styles.sliderList}>
          {itemInfoList.map((item: any) => (
            <SilderItem
              onCheckNavBar={() => {
                // 检测是否有未保存数据
                if (prepareStore.getIsEditResource) {
                  eventGlobal.emit('pageBeforeLeave', () => checkNavBar(item));
                } else {
                  checkNavBar(item);
                }
              }}
              item={item}
            />
          ))}
        </NScrollbar>
      </div>
    );
  }
});
