<template>
     <td v-if="column.props===undefined || column.props===null">
        <component v-if="column.children && column.children.body" :is="column.children.body" :data="editingRowData"  
              :tableCellEditor="true"  :disabled="disabled"  :readonly="readonly" 
              @update-editing-cell-class="onUpdateEditingCellClass"  @update:modelValue="onUpdateModelValue"></component>
    </td>
    <td
        v-else
        :style="containerStyle"
        :class="containerClass"
        :colspan="columnProp('colspan')"
        :rowspan="columnProp('rowspan')"
        @click="onClick"
        @keydown="onKeyDown"
        role="cell"
        v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }"
        :data-p-selection-column="columnProp('selectionMode') != null"
        :data-p-editable-column="isEditable()"
        :data-p-cell-editing="d_editing"
        :data-p-frozen-column="columnProp('frozen')"
        :data-field="column.props.field" 
    >
        <component
            v-if="column.children && column.children.body && !d_editing"
            :is="column.children.body"
            :data="rowData"
            :column="column"
            :field="field"
            :index="rowIndex"
            :frozenRow="frozenRow"
            :editorInitCallback="editorInitCallback"
            :rowTogglerCallback="toggleRow"
            :tableCellEditor="true"
            :align="column.props.align"
            :verticalAlign="column.props.verticalAlign"
            :disabled="disabled"
            :readonly="readonly"
            @update-editing-cell-class="onUpdateEditingCellClass"
            @update:modelValue="onUpdateModelValue"
        />
        <!--支持按编辑控件类型来设置编辑对象-->
        <component
            v-else-if="showEditor"
            :is="column.props.editor"
            v-model ="editingRowData[field]"
            v-bind="column.props.editorProps"
            :field="field"
            :index="rowIndex"
            :tableCellEditor="true"
            :align="column.props.align"
            :verticalAlign="column.props.verticalAlign"
            :disabled="disabled"
            :readonly="readonly"
            @update-editing-cell-class="onUpdateEditingCellClass"
            @update:modelValue="onUpdateModelValue"
        />
        <component
            v-else-if="column.children && column.children.editor && d_editing"
            :is="column.children.editor"
            :data="rowData"
            :column="column"
            :field="field"
            :index="rowIndex"
            :tableCellEditor="true"
            :align="column.props.align"
            :verticalAlign="column.props.verticalAlign"
            :disabled="disabled"
            :readonly="readonly"
            :editorSaveCallback="editorSaveCallback"
            :editorCancelCallback="editorCancelCallback"
            @update-editing-cell-class="onUpdateEditingCellClass"
            @update:modelValue="onUpdateModelValue"
        />
        <component v-else-if="column.children && column.children.body && !column.children.editor && d_editing" :is="column.children.body"
             :column="column" :field="field" :index="rowIndex"  :tableCellEditor="true"  :align="column.props.align" :verticalAlign="column.props.verticalAlign"
              :disabled="disabled" :readonly="readonly" />
        <template v-else-if="columnProp('selectionMode')">
            <DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" :column="column" :index="index" :unstyled="unstyled" :pt="pt" />
            <DTCheckbox
                v-else-if="columnProp('selectionMode') === 'multiple'"
                :value="rowData"
                :checked="selected"
                :rowCheckboxIconTemplate="column.children && column.children.rowcheckboxicon"
                :aria-selected="selected ? true : undefined"
                @change="toggleRowWithCheckbox($event, rowIndex)"
                :column="column"
                :index="index"
                :unstyled="unstyled"
                :pt="pt"
            />
        </template>
        <template v-else-if="columnProp('rowNumber')">
           <span>{{  rowIndex + 1 }}</span>
        </template>
        <template v-else-if="columnProp('rowReorder')">
            <component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('rowReorderIcon')" />
            <i v-else-if="columnProp('rowReorderIcon')" :class="[cx('rowReorderIcon'), columnProp('rowReorderIcon')]" v-bind="getColumnPT('rowReorderIcon')" />
            <BarsIcon v-else :class="cx('rowReorderIcon')" v-bind="getColumnPT('rowReorderIcon')" />
        </template>
        <template v-else-if="columnProp('expander')">
            <button
                v-ripple
                :class="cx('rowToggler')"
                type="button"
                :aria-expanded="isRowExpanded"
                :aria-controls="ariaControls"
                :aria-label="expandButtonAriaLabel"
                @click="toggleRow"
                v-bind="getColumnPT('rowToggler')"
                data-pc-group-section="rowactionbutton"
            >
                <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :class="cx('rowTogglerIcon')" :rowExpanded="isRowExpanded" />
                <template v-else>
                    <span v-if="isRowExpanded && expandedRowIcon" :class="[cx('rowTogglerIcon'), expandedRowIcon]" />
                    <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
                    <span v-else-if="!isRowExpanded && collapsedRowIcon" :class="[cx('rowTogglerIcon'), collapsedRowIcon]" />
                    <ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
                </template>
            </button>
        </template>
        <template v-else>{{ resolveFieldData() }}</template>
    </td>
