<template>
  <div class="template-detail">
     <div v-if="Array.isArray(detailInformation)">
        <component       
          v-for="(item) in detailInformation" 
          :key="item.id"
          :value.sync="item.data.value"
          :is="getComponent(item.type)"
          :proofSubItem="item">
          <!--v-model="item.data.value"-->
        </component>
     </div>
     <component 
      v-else-if="detailInformation.type === 3"
      :is="getComponent(detailInformation.type)"
      :proofSubItem="detailInformation"
     >
     </component>
     <component v-else
          :value.sync="detailInformation.data.value"
          :is="getComponent(detailInformation.type)"
          :proofSubItem="detailInformation">
    </component>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Field } from 'vant';
import Types from '@/components/template/index';
@Component({
  components: {
    [Field.name]: Field,
  },
})
export default class TemplateDetail extends Vue {
  @Prop({
    required: true,
  })
  private detailInformation: any;
  private readonly typeComponent: any = Types;
  private getComponent(type: number) {
    return this.typeComponent[type];
  }
}
</script>
