<template>
  <div>
    <div v-for="(item, index) in componentData" :key="index">
      <component :is="item.component" v-bind="item.props" :connectProps="connectProps" v-model="item.props.modelValue"></component>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,computed } from 'vue';
import InputText from '../right/InputText.vue';
import SelectBox from '../right/SelectBox.vue';
import DatePicker from '../right/DatePicker.vue';
import FieldInput from '../right/FieldInput.vue';
import EventSetter from '../right/EventSetter.vue';
import { IActionProperty, IProp } from 'src/types/ActionTypes';
export default defineComponent({
  name: 'ActionProperty',
  components: {
    InputText,
    SelectBox,
    DatePicker,
    FieldInput,
    EventSetter
  },
  props: {
    jsonData: {
      type: Object,
      required: true,
    },
    jsonValue:{
      type: Object,
      required: false,
    }
  },
  setup(props){
    const componentData=computed<Array<IActionProperty>>(()=>{
      return props.jsonData.elements.map((element: any) => {
        if(props.jsonValue != undefined )
        {
          if(props.jsonValue.hasOwnProperty(element.props.name))
          {
            element.props.modelValue = props.jsonValue[element.props.name];
          }
          else
          {
            element.props.modelValue = '';
          }
        }
        return {
          component: element.component,
          props: element.props,
        };
      });
    });
    const connectProps=(props:IProp)=>{
       const connProps:any={};
       if(props && 'connectProps' in props && props.connectProps!=undefined){
          for(let connProp of props.connectProps){
            let targetProp = componentData.value.find((prop)=>prop.props.name===connProp.propName);
            if(targetProp){
              connProps[connProp.key]=targetProp;
            }
          }
       }
       return connProps;
    }

    return{
        componentData,
        connectProps
    }
  }
});
</script>
