import { defineComponent, ref, PropType } from 'vue'

/**
 * tsx v-model
 *  v-model 默认绑定的变量名为 modelValue, 你也可以自己命名
 *  v-model = v-model:modelValue
 *
 */

const MyInput = defineComponent({
  props: {
    // https://www.vue3js.cn/docs/zh/guide/component-custom-events.html#%E5%A4%84%E7%90%86-v-model-%E4%BF%AE%E9%A5%B0%E7%AC%A6
    // 真正的 modifier名字 = modeValueName + 'Modifier',
    name: String as PropType<string>,
    nameModifiers: Object as PropType<{ upperCase: boolean }>, // 自定义v-model的修饰符
  },
  setup(props, { emit }) {
    const updateModelValue = (event: any) => {
      let value = event.target.value
      if (props.nameModifiers!.upperCase) {
        // 运用自定义v-model修饰符，将首字母大写
        value = value.charAt(0).toUpperCase() + value.slice(1) // 将首字符大写
      }
      emit('update:modelValue', event.target!.value)
    }
    console.log('props --->', props.nameModifiers) // {upperCase: true}
    return () => {
      return (
        <input type='text' value={props.name} onChange={updateModelValue} />
      )
    }
  },
})

const App = defineComponent({
  setup() {
    const value = 'jinD'
    return () => {
      // v-model: modelValue(arg) => v-model: name(arg) 默认 modelValue是组件接收的值，现在改为name
      // upperCase = modifier
      return <MyInput v-model={[value, 'name', ['upperCase']]} />
    }
  },
})

export { App }