import { PropType, defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import SearchGroupResources from './search-group-resources';
import { NButton, NImage, NSpin } from 'naive-ui';
import TheEmpty from '/src/components/TheEmpty';
import Pagination from '/src/components/pagination';
import musicBg from '../../../../xiaoku-music/images/icon_default.png';
import { api_knowledgeWiki_page } from '../../../api';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'music-list',
  props: {
    categoryId: {
      type: String,
      default: ''
    },
    categoryChildList: {
      type: Array as PropType<any>,
      default: () => []
    }
  },
  setup(props) {
    // 保存数据
    const operationCatch = (
      type: 'get' | 'set' = 'get',
      value: string = ''
    ): any => {
      const sessionName = 'content-music-catch';
      if (type === 'get') {
        const result = sessionStorage.getItem(sessionName);
        return result ? JSON.parse(result) : null;
      } else if (type === 'set') {
        sessionStorage.setItem(sessionName, value);
      }
    };
    const router = useRouter();
    const catchData = operationCatch('get');
    const state = reactive({
      searchWord: '',
      loading: false,
      pageTotal: 0,
      pagination:
        catchData && catchData.pagination
          ? catchData.pagination
          : {
              page: 1,
              rows: 18
            },
      searchGroup:
        catchData && catchData.searchGroup
          ? catchData.searchGroup
          : {
              type: 'MUSIC', //
              keyword: '',
              wikiCategoryId: props.categoryId
            },
      tableList: [] as any,
      teachingStatus: false,
      show: false,
      item: {} as any
    });

    const getList = async () => {
      state.loading = true;
      // 缓存
      operationCatch('set', JSON.stringify({
        pagination: state.pagination,
        searchGroup: state.searchGroup
      }))
      try {
        const { data } = await api_knowledgeWiki_page({
          ...state.pagination,
          ...state.searchGroup
        });
        state.tableList = data.rows || [];
        state.pageTotal = Number(data.total);
      } catch {
        //
      }
      state.loading = false;
    };

    const onSearch = async (item: any) => {
      state.pagination.page = 1;
      const { wikiCategoryIdChild, wikiCategoryId, keyword } = item;
      state.searchGroup = Object.assign(state.searchGroup, {
        wikiCategoryId: wikiCategoryIdChild || wikiCategoryId,
        keyword
      });
      getList();
    };

    onMounted(() => {
      getList();
    });

    return () => (
      <div class={styles.instrumentList}>
        <SearchGroupResources
          categoryChildList={props.categoryChildList || []}
          wikiCategoryId={state.searchGroup.wikiCategoryId}
          defaultWikiCategoryId={props.categoryId}
          searchValue={state.searchGroup.keyword}
          onUpdate:searchValue={(val: string) => {
            state.searchGroup.keyword = val
          }}
          onSearch={(item: any) => onSearch(item)}
        />

        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
          <div class={styles.list}>
            {state.tableList.map((item: any) => (
              <div
                class={styles.itemWrap}
                onClick={() => {
                  router.push({
                    path: '/content-music-detail',
                    query: {
                      id: item.id,
                      name: item.name
                    }
                  });
                }}>
                <div class={styles.itemWrapBox}>
                  <div class={styles.itemCard}>
                    <div class={styles.itemName}>
                      <img
                        src={item.avatar || musicBg}
                        class={styles.musicBg}
                      />

                      <span class={styles.name}>{item.name}</span>
                    </div>

                    <NButton class={styles.btn} round type={'primary'}>
                      播放<i class={styles.iconArrow}></i>
                    </NButton>
                  </div>
                </div>
              </div>
            ))}

            {!state.loading && state.tableList.length <= 0 && (
              <TheEmpty
                style={{ minHeight: '50vh' }}
                description="暂无名曲鉴赏"
              />
            )}
          </div>
        </NSpin>
        <Pagination
          v-model:page={state.pagination.page}
          v-model:pageSize={state.pagination.rows}
          v-model:pageTotal={state.pageTotal}
          pageSizes={[18, 24, 30, 36]}
          onList={getList}
        />
      </div>
    );
  }
});
