import { PropType, computed, defineComponent, ref, toRefs } from 'vue'
import { Picker, Button, Icon } from 'vant'
import styles from './index.module.less'

export default defineComponent({
  name: 'choosePartName',
  props: {
    partListNames: {
      type: Array as PropType<string[]>,
      default: () => [],
    },
    partIndex: {
      type: Number,
      default: 0,
    },
  },
  emits: ['close'],
  setup(props, { emit }) {
    const { partListNames, partIndex } = toRefs(props)
    const selectIndex = ref((partListNames.value[partIndex.value] as any).value)
    const columns = computed(() => {
      return partListNames.value
    })
    return () => (
      <div class={styles.container}>
        <div class={styles.top}>
          <div class={styles.title}>请选择您练习的乐器</div>
          <Icon name="cross" size={24} onClick={() => emit('close')} />
        </div>
        <Picker
          class={styles.picker}
          defaultIndex={partIndex.value}
          showToolbar={false}
          columns={columns.value}
          visibleItemCount={Math.ceil(document.body.clientHeight / 44 / 3)}
          onChange={(row) => {
            selectIndex.value = row.value
          }}
        />
        <Button class={styles.button} type="primary" round block onClick={() => {
          emit('close', selectIndex.value)}
        }>
          确定
        </Button>
      </div>
    )
  },
})
