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

<script lang="ts">
/**
 * プロパティ属性設定生成する
 */
import { PropType, defineComponent,ref } 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 AppFieldSelect from './AppFieldSelect.vue';
import MuiltInputText from '../right/MuiltInputText.vue';
import ConditionInput from '../right/ConditionInput.vue';
import EventSetter from '../right/EventSetter.vue';
import ColorPicker from './ColorPicker.vue';
import NumInput from './NumInput.vue';
import DataProcessing from './DataProcessing.vue';
import DataMapping from './DataMapping.vue';
import AppSelect from './AppSelect.vue';
import CascadingDropDown from './CascadingDropDown.vue';
import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';

export default defineComponent({
  name: 'PropertyList',
  components: {
    InputText,
    SelectBox,
    DatePicker,
    FieldInput,
    AppFieldSelect,
    MuiltInputText,
    ConditionInput,
    EventSetter,
    ColorPicker,
    NumInput,
    DataProcessing,
    DataMapping,
    AppSelect,
    CascadingDropDown
  },
  props: {
    nodeProps: {
      type: Object as PropType<Array<IActionProperty>>,
      required: true,
    },
    jsonValue:{
      type: Object,
      required: false,
    }
  },
  setup(props, context) {
    const properties=ref(props.nodeProps);
    const connectProps=(props:IProp)=>{
       const connProps:any={context:properties};
       if(props && 'connectProps' in props && props.connectProps!=undefined){
          for(let connProp of props.connectProps){
            let targetProp = properties.value.find((prop)=>prop.props.name===connProp.propName);
            if(targetProp){
              connProps[connProp.key]=targetProp;
            }
          }
       }
       return connProps;
    }
    return {
      properties,
      connectProps
    }
  }
});
</script>
<style lang="scss">
</style>
