import { PropType, computed, defineComponent, ref, toRefs, onMounted } 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
    })
    // console.log(partListNames.value, partIndex.value, selectIndex.value, columns.value, 999999)
    /**
     * 默认选中的
     * picker组件，3.x的版本可以使用defaultIndex，4.x的版本只能使用v-model传递
     * */ 
    const selValues = ref([partIndex.value]);
    const myPicker = ref();
    onMounted(() => {
			// console.log(myPicker.value,99999,selValues.value,props.partIndex)
		});
    return () => (
      <div class={styles.container}>
        <div class={styles.top}>
          <div class={styles.title}>请选择您练习的乐器</div>
          <Icon name="cross" size={24} onClick={() => emit('close')} />
        </div>
        <Picker
          ref={myPicker}
          class={styles.picker}
          defaultIndex={props.partIndex}
          v-model={selValues.value}
          showToolbar={false}
          columns={columns.value}
          visibleItemCount={Math.ceil(document.body.clientHeight / 44 / 3)}
          onChange={(row) => {
            // console.log('选择的索引', row)
            selectIndex.value = row.selectedValues[0]
          }}
        />
        <Button class={styles.button} type="primary" round block onClick={() => {
          emit('close', selectIndex.value)}
        }>
          确定
        </Button>
      </div>
    )
  },
})