import request from '@/helpers/request'
import { state } from '@/state'
import { defineComponent, reactive, onMounted, watch } from 'vue'
import { RouterView, useRoute } from 'vue-router'
import Category from './category'
import { getImage } from './images'
import styles from './index.module.less'
import MusicList from './music-list'

export default defineComponent({
  name: 'accompany',
  setup(props, ctx) {
    const svgs = [
      {
        icon: getImage('l1.png'),
        btnIcon: getImage('b1.svg'),
        color: '#9881FF',
        title: '声部训练',
        subtitle: '乐器基础，巩固自己的基本功',
        btnText: 'GO >'
      },
      {
        icon: getImage('l2.png'),
        btnIcon: getImage('b2.svg'),
        color: '#F67146',
        title: '合奏训练',
        subtitle: '团队协作，加强协调配合能力',
        btnText: 'GO >'
      },
      {
        icon: getImage('l3.png'),
        btnIcon: getImage('b2.svg'),
        color: '#4698FF',
        title: '独奏曲目',
        subtitle: '热播金曲，练习更加有趣',
        btnText: 'GO >'
      }
    ]
    const route = useRoute()
    const data = reactive({
      childPath: '',
      svgs: [] as any,
      musicTreeActive: ''
    })
    const getTree = async () => {
      try {
        const res: any = await request.get(
          state.platformApi + '/musicSheetCategories/queryTree?enable=true'
        )
        if (Array.isArray(res?.data)) {
          data.svgs = res.data.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}>
        {/* <RouterView musicTree={data.svgs} /> */}
        {data.childPath === 'accompany' && <Category musicTree={data.svgs} />}
        {data.childPath === 'accompanymusicList' && <MusicList musicTree={data.svgs} />}
      </div>
    )
  }
})
