<template>
    <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')">
        <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
        {{ columnProp('footer') }}
    </td>
</template>

<script>
import { DomHandler, ObjectUtils } from 'primevue/utils';
import { NumberFormat } from '../utils/NumberFormat';

export default {
    name: 'FooterCell',
    props: {
        column: {
            type: Object,
            default: null
        }
    },

    inject:{
         dataTable:"DataTable"
     },

    data() {
        return {
            styleObject: {},
            d_value: null  /*保存计算公式返回的值 ，可以实现按计算结果设置样式 */
        };
    },
    mounted() {
        if (this.columnProp('frozen')) {
            this.updateStickyPosition();
        }
    },
    updated() {
        if (this.columnProp('frozen')) {
            this.updateStickyPosition();
        }
    },
    methods: {
        columnProp(prop) {

            if(prop==='footer'){
                 let footer = this.column.props['footer'] || '';

                 if(footer==='')
                    return '';

                 let field= this.column.props['field'] || ''
                 let value =footer;

                 if(typeof footer==='function' ){
                    this.d_value= footer( this.dataTable.primaryData,field );
                    value= NumberFormat(this.d_value, this.numberFormat ) ;
                 } 

                 else if( this.dataTable && field && ( typeof footer==='string' ) &&  footer.startsWith("=") ){
                     const exp=footer.substring(1);

                     if(exp!==''){
                        this.d_value= this.dataTable.evaluate(exp,field)
                        value= NumberFormat(this.d_value, this.numberFormat) ;
                     }
                 }   

                 return value;
            }

            return ObjectUtils.getVNodeProp(this.column, prop);
        },

        updateStickyPosition() {
            if (this.columnProp('frozen')) {
                let align = this.columnProp('alignFrozen');

                if (align === 'right') {
                    let right = 0;
                    let next = this.$el.nextElementSibling;

                    if (next) {
                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                    }

                    this.styleObject.right = right + 'px';
                } else {
                    let left = 0;
                    let prev = this.$el.previousElementSibling;

                    if (prev) {
                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                    }

                    this.styleObject.left = left + 'px';
                }
            }
        }
    },
    computed: {
        containerClass() {
            const align= (this.columnProp('align') || '' ).toLowerCase();
            const alignClass= (align==='')? null : 'text-'+align;

            return [
                this.columnProp('footerClass'),
                this.columnProp('class'),
                alignClass,
                {
                    'p-frozen-column': this.columnProp('frozen')
                }
            ];
        },
        containerStyle() {
            //增加列宽度的设置
            let width =  this.columnProp('width') || '';
            let widthStyle =(width==='') ? null : { width }  ;

            let footerStyle = this.columnProp('footerStyle');
            // let columnStyle = this.columnProp('style');

            //设置的格式是一个函数，则把当前脚本区的值传给函数计算，返回相应的格式
            if((typeof footerStyle)==='function')
            {
                if(this.d_value!==null){
                    footerStyle = footerStyle(this.d_value, this.columnProp('field'));
                }else{
                    footerStyle= null;
                }
            }


            return this.columnProp('frozen') ? [widthStyle, footerStyle, this.styleObject] : [widthStyle, footerStyle];
        },

        numberFormat(){
            let format = this.column.props["format"] || '';

            if(format==='' && this.column.props["editor"]==="InputNumber"){
                const editorProps=this.column.props["editorProps"] || {} ;
                const {minFractionDigits:minimumFractionDigits, maxFractionDigits:maximumFractionDigits} = editorProps;
                
                format =Object.assign( {}, editorProps, { style:'decimal', useGrouping:true , minimumFractionDigits,maximumFractionDigits } )
            }

            return format
        }
    }
};
</script>
