<template>
  <div v-bind:style="formatStyle">
    <div style="text-align:center" v-if="configs.title !== undefined && typeof(configs.title) !== 'object'">
      <h5>{{configs.title}}</h5>
    </div>
    <div v-else-if="configs.title !== undefined">
      <div style="text-align:center" v-for="(title,index) in configs.title"> 
        <h5>{{title}}</h5>
      </div>
    </div>
    <div v-for="(item,index) in configs.items">
      <div class="layout-padding">
        <div v-if="item.title !== undefined && typeof(item.title) !== 'object'">
          {{item.title}}
        </div>
        <div v-else-if="item.title !== undefined">
          <div v-for="(title,index) in item.title"> 
            {{title}}
          </div>
        </div>
        <s-fieldGenerate :reference="item.reference" :model="model[index]" :fields="item.fields" :showLabel="item.showLabel" :fieldIcon="item.icon"
          :colspan="configs.colspan" @search="search" @selected="selected"></s-fieldGenerate>
        <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" v-if="item.instructions !== undefined && typeof(item.instructions) !== 'object'">
          {{item.instructions}}
        </div>
        <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" v-else-if="item.instructions !== undefined">
          <div v-for="(instruction,index) in item.instructions">
            {{instruction}}
          </div>
        </div>
      </div>
      <hr v-if="configs.divideLine">
    </div>
    <div v-if="configs.footer !== undefined && typeof(configs.footer) !== 'object'">
      {{configs.footer}}
    </div>
    <div v-else-if="configs.footer !== undefined">
      <div v-for="(footer,index) in configs.footer"> 
        {{footer}}
      </div>
    </div>
    <div v-for="(action,index) in configs.actions" style="float:right">
      <buttonExpand :handler="action.handler" :classes="action.classes" :styles="action.style" :type="action.type"></buttonExpand>
    </div>
  </div>
</template>

<script>
import buttonExpand from './buttonExpand.vue'

export default {
  name: 's-formPanel',
  props: {
    model: {
      type: Array,
      default: []
    },
    configs: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      input: {}
    }
  },
  created () {
    // console.log(this.model)
  },
  computed: {
    formatStyle () {
      // var height = 500
      var bodyStyle = 'solid'
      var bodyPadding = 20
      var bodyBorderWidth = 0
      var scrollable = 'auto'
      var bodyBackColor = ''
      // var width = 300
      var returnValue = ''

      if (this.configs.bodyPadding !== undefined) {
        bodyPadding = this.configs.bodyPadding + `px`
      }
      if (this.configs.bodyStyle !== undefined) {
        bodyStyle = this.configs.bodyStyle
      }
      if (this.configs.bodyBorderWidth !== undefined) {
        bodyBorderWidth = this.configs.bodyBorderWidth + `px`
      }
      if (this.configs.bodyBackColor !== undefined) {
        bodyBackColor = this.configs.bodyBackColor
      }
      if (this.configs.scrollable !== undefined) {
        if (this.configs.scrollable === 'y') {
          scrollable = 'auto'
        }
        else {
          scrollable = 'none'
        }
      }

      returnValue = {
        'overflow-y': scrollable,
        padding: bodyPadding,
        'border-size': '1px',
        'border-width': bodyBorderWidth,
        'border-color': 'black',
        'border-style': bodyStyle,
        'background-color': bodyBackColor
      }
      return returnValue
    }
  },
  methods: {
    search (terms, done, id, reference) {
      this.$emit('search', terms, done, id, reference, () => {
      })
    },
    selected (item) {
      this.$emit('selected', item, this.model, () => {
      })
    }
  },
  components: {
    buttonExpand
  },
  watch: {
    configs: {
      handler: function (val, oldVal) {
      },
      deep: true
    }
  }
}
</script>
