<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',
     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 
         }

     },

     inject:{
         formContext: "Form" 
     },

     provide(){
        return {
            "FormItem": computed(()=>{
                return { ...this.$props}
            })
        }
     },

     data() {
         return {
             
         };
     },

     methods: {
        onUpdateModelValue(value){
           if(this.formContext)
                this.formContext.onItemChange({ rowData: this.formContext.primaryData , field:this.field , value})
         },
     },
     
     computed:{
        primaryData(){
            const data= (this.formContext) ? this.formContext.primaryData  : null;
            
            return (data ) ? 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.formContext && this.formContext.labelWidth)? this.formContext.labelWidth: null) ;

            if(!width)
                return null;

            return [ `width: ${width}` ];
      
        },

        isDisabled(){
            if(this.formContext && (this.formContext.disabled || !this.formContext.primaryData) )
                return true;

           const primaryData =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' &&  primaryData )
                return this.disabled(primaryData, this.field );
            else if(this.disabled ==='notnew' && primaryData){
                const status=primaryData['rowStatus'];

                return ( status ===RowStatus.New || status===RowStatus.NewModified)? false : true;
            }
           
           return  ( this.disabled==='1'  ) ? true: false;
        },

        isReadonly(){
            if(this.formContext && this.formContext.readonly)
                return true;

            const primaryData =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' && primaryData)
                return this.readonly(primaryData, this.field);
            else if(this.readonly==='notnew' && primaryData ){
                const status=primaryData['rowStatus'];

                return ( status ===RowStatus.New || status===RowStatus.NewModified)? false : true;
            }
           
           return  ( this.readonly==='1'  ) ? true: false;
        }
     },
    
 };
 </script>
 
 <style>
 
 </style>
 