import { Sticky, Cell, Tag, Icon, Popup, Tabs, Tab, Dialog } from 'vant'
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
// import Search from '@/components/col-search'
import { useLocalStorage } from '@vueuse/core'
// import AlbumItem from '../album/item'
import AlbumList from '../album'
// import MusicItem from '../list/item'
import MusicList from '../list'
import styles from './index.module.less'
// import classNames from 'classnames'
// import request from '@/helpers/request'
import SelectTag from './select-tag'
// import ColResult from '@/components/col-result'
// import { orderStatus } from '@/views/order-detail/orderStatus'
import { useRoute, useRouter } from 'vue-router'
import { getRandomKey, musicBuy } from '../music'
import { mitter } from './header'

export default defineComponent({
  name: 'MusicSearch',
  emits: ['confirm'],
  setup() {
    const searchInputRef = ref()
    localStorage.setItem('behaviorId', getRandomKey())
    const route = useRoute()
    const router = useRouter()
    const loading = ref(false)
    const keyword = ref(route.query.keyword || '')
    const tagids = ref(route.query.tagids || '')
    const albumRows = ref([])
    const sheetRows = ref([])
    const tagVisibility = ref(false)
    const words = useLocalStorage<string[]>('music-search', [])
    const activeTab = ref('songe')

    const FetchList = async () => {
      // loading.value = true
      // try {
      //   const res = await request.post(
      //     '/api-student/music/sheet/albumAndSheetList',
      //     {
      //       data: {
      //         albumRow: 3,
      //         sheetRow: 10,
      //         search: keyword.value,
      //         musicTagIds: tagids.value
      //       }
      //     }
      //   )
      //   albumRows.value = res.data.musicAlbumList.rows
      //   sheetRows.value = res.data.musicSheetList.rows
      // } catch (error) {}
      // loading.value = false
    }

    const onSearch = val => {
      keyword.value = val
      const indexOf = words.value.indexOf(val)
      if (indexOf > -1) {
        words.value.splice(indexOf, 1)
      }
      if (val) {
        words.value.unshift(val)
        words.value.length = Math.min(words.value.length, 5)
      }
      const activeRef = activeTab.value === 'album' ? albumList : musicList
      console.log(val)
      ;(activeRef.value as any).onSearch?.(val)
      // FetchList()
    }

    const onComfirm = tags => {
      const data = Object.values(tags).flat().filter(Boolean).join(',')
      tagids.value = data
      // FetchList()
      const activeRef = activeTab.value === 'album' ? albumList : musicList
      ;(activeRef.value as any).onComfirm?.(tags)
      tagVisibility.value = false
    }

    const albumList = ref(null)
    const musicList = ref(null)

    const changeTab = (val: any) => {
      activeTab.value = val
    }

    onMounted(() => {
      mitter.on('changeTab', changeTab)
      mitter.on('search', onSearch)
      mitter.on('confirm', onComfirm)
      // ;(activeRef.value as any).onSearch?.('')
      // console.log(searchInputRef.value)
    })

    onUnmounted(() => {
      mitter.off('changeTab', changeTab)
      mitter.off('search', onSearch)
      mitter.off('confirm', onComfirm)
    })

    return () => {
      return (
        <div class={styles.search}>
          {activeTab.value === 'album' ? (
            <AlbumList
              hideSearch
              ref={albumList}
              defauleParams={{
                search: keyword.value,
                tagids: tagids.value
              }}
            />
          ) : (
            <MusicList
              hideSearch
              ref={musicList}
              onItemClick={(item: any) => {
                musicBuy(item, path => {
                  router.push({
                    path,
                    query: {
                      orderType: 'MUSIC'
                    }
                  })
                })
              }}
              defauleParams={{
                search: keyword.value,
                tagids: tagids.value
              }}
            />
          )}
          {/* <Popup
            show={tagVisibility.value}
            round
            closeable
            position="bottom"
            style={{ height: '60%' }}
            teleport="body"
            onUpdate:show={val => (tagVisibility.value = val)}
          >
            <SelectTag onConfirm={onComfirm} onCancel={() => {}} />
          </Popup> */}
        </div>
      )
    }
  }
})
