// import { PaperClipIcon } from '@heroicons/vue/solid'
import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
import arrow from '@/views/home/images/moreArrow.png'
import styles from './index.module.less'
import albumItem from './modals/albumItem'
import videoDetailItem from '@/components/videoDetailItem'
import musicLIstItem from '@/components/musicLIstItem'
import hotSearch from '@/components/hotSearch'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import request from '@/helpers/request'
import silder from '@/components/silder'
import searchInput from '@/components/searchInput'
import banner from '@/components/banner'
import titleDot from '@/views/home/images/titleDot.png'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import { useRoute, useRouter } from 'vue-router'
import { state as baseState } from '@/state'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
import { getUserType } from '@/helpers/utils'
export default defineComponent({
  name: 'musicLibrary',
  components: {
    albumItem,
    videoDetailItem,
    musicLIstItem,
    hotSearch,
    silder,
    searchInput,
    banner
  },
  setup() {
    let subjectId = 0
    const subjectIds = baseState.user.data?.subjectId || ''
    if (subjectIds) {
      subjectId = Number(subjectIds.split(',')[0])
    }
    // 判断是否在默认的声部
    const subjects: any = useSubjectId(SubjectEnum.SEARCH)
    subjectId = subjects.id || subjectId
    const state = reactive({
      albumList: [],
      musicList: []
    })
    const router = useRouter()
    const getAlbumList = async () => {
      try {
        const res = await request.post('/api-website/open/music/album/list', {
          data: {
            albumStatus: 1,
            page: 1,
            subjectIds: subjectId ? subjectId : null,
            rows: 10
          },
          params: {
            clientType: getUserType()
          }
        })

        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',
            subjectIds: subjectId ? subjectId : null,
            page: 1,
            rows: 5,
            state: 1
          }
        })

        // state.musicList = res.data.rows
        state.musicList = res.data.rows.map(n => {
          if (typeof n.paymentType === 'string')
            n.paymentType = n.paymentType.split(',')
          return n
        })
      } catch (e) {
        console.log(e)
      }
    }
    const gotoSearch = (val: string | object) => {
      if (typeof val == 'string') {
        router.push({ name: 'searchdetail', params: { search: val } })
      } else {
        router.push({ name: 'searchdetail', params: { ...val } })
      }
    }
    const gotoMusic = () => {
      router.push({ name: 'searchdetail', params: { type: 'music' } })
    }
    const gotoAlbum = () => {
      router.push({ name: 'searchdetail', params: { type: '' } })
    }
    onMounted(() => {
      getAlbumList()
      getMusicList()
    })
    return () => (
      <div>
        <banner></banner>
        <div class="bg-white">
          <div class={styles.w1200}>
            <div class={styles.section}>
              {/* <div class={styles.titleWrap}>
                <img src={titleDot} class={styles.dotImg} alt="" />
                <h4>热门专辑</h4>
                <img src={titleDot} class={styles.dotImg} alt="" />
              </div> */}

              <searchInput
                isWhile={false}
                type="search"
                onStartSearch={(val: any) => gotoSearch(val)}
              ></searchInput>
              <div class={styles.hotSearch}>
                <hotSearch
                  onHotTag={(val: string) => {
                    gotoSearch(val)
                  }}
                  type={''}
                ></hotSearch>
              </div>

              {state.albumList && state.albumList.length > 0 && (
                <>
                  <div class={[styles.videoNav, styles.mt25]}>
                    <div class={styles.titleWrap}>
                      <h5 class={styles.hotAlbum}>热门专辑</h5>
                      <img src={titleDot} class={styles.dotImg} alt="" />
                    </div>

                    <div class={styles.wrapRight} onClick={() => gotoAlbum()}>
                      <span>更多</span>
                      <img class={styles.arrow} src={arrow} alt="" />
                    </div>
                  </div>

                  <div class={styles.albumList}>
                    {state.albumList.map(item => {
                      return <albumItem detail={item}></albumItem>
                    })}
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
        <div>
          <div class={styles.w1200}>
            {state.musicList && state.musicList.length > 0 && (
              <>
                <div
                  class={[styles.section, styles.pb40]}
                  style="padding-top: 0"
                >
                  <div class={styles.videoNav}>
                    <div class={styles.titleWrap}>
                      <h5>热门乐谱</h5>
                      <img src={titleDot} class={styles.dotImg} alt="" />
                    </div>
                    <div class={styles.wrapRight} onClick={() => gotoMusic()}>
                      <span>更多</span>
                      <img class={styles.arrow} src={arrow} alt="" />
                    </div>
                  </div>
                  <div class={styles.musicList}>
                    {state.musicList.map(item => {
                      return <musicLIstItem item={item}></musicLIstItem>
                    })}
                  </div>
                </div>
              </>
            )}

            {/* <musicLIstItem></musicLIstItem> */}
          </div>
        </div>
        <silder></silder>
      </div>
    )
  }
})