import { defineComponent } from 'vue';
import { Picker, Button } from 'vant';
import styles from './index.module.less';
import stylesRem from './index-rem.module.less';
import { getVoiceChinesName } from '@/views/choose-homework/pageState';

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