import { defineComponent } from 'vue'
import { Image } from 'vant'
import { browser, setTongjiTag, getRandomKey, getRequestHostname } from '/src/helpers/utils'
import { postMessage } from '/src/helpers/native-message'
import appState from '/src/state'
import request from '/src/helpers/request'
import styles from './index.module.less'
import { template } from 'lodash'

const browserInfo = browser()

export default defineComponent({
  name: 'classify',
  data() {
    return {
      list: [] as any[]
    }
  },
  mounted() {
    // localStorage.setItem('behaviorId', getRandomKey())
    // this.FetchList()
    const musicScoreList = sessionStorage.getItem('musicScoreList')
    if(musicScoreList) {
      let tempMusicScoreList = JSON.parse(musicScoreList)

      this.list = tempMusicScoreList // 从上面页面获取分类信息
    } else {
      (this as any).$router.replace('/')
    }
    setTongjiTag(['_trackEvent', '云教练', '切换页面', '分类页面'])

    // appState.subjectOptions = [{value: 0, text: '全部声部'}]
    appState.subjectId = appState.origanSubjectId
  },
  methods: {
    async FetchList() {
      try {
        const { parentId }: any = this.$route.query
        const res = await request.get('/sysMusicScoreCategories/queryTree', {
          params: {
            parentId: parentId || 0
          }
        })
        this.list = res.data
      } catch (error) {}
    },
    onClickLeft() {
      if (browserInfo.isApp) {
        postMessage({
          api: 'back'
        })
      }
    },
    toDetail(item: any) {
      (this as any).$router.push({
        path: '/list/' + item.id,
        query: {
          ...this.$route.query
        }
      })
    },
  },
  render() {
    return (
      <div class={styles.container}>
        <div class={styles.content}>
          <div class={styles.title}>教材</div>
          <div class={styles.items}>
            {this.list.map(item => (
              <div key={item.id} onClick={() => this.toDetail(item)}>
                <div class={styles.inner}>
                  <Image src={item.coverImg} class={styles.img}/>
                  <div class="van-ellipsis">{item.name}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }
})
