import ColResult from '@/components/col-result'
import ColSearch from '@/components/col-search'
import request from '@/helpers/request'
import { state } from '@/state'
import MusicGrid from '@/views/music/component/music-grid'
import Song from '@/views/music/component/song'
import { Cell, List, Sticky, Tab, Tabs } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'music-album',
  props: {
    offsetTop: {
      type: Number,
      default: 0
    },
    subjectId: {
      type: Number,
      required: true
    },
    onSelect: {
      type: Function,
      default: (item: any) => {}
    }
  },
  data() {
    return {
      tabVal: 'music',
      dataShow: true, // 判断是否有数据
      lockLoading: false,
      musicState: {
        loading: false,
        finished: false
      },
      musicList: [] as any,
      musicParams: {
        myself: false,
        auditStatus: 'PASS',
        page: 1,
        rows: 20,
        idAndName: '',
        subjectIds: this.subjectId
      },
      albumState: {
        loading: false,
        finished: false
      },
      albumList: [] as any,
      albumParams: {
        page: 1,
        rows: 20,
        idAndName: '',
        subjectIds: this.subjectId
      }
    }
  },
  async mounted() {
    await this.getMusicList()
  },
  methods: {
    onSearch(value: string) {
      this.musicParams.idAndName = value
      this.albumParams.idAndName = value
      if (this.tabVal === 'music') {
        this.musicParams.page = 1
        this.musicList = []
        this.getMusicList()
      } else if (this.tabVal === 'album') {
        this.albumParams.page = 1
        this.albumList = []
        this.getAlbumList()
      }
    },
    async getMusicList() {
      try {
        if (this.lockLoading) return
        this.lockLoading = true
        this.dataShow = true
        const res = await request.post(
          `${state.platformApi}/music/sheet/list`,
          {
            data: {
              ...this.musicParams
            }
          }
        )
        this.lockLoading = false
        this.musicState.loading = false
        const result = res.data || {}
        this.musicList = this.musicList.concat(result.rows || [])
        this.musicState.finished = result.pageNo >= result.totalPage
        this.musicParams.page = result.pageNo + 1
        this.dataShow = this.musicList.length > 0
      } catch {
        this.dataShow = false
        this.musicState.finished = true
        this.lockLoading = false
      }
    },
    async getAlbumList() {
      try {
        if (this.lockLoading) return
        this.lockLoading = true
        this.dataShow = true
        const res = await request.post(
          `${state.platformApi}/music/album/list`,
          {
            data: {
              ...this.albumParams
            }
          }
        )
        this.lockLoading = false
        this.albumState.loading = false
        const result = res.data || {}
        this.albumList = this.albumList.concat(result.rows || [])
        this.albumState.finished = result.pageNo >= result.totalPage
        this.albumParams.page = result.pageNo + 1
        this.dataShow = this.albumList.length > 0
      } catch {
        this.dataShow = false
        this.albumState.finished = true
        this.lockLoading = false
      }
    }
  },
  render() {
    return (
      <div class={styles.musicAlbum}>
        <Sticky position="top" offsetTop={this.offsetTop || 0}>
          <ColSearch
            onSearch={this.onSearch}
            placeholder="请输入曲目或专辑名称"
          />
          <Tabs
            v-model:active={this.tabVal}
            color="var(--van-primary)"
            lineWidth={25}
            onChange={index => {
              if (index === 'music') {
                this.musicParams.page = 1
                this.musicList = []
                this.getMusicList()
              } else if (index === 'album') {
                this.albumParams.page = 1
                this.albumList = []
                this.getAlbumList()
              }
            }}
          >
            <Tab title="曲目" name="music"></Tab>
            <Tab title="专辑" name="album"></Tab>
          </Tabs>
        </Sticky>
        <div class={styles.container}>
          {this.dataShow && this.tabVal === 'music' && (
            <List
              v-model:loading={this.musicState.loading}
              finished={this.musicState.finished}
              finishedText=" "
              onLoad={this.getMusicList}
              immediateCheck={false}
            >
              <div class={styles.musicSong}>
                <Song
                  list={this.musicList}
                  musicNameClass={styles.musicName}
                  authorClass={styles.author}
                  showPlay={false}
                  onDetail={(item: any) => {
                    this.onSelect({
                      selectType: 'MUSIC',
                      ...item
                    })
                  }}
                ></Song>
              </div>
            </List>
          )}

          {this.dataShow && this.tabVal === 'album' && (
            <List
              v-model:loading={this.albumState.loading}
              finished={this.albumState.finished}
              finishedText=" "
              onLoad={this.getAlbumList}
              immediateCheck={false}
            >
              <div class={styles.musicGrid}>
                <MusicGrid
                  list={this.albumList}
                  onGoto={(n: any) => {
                    this.onSelect({
                      selectType: 'ALBUM',
                      ...n
                    })
                  }}
                />
              </div>
            </List>
          )}

          {!this.dataShow && (
            <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无数据" />
          )}
        </div>
      </div>
    )
  }
})
