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'

export default defineComponent({
  name: 'Songbook',
  setup() {
    const router = useRouter()
    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/sheet/list', {
        data: {
          ...params
        }
      }),
      null
    )

    return () =>
      state.value && state.value.data.rows.length ? (
        <>
          <Cell
            class={styles.title}
            title="曲谱"
            is-link
            to="/music-list"
            value="更多"
          />
          <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} />
        )
      )
  }
})
