import { defineComponent } from 'vue'
import { Cell, Image } from 'vant'
import request from '@/helpers/request'
import { useAsyncState } from '@vueuse/core'
import Item from '../list/item'
import styles from './index.module.less'
import { musicBuy } from '../music'
import { useRoute, useRouter } from 'vue-router'
import ColResult from '@/components/col-result'
import { state as tempState } from '@/state'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'

export default defineComponent({
  name: 'Songbook',
  setup() {
    const router = useRouter()
    const params: any = {
      myself: false
    }
    // 学生端才会有version
    if (tempState.version) {
      params.version = tempState.version || '' // 处理ios审核版本
      params.platform =
        tempState.platformType === 'STUDENT' ? 'ios-student' : 'ios-teacher'
    }
    console.log('music-list')
    const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
    if (getSubject) {
      params.subjectIds = getSubject.id
    }

    const apiSuffix =
      tempState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
    const { isLoading, state } = useAsyncState(
      request.post(`${apiSuffix}/music/sheet/list`, {
        data: {
          ...params
        }
      }),
      null
    )

    return () =>
      state.value && state.value.data.rows.length ? (
        <>
          <Cell
            class={styles.title}
            title="曲谱"
            is-link
            to="/music-list"
            value="更多"
            border={false}
          />
          <div class={styles.listContainer}>
            {state.value.data.rows.map(item => (
              <Item
                data={item}
                onClick={(item: any) => {
                  musicBuy(item, (path: any) => {
                    router.push({
                      path,
                      query: {
                        orderType: 'MUSIC'
                      }
                    })
                  })
                }}
              />
            ))}
          </div>
        </>
      ) : (
        !isLoading.value && (
          <ColResult tips="暂无曲谱" classImgSize="SMALL" btnStatus={false} />
        )
      )
  }
})
