<template>
  <div class="aos-form-view">
    <div v-for="item in formTemplate" :key="item.prop" class="aos-form-view__item" :style="{width: item.width}">
      <div class="aos-form-view__item-value">
        <div class="aos-form-view__item-value-dot"></div>
        <template v-if="!item.type || item.type === 'input'">
          <span class="aos-form-view__item-value-text">{{data[item.prop] ? data[item.prop] : '--'}}</span>
        </template>
        <template v-else-if="item.type === 'defdoc'">
          <aos-defdoc
            v-if="data[item.prop]"
            :value="data[item.prop]"
            :editable="false"
            :defCode="item.attrs.defCode"
            :tag="item.attrs.tag"
            :customerUrl="item.attrs.customerUrl"
            :multiple="item.attrs.multiple"
            :no-def-code="item.attrs.noDefCode"
            :orm-code="item.attrs.ormCode"
            :orm-name="item.attrs.ormName"
            :orm-status="item.attrs.ormStatus"
            :orm-data="item.attrs.ormData">
          </aos-defdoc>
          <span v-else class="aos-form-view__item-value-text">--</span>
        </template>
        <template v-else-if="item.type === 'ref'">
          <aos-ref v-if="data[item.prop]" :value="data[item.prop]" :editable="false" :refCode="item.attrs.refCode" :filters="item.attrs.filters" :multiple="item.attrs.multiple"></aos-ref>
          <span v-else class="aos-form-view__item-value-text">--</span>
        </template>
        <template v-else-if="item.type === 'money'">
          <aos-money v-if="data[item.prop]+''" :editable="false" v-model="data[item.prop]" :decimal="(item.attrs && item.attrs.decimal) || 2" :suffixString="item.attrs && item.attrs.suffixString"></aos-money>
          <span v-else class="aos-form-view__item-value-text">--</span>
        </template>
        <template v-else-if="item.type === 'city'">
          <aos-city v-if="data[item.prop]" :templateValue="data" :edit="false" :province="item.attrs && item.attrs.province" :city="item.attrs && item.attrs.city" :county="item.attrs && item.attrs.county" :customerUrl="item.attrs && item.attrs.customerUrl"
            :customerMethod="item.attrs && item.attrs.customerMethod"></aos-city>
          <span v-else class="aos-form-view__item-value-text">--</span>
        </template>
        <template v-else-if="item.type === 'date-picker'">
          <span>{{ data[item.prop] ? ($time.formatTime(data[item.prop], ((item.attrs && item.attrs.format) || ''))) : '--'}}</span>
        </template>
      </div>
      <div class="aos-form-view__item-label">{{item.label}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AosFormView',
  props: {
    formTemplate: {
      type: Array,
      required: true
    },
    data: {
      type: Object,
      required: true
    },
  }
}
</script>

<style>

</style>