import OHeader from '@/components/o-header'
import request from '@/helpers/request'
import { state } from '@/state'
import { Image, Loading } from 'vant'
import { defineComponent, reactive, onMounted, watch } from 'vue'
import { RouterView, useRoute, useRouter } from 'vue-router'
import { getImage } from './images'
import styles from './index.module.less'
import MusicList from './music-list'

export default defineComponent({
  name: 'accompany',
  setup(props, ctx) {
    const route = useRoute()
    const router = useRouter()
    const data = reactive({
      childPath: '',
      svgs: [] as any,
      musicTreeActive: ''
    })
    const getTree = async () => {
      try {
        const res: any = await request.post(
          state.platformApi + '/musicSheetCategories/page', {
            data: {
              parentId: 0,
              enable: true,
              page: 1,
              rows: 10
            }
          }
        )
        console.log(res, 'res')
        const result = res.data.rows || []
        if (Array.isArray(result)) {
          data.svgs = result.map((n: any, index: number) => {
            return {
              ...n,
              id: n.id,
              icon: n.coverImg,
              btnIcon: getImage('b2.svg'),
              color: '#9881FF',
              title: n.name,
              subtitle: '',
              btnText: 'GO >'
            }
          })
          console.log('🚀 ~ data.svgs', data.svgs)
        }
      } catch (error) {
        console.log(error)
      }
      handleOpen()
    }
    const handleOpen = () => {
      const src: string = route?.path || 'accompany'
      data.childPath = src.replace(/\//g, '') || 'accompany'
      console.log('🚀 ~ route.path', data.childPath)
    }
    watch(
      () => route.path,
      () => {
        handleOpen()
      }
    )
    onMounted(() => {
      getTree()
    })
    return () => (
      <div class={styles.accompany}>
        <OHeader />
        <div class={styles.accompanyCategory}>
          {data.svgs.map((item: any) => {
            return (
              <div
                class={styles.container}
                onClick={() => {
                  router.push({
                    path: '/musicList',
                    query: {
                      categorieid: item.id
                    }
                  })
                }}
              >
                <Image src={item.icon} width="100%" height="100%">
                  {{
                    loading: () => <Loading type="spinner" size="20" />
                  }}
                </Image>
              </div>
            )
          })}
        </div>
      </div>
    )
  }
})