<template>
    <view class="flex-row align-c wh-auto" :style="propStyle">
        <template v-if="com_data.is_display_money == '1'">
            <view class="number-icon padding-right-sm">{{ com_data.money_sign }}</view>
        </template>
        <input :value="form_value" class="uni-input flex-1" :style="propStyle" type="text" :placeholder="placeholder" placeholder-style="color: gray;" @focus="focus_input" @blur="blur_input" @input="input_value_event" />
        <template v-if="com_data.format == 'percentage'">
             <view class="number-icon padding-left">%</view>
        </template>
    </view>
</template>

<script>
    import { get_format_checks, isEmpty, formatNumber } from '@/common/js/common/common.js';
    export default {
        props: {
            propValue: {
                type: Object,
                default: () => ({}),
            },
            propKey: {
                type: [String, Number],
                default: 0,
            },
            propDataId: {
                type: String,
                default: '',
            },
            propStyle: {
                type: String,
                default: '',
            }
        },
        data() {
            return {
                placeholder: '请输入内容...',
                form_value: '',
                com_data: {},
                max_length: '-1',
                decimal_num: 0,
                is_thousandths_symbol: '0',
                format: '',
            };
        },
        watch: {
            propValue: {
                handler(newVal) {
                    this.init();
                },
                deep: true
            },
            propKey(val) {
                // 初始化
                this.init();
            },
        },
        mounted() {
            this.init();
        },
        methods: {
            isEmpty,
            init() {
                const com_data = this.propValue;
                this.setData({
                    com_data: com_data,
                    max_length: com_data.is_limit_num == '1' && !isEmpty(com_data.max_num) ? com_data.max_num : '-1',
                    placeholder: com_data.placeholder,
                    form_value: com_data?.form_value || '', 
                    decimal_num: com_data.is_decimal == '1' ? com_data.decimal_num : 0,
                    is_thousandths_symbol: com_data.is_thousandths_symbol,
                    format: com_data.format,
                });
            },
            focus_input(e) {
                let value = '';
                // 不为空的时候，获取焦点的时候将千分位的转化为数字避免用户输入的时候出现问题
                if (!isEmpty(e.detail.value)) {
                    value = Number(formatNumber(e.detail.value, false)).toFixed(this.decimal_num);
                }
                this.setData({
                    form_value: value,
                });
            },
            blur_input(e){
                let num = '';
                if (!isEmpty(e.detail.value)) {
                    let all_list = e.detail.value.replace(/[^0-9.]/g, '');
                    // 去除不是数字和.的值
                    num = Number(formatNumber(all_list, false)).toFixed(this.decimal_num);
                    // 为数字并且时千分位的是你
                    if (this.format == 'num' && this.is_thousandths_symbol == '1') {
                        // 如果有多个.的话，去除多个.
                        const parts = all_list.split('.');
                        if (parts.length > 2) {
                            // 如果有多个小数点，则只保留第一个
                            all_list = parts[0] + '.' + parts.slice(1).join('');
                        }
                        num = formatNumber(Number(formatNumber(all_list, false)).toFixed(this.decimal_num).toString(), true)
                    }
                    
                }
                this.data_check(num);
                this.setData({ 
                    form_value: num,
                });
                this.$emit('dataChange', { value: num, id: this.propDataId });
            },
            data_check(val) {
                const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, val, true, 'number');
                this.$emit('dataCheck', { is_error, error_text, value: val, id: this.propDataId });
            },
            input_value_event(e) {
                // 重新编辑一下历史数据
                this.setData({
                    form_value: e.detail.value,
                });
                this.$emit('dataChange', { value: e.detail.value, id: this.propDataId });
            }
        }
    }
</script>

<style lang="scss" scoped>
.number-icon {
    color: #ccc;
}
</style>