<template>
<el-row  v-bind="options" :gutter="12" class="row-box">
  <el-col v-for="(column, i) in columns" :key="i" v-bind="column">
    <template  v-for="row in column.controls">
      <form-control :key="row.key" :def="row" v-if="exists(row, rowForm)"></form-control>
    </template>
  </el-col>
</el-row>
</template>

<script lang="ts">

import { Vue, Component, Prop, Ref, Inject } from 'vue-property-decorator'
import { GridDef, GridOptions, GridColumn } from '../../type'

@Component({
  components: {
    'form-control': () => import('../index.vue')
  }
})
export default class GridControl extends Vue {
  @Prop() def!: GridDef

  @Inject() exists!: (row: any, rowForm?: Record<string, any>) => boolean

  @Inject({ default: () => () => null }) getRowForm!: () => Record<string, any>

  get rowForm () {
    return this.getRowForm()
  }

  get columns (): GridColumn[] {
    return this.def?.columns || []
  }

  get options (): GridOptions {
    return Object.assign(new GridOptions(), this.def?.options || {})
  }
}
</script>
<style lang="css" scoped>
.row-box {
  display: flex;
  flex-wrap: wrap;
}
</style>
