<template lang="pug">
.smart-multi-form
  el-table(:data="tableData" stripe size="mini" :default-expand-all="true")
    template
      el-table-column(
        v-for="(item, index) in realConfig.normal"
        :key="JSON.stringify(item)"
        :label="item.label")
        template(slot-scope="scope")
          SmartItem(:type="item.type" size="mini" v-model="scope.row[item.prop]" :config="item" :formData="scope.row")
      el-table-column(
        v-if="realConfig.expand.length"
        type="expand"
        label="更多")
        template(slot-scope="scope")
          board.expend(
            v-for="(item, index) in realConfig.expand"
            :key="JSON.stringify(item)"
            :title="item.label")
            SmartItem(
              size="mini"
              :type="item.type"
              v-model="scope.row[item.prop]"
              :config="item"
              :formData="scope.row")
    el-table-column(width="40")
      template(slot-scope="scope" v-if="scope.$index !== tableData.length - 1")
        el-button.close(type="danger" size="mini" icon="el-icon-close" circle @click="close(scope.$index)")
</template>
<script>
import SmartItem from './smart-item'
let clone = require('lodash.clone')

export default {
  name: 'SmartMultiForm',
  components: {
    SmartItem,
  },
  props: {
    value: {
      type: [Array, String],
      required: true,
      default () { return [] },
    },
    config: {
      type: Array,
      required: true,
    },
  },
  data () {
    return {
      tableData: [],
      defaultLine: {},
    }
  },
  watch: {
    tableData: {
      handler (tableData) {
        if (JSON.stringify(this.tableData.slice(0, -1)) !== JSON.stringify(this.value)) {
          this.$emit('input', tableData.slice(0, -1))
        }
        let hasData = tableData.length && JSON.stringify(this.defalutLine) !== JSON.stringify(tableData.slice(-1)[0])
        if (!tableData.length || hasData) {
          this.newLine()
        }
      },
      immediate: true,
      deep: true,
    },
    value: {
      handler (value) {
        if (JSON.stringify(this.tableData.slice(0, -1)) !== JSON.stringify(this.value)) {
          this.tableData = clone(this.value)
        }
      },
      deep: true,
    },
  },
  computed: {
    realConfig () {
      return this.config.reduce((obj, item) => {
        if (/.*form.*/.test(item.type)) {
          obj.expand.push(item)
        } else {
          obj.normal.push(item)
        }
        return obj
      }, { expand: [], normal: [] })
    },
  },
  created () {
    this.defalutLine = this.config.reduce((obj, item) => {
      if (item.type === 'multiform' || (item.type === 'select' && item.multiple)) {
        obj[item.prop] = []
      } else if (item.type === 'form') {
        obj[item.prop] = {}
      } else {
        obj[item.prop] = item.value || ''
      }
      return obj
    }, {})
  },
  mounted () {
    this.tableData = clone(this.value || [])
  },
  methods: {
    newLine () {
      this.tableData.push(clone(this.defalutLine))
    },
    close (index) {
      this.tableData.splice(index, 1)
    },
  },
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.smart-multi-form {
  .close {
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size 12px
    padding 0
    text-align: center;
    cursor pointer
  }
  >>> .el-table__expanded-cell {
    padding 0
  }
  .expend {
    padding: 20px 20px 0;
    width: 99%;
  }
}
</style>
