<template lang="pug">
.SmartConfForm
  el-row(:gutter="20")
    el-col(:span="3")
      el-table(:data='types' style='width: 100%' border row-class-name="conf-row" @row-click="add")
        el-table-column(prop='title', label='添加配置模块')
    el-col.workbench(:span="17")
      Board(
        v-for="(conf, index) in data"
        :key="index"
        :title="realConfig[conf.type] && realConfig[conf.type].title"
        :style="{paddingBottom: 0}"
        canClose
        @close="close(index)")
        smartForm(v-model="data[index]" :config="(realConfig[conf.type] && realConfig[conf.type].conf) || []")
    el-col.total(:span="3")
        Draggable(v-model='data', @start='drag=true', @end='drag=false')
          .item(
            v-for="(conf, index) in data"
            :key="index")
              i.el-icon-tickets
              span.title {{abstractFilter(data[index])}}
              span.type {{conf.type}}
</template>
<script>
import SmartForm from './smart-form'
import Board from './board'
import Draggable from 'vuedraggable'
import modelMixin from '../utils/model-mixin'

export default {
  name: 'SmartConfForm',
  mixins: [modelMixin],
  components: {
    SmartForm,
    Board,
    Draggable,
  },
  props: {
    value: {
      type: Array,
      required: true,
    },
    config: {
      type: [Object, Function],
      required: true,
    },
    type: {
      type: String,
      default: 'type',
    },
    abstract: {
      type: Function,
    },
  },
  states: [],
  data () {
    return {
      data: [],
    }
  },
  created () {
    this.data = this.value
  },
  computed: {
    types () {
      return Object.entries(this.realConfig).map(([key, value]) => {
        return {
          type: key,
          title: value.title,
        }
      })
    },
    realConfig () {
      return typeof this.config === 'function' ? this.config() : this.config
    },
  },
  mounted () {},
  methods: {
    close (index) {
      this.data.splice(index, 1)
    },
    add ({ type, title }, column, event) {
      let config = this.realConfig[type].conf
      this.data.push({
        ...config.reduce((obj, item) => {
          let text
          switch (item.type) {
            case 'multiForm':
              text = []
              break
            case 'number':
              text = 0
              break
            case 'switch':
              text = item.value
              break
            case 'color':
              text = '#000'
              break
            default:
              text = ''
              break
          }
          obj[item.prop] = text
          return obj
        }, {}),
        type,
      })
    },
    abstractFilter (data) {
      return (this.abstract && this.abstract(data)) || '自定义组件'
    },
  },
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.SmartConfForm {
  box-sizing border-box
  border 1px solid #DCDFE6
  border-radius 4px
}
>>> .conf-row {
  cursor pointer
  border-right 2px solid #DCDFE6
  &:after {
    content '+'
    position relative
    top 8px
    right 30px
    font-size 20px
  }
}
.workbench {
  padding 0 20px
  max-height 800px
  overflow-y scroll
}
.total {
  .item {
    padding 0 10px
    cursor pointer
    position relative
    align-items: center;
    display flex
    &:hover {
      background-color #F7F7F7
    }
  }
  .el-icon-tickets {
    margin-right 5px
  }
  .title {
    flex 1 1 auto
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .type {
    flex 0 0 auto
    color #949494
  }
}
</style>
