<template>
  <div class="template-detail">
     <div v-if="Array.isArray(detailInformation)">
       <div v-for="(item) in detailInformation" :key="item.id" class="content-wrapper">
         <div class="title-text">
           {{item.label}}
         </div>
        <component       
          :key="item.id"
          :value.sync="item.data.value"
          :is="getComponent(item.type)"
          :proofSubItem="item">
          <!--v-model="item.data.value"-->
        </component>
       </div>
     </div>
     <component
      v-else-if="detailInformation.type === DataType.Unit"
      :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 Types from '@/components/template/index';
import { DataType } from '@/const/enum';
@Component({
  name: 'TemplateDetail',
})
export default class TemplateDetail extends Vue {
  @Prop({
    required: true,
  })
  private detailInformation: any;
  private readonly typeComponent: any = Types;
  private DataType = DataType;
  
  private getComponent(type: DataType) {
    return this.typeComponent[type];
  }
}
</script>

<style scoped lang="scss">
.template-detail{
  .content-wrapper{
    background-color: white;
    padding: 0 17px;
  }
  .title-text{
    text-align: left;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    border-bottom: 1px solid #F0F0F0;
    font-weight: bold;
  }
}
</style>
