<template>
  <div class="form-wrap">
    <el-table ref="table" :data="params" style="width: 100%;" height="calc(100% - 52px)" border row-key="uuid"
      @select-all="resetSelection" @select="resetSelection">
      <el-table-column type="selection" align="center" width="50" fixed="left" :selectable="getSelectable"
        :label-class-name="loading ? 'is-loading' : ''">
        <template slot="header" slot-scope="scope">
          123
        </template>
      </el-table-column>
      <el-table-column label="参数" width="200">
        <template slot-scope="scope">
          <el-input :disabled="disabled" v-model="scope.row.key" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column label="值">
        <template slot-scope="scope">
          <request-input :disabled="disabled" :key="scope.row.uuid" :type="scope.row.type" v-model="scope.row.value" />
        </template>
      </el-table-column>
      <el-table-column label="描述" width="200">
        <template slot-scope="scope">
          <el-input :disabled="disabled" v-model="scope.row.description" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="80" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" plain icon="el-icon-delete" :disabled="disabled"
            @click="handleDelete(scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="append-btn">
      <el-button :disabled="disabled" type="success" plain icon="el-icon-circle-plus-outline"
        @click="handleAdd">添加</el-button>
    </div>
  </div>
</template>
<script>
import RequestInput from './RequestInput.vue';
export default {
  components: {
    RequestInput
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    params: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {}
    };
  },
  watch: {
    params: {
      handler(val) {
        this.$nextTick(() => {
          this.initParams();
        });
        this.getForm();
      },
      deep: true
    }

  },
  mounted() {
    this.initParams();
    this.getForm();
  },
  methods: {
    getSelectable(row, index) {
      return !this.loading;
    },
    doLayout() {
      this.$refs.table.doLayout();
    },
    initParams() {
      this.params.forEach(item => {
        if (!item.disabled) {
          this.$refs.table.toggleRowSelection(item, true);
        }
      });
    },
    resetSelection(selection) {
      // 重置选中的参数的disabled
      this.params.forEach(item => {
        this.$set(item, 'disabled', true);
      });
      selection.forEach(item => {
        const index = this.params.findIndex(param => param.uuid === item.uuid);
        if (index > -1) {
          this.params[index].disabled = false;
        }
      });
      this.getForm();
    },
    getForm() {
      // 收集选中的参数,过滤掉没有prop的
      this.form = this.params.filter(item => item.key && item.disabled !== true).reduce((acc, cur) => {
        acc[cur.key] = cur.value;
        return acc;
      }, {});
      // 通知父组件
      this.$emit('input', this.form);
    },
    handleAdd() {
      this.$emit('append', this.params);
      this.$nextTick(this.scrollToBottom);
    },
    handleDelete(index) {
      // 通知父组件删除
      this.$emit('delete', this.params, index);
    },
    scrollToBottom() {
      const tableBodyWrapper = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
      if (tableBodyWrapper) {
        tableBodyWrapper.scrollTop = tableBodyWrapper.scrollHeight;
      }
      // this.$nextTick(() => {
      //   const table = this.$refs.table;
      //   table.bodyWrapper.scrollTop = table.bodyWrapper.scrollHeight;
      // });
    }
  }
};
</script>
<style lang="scss" scoped>
.form-wrap {
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

.append-btn {
  background-color: white;
  padding: 8px 0;
}
</style>
<style lang="scss">
.el-table,
.el-table__header,
.el-table__body {
  will-change: transform;
  width: 100% !important;
}

.is-loading .el-checkbox__inner {
  background-color: #F2F6FC !important;
  border-color: #DCDFE6 !important;

  &::before {
    border-color: #C0C4CC;
    background-color: #C0C4CC !important;

  }
}

.is-loading .el-checkbox {
  pointer-events: none;
}
</style>
