<template>
    <el-form class="s-form" v-bind="props" :model="formData">
        <el-collapse v-if="Object.keys(groups).length>0" accordion>
            <el-collapse-item v-for="name in Object.keys(groups)" :key="name" :title="name">
                <template v-for="(item) in groups[key]">
                    <div :key="item._code"
                         :is="'s-'+item.type"
                         :config="item"
                         :item-style="itemStyle"
                         :value="formData[item._code]"
                         @setValue="setValue"></div>
                </template>
            </el-collapse-item>
        </el-collapse>
        <template v-for="(item) in unGroup['undefined']">
            <items :key="item._code"
                   :config="item"
                   :value="formData[item._code]"
                   :item-style="itemStyle"
                   @setValue="setValue"></items>
        </template>
    </el-form>
</template>

<script>
import utils from '../../utils'
import Items from './items'

export default {
  name: 'sForm',
  components: { Items },
  data () {
    return {
      groups: {},
      unGroup: {}
    }
  },
  computed: {
    formData () {
      const formData = {}
      this.form.map(item => {
        if (!item._code) {
          item._code = utils.custom.randomCode(12)
        }
        let itemInitValue = ''
        if (Array.isArray(item.key)) {
          const valArray = []
          item.key.map(k => {
            valArray.push(utils.lodash.get(this.value, k))
          })
          itemInitValue = valArray
        } else {
          itemInitValue = utils.lodash.get(this.value, item.key)
        }
        if (itemInitValue) {
          formData[item._code] = itemInitValue
        }
      })
      return formData
    }
  },
  props: {
    form: Array,
    value: Object,
    itemStyle: Object,
    props: Object
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.initGroup()
    },
    initGroup () {
      const groups = utils.lodash.groupBy(this.form, 'group')
      this.groups = utils.lodash.pick(groups, Object.keys(groups).filter(key => key !== 'undefined'))
      this.unGroup = utils.lodash.pick(groups, Object.keys(groups).filter(key => key === 'undefined'))
    },
    setValue (key, value) {
      const newValue = utils.lodash.cloneDeep(this.value)
      if (Array.isArray(value) && Array.isArray(key)) {
        key.map((k, index) => {
          utils.lodash.set(newValue, k, value[index])
        })
      } else {
        utils.lodash.set(newValue, key, value)
      }
      this.$emit('input', newValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.s-form {
    &.el-form--inline {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .el-form-item {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

            /deep/ .el-form-item__content {
                flex-grow: 1;
            }
        }
    }

    /deep/ .el-form-item--mini {
        .el-form-item__label {
            height: 28px;

            .label {
                height: 28px;
            }
        }
    }

    /deep/ .el-form-item--small {
        .el-form-item__label {
            height: 32px;

            .label {
                height: 32px;
            }
        }
    }

    /deep/ .el-form--label-top .el-form-item__label {
        display: block;
    }

    /deep/ .is-required {
        .required {
            display: inline-block !important;
        }
    }
    /deep/ .el-form-item__label {
        height: 40px;

        &:before {
            display: none;
        }

        .required {
            display: none;
            color: #F56C6C;
            margin-right: 4px;
        }

        .label {
            min-width: 2px;
            display: inline-block;
            height: 40px;
        }
    }
}
</style>
