import { defineComponent, ref, onMounted, watch } from 'vue';

// 模拟 CurrencyBase 类
class CurrencyBase {
    _initTxtLength: number = 0;
    _formatType: string = '';
    _txtValue: string = '';
    CurrencySymbol: string = '';
    CurrencySymbolType: string = '';
    Accuracy: number = 2; // 默认精度为 2
}

export default defineComponent({
    name: 'ProportionalEditor',
    setup() {
        const currencyBase = new CurrencyBase();
        const text = ref('');

        // 禁用输入法
        const disableInputMethod = () => {
            // 在 Vue 中无法直接禁用输入法，此为模拟
        };

        const getTxtValue = () => {
            return '0.'.padEnd(currencyBase.Accuracy + 2, '0');
        };

        const getFormatType = () => {
            return `{0:F${currencyBase.Accuracy}}`;
        };

        const getInitTxtLength = () => {
            return currencyBase.Accuracy + 2;
        };

        const onPreviewKeyDown = (e: KeyboardEvent) => {
            currencyBase._initTxtLength = getInitTxtLength();
            currencyBase._formatType = getFormatType();
            // 模拟父类处理
        };

        const onTextChanged = () => {
            currencyBase._txtValue = getTxtValue();
            currencyBase._formatType = getFormatType();
            // 模拟父类处理
        };

        const onGotFocus = () => {
            currencyBase._txtValue = getTxtValue();
            // 模拟父类处理
        };

        const onLostFocus = () => {
            currencyBase._txtValue = getTxtValue();
            currencyBase._formatType = getFormatType();
            // 模拟父类处理
        };

        onMounted(() => {
            disableInputMethod();
            text.value = getTxtValue();
            currencyBase.CurrencySymbol = '%';
            currencyBase.CurrencySymbolType = 'UserSetting';
        });

        watch(text, onTextChanged);

        return {
            text,
            onPreviewKeyDown,
            onGotFocus,
            onLostFocus
        };
    }
});