import {
  NBreadcrumb,
  NBreadcrumbItem,
  NSpace,
  NTabPane,
  NTabs
} from 'naive-ui';
import { defineComponent, nextTick, reactive } from 'vue';
import styles from './index.module.less';
import icon_back from '../../xiaoku-music/images/icon_back.png';
import { useRouter } from 'vue-router';
import List from './components/list';
import { api_knowledgeWikiCategoryType_page } from '../api';
import TheEmpty from '/src/components/TheEmpty';

// 164px 244px
export default defineComponent({
  name: 'content-music',
  setup() {
    const tabValue = sessionStorage.getItem('content-music-tab');
    const router = useRouter();
    const state = reactive({
      tabValue: '',
      categoryList: [] as any,
      loading: false
    });

    const getCategoryList = async () => {
      state.loading = true;
      try {
        const { data } = await api_knowledgeWikiCategoryType_page({
          type: 'MUSIC',
          page: 1,
          rows: 99
        });

        state.categoryList = data.rows || [];
        if (state.categoryList.length) {
          nextTick(() => {
            state.tabValue = tabValue || 'name-' + state.categoryList[0].id;
          });
        }
      } catch {
        //
      }
      state.loading = false;
    };

    getCategoryList();
    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({ path: '/' })}
          />
          <NBreadcrumb separator="">
            <NBreadcrumbItem>名曲鉴赏</NBreadcrumbItem>
          </NBreadcrumb>
        </NSpace>

        <div class={styles.wrap}>
          <div
            class={[
              styles.listWrap,
              !state.loading &&
                state.categoryList.length <= 0 &&
                styles.listWrapEmpty
            ]}>
            {!state.loading && state.categoryList.length <= 0 && (
              <TheEmpty description="暂无名曲鉴赏" />
            )}
            <NTabs
              defaultValue="myResources"
              paneClass={styles.paneTitle}
              justifyContent="center"
              paneWrapperClass={styles.paneWrapperContainer}
              v-model:value={state.tabValue}
              onUpdate:value={(val: any) => {
                console.log(val, 'val');
                sessionStorage.setItem('content-music-tab', val);
              }}>
              {state.categoryList.map((category: any) => (
                <NTabPane
                  name={`name-${category.id}`}
                  tab={category.name}
                  // displayDirective="show:lazy"
                >
                  <List
                    categoryId={category.id}
                    categoryChildList={category.childrenList}
                  />
                </NTabPane>
              ))}
            </NTabs>
          </div>
        </div>
      </div>
    );
  }
});