import request from '@/helpers/request'
import { state } from '@/state'
import { Button, Icon } from 'vant'
import { defineComponent, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getImage } from './images'
import styles from './index.module.less'

export default defineComponent({
  name: 'accompany-category',
  props: {
    musicTree: {
      type: Array,
      default: () => []
    }
  },
  setup(props, ctx) {
    console.log("🚀 ~ props", props.musicTree)
    const router = useRouter()

    return () => (
      <div class={styles.accompanyCategory}>
        {props.musicTree.map((item: any) => {
          return (
            <div
              class={styles.container}
              style={{ backgroundImage: `url(${item.icon})` }}
              onClick={() => {
                router.replace({
                  path: '/accompany/musicList',
                  query: {
                    categorieid: item.id
                  }
                })
              }}
            >
              <div class={styles.title}>{item.title}</div>
              <div class={styles.sub}>{item.subtitle}</div>
              <div
                class={styles.btn}
                style={{ backgroundImage: `url(${item.btnIcon})`, color: item.color }}
              >
                GO <Icon name="arrow" />
              </div>
            </div>
          )
        })}
        {/* <Button onClick={() => {
            location.href = `http://192.168.3.114:1000/#/accompany`
        }}>测试</Button> */}
      </div>
    )
  }
})