</template>

<script>
import BaseComponent from 'primevue/basecomponent';
import BarsIcon from 'primevue/icons/bars';
import CheckIcon from 'primevue/icons/check';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import PencilIcon from 'primevue/icons/pencil';
import TimesIcon from 'primevue/icons/times';
import OverlayEventBus from 'primevue/overlayeventbus';
import Ripple from 'primevue/ripple';
import { DomHandler, ObjectUtils,RowStatus } from 'primevue/utils';
import { NumberFormat,DateTimeFormat } from '../utils/NumberFormat';
import { mergeProps } from 'vue';
import RowCheckbox from './RowCheckbox.vue';
import RowRadioButton from './RowRadioButton.vue';

export default {
    name: 'BodyCell',
    hostName: 'DataTable',
    extends: BaseComponent,
    emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
    props: {
        rowData: {
            type: Object,
            default: null
        },
        column: {
            type: Object,
            default: null
        },
        frozenRow: {
            type: Boolean,
            default: false
        },
        rowIndex: {
            type: Number,
            default: null
        },
        index: {
            type: Number,
            default: null
        },
        isRowExpanded: {
            type: Boolean,
            default: false
        },
        selected: {
            type: Boolean,
            default: false
        },
        editing: {
            type: Boolean,
            default: false
        },
        editingMeta: {
            type: Object,
            default: null
        },
        ariaControls: {
            type: String,
            default: null
        },
        name: {
            type: String,
            default: null
        },
        expandedRowIcon: {
            type: String,
            default: null
        },
        collapsedRowIcon: {
            type: String,
            default: null
        },
    },
    documentEditListener: null,
    selfClick: false,
    overlayEventListener: null,
    data() {
        return {
            d_editing: this.editing,
            d_edingCellClass:null,
            styleObject: {}
        };
    },
    watch: {
        editing(newValue) {
            this.d_editing = newValue;
        },

        // '$data.d_editing': function (newValue) {
        //     this.$emit('editing-meta-change', { data: this.rowData, field: this.field || `field_${this.index}`, index: this.rowIndex, editing: newValue });
        // }
    },
    mounted() {
        if (this.columnProp('frozen')) {
            this.updateStickyPosition();
        }
    },
    updated() {
        if (this.columnProp('frozen')) {
            this.updateStickyPosition();
        }

        if (this.d_editing ) {
            setTimeout(() => {
                const focusableEl = DomHandler.getFirstFocusableElement(this.$el);
                focusableEl && focusableEl.focus();
            }, 10);
        }
    },
    beforeUnmount() {
        if (this.overlayEventListener) {
            OverlayEventBus.off('overlay-click', this.overlayEventListener);
            this.overlayEventListener = null;
        }
    },
    methods: {
        columnProp(prop) {
            return ObjectUtils.getVNodeProp(this.column, prop);
        },
        getColumnPT(key) {
            const columnMetaData = {
                props: this.column.props,
                parent: {
                    instance: this,
                    props: this.$props,
                    state: this.$data
                },
                context: {
                    index: this.index,
                    size: this.$parentInstance?.$parentInstance?.size,
                    showGridlines: this.$parentInstance?.$parentInstance?.showGridlines
                }
            };

            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
        },
        getColumnProp() {
            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
        },
        resolveFieldData() {

            let value = ObjectUtils.resolveFieldData(this.rowData, this.field);
            if(value ===null || value ===undefined || value==='' )
               return ( this.index ===0 ) ?' ' : '';   //如果第一个输入的单元内容为空，则输出空格，否则新增的行如果全部字段的值都为NULL，行的显示高度有问题
        
            //如果列的编辑格式是下接控件或设置了代码表
            if( this.column.props["codeTable"] || (this.column.props["editor"]==="Dropdown" && this.column.props["editorProps"]) ){
                 const editorProps= this.column.props["editorProps"] || {};
                 const options= ( editorProps.options || this.column.props["codeTable"] ) || [];

                 if(options && options.length){
                     let {optionLabel='value', optionValue='code'} = editorProps;
                     return this.getOptionLabel( value, options,optionValue,optionLabel );
                 }
            }

            let format= this.numberFormat;
            if(format){
                if(typeof format==='function'){
                    return format(value);
                }
                else if(( value instanceof Date )|| 
                   ( (( typeof value)==="string" ) && ((new Date(value)) instanceof Date )) ) {
                    return DateTimeFormat(value,format);
                }
                return NumberFormat(value,format);
            }
            return value ;
        },

        toggleRow(event) {
            this.$emit('row-toggle', {
                originalEvent: event,
                data: this.rowData
            });
        },
        toggleRowWithRadio(event, index) {
            this.$emit('radio-change', { originalEvent: event.originalEvent, index: index, data: event.data });
        },
        toggleRowWithCheckbox(event, index) {
            this.$emit('checkbox-change', { originalEvent: event.originalEvent, index: index, data: event.data });
        },
        isEditable() {
            const dataTable=this.$parentInstance;
            if(this.readonly  || this.disabled  || ( dataTable && ( dataTable.disabled || dataTable.readonly)) )
                return false;

            const editor= ( this.column.props && this.column.props["editor"] )  || '';
            return editor!=='' ||  ( this.column.children && this.column.children.editor != null);
        },

        bindDocumentEditListener() {
            if (!this.documentEditListener) {
                this.documentEditListener = (event) => {
                    if (!this.selfClick) {
                        this.completeEdit(event, 'outside');
                    }

                    this.selfClick = false;
                };
                document.addEventListener('click', this.documentEditListener);
            }
        },
        unbindDocumentEditListener() {
            if (this.documentEditListener) {
                document.removeEventListener('click', this.documentEditListener);
                this.documentEditListener = null;
                this.selfClick = false;
            }
        },
        switchCellToViewMode() {
            this.d_editing = false;
            this.unbindDocumentEditListener();
            OverlayEventBus.off('overlay-click', this.overlayEventListener);
            this.overlayEventListener = null;
        },
        onClick(event) {
            if (this.isEditable()) {
                this.selfClick = true;

                if (!this.d_editing) {
                    this.d_editing = true;
                    this.bindDocumentEditListener();
                    this.$emit('cell-edit-init', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });

                    this.overlayEventListener = (e) => {
                        if (this.$el && this.$el.contains(e.target)) {
                            this.selfClick = true;
                        }
                    };

                    OverlayEventBus.on('overlay-click', this.overlayEventListener);
                }
            }
        },
        onUpdateModelValue(){
            const itemChangeEvent ={
                rowData: this.rowData,
                index: this.rowIndex,
                field: this.field,
                value:this.rowData[this.field],
            }
            this.$emit('item-change', itemChangeEvent);
        },
        completeEdit(event, type) {
            const completeEvent = {
                originalEvent: event,
                rowData: this.rowData,
                index: this.rowIndex,
                field: this.field,
                value:this.rowData[this.field],
                type: type,
                defaultPrevented: false,
                preventDefault: function () {
                    this.defaultPrevented = true;
                }
            };
            this.$emit('cell-edit-complete', completeEvent);

            if ( type==='outside' || !completeEvent.defaultPrevented) {
                let moveToNewCell = true;
                if(type==='tab'|| ( type==='enter' && !this.enterToNextRow) ){
                    if (event.shiftKey){
                        moveToNewCell=this.moveToPreviousCell(event);
                    }
                     else {
                        moveToNewCell = this.moveToNextCell(event);
                     }
                }
                else if(type==='arrowDown' || (  type==='enter' && this.enterToNextRow) ){
                    moveToNewCell= this.moveToNextRow(event, this.field);
                }
                else if( type==='arrowUp'){
                    moveToNewCell=   this.moveToPreviousRow(event, this.field);
                }
                 moveToNewCell &&  this.switchCellToViewMode();
            }
            else{
                if(type!=='outside'){
                    event.preventDefault();
                    event.stopPropagation();
                }
            }
        },
        onKeyDown(event) {
            if (this.isEditable()) {

                switch (event.code) {
                    case 'ArrowUp':
                        this.completeEdit(event, 'arrowUp');
                        break;

                    case 'ArrowDown':
                         this.completeEdit(event, 'arrowDown');    
                         break;

                    case 'Enter':
                    case 'NumpadEnter':
                        this.completeEdit(event, 'enter');
                        break;

                    case 'Escape':
                        this.switchCellToViewMode();
                        this.$emit('cell-edit-cancel', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });
                         break;

                    case 'Tab':
                        this.completeEdit(event, 'tab');
                        break;

                    default:
                        break;
                }
            }
        },
        moveToPreviousCell(event) {
            event.preventDefault();
            event.stopPropagation();

            let result=false;
            let currentCell = this.findCell(event.target);
            let targetCell = this.findPreviousEditableColumn(currentCell);

            if (targetCell) {
                DomHandler.invokeElementMethod(targetCell, 'click');
                result =true;
            }
            return result;
        },
        moveToNextCell(event) {
            event.preventDefault();
            event.stopPropagation();

            let result=false;
            let currentCell = this.findCell(event.target);
            let targetCell = this.findNextEditableColumn(currentCell);

            if (targetCell) {
                DomHandler.invokeElementMethod(targetCell, 'click');
                result =true;
            }
            return result;
        },
        findCell(element) {
            if (element) {
                let cell = element;

                // while (cell && !DomHandler.getAttribute(cell, 'data-p-cell-editing')) {
                //     cell = cell.parentElement;
                // }

                while (cell && !DomHandler.hasClass(cell, 'p-cell-editing')) {
                    cell = cell.parentElement;
                }
                return cell;
            } else {
                return null;
            }
        },
        findPreviousEditableColumn(cell) {
            // let prevCell = cell?.previousElementSibling;

            // if (!prevCell) {
            //     let previousRow = cell?.parentElement.previousElementSibling;

            //     if (previousRow) {
            //         prevCell = previousRow.lastElementChild;
            //     } else return null;
            // } else {
            //     if (DomHandler.getAttribute(prevCell, 'data-p-editable-column')) return prevCell;
            //     else return this.findPreviousEditableColumn(prevCell);
            // }

            let prevCell = cell.previousElementSibling;
            if (!prevCell) {
                let previousRow = cell.parentElement.previousElementSibling;

                if (previousRow) {
                    prevCell = previousRow.lastElementChild;
                }
            }

            if (prevCell) {
                if (DomHandler.hasClass(prevCell, 'p-editable-column')) return prevCell;
                else return this.findPreviousEditableColumn(prevCell);
            } else {
                return null;
            }
        },
        findNextEditableColumn(cell) {
            /*
            let nextCell = cell?.nextElementSibling;

            if (!nextCell) {
                let nextRow = cell?.parentElement.nextElementSibling;

                if (nextRow) {
                    nextCell = nextRow.firstElementChild;
                } else return null;
            } else {
                if (DomHandler.getAttribute(nextCell, 'data-p-editable-column')) return nextCell;
                else return this.findNextEditableColumn(nextCell);
            }
            */

            let nextCell = cell.nextElementSibling;

            if (!nextCell) {
                let nextRow = cell.parentElement.nextElementSibling;

                if (nextRow) {
                    nextCell = nextRow.firstElementChild;
                }
            }

            if (nextCell) {
                if (DomHandler.hasClass(nextCell, 'p-editable-column')) return nextCell;
                else return this.findNextEditableColumn(nextCell);
            } else {
                return null;
            }
        },
        isEditingCellValid() {
            return DomHandler.find(this.$el, '.p-invalid').length === 0;
        },

        editorInitCallback(event) {
            this.$emit('row-edit-init', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
        },
        editorSaveCallback(event) {
            if (this.editMode === 'row') {
                this.$emit('row-edit-save', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
            } else {
                this.completeEdit(event, 'enter');
            }
        },
        editorCancelCallback(event) {
            if (this.editMode === 'row') {
                this.$emit('row-edit-cancel', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
            } else {
                this.switchCellToViewMode();
                this.$emit('cell-edit-cancel', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });
            }
        },
        updateStickyPosition() {
            if (this.columnProp('frozen')) {
                let align = this.columnProp('alignFrozen');

                if (align === 'right') {
                    let right = 0;
                    let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');

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

                    this.styleObject.right = right + 'px';
                } else {
                    let left = 0;
                    let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');

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

                    this.styleObject.left = left + 'px';
                }
            }
        },
        getOptionLabel( value, options,optionValue,optionLabel ){
            if(options.length<=0)
                return value;

            let option=options[0];
            if(!optionLabel && option.hasOwnProperty("name")){
                optionLabel ="name";
            }
            else if(!optionLabel && option.hasOwnProperty("label")){
                optionLabel ="label";
            }
            else if(!optionLabel && option.hasOwnProperty("value")){
                optionLabel ="value";
            }

            if(!optionValue && option.hasOwnProperty("code")){
                optionValue ="code";
            }
            else if(!optionValue && option.hasOwnProperty("id")){
                optionValue ="id";
            }
            else if(!optionValue && option.hasOwnProperty("guid")){
                optionValue ="guid";
            }
            else if(!optionValue && option.hasOwnProperty("value")){
                optionValue ="value";
            }

            option= options.find((item)=> item[optionValue] === value);
            return (option)? option[optionLabel] : value;
       },
        getRowElememnt(element){

            if (element.nodeName === 'TR') {
                return element;
            } else {
                let parent = element.parentElement;

                while (parent.nodeName !== 'TR') {
                    parent = parent.parentElement;
                    if (!parent) break;
                }
                return parent;
            }
       },

       moveToPreviousRow(event, field) {
            event.preventDefault();
            event.stopPropagation();

            let result=false;
            const row = this.getRowElememnt(event.target);
            const preRow = row && row.previousElementSibling ;
            const targetCell= preRow && preRow.querySelector(`[data-field=${field}`);

            if (targetCell) {
                DomHandler.invokeElementMethod(targetCell, 'click');
                result =true;
            }
            return result;
        },

        moveToNextRow(event,field) {
            event.preventDefault();
            event.stopPropagation();

            let result=false;
            const row = this.getRowElememnt(event.target);
            const preRow =row && row.nextElementSibling ;
            const targetCell= preRow && preRow.querySelector(`[data-field=${field}`);

            if (targetCell) {
                DomHandler.invokeElementMethod(targetCell, 'click');
                result =true;
            }
            return result;
        },
        onUpdateEditingCellClass(val){
            this.d_edingCellClass = val || 'p-cell-editing-border';
        },
    },
    computed: {
        editingRowData() {
            return this.rowData;
        },
        field() {
            return this.columnProp('field');
        },
        containerClass() {
             //增加列的对齐方式的设置
            const editor= (this.column.props && this.column.props["editor"] ) || '';
            const align= (this.columnProp('align') || '' ).toLowerCase();
            const alignClass= (align==='') ? null : ( (editor==='InputSwitch')?'justify-content-'+ align: 'text-'+align);
            const edingClass =( this.d_editing) ? this.d_edingCellClass : null;
            const vAlign= (this.columnProp('verticalAlign') || '' ).toLowerCase();
            const vAlignClass= (vAlign==='') ? null : 'vertical-align-'+vAlign;

            return [
                alignClass,
                vAlignClass,
                edingClass,
                this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];
        },
        containerStyle() {
             //增加列宽度的设置
             let width =  this.columnProp('width') || '';
            let widthStyle =(width==='') ? null : { width }  ;

            let bodyStyle = this.columnProp('bodyStyle');
            let columnStyle = this.columnProp('style');

            //设置的格式是一个函数，则把当前行的值传给函数计算，返回相应的格式
            if( (typeof bodyStyle)==='function')
                bodyStyle = bodyStyle(this.rowData,this.field);

            return this.columnProp('frozen') ? [ widthStyle,columnStyle, bodyStyle, this.styleObject] : [widthStyle, columnStyle, bodyStyle];
        },
        expandButtonAriaLabel() {
            return this.$primevue.config.locale.aria ? (this.isRowExpanded ? this.$primevue.config.locale.aria.expandRow : this.$primevue.config.locale.aria.collapseRow) : undefined;
        },
        initButtonAriaLabel() {
            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.editRow : undefined;
        },
        saveButtonAriaLabel() {
            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.saveEdit : undefined;
        },
        cancelButtonAriaLabel() {
            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.cancelEdit : undefined;
        },
        showEditor(){
            const editor= (this.column.props && this.column.props["editor"] ) || '';
            return (editor!=='' && ((!this.readonly && !this.disabled && this.d_editing )  || editor==='Checkbox' || editor==='RadioButton' ||
                    editor==='InputSwitch'  || editor==='Chip' || editor==='Slider')) ? true:false;
        },
        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
        },

        enterToNextRow(){
            const dataTable =this.$parentInstance;
            return (dataTable && dataTable.enterToNextRow)? true :false;
        },
        disabled(){
            const dataTable =this.$parentInstance;
            if(!dataTable || !this.rowData ||! this.column)
                return false;

            if(dataTable.disabled)
                return true;

            const propValue = this.columnProp("disabled") ;
            if(propValue===null || propValue===undefined || propValue==='' )
                return false;
            else if( ( typeof propValue) ==='boolean')
                return propValue;
            else if( ( typeof propValue)==='function'){
               return  propValue( this.rowData, this.columnProp("field"));
            }
            else if(propValue==='notnew'){
                const status=this.rowData['rowStatus'];
                return  ( status ===RowStatus.New || status===RowStatus.NewModified)? false : true;
            }
            return  (propValue==='1'  ) ? true: false;
        },  

        readonly(){
             const dataTable =this.$parentInstance;
            if(!dataTable || !this.rowData ||! this.column)
                return false;

            if(dataTable.readonly)
                return true;

            const propValue = this.columnProp("readonly") ;
            if(propValue===null || propValue===undefined || propValue==='' )
                return false;
            else if( ( typeof propValue) ==='boolean')
                return propValue;
            else if( ( typeof propValue)==='function'){
               return  propValue( this.rowData, this.columnProp("field"));
            }
            else if(propValue==='notnew'){
                const status=this.rowData['rowStatus'];
                return  ( status ===RowStatus.New || status===RowStatus.NewModified)? false : true;
            }
            return  (propValue==='1'  ) ? true: false;
        },  
    },
    components: {
        DTRadioButton: RowRadioButton,
        DTCheckbox: RowCheckbox,
        ChevronDownIcon: ChevronDownIcon,
        ChevronRightIcon: ChevronRightIcon,
        BarsIcon: BarsIcon,
        PencilIcon: PencilIcon,
        CheckIcon: CheckIcon,
        TimesIcon: TimesIcon
    },
    directives: {
        ripple: Ripple
    }
};
</script>
