<template>
    <div  :style="containerStyle" :class="containerClass"  :data-field="field" >
        <slot  name="label" >
              <label v-if="showLabel"  :class="labelClass" :style="labelWidthStyle">{{ label  }}</label>
         </slot>
         <slot :primaryData="primaryData"  :field="field"  :disabled="isDisabled"  :readonly="isReadonly"   @update:modelValue="onUpdateModelValue"  >
            <component v-if="field && editor" :is="editor" 
                v-model="primaryData[field]" 
                :class="[className, { 'form-item-content': editor!=='InputSwitch' } ]" 
                v-bind="$attrs" 
                :align="align" 
                :label="label"  
                :disabled="isDisabled"
                :readonly="isReadonly"  
                @update:modelValue="onUpdateModelValue"
                >
            </component>
            
         </slot>
       
         <slot name="suffix">
             <span v-if="suffix" class="form-item-suffix" >{{ suffix  }}</span>
         </slot>
    </div>
 </template>
 
 <script>
  import { computed } from 'vue';
  import { RowStatus } from 'primevue/utils';
  export default {
     name: 'FormItem',
     inject: {
        $parentInstance: {
            default: null
        }
    },
     props: {
        editor:{
             type:String,
             default:null
          },

         field:{
            type:String,
            default:null
         },

         colType:{
            type:String,
            default: null
         },

         initial:{
            type:null,
            default: null
         },

         label:{
            type:String,
            default:''
         },

         labelWidth: {
             type: [String, Number],
             default: null,
         },
         suffix:
         {
            type:String,
            default: ''
         },

         required:{
             type:Boolean,
             default:false
         },

         disabled:{
             type:[Boolean,String,Function],
             default:null
         },

         readonly:{
             type:[Boolean,String,Function],
             default:null
         },

         error: {
             type: String,
             default: '',
         },

        align:{
            type:String,
            default:null
        },

         className:{
            type:String,
            default:null
         },
         style: {
            type: null,
            default: null
        },

         cols:{
            type: [Number,String] ,
            default:0 
         },

         offset:{
            type: [Number,String],
            default:0 
         }
     },
     data() {
         return { }
     },

     methods: {
        onUpdateModelValue(value){
            this.$parentInstance && this.$parentInstance.onItemChange({ rowData: this.$parentInstance.primaryData , field:this.field , value});
        }
      },
     computed:{
        primaryData(){
            const data= this.$parentInstance && this.$parentInstance.primaryData;
            return data || {};
        },

        containerClass() {
            const colClass = (this.cols>0 ) ?'col-'+this.cols : null;
            const offsetClass= (this.offset>0 ) ?'col-offset-'+this.offset : null;

            return [colClass,offsetClass,'form-item' ];
        },
        containerStyle(){
           let style = this.style;
            if((typeof style)==='cls'){
               style = bodyStyle(this.primaryData, this.field);
            }
            return style;
        },

        showLabel(){
            const tagName =this.editor;
            return ( !this.label || tagName==='Checkbox' || tagName==='RadioButton' || tagName==='TriStateCheckbox') ? false :true;
        },

        labelClass(){
            return ["form-item-label",
            {
                'required':this.required
            }]
        },

        labelWidthStyle(){
           let width =  this.labelWidth ? this.labelWidth :( this.$parentInstance ? this.$parentInstance.labelWidth: null) ;
           return (width)?[ `width: ${width}` ] : null;
        },

        isDisabled(){
          if(!this.$parentInstance || !this.$parentInstance.primaryData)
              return false; 

           if(this.$parentInstance.disabled)
               return true;

           const data =this.primaryData;
           if(this.disabled===null || this.disabled===undefined || this.disabled==='' )
                return false;

           else if( ( typeof this.disabled) ==='boolean')
               return this.disabled;

            else if( ( typeof this.disabled)==='function' )
                return this.disabled(data, this.field );

            else if(this.disabled ==='notnew' ){
                const status=data['rowStatus'];
                return ( status ===RowStatus.New || status===RowStatus.NewModified)? false : true;
            }
            return  ( this.disabled==='1'  ) ? true: false;
        },

        isReadonly(){
     
           if(!this.$parentInstance || !this.$parentInstance.primaryData || this.$parentInstance.readonly )
                return true;

          const data =this.primaryData;
          if(this.readonly===null || this.readonly===undefined || this.readonly==='' )
                return false;

           else if( ( typeof this.readonly) ==='boolean')
               return this.readonly;

            else if(( typeof this.readonly) ==='function')
                return this.readonly(data, this.field);

            else if(this.readonly==='notnew'){
                const status=data['rowStatus'];
                return ( status ===RowStatus.New || status===RowStatus.NewModified)? false : true;
            }
           
            return  ( this.readonly==='1'  ) ? true: false;
        }
     },
    
 };
 </script>
 
 <style>
 
 </style>
 