import { defineComponent } from 'vue'
import { Picker, Button } from 'vant'
import appState from '/src/state'
import styles from './index.module.less'
import stylesRem from './index-rem.module.less'
import request from '/src/helpers/request'

export default defineComponent({
  name: 'choosePartName',
  props: {
    isRem: {
      type: Boolean,
      default: true,
    },
    partNames: {
      type: Array,
      default: () => [],
    },
    onSelectedPartName: {
      type: Function,
      default: (selected: any) => {},
    },
  },
  async mounted() {
      try {
        // 获取所有声部
        const res = await request.post('/subject/list')
        this.subjectList = res.data || []
      } catch {

      }
  },
  data() {
    return {
      selectedPart: {},
      subjectList: []
      // styles: {} as any,
    }
  },
  methods: {
    onDetail(item: any) {
      console.log(item)
      this.subjectList.forEach((item: any) => {
        item.checked = false
      });
      item.checked = true
      this.selectedPart = item
    }
  },
  render() {
    // const styles = this.styles
    return (
      <div class={styles.container}>
        <h3>请选择您练习的声部</h3>
        <div class={styles.subjectcontent}>
          <div class={styles.subjectlist}>
            { this.subjectList.map((item: any) => (
                <div  key={item.id} onClick={() => this.onDetail(item)} class={[styles.subjectItem, item.checked ? styles.active : null]}>
                  {item.name}
                </div>
              ))
            }
          </div>
        </div>
        <Button
          class={styles.button}
          type="primary"
          round block
          color="#01C1B5"
          onClick={() => this.onSelectedPartName(this.selectedPart)}
        >确定</Button>
      </div>
    )
  }
})
