// import { PaperClipIcon } from '@heroicons/vue/solid'
import {
  defineComponent,
  toRefs,
  reactive,
  onMounted,
  ref,
  nextTick,
  watch
} from 'vue'
import arrow from '@/components/musicLIstItem/images/arrow.png'
import styles from './index.module.less'
import hotSearch from '@/components/hotSearch'
import request from '@/helpers/request'
import silder from '@/components/silder'
import searchInput from '@/components/searchInput'
import searchAlbum from './modals/searchAlbum'
import searchMusic from './modals/searchMusic'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import { ElTabPane, ElTabs } from 'element-plus'
import { useRoute } from 'vue-router'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
import { useAsyncState, useLocalStorage } from '@vueuse/core'
export default defineComponent({
  name: 'searchdetail',
  components: {
    hotSearch,
    silder,
    searchInput,
    searchAlbum,
    searchMusic
  },
  setup() {
    const subjects: any = useSubjectId(SubjectEnum.SEARCH)
    const state = reactive({
      albumList: [],
      musicList: [],
      chiose: 'album',
      searchs: {
        albumTagIds: '',
        search: '',
        exquisiteFlag: null as any,
        subject: subjects.id || ''
      }
    })
    const route = useRoute()
    const searchAlbumRef = ref()
    const searchMusicRef = ref()
    // 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',
    //         page: 1,
    //         rows: 5,
    //         state: 1
    //       }
    //     })

    //     state.musicList = res.data.rows
    //   } catch (e) {
    //     console.log(e)
    //   }
    // }
    const searchRust = (val: any) => {
      console.log(val, 'search')
      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
      state.searchs.exquisiteFlag = null
      if (smallTag[0] == -2) {
        state.searchs.exquisiteFlag = 1
      }
      startSearch(state.searchs)
    }
    const startSearch = (val: any) => {
      state.searchs = { ...state.searchs, ...val }
      search()
    }

    const search = () => {
      console.log(state.searchs, '1212')
      if (state.chiose == 'album') {
        searchAlbumRef.value.getList(state.searchs)
      }
      if (state.chiose == 'music') {
        searchMusicRef.value.getList(state.searchs)
      }
    }

    watch(
      () => state.chiose,
      chiose => {
        nextTick(() => {
          search()
        })
      }
    )
    onMounted(() => {
      if (route.params.search) {
        state.searchs.search = route.params.search as string
      }
      if (route.params.subject) {
        state.searchs.subject = route.params.subject as string
      }
      if (route.params.type) {
        state.chiose = route.params.type as string
      }
      nextTick(() => {
        search()
      })

      // getAlbumList()
      // getMusicList()
    })
    return {
      ...toRefs(state),
      startSearch,
      searchRust,
      searchAlbumRef,
      searchMusicRef,
      search
    }
  },
  render() {
    return (
      <div>
        <div class="">
          <div class="wall" style={{ height: '60px' }}></div>
          <div class={styles.w1200}>
            <div class={styles.section}>
              <searchInput
                isWhile={true}
                searchVal={{ ...this.searchs }}
                onUpdate:searchVal={(val: any) => {
                  console.log(val, '1212')
                }}
                type="search"
                onStartSearch={(val: any) => {
                  this.startSearch(val)
                }}
              ></searchInput>
              <div class={styles.hotSearch}>
                <hotSearch
                  type={'search'}
                  onSearchRust={(val: any) => this.searchRust(val)}
                  onHotTag={(val: string) => {
                    this.searchs.search = val
                    this.search()
                  }}
                  isChiose={true}
                ></hotSearch>
              </div>
              <div class={styles.myTabWrap}>
                <ElTabs class={styles.myTab} v-model={this.chiose}>
                  <ElTabPane label="专辑" name="album">
                    {this.chiose == 'album' ? (
                      <searchAlbum ref="searchAlbumRef" />
                    ) : null}
                  </ElTabPane>
                  <ElTabPane label="乐谱" name="music">
                    {this.chiose == 'music' ? (
                      <searchMusic ref="searchMusicRef" />
                    ) : null}
                  </ElTabPane>
                </ElTabs>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
})
