// 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 titleDot from './images/titleDot.png'
import hotSearch from '@/components/hotSearch'
import banner from '@/components/banner'
import moreArrow from './images/moreArrow.png'
import searchIcon from './images/search.png'
import request from '@/helpers/request'
import tagItem from '@/components/tagItem'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import { useRouter } from 'vue-router'
import { ElInput } from 'element-plus'
import { getUserType } from '@/helpers/utils'
export default defineComponent({
  name: 'home',
  components: {
    albumItem,
    videoDetailItem,
    musicLIstItem,
    hotSearch,
    banner,
    tagItem
  },
  setup() {
    const state = reactive({
      albumList: [],
      videoList: [],
      search: '',
      tagTree: [],
      tagTreeAlbum: [],
      hotList: [],
      musicList: []
    })
    const router = useRouter()
    const getAlbumList = async () => {
      try {
        const res = await request.post('/api-website/open/music/album/list', {
          data: {
            albumStatus: 1,
            page: 1,
            rows: 8
          },
          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',
            exquisiteFlag: 1,
            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 getVideoList = async () => {
      try {
        const res = await request.post(
          '/api-website/open/videoLessonGroup/page',
          {
            data: {
              albumStatus: 'PASS',
              page: 1,
              rows: 3
            }
          }
        )

        state.videoList = res.data.rows
      } catch (e) {
        console.log(e)
      }
    }
    const gotoSearch = (val: string, type = 'music') => {
      router.push({
        name: type === 'music' ? 'musicLibrary' : 'albumibrary',
        query: { search: val }
      })
    }
    const getTagTree = async (type = 'MUSIC') => {
      try {
        const res = await request.get('/api-website/open/MusicTag/tree', {
          params: {
            type: type
          }
        })

        if (type === 'MUSIC') {
          const resHot = await request.get(
            `/api-website/open/music/sheet/hotTag/${type}`
          )
          state.hotList = getArrayLength(resHot.data || [])
          state.tagTree = getArrayLength(res.data || [])
        } else {
          state.tagTreeAlbum = getArrayLength(res.data || [])
        }
      } catch (e) {
        console.log(e)
      }
    }

    const getArrayLength = (arr: any, num = 6) => {
      return arr.splice(0, num)
    }

    const gotoVideoList = () => {
      router.push({ path: '/videoDetailList' })
    }

    const gotoSearchTag = (tag: any, type: string) => {
      if (type === 'album' || type === 'albumTag') {
        const params = {} as any
        if (type === 'album') {
          params.albumTagIds = tag.id
        } else {
          params.search = tag
        }
        router.push({
          name: 'albumibrary',
          query: {
            ...params
          }
        })
      } else if (type === 'music' || type === 'musicHot') {
        const params = {} as any
        if (type === 'music') {
          params.musicTagIds = tag.id
        } else {
          params.search = tag.key
        }
        router.push({
          name: 'musicLibrary',
          query: {
            ...params
          }
        })
      }
    }
    //
    onMounted(() => {
      getAlbumList()
      getMusicList()
      getTagTree()
      getTagTree('ALBUM')
    })
    return () => (
      <div>
        <banner />
        <div class="bg-white">
          <div class={styles.w1200}>
            <div class={styles.section}>
              {/* <hotSearch
                searchType="MUSIC"
                onHotTag={(val: string) => {
                  gotoSearch(val)
                }}
              ></hotSearch> */}
              <div class={styles.albumMoudel}>
                <div class={styles.albumWrap}>
                  <div class={[styles.titleWrap, styles.hotAlbum]}>
                    <div class={[styles.titleWrapLeft]}>
                      <h4>热门专辑</h4>
                      <img src={titleDot} class={styles.dotImg} alt="" />
                    </div>
                    <div
                      class={[styles.titleWrapMore]}
                      onClick={() => gotoSearch('', 'album')}
                    >
                      <span>更多</span>
                      <img src={moreArrow} alt="" />
                    </div>
                  </div>
                  <div class={styles.albumList}>
                    {state.albumList.map(item => {
                      return <albumItem detail={item}></albumItem>
                    })}
                  </div>
                  <div class={styles.line}></div>
                </div>
                <div class={styles.albumSearch}>
                  <div class={styles.inputWrap}>
                    <img
                      src={searchIcon}
                      class={styles.searchIcon}
                      onClick={() => gotoSearchTag(state.search, 'albumTag')}
                      alt=""
                    />
                    <ElInput
                      placeholder="搜索你想要的专辑"
                      v-model={state.search}
                    ></ElInput>
                  </div>
                  <div class={styles.chioseLineWrap}>
                    <div class={styles.chioseRow}>
                      <p>专辑分类：</p>
                      <div class={[styles.chioseTagWrap, 'chioseTagWrap']}>
                        {state.tagTreeAlbum.map((tag: any) => {
                          return (
                            <tagItem
                              class={styles.tags}
                              title={tag.name}
                              onSearchTag={() => {
                                gotoSearchTag(tag, 'album')
                              }}
                            >
                              {/* {} */}
                            </tagItem>
                          )
                        })}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {state.musicList && state.musicList.length > 0 && (
              <>
                <div
                  class={[styles.section, styles.pb40]}
                  style="padding-top: 0"
                >
                  <div class={styles.albumMoudel}>
                    <div class={styles.albumWrap} style="padding-right: 25px">
                      <div class={[styles.titleWrap, styles.hotAlbum]}>
                        <div class={[styles.titleWrapLeft]}>
                          <h4>精品乐谱</h4>
                          <img src={titleDot} class={styles.dotImg} alt="" />
                        </div>
                        <div
                          class={[styles.titleWrapMore]}
                          onClick={() => gotoSearch('')}
                        >
                          <span>更多</span>
                          <img src={moreArrow} alt="" />
                        </div>
                      </div>

                      <div class={styles.musicList}>
                        {state.musicList.map(item => {
                          return <musicLIstItem item={item}></musicLIstItem>
                        })}
                      </div>
                      <div class={styles.line}></div>
                    </div>

                    <div class={styles.albumSearch}>
                      <div class={styles.chioseLineWrap}>
                        <div class={styles.chioseRow} style="margin-top: 0">
                          <p>曲谱分类：</p>
                          <div class={[styles.chioseTagWrap, 'chioseTagWrap']}>
                            {state.tagTree.map((tag: any) => {
                              return (
                                <tagItem
                                  class={styles.tags}
                                  title={tag.name}
                                  onSearchTag={() => {
                                    gotoSearchTag(tag, 'music')
                                  }}
                                >
                                  {/* {} */}
                                </tagItem>
                              )
                            })}
                          </div>
                        </div>
                        <div class={styles.chioseRow}>
                          <p>热门搜索：</p>
                          <div class={[styles.chioseTagWrap, 'chioseTagWrap']}>
                            {state.hotList.map((tag: any) => {
                              return (
                                <tagItem
                                  class={styles.tags}
                                  title={tag.key}
                                  onSearchTag={() => {
                                    gotoSearchTag(tag, 'musicHot')
                                  }}
                                >
                                  {/* {} */}
                                </tagItem>
                              )
                            })}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </>
            )}
          </div>
        </div>
        {/* <div class="bg-white">
          <div class={styles.w1200}>
            <div class={[styles.section,styles.pt41]}>
              <div class={[styles.titleWrap]}>

                <div class={[styles.titleWrapLeft]}>
                  <h4>精品视频课</h4>
                  <img src={titleDot} class={styles.dotImg} alt="" />
                </div>
                <div class={[styles.titleWrapMore]} onClick={()=>gotoVideoList()}>
                  <span>更多</span>
                  <img src={moreArrow} alt="" />
                </div>
              </div>
              <div class={styles.videoList}>
                {state.videoList.map(item => {
                  return <videoDetailItem detail={item}></videoDetailItem>
                })}
              </div>
            </div>


          </div>
        </div> */}
      </div>
    )
  }
})
