<template>
  <div class="mod-form-detail">
    <form-show
      :label-position="labelPosition"
      :label-suffix="labelSuffix"
      :background-color="backgroundColor"
    >
      <form-detail-item
        v-for="(field, index) in formData"
        :key="index"
        :item="field"
      />
    </form-show>
  </div>
</template>

<script>
import FormDetailItem from './form-detail-item'
import { detailDataConverter } from './../utils'

export default {
  name: 'FormDetail',
  components: {
    FormDetailItem
  },
  props: {
    backgroundColor: {
      type: String,
      default () {
        return ''
      }
    },
    soId: {
      type: String,
      default () {
        return ''
      }
    },
    isHistory: {
      type: Boolean,
      default () {
        return false
      }
    },
    labelPosition: {
      type: String,
      default: () => 'right'
    },
    labelSuffix: {
      type: String,
      default: () => '：'
    }
  },
  data () {
    return {
      formData: []
    }
  },
  methods: {
    init (data) {
      this.formData = detailDataConverter(data)
    }
  }
}
</script>
