<!--
 * @Description: 
 * @Author: 陈长吉
 * @Date: 2018-10-29 16:30:28
 * @LastEditTime: 2020-09-02 15:14:13
 * @LastEditors: Please set LastEditors
 -->
<template>
  <ElRow class="group" :class="classes" :gutter="gutter">
    <ElCol :span="span" class="group-item" v-for="(item, index) in value" :key="item.key || index">
      <template v-if="simpleLayout">
        <Cellbox class="group-cellbox">
          <CellItem>
            <slot v-if="index < maxItem" v-bind="{ item: item, index: index }"></slot>
          </CellItem>
          <CellItem class="group-actions">
            <ElButton
              icon="el-icon-plus"
              class="btn-icon"
              v-if="index === value.length - 1"
              @click="handleAdd(index)"
              :disabled="disabled || maxItem <= value.length || buttonDisabled"
            ></ElButton>
            <ElButton
              icon="el-icon-minus"
              class="btn-icon"
              v-if="index !== value.length - 1"
              @click="handleRemove(index)"
              :disabled="item.disabled"
            ></ElButton>
          </CellItem>
        </Cellbox>
      </template>
      <template v-else>
        <div if="index < maxItem" class="group-content">
          <slot v-bind="{ item: item, index: index }"></slot>
          <el-button
            icon="el-icon-close"
            class="btn-icon group-remove"
            v-if="value.length > 1"
            @click="handleRemove(index)"
            :disabled="disabled || item.disabled"
          ></el-button>
        </div>
        <div class="tr">
          <ElButton
            icon="el-icon-plus"
            class="btn-icon"
            v-if="index === value.length - 1 && maxItem > 1"
            @click="handleAdd(index)"
            :disabled="disabled || maxItem <= value.length || buttonDisabled"
          ></ElButton>
        </div>
      </template>
    </ElCol>
  </ElRow>
</template>
<script>
// @yunjidoc 功能组件 - 组
export default {
  componentName: 'Group',
  props: {
    /**
     * @prop {Boolean} middle 居中
     */
    value: {
      type: [Array],
      default() {
        return []
      }
    },
    /**
     * @prop {Number} maxItem 最大项目数  默认: 100
     */
    maxItem: {
      // 最大项目数
      type: Number,
      default: 100
    },
    buttonDisabled: {
      type: Boolean,
      default: false
    },
    /**
     * @prop {Boolean} simpleLayout 加减按钮样式 默认: true
     */
    simpleLayout: {
      type: Boolean,
      default: true
    },
    /**
     * @prop {Number} gutter ElRow的参数 间隙宽度 默认: 20
     */
    gutter: {
      type: Number,
      default: 20
    },
    /**
     * @prop {Boolean} span ElRow的参数-span 默认: 24
     */
    span: {
      type: Number,
      default: 24
    },
    /**
     * @prop {Boolean} inline 布局样式 默认: true
     */
    inline: {
      type: Boolean,
      default: true
    },
    /**
     * @prop {Boolean} disabled 新增按钮禁用 默认: false
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * @prop {Boolean} autoFocus 自动获取焦点 默认: true
     */
    autoFocus: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    classes() {
      return {
        'group-simple': this.simpleLayout,
        'group-inline': this.inline
      }
    }
  },
  methods: {
    handleAdd(index) {
      /**
       * @description: 新增后触发回调事件
       * @param {Number} index 位置顺序
       */
      this.$emit('add', index)
      this.$nextTick(() => {
        if (this.autoFocus) {
          // 被添加的表单控件得到焦点
          let node = this.$el.querySelector('.group-item:last-child input[type="text"]')
          node && node.focus()
        }
      })
    },
    handleRemove(index) {
      /**
       * @description: 删除触发回调
       * @param {Number} index 位置顺序
       */
      this.$emit('remove', index)
    }
  }
}
</script>
<style lang="less">
@import '~styles/var.less';
.group {
  &-inline {
    .group-cellbox {
      width: auto;
    }
  }
  &-item {
    margin-bottom: 15px;
    &.el-col-24:last-child {
      margin-bottom: 0;
    }
  }
  .btn-icon {
    margin: 10px 0;
    min-width: 20px;
  }
  &-simple {
    .btn-icon {
      margin: 0;
    }
  }
  &-content {
    border: 1px dashed @border-color-base;
    padding: 15px;
    position: relative;
  }
  &-remove {
    position: absolute;
    right: 0;
    top: 0;
    border: 0;
    margin: 0 !important;
    padding: 5px !important;
    i {
      transform: scale(0.8);
    }
  }
  &-actions {
    position: relative;
    width: 50px;
    .btn-icon {
      margin-left: 10px;
    }
  }
}
</style>
