<template>
    <div>
        <el-input type="text" size="size" v-model="formData[fieldId]" disabled v-if="resultShowType == 'input'"></el-input>
        <span v-if="resultShowType == 'span'" style="display: inline-block;width: 100%;font-size: 14px;padding-left: 8px;">{{formData[fieldId]}}</span>
    </div>
</template>

<script>
    export default {
        name: "plRealTimeCount",
        props:{
            formData:{type:Object,default:() => {return {}}},
            fieldId:{type:String,require:true},
            resultShowType:{type:String},
            decimalDigit:{type:Number},
            countFieldArr:{type:Array,default:() => {return [];}},
        },

        watch:{
            formData: {
                deep: true,
                handler() {
                    this.countResult();
                },
            },
        },

        created() {
            this.countResult();
        },

        methods:{
            countResult(){
                let result = 0;
                this.countFieldArr.forEach(field => {
                    result += Number(this.formData[field]);
                });
                if(this.decimalDigit){
                    result = result.toFixed(this.decimalDigit);
                }
                this.$set(this.formData,this.fieldId,result);
            }
        }
    }
</script>

<style scoped>

</style>