<!--
  * @File:
  * @FileDescription: form里添加table
  * @Author: Lishuai
  * @Date: 2021.10.27
  * @Update Lishuai(2021-10-27)

  * @File 列表动态添加列
  * @FileDescription 用于表单或者页面动态增减列表数据
    * value table的列表数据
    * listconfigure:  验证的信息 数组
      listconfigure: [{type: 'input', name: 'name',rule: [{}], title: '姓名', suffix: '人', width: '200px',labelCol: 5, wrapperCol: 0}]
        type: 什么类型 ['input','select','number']  文本框 下拉列表 数字
        name： 字段名
        rule: 验证规则 [{}] 参考antd-vue-form 进行规则验证 默认为[] 无验证
        title: 标题
        suffix: input 的后缀
        width: 宽度 默认200px select默认为250px
        labelCol: 标签布局 默认为4
        wrapperCol: 输入控件布局样式 默认为10
        list: select中的下拉列表数据
    * 赋值: [{}] 直接使用v-model 或者 form.setFieldsValue
    * 返回值: [{}] 根据每列进行时时进行返回结果
    * 插槽 1: operate-create 默认新增按钮 2: operate-del 列表后删除按钮 3: operate-add 列表后新增按钮
  * 后续拓展升级方向： 1：类型拓展 （文本，时间，单选，多选）2：<a-table>模式
  * @click 点击事件
  * @Author: Lishuai
  * @Date: 2021.10.27
  * @Update  佟春晓(2021-11-16)
-->
<template>
  <div>
<!--    <span @click="add"><slot name='operate-create'><a-button type="primary" size='small' style="margin: 10px 0px;display: block;">增加</a-button></slot></span>-->
    <a-row >
      <a-form-model ref="ruleForm" :model="list" :rules="rules" >
        <span v-for="(item,index) in listTable" :key="index" class="table">
          <a-form-model-item
            v-for="(items, i) in listconfigure"
            :key="i"
            :label="items.title"
            :prop = 'index + "_" + items.name'
            :label-col="{ span: items.labelCol ? items.labelCol : 4 }"
            :wrapper-col="{ span: items.wrapperCol ? items.wrapperCol : 10}"
          >
            <!-- input -->
            <a-input
              v-if="items.type==='input'"
              :style="{width: items.width ? items.width : '100%'}"
              v-model='listTable[index][items.name]'
              :suffix="items.suffix"
              placeholder="请输入"
            />
            <!-- input -->
            <!-- select -->
            <a-select
              v-if="items.type==='select'"
              :style="{width: items.width ? items.width : '100%'}"
              v-model='listTable[index][items.name]'
              placeholder="请选择"
              :suffix="items.suffix"
            >
              <a-select-option
                v-for="option in items.list"
                :key="option.value"
                :value="option.value"
              >
                {{ option.name }}
              </a-select-option>
            </a-select>
            <!-- select -->
            <!-- input-number -->
            <a-input-number
              v-if="items.type==='number'"
              :style="{width: items.width ? items.width : '100%'}"
              v-model='listTable[index][items.name]'
              :suffix="items.suffix"
              placeholder="请输入"
            />
            <!-- input-number -->
          <!-- 后面按钮 -->
          </a-form-model-item>
          <a-form-model-item>
            <span @click="remove(index)" class="del">
              <slot name='operate-del'>
                <a-icon
                  type="minus-circle"
                  class="subtract"
                />
              </slot>
            </span>
            <span @click="add" class="add">
              <slot name='operate-add'>
                <a-icon
                  type="plus-circle"
                  class="subtract"
                />
              </slot>
            </span>
          </a-form-model-item>
        </span>
      </a-form-model>
    </a-row>
  </div>
</template>

<script>
export default {
  name: 'FormAddList',
  props: {
    // 列表数据
    value: {
      type: Array,
      default: () => []
    },
    // 配置信息
    listconfigure: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    list () {
      var objFieldsData = {}
      this.listTable.forEach((value, index) => {
        this.listconfigure.forEach(items => {
          objFieldsData[`${index}_${items.name}`] = value[items.name]
        })
      })
      return objFieldsData
    },
    rules () {
      var objFieldsRules = {}
      this.listTable.forEach((value, index) => {
        this.listconfigure.forEach(items => {
          objFieldsRules[`${index}_${items.name}`] = items.rule || []
        })
      })
      return objFieldsRules
    }
  },
  data () {
    return {
      listTable: this.value
    }
  },
  mounted () {
    // 初始化值
    if (this.value && this.value.length > 0) this.setDefaultList(this.value)
  },
  methods: {
    // 删除某列
    remove (index) {
      this.listTable.splice(index, 1)
    },
    // 添加一列
    add () {
      const objFieldsList = {}
      this.listconfigure.forEach(value => {
        objFieldsList[value.name] = null
      })
      this.listTable.push(objFieldsList)
    },
    // 设置默认值
    setDefaultList (list) {
      this.listTable = list
    }
  },
  watch: {
    // 监听赋值当前组件
    value (list) {
      if (list && list.length > 0 && list !== this.listTable) this.setDefaultList(list)
    },
    // 监听当前页面文本输入
    list: {
      handler: function () {
        this.$nextTick(() => {
          this.$refs.ruleForm.validate(valid => {
            if (valid && this.listTable.length > 0) {
              this.$emit('input', this.listTable)
              this.$emit('change', this.listTable)
            } else {
              this.$emit('input', null)
              this.$emit('change', null)
            }
          })
        })
      },
      deep: true
    }
  }
}
</script>

<style scoped>
span>div{
  display: inline-block;
}
.table{
  display: block;
}
.header ::v-deep .ant-form-item-label{
  width: 100%;
  text-align: center;
}
.subtract{
  margin-left: 20px;
}
.del {
  margin-left: 8px;
  color: #c41a28;
  cursor: pointer;
}
.add{
  color: #52c41a;
  cursor: pointer;
}
</style>
