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

export default defineComponent({
  name: 'choosePartName',
  props: {
    isRem: {
      type: Boolean,
      default: true,
    },
    partNames: {
      type: Array,
      default: () => [],
    },
    onSelectedPartName: {
      type: Function,
      default: (selected: any) => {},
    },
  },
  mounted() {
    if (this.isRem) {
      this.styles = stylesRem
    } else {
      this.styles = styles
    }
  },
  data() {
    return {
      selectedPart: 0,
      styles: {} as any,
    }
  },
  render() {
    const { chinesePartName } = appState
    const styles = this.styles
    return (
      <div class={styles.container}>
        <h3>请选择您练习的分谱</h3>
        <Picker
          class={styles.picker}
          showToolbar={false}
          columns={this.partNames.map((partName, index) => ({text: getVoiceChinesName(partName as string), value: index}))}
          onChange={val => {
            this.selectedPart = val.value
          }}
          visibleItemCount={this.isRem ? 6 : 4}
        />
        <Button
          class={styles.button}
          type="primary"
          round block
          color="#01C1B5"
          onClick={() => this.onSelectedPartName(this.selectedPart)}
        >确定</Button>
      </div>
    )
  }
})
