import { defineComponent } from 'vue'
import { Button, List } from 'vant'
import request from '@/helpers/request'
import MusicListItem from './item'
import { MusicType } from './item.d'
import styles from './index.module.less'

export type AuditStatus = 0 | 1 | 2

/** 曲谱列表 */
export default defineComponent({
  name: 'MusicList',
  props: {
    auditStatus: {
      type: Number as () => AuditStatus,
      default: 0
    }
  },
  data() {
    return {
      list: [] as MusicType[],
      loading: false,
      error: false,
      finished: false,
      page: 1
    }
  },
  methods: {
    async FetchList() {
      this.loading = true
      try {
        const res = await request.post('/api-web/music/sheet/list', {
          data: {
            auditStatus: this.auditStatus
          }
        })
        if (res.data.length) {
          this.list = this.list.concat(res.data)
        }
      } catch (error) {
        this.error = true
      }
      this.loading = false
    },
    /** 前往上传曲谱页 */
    toUpload() {
      this.$router.push({
        path: '/music-upload'
      })
    }
  },
  render() {
    return (
      <div class={styles['list-contaner']}>
        <Button onClick={this.toUpload}>上传曲谱</Button>
        <List
          loading={this.loading}
          error={this.error}
          finished={this.finished}
          onLoad={this.FetchList}
        >
          {this.list.map(item => (
            <MusicListItem data={item} />
          ))}
        </List>
      </div>
    )
  }
})
