<template>
  <div class="array-dynamic-container">
    <div v-for="(item, index) in array" :key="index" class="array-dynamic-item">
      <el-input v-model="item.key" size="small" type="textarea" :rows="1" autosize placeholder="KEY"></el-input>
      <el-input v-model="item.value" size="small" type="textarea" :rows="1" autosize placeholder="VALUE"></el-input>
      <el-button circle plain type="danger" size="mini" icon="el-icon-minus" @click="handleRemove(index)"></el-button>
    </div>
    <el-button type="text" icon="el-icon-plus" @click="handleAdd">{{$t('fm.datasource.edit.add')}}</el-button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      array: this.value
    }
  },
  methods: {
    handleAdd () {
      this.array.push({key: '', value: ''})
    },

    handleRemove (index) {
      this.array.splice(index, 1)
    }
  },
  watch: {
    value (val) {
      this.array = val
    },
    array: {
      deep: true,
      handler (val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

<style lang="scss">
.array-dynamic-container{
  .array-dynamic-item{
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #eee;

    .el-textarea:first-child{
      width: 30%;
      margin-right: 6px;
      vertical-align: top;
    }

    .el-textarea:nth-child(2){
      width: 60%;
      vertical-align: top;
    }

    .el-button{
      vertical-align: top;
      margin-left: 10px;
    }
  }
}
</style>