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 }) {
    // #9463 bug，未更换声轨点击确定不应该重新加载，现在会导致切换错误
    const partIndexChanged = ref(false);
    const { partListNames, partIndex } = toRefs(props)
    let idx = partListNames.value.findIndex((item: any) => item.value === partIndex.value);
    idx = idx > -1 ? idx : 0;
    const selectIndex = ref(idx);
    const columns = computed(() => {
      return partListNames.value
    })
    // console.log(1111,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')} /> */}
          <span class={styles.closeIcon} onClick={() => emit("close")}></span>
        </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(1111,'选择的索引', row)
            if (!partIndexChanged.value) partIndexChanged.value = true
            selectIndex.value = row.selectedValues[0]
          }}
        />
        <Button class={styles.button} type="primary" round block onClick={() => {
            console.log(1111,selectIndex.value)
            if (partIndexChanged.value) {
              emit('close', selectIndex.value)
            } else {
              emit('close', partIndex.value)
            }
          }
        }>
          确定
        </Button>
      </div>
    )
  },
})