import { NButton, NSpace, NTabPane, NTabs } from 'naive-ui';
import { defineComponent, nextTick, reactive } from 'vue';
import styles from './index.module.less';
import { useRoute, useRouter } from 'vue-router';
import List from './components/list';
import { api_knowledgeWikiCategoryType_page } from '/src/views/content-information/api';
import TheEmpty from '/src/components/TheEmpty';
import { PageEnum } from '/src/enums/pageEnum';

export default defineComponent({
  name: 'content-instrument',
  emits: ['confirm', 'close'],
  setup(props, { emit }) {
    const state = reactive({
      tabValue: '',
      categoryList: [] as any,
      loading: false,
      selectItems: [] as any
    });

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

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

    getCategoryList();

    // 添加
    const onSubmit = async () => {
      const tempList: any = [];
      state.selectItems.forEach((item: any) => {
        tempList.push({
          coverImg: PageEnum.MUSICIAN_DEFAULT_COVER,
          title: '音乐家-' + item.name,
          materialId: item.id,
          content: item.id
        });
      });
      emit('confirm', tempList);
    };
    return () => (
      <div class={styles.container}>
        <div class={styles.wrap}>
          <div
            class={[
              styles.listWrap,
              !state.loading &&
                state.categoryList.length <= 0 &&
                styles.listWrapEmpty
            ]}>
            {!state.loading && state.categoryList.length <= 0 && (
              <TheEmpty description="暂无音乐家" />
            )}
            <div style={{ minHeight: '55vh' }}>
              <NTabs
                defaultValue="myResources"
                paneClass={styles.paneTitle}
                justifyContent="center"
                // animated
                paneWrapperClass={styles.paneWrapperContainer}
                onUpdate:value={(val: any) => {
                  sessionStorage.setItem('content-instrument-tab', val);
                }}
                v-model:value={state.tabValue}>
                {state.categoryList.map((category: any) => (
                  <NTabPane name={`name-${category.id}`} tab={category.name}>
                    <List
                      selectItems={state.selectItems}
                      categoryId={category.id}
                      categoryChildList={category.childrenList}
                      onConfirm={(ids: any) => {
                        state.selectItems = ids || [];
                      }}
                    />
                  </NTabPane>
                ))}
              </NTabs>
            </div>
          </div>
        </div>

        <NSpace class={styles.btnGroup} justify="center">
          <NButton round onClick={() => emit('close')}>
            取消
          </NButton>
          <NButton round type="primary" onClick={onSubmit} disabled={!state.selectItems.length}>
            确认添加
          </NButton>
        </NSpace>
      </div>
    );
  }
});