import { defineComponent } from 'vue'
import { Image, Skeleton, Cell, Icon } 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'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
import IconXin from '@/common/images/icon-xin.png'
import IconXinActive from '@/common/images/icon-xin-active.png'

export default defineComponent({
  name: 'Songbook',
  setup() {
    const route = useRoute()
    const params: any = {}
    // 只有学生端才有version
    if (tempState.version) {
      params.version = tempState.version || '' // 处理ios审核版本
      params.platform =
        tempState.platformType === 'STUDENT' ? 'ios-student' : 'ios-teacher'
    }
    const apiSuffix =
      tempState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
    // if (tempState.platformType === 'TEACHER') {
    params.myself = false
    // }
    const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
    if (getSubject) {
      params.subjectIds = getSubject.id
    }
    const { isLoading, state } = useAsyncState(
      request.post(`${apiSuffix}/music/album/list`, {
        data: {
          ...params
        }
      }),
      null
    )
    const router = useRouter()
    return () => (
      <>
        {state.value && state.value.data.rows.length ? (
          <>
            <Cell
              class={styles.title}
              titleClass={styles.cellTitle}
              title="专辑"
              // is-link
              to="/music-album"
              v-slots={{
                value: () => (
                  <span class={styles.cellValue}>
                    更多
                    <Icon name="arrow" />
                  </span>
                )
              }}
              border={false}
            />
            <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}>
                    {item.paymentType === 'CHARGE' && (
                      <span class={styles.albumType}>付费</span>
                    )}
                    <Image class={styles.img} src={item.albumCoverUrl} />
                    {/* <p class={styles.favorite}>
                      <span>{item.albumFavoriteCount}</span>人收藏
                    </p> */}
                    <div class={styles.model}>
                      <Icon name={item.favorite ? IconXinActive : IconXin} />
                      <span class={styles.num}>
                        {item.albumFavoriteCount}人
                      </span>
                    </div>
                  </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>
        )} */}
      </>
    )
  }
})
