// 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 './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 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import { ElTabPane, ElTabs } from 'element-plus'
import pagination from '@/components/pagination'
import ColEmpty from '@/components/col-empty'
import { getUserType } from '@/helpers/utils'
export default defineComponent({
  name: 'searchdetail',
  components: {
    hotSearch,
    silder,
    searchInput,
    albumItem,
    pagination,
    ColEmpty
  },
  setup() {
    const state = reactive({
      albumList: [],
      musicList: [],
      search: {},
      isshowData: false,
      pageInfo: {
        // 分页规则
        limit: 40, // 限制显示条数
        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,
            ...state.search,
            page: state.pageInfo.page,
            rows: state.pageInfo.limit,
          },
          params:{
            clientType: getUserType()
          }
        })

        state.albumList = res.data.rows
        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 = {
        ...val,
        idAndName: val.search,
        subjectIds: val.subject,
        exquisiteFlag: val.exquisiteFlag
      }
      state.pageInfo.page = 1
      getAlbumList()
    }
    onMounted(() => {
      // getAlbumList()
      // getMusicList()
    })
    return {
      ...toRefs(state),
      getList,
      getAlbumList
    }
  },
  render() {
    return (
      <div>
        <div>
          <div class={styles.w1200}>
            <div class={styles.section}>
              <div class={styles.albumList}>
                {this.albumList.map(item => {
                  return <albumItem detail={item}></albumItem>
                })}
              </div>
              {this.isshowData && <ColEmpty></ColEmpty>}
            </div>
          </div>
        </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.getAlbumList}
        />
      </div>
    )
  }
})
