// 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 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 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import pagination from '@/components/pagination'
import { useRoute, useRouter } from 'vue-router'
import { state as baseState } from '@/state'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
import { getUserType } from '@/helpers/utils'
import ColEmpty from '@/components/col-empty'
export default defineComponent({
  name: 'musicLibrary',
  components: {
    albumItem,
    hotSearch,
    silder,
    searchInput,
    banner,
    pagination,
    ColEmpty
  },
  setup() {
    const route = useRoute()
    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: [],
      tagTree: [],
      hideSearch: true,
      isshowData: false,
      pageInfo: {
        // 分页规则
        limit: 20, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [5, 10, 20, 40, 50] // 选择限制显示条数
      },
      searchs: {
        albumStatus: 1,
        albumTagIds: route.query.albumTagIds || '',
        search: route.query.search || '',
        subject: subjectId || '',
        page: 1,
        rows: 10
      }
    })

    const getAlbumList = async () => {
      try {
        const { search, subject, ...more } = state.searchs
        const res = await request.post('/api-website/open/music/album/list', {
          data: {
            ...more,
            idAndName: search,
            subjectIds: subject,
            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 getTagTree = async () => {
      try {
        const res = await request.get('/api-website/open/MusicTag/tree', {
          params: {
            type: 'ALBUM'
          }
        })
        const tree = res.data || []
        state.tagTree = [
          {
            name: '全部',
            id: '',
            isCheck: true
          },
          ...tree
        ] as any

        if (state.searchs.albumTagIds) {
          state.tagTree.forEach((tag: any) => {
            tag.isCheck = false
            if (tag.id == state.searchs.albumTagIds) {
              tag.isCheck = true
            }
          })
        }
      } catch (e) {
        console.log(e)
      }
    }

    const searchRust = (val: any) => {
      // const smallTag = (val || ([] as any)).filter(tag => tag < 0)
      const maxTag = (val || ([] as any)).filter(tag => tag > 0)
      state.searchs.albumTagIds = maxTag.join(',') as string
      startSearch(state.searchs)
    }

    const startSearch = (val: any) => {
      state.searchs = { ...state.searchs, ...val }
      getAlbumList()
    }

    onMounted(() => {
      getTagTree()
      getAlbumList()
    })
    return () => (
      <div>
        <banner></banner>
        <div class="bg-white">
          <div class={styles.w1200}>
            <div class={styles.section}>
              <div class={styles.tagList}>
                <div
                  class={[styles.tagContainer, state.hideSearch && styles.hide]}
                >
                  {state.tagTree.map((tag: any) => (
                    <span
                      class={[styles.tagItem, tag.isCheck && styles.active]}
                      onClick={() => {
                        state.tagTree.forEach((item: any) => {
                          item.isCheck = false
                        })
                        tag.isCheck = true

                        startSearch({ albumTagIds: tag.id })
                      }}
                    >
                      {tag.name}
                    </span>
                  ))}
                </div>
                <div
                  class={styles.wrapRight}
                  onClick={() => {
                    state.hideSearch = !state.hideSearch
                  }}
                >
                  <span>{state.hideSearch ? '更多' : '收起'}</span>
                  <img
                    class={[styles.arrow, !state.hideSearch && styles.active]}
                    src={arrow}
                    alt=""
                  />
                </div>
              </div>
              <searchInput
                isWhile={false}
                type="search"
                showSearch
                placeholder="搜索你想练习的专辑"
                searchVal={{ ...state.searchs }}
                onStartSearch={(val: any) => {
                  state.pageInfo.page = 1
                  startSearch(val)
                }}
              ></searchInput>
              <div class={styles.hotSearch}>
                {/* <hotSearch
                  onSearchRust={(val: any) => searchRust(val)}
                  onHotTag={(val: string) => {
                    state.searchs.search = val
                    getAlbumList()
                  }}
                  type={''}
                  isChiose={true}
                ></hotSearch> */}
              </div>

              {state.albumList && state.albumList.length > 0 && (
                <div class={styles.albumList}>
                  {state.albumList.map(item => {
                    return <albumItem detail={item}></albumItem>
                  })}
                </div>
              )}
              {state.isshowData && <ColEmpty></ColEmpty>}
            </div>

            <pagination
              total={state.pageInfo.total}
              v-model:page={state.pageInfo.page}
              v-model:limit={state.pageInfo.limit}
              pageSizes={state.pageInfo.page_size}
              pagination={getAlbumList}
            />
          </div>
        </div>
        <silder></silder>
      </div>
    )
  }
})
