<!-- in-money-f 钱，单位：分 （内部输入框显示的是元，外部 v-model 得到的是分） -->
<template>
    <el-form-item class="c-item" :label="name" :rules="required ? {required: true} : rules ">
        <el-input type="number" 
                  v-model="realValue" @input="onInput" :placeholder="placeholder" :disabled="disabled" />
        <span class="c-remark" v-if="remark">{{remark}}</span>
    </el-form-item>
</template>

<script setup name="in-money-f">
import {getCurrentInstance, onMounted} from "vue";
const { proxy } = getCurrentInstance();

defineProps({
    // 标题 
    name: {},
    // 绑定值 
    modelValue: {},
    // 提示文字 
    placeholder: {},
    // 备注文字
    remark: {}, 
    // 是否禁用 
    disabled: {},
    // 表单校验 
    rules: {},
    required: {
        type: Boolean
    }
})

// 真实的值 -- 将外界的分 转化为本组件的元  
const realValue = ref(''); 
const initRealValue = () => {
    const value = proxy.modelValue / 100;
    if(isNaN(value) === false) {
        realValue.value = value;
    }
}
onMounted(initRealValue)
watch(() => proxy.modelValue, initRealValue);

// input值发生变化时触发
const onInput = function($event) {
    proxy.$emit('update:modelValue', $event * 100);
};

</script>

<style scoped>

</style>
