import { defineComponent } from 'vue';
import { Image } from 'vant';
import styles from './index.module.less';
import OSticky from '@/components/o-sticky';
import OHeader from '@/components/o-header';

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

      this.list = tempMusicScoreList; // 从上面页面获取分类信息
    } else {
      (this as any).$router.replace('/');
    }

    // appState.subjectOptions = [{value: 0, text: '全部声部'}]
    // appState.subjectId = appState.origanSubjectId;

    // const parseSearch: any = qs.parse(location.search);
    // this.liveConfig = !!parseSearch.liveConfig;
  },
  methods: {
    toDetail(item: any) {
      (this as any).$router.push({
        path: '/music-list/' + item.id,
        query: {
          ...this.$route.query
        }
      });
    },
    goBack() {
      (this as any).$router.push({
        path: '/',
        query: {
          ...this.$route.query
        }
      });
    }
  },
  render() {
    return (
      <div class={styles.container}>
        <OSticky position="top">
          <OHeader
            isBack={true}
            border={false}
            isFixed={false}
            backIconColor="white"></OHeader>
        </OSticky>
        <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>
    );
  }
});