<template>
  <div>
  <div style="float: right">
    <el-button type="primary" @click="addParam()">添加输入参数</el-button>
  </div>
  <el-table :data="paramTableData" class="tb-edit" style="width: 100%" highlight-current-row
            @row-click="handleCurrentChange">
    <el-table-column label="参数名称" width="180">
      <template scope="scope">
        <el-select v-model="scope.row.field">
          <el-option v-for="item in paramOptions" :key="item.value" :label="item.text"
                     :value="item.value">
          </el-option>
        </el-select>
        <span>{{ scope.row.text }}</span>
      </template>
    </el-table-column>
    <el-table-column label="参数值" width="180">
      <template scope="scope">
        <el-input size="small" v-model="scope.row.value" placeholder="请输入内容"
                  @change="handleEdit(scope.$index, scope.row)"></el-input>
        <span>{{ scope.row.value }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template scope="scope">
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
export default {
  inject: ["contain"],
   data(){
     return {
       paramOptions: [
         {
           text: '时间',
           value: 'time'
         }
       ],
       paramTableData: [{
         text: '时间',
         field: 'time',
         value: ''
       }],
     }
   },
  methods:{
    addParam(){
      if(!this.paramOptions ||
        this.paramOptions.length===0){
        this.$message('没有可以添加的参数！');
        return;
      }
      this.paramTableData.push({
        text: this.paramOptions[0].text,
        field: this.paramOptions[0].value,
        value: ''
      });
    },
    handleCurrentChange(row, event, column) {

    },
    handleEdit(index, row) {
    },
    handleDelete(index, row) {
      this.paramTableData.splice(index, 1);
    },
  }
}

</script>


<style scoped>

.tb-edit .el-input {
  display: none
}

.tb-edit .current-row .el-input {
  display: block
}

.tb-edit .current-row .el-input + span {
  display: none
}

.tb-edit .el-select {
  display: none
}

.tb-edit .current-row .el-select {
  display: block
}

.tb-edit .current-row .el-select + span {
  display: none
}
</style>
