import { PropType, computed, defineComponent, ref, toRefs, onMounted, watch } from 'vue'
import { Picker, Button, Icon } from 'vant'
import styles from './index.module.less'
import state, { IPlatform } from "/src/state";
import changeName from "./imgs/changeName.png"
import { headImg } from "/src/page-instrument/header-top/image";
import { toggleMusicSheet } from "../index"

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)
		});

    watch(
      () => toggleMusicSheet.show,
      () => {
        if (toggleMusicSheet.show) {
          selectIndex.value = partIndex.value
          selValues.value = [partIndex.value]
        }
        //console.log('声轨',selValues.value,partIndex.value,selectIndex.value)
      }
    );

    return () => (
      <div class={[styles.container, state.platform === IPlatform.PC && styles.pcContainer, styles[state.modeType]]}>
        <div class={styles.head}>
          <img class={styles.headTit} src={changeName} />
          <img class={styles.closeImg} src={headImg("closeImg.png")} onClick={() => emit("close")} />
        </div>
        { state.platform === IPlatform.PC && <div class={[!state.guideInfo?.teacherDrag && styles.pcPartTopZIndex ,styles.pcPartTop,'top_drag']}></div> }
        <div class={styles.pickerCon}>
          <div class={styles.pickerBox}>
            <Picker
              ref={myPicker}
              class={[styles.picker, state.platform === IPlatform.PC && styles.pcPicker]}
              defaultIndex={props.partIndex}
              v-model={selValues.value}
              showToolbar={false}
              columns={columns.value}
              visibleItemCount={Math.ceil(document.body.clientHeight / 40 / 3)}
              onChange={(row) => {
                console.log(1111,'选择的索引', row)
                if (!partIndexChanged.value) partIndexChanged.value = true
                selectIndex.value = row.selectedValues[0]
              }}
            />
            <div class={styles.button} onClick={() => {
                // console.log(1111,selectIndex.value)
                if (partIndexChanged.value) {
                  emit('close', selectIndex.value)
                } else {
                  emit('close', partIndex.value)
                }
              }
            }></div>
          </div>
        </div>
      </div>
    )
  },
})