import { defineComponent } from 'vue'
import styles from './index.module.less'
import { Cell, CellGroup, Picker, Popup, Sticky, Image } from 'vant'
import request from '@/helpers/request'
import ColHeader from '@/components/col-header'

export default defineComponent({
  name: 'subject-song',
  data() {
    const query = this.$route.query
    return {
      id: query.id,
      subjectId: query.subjectId || '',
      // subjectName: '',
      showSubject: false,
      columns: [] as any,
      activeInfo: {} as any
    }
  },
  async mounted() {
    await this.getMusicInfo()
  },
  methods: {
    async getMusicInfo() {
      try {
        const res = await request.post(
          '/api-student/open/activity/info/' + this.id
        )
        this.activeInfo = res.data

        const subjectInfos = res.data.subjectInfos || []
        const tmp = [] as any
        subjectInfos.forEach((subject: any) => {
          tmp.push({
            text: subject.subjectName,
            value: subject.subjectId
          })
        })
        this.columns = tmp
        // 初始化显示的声部
        this.subjectId = this.subjectId || subjectInfos[0].subjectId
      } catch {
        //
      }
    }
  },
  computed: {
    subjectName() {
      if (!this.subjectId) {
        return ''
      }
      const columns = this.columns as any
      const list = columns.find((c: any) => c.value === this.subjectId)
      return list ? list.text : ''
    },
    selectSubjectList() {
      const activeInfo = this.activeInfo as any
      const musicList = activeInfo.activityMusicVoList || []
      const tmpList = musicList.filter(
        (music: any) => music.subjectId === this.subjectId
      )
      return tmpList
    }
  },
  render() {
    return (
      <div class={styles.subjectSong}>
        <Sticky position="top">
          <ColHeader />
          <Cell
            class={styles.subjectSearch}
            title={`${this.subjectName} 声部`}
            isLink
            arrowDirection="down"
            onClick={() => {
              this.showSubject = true
            }}
          />
        </Sticky>

        <CellGroup inset class={styles.cellGroup}>
          {this.selectSubjectList.map((item: any) => (
            <Cell
              center
              v-slots={{
                icon: () => (
                  <Image src={item.musicImage} class={styles.musicPic} />
                ),
                title: () => (
                  <div class={styles.musicName}>{item.musicSheetName}</div>
                ),
                label: () => (
                  <div class={styles.labelClass}>作者：{item.composer}</div>
                )
              }}
            />
          ))}
        </CellGroup>

        <Popup position="bottom" round v-model:show={this.showSubject}>
          <Picker
            title="选择声部"
            columns={this.columns}
            onCancel={() => {
              this.showSubject = false
            }}
            onConfirm={(val: any) => {
              this.subjectId = val.value
              this.showSubject = false
            }}
          />
        </Popup>
      </div>
    )
  }
})
