<template>
<div id='tableBox'>
<table :border="isHideBorder?1:0"  weight="100%">
  <template v-for="(column,index) in formColumns_">
    <tr :key="index">
      <template v-for="(coolun,index) in column" >
         <th :style="{'width':coolun.columnWidth+'px'}" :rowspan="coolun.rowspan" :colspan="coolun.colspan" :key="index" >
             <asyncFormItemComponent
              :item='coolun'
              :formParms='formParms'
              :jsoneditorOpenAfter='jsoneditorOpenAfter'
              @enterInput='enterInput'
              type='editArea'
              :readonlyStatus='readonlyStatus'
             ></asyncFormItemComponent>
         </th>
      </template>
    </tr>
  </template>
</table>
</div>

</template>
<script>
import asyncFormItemComponent from './dyncFormItemComponent'
export default {
  name: 'dyncFormItemComponentTable',
  components: {
    asyncFormItemComponent
  },
  props: {
    type: {},
    item: {},
    formParms: {},
    jsoneditorOpenAfter: {
      type: Function
    },
    allSourceData: {
      type: Object,
      default() {
        return {}
      }
    },
    config: {

    },
    readonlyStatus: {}
  },
  watch: {
    allSourceData: {
      handler: function(newVal) {
        this.initConfig(newVal)
      },
      deep: true
    },
    formColumns: {
      handler: function(newVal) {
        this.initColumn(newVal)
      },
      deep: true
    }
  },
  data() {
    return {
      isHideBorder: false,
      formColumns_: []
    }
  },
  mounted() {
    this.initConfig(this.allSourceData)
  },
  methods: {
    initConfig(data) {
      const { config } = data
      if (!config || (config && !config.formColumn)) return
      this.formColumns = config.formColumn
      this.initColumn(this.formColumns)
      this.isHideBorder = config.isHideBorder || false
    },
    enterInput(val) {
      this.$emit('enterInput', val)
    },
    initColumn(data) {
      const parm = this.groupFun(data, 'lineNumber')
      const list = []
      for (const key in parm) {
        parm[key].sort(this.compare_)
        list.push(parm[key])
      }
      this.formColumns_ = list
    },
    groupFun(list, prop) {
      var parm = {}
      list.forEach(item => {
        const prop_ = item[prop]
        if (parm[prop_]) {
          parm[prop_].push(item)
        } else {
          parm[prop_] = []
          parm[prop_].push(item)
        }
      })
      return parm
    },
    sortBy(parm) {
      const { item1, item2, prop, way: way_ } = parm
      const way = way_ === 0 ? 0 : 1
      const type = typeof item1
      if (type === 'object') {
        if (way === 1) {
          return Number(item1[prop]) - Number(item2[prop])
        } else {
          return Number(item2[prop]) - Number(item1[prop])
        }
      } else {
        if (way === 1) {
          return Number(item1) - Number(item2)
        } else {
          return Number(item2) - Number(item1)
        }
      }
    },
    compare_(item1, item2) {
      const parm = {
        item1,
        item2,
        prop: 'lineSerialNumber'
      }
      return this.sortBy(parm)
    }
  }
}
</script>
<style scoped>
#tableBox{
  height: 100%;
  width: 100%;
  overflow: auto;
  min-height: 30px;
  /* padding-bottom: 5px; */
}
#tableBox::-webkit-scrollbar
{
    width:5px;
    height:5px;
    background-color:#F5F5F5;
}
/*定义滚动条轨道
 内阴影+圆角*/
#tableBox::-webkit-scrollbar-track
{
    border-radius:10px;
    background-color:#F5F5F5;
}
/*定义滑块
 内阴影+圆角*/
#tableBox::-webkit-scrollbar-thumb
{
    border-radius:10px;
    background-color: #ddd;
}
</style>
