colexiu-project/src/views/albumLibrary/modals/searchMusic.tsx

// import { PaperClipIcon } from '@heroicons/vue/solid'
import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
import arrow from '@/components/musicLIstItem/images/arrow.png'
import styles from '../index.module.less'
import albumItem from '@/components/albumItem'
import videoDetailItem from '@/components/videoDetailItem'
import musicListItem from '@/components/musicLIstItem'
import hotSearch from '@/components/hotSearch'
import request from '@/helpers/request'
import silder from '@/components/silder'
import searchInput from '@/components/searchInput'
import pagination from '@/components/pagination'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import ColEmpty from '@/components/col-empty'
import { ElTabPane, ElTabs } from 'element-plus'
import { getUserType } from '@/helpers/utils'
export default defineComponent({
  name: 'searchMusic',
  components: {
    hotSearch,
    silder,
    searchInput,
    albumItem,
    musicListItem,
    pagination,
    ColEmpty
  },
  setup() {
    const state = reactive({
      musicList: [],
      search: {},
      isshowData: false,
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [5, 10, 20, 40, 50] // 选择限制显示条数
      }
    })

    // const getAlbumList = async () => {
    //   try {
    //     const res = await request.post('/api-website/open/music/album/list', {
    //       data: {
    //         albumStatus: 1,
    //         page: 1,
    //         rows: 10
    //       }
    //     })

    //     state.albumList = res.data.rows
    //   } catch (e) {
    //     console.log(e)
    //   }
    // }
    const getMusicList = async () => {
      try {
        const res = await request.post('/api-website/open/music/sheet/list', {
          data: {
            albumStatus: 'PASS',
            ...state.search,
            page: state.pageInfo.page,
            rows: state.pageInfo.limit,
            state: 1,
          },
          params:{
            clientType: getUserType()
          }
        })

        state.musicList = res.data.rows.map(n => {
          if (typeof n.paymentType === "string") n.paymentType = n.paymentType.split(',')
          return n
        })
        state.pageInfo.total = res.data.total
        if (state.pageInfo.total == 0) {
          state.isshowData = true
        } else {
          state.isshowData = false
        }
      } catch (e) {
        console.log(e)
      }
    }
    const getList = (val: any) => {
      state.search = {
        subjectIds: val.subject,
        musicTagIds: val.albumTagIds,
        exquisiteFlag: val.exquisiteFlag,
        idAndName: val.search
      }
      state.pageInfo.page = 1
      getMusicList()
    }
    onMounted(() => {
      // getAlbumList()
      // getList(state.search)
    })
    return {
      ...toRefs(state),
      getList,
      getMusicList
    }
  },
  render() {
    return (
      <div>
        <div>
          <div class={styles.w1200}>
            <div class={styles.section}>
              <div class={styles.musicList}>
                {this.musicList.map(item => {
                  return <musicListItem item={item}></musicListItem>
                })}
              </div>
            </div>
          </div>
          {this.isshowData && <ColEmpty></ColEmpty>}
        </div>
        <pagination
          total={this.pageInfo.total}
          v-model:page={this.pageInfo.page}
          v-model:limit={this.pageInfo.limit}
          pageSizes={this.pageInfo.page_size}
          pagination={this.getMusicList}
        />
      </div>
    )
  }
})