import { defineComponent } from 'vue'
import { Image, Skeleton, Cell } from 'vant'
import request from '@/helpers/request'
import { useAsyncState } from '@vueuse/core'
import styles from './index.module.less'
import classNames from 'classnames'
import { useRoute, useRouter } from 'vue-router'
import { state as tempState } from '@/state'

export default defineComponent({
  name: 'Songbook',
  setup() {
    const route = useRoute()
    const params: any = {}
    if (tempState.version) {
      params.version = tempState.version || '' // 处理ios审核版本
      params.platform = 'ios-student'
    }
    const { isLoading, state } = useAsyncState(
      request.post('/api-student/music/album/list', {
        data: {
          ...params
        }
      }),
      null
    )
    const router = useRouter()
    return () => (
      <>
        {state.value && state.value.data.rows.length ? (
          <>
            <Cell
              class={styles.title}
              title="专辑"
              is-link
              to="/music-album"
              value="更多"
            />
            <div class={styles.albumContainer}>
              {state.value.data.rows.map(item => (
                <div
                  class={styles.album}
                  key={item.id}
                  onClick={() => router.push('/music-album-detail/' + item.id)}
                >
                  <div class={styles.main}>
                    <Image class={styles.img} src={item.albumCoverUrl} />
                    <p class={styles.favorite}>
                      <span>{item.albumFavoriteCount}</span>人收藏
                    </p>
                  </div>
                  <h4 class={classNames(styles.title, 'van-ellipsis')}>
                    {item.albumName}
                  </h4>
                </div>
              ))}
            </div>
          </>
        ) : null}
        {/* {isLoading.value && (
          <div style={{ display: 'flex' }}>
            {Array.from({ length: 4 }).map(() => (
              <Skeleton
                style={{ width: '96px', flexDirection: 'column' }}
                avatar
                avatar-shape="square"
                avatar-size="96px"
                title
                titleWidth="100%"
              />
            ))}
          </div>
        )} */}
      </>
    )
  }
})
