<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="停车区域设置" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
        </slot>
      </lx-header>
    </div>
    <el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="'120px'">
      <div class="table-tree">
        <div style="display: flex;justify-content: flex-end;margin-right: 20px;margin-bottom: 10px;">
          <Button type="primary" @click="addRow()" size="small" style="margin-left: 10px;" ghost>新增参数</Button>
        </div>
        <el-table :data="this.form.detail_list" height="400" class="v-table" style="width: 100%;margin-bottom: 20px;">
          <el-table-column type="index" align="center">
          </el-table-column>
          <el-table-column prop="value" label="停车区域" width="320">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name">
              </el-input>
            </template>
          </el-table-column>
<!--          <el-table-column prop="sort" align="center" label="排序" width="80">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sort">
              </el-input>
            </template>
          </el-table-column> -->
          <el-table-column prop="status" align="center" label="状态" width="180">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <Button type="error" @click="delRow(scope.row,scope.$index)" size="small" style="margin-left: 10px;"
                ghost>删除</Button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button @click="resetForm('form')">取 消</el-button>
      <el-button type="primary" @click="submitForm('form')">确 定</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form:{
            detail_list:[{
              name:"",
              status:"",
              remark:""
            }]
        },
        rules:{}
      }
    },
    methods:{
addRow() {
        var len = this.form.detail_list.length;
        this.form.detail_list.push({
          name: "",
          status: true,
          remark: ""
        })
      },
      delRow(obj, index) {
        if (obj.id) {
          delDetail(obj.id).then(response => {

            this.$message.success("操作成功");
            this.form.detail_list.splice(index, 1);
          }).catch(error => {
            //reject(error)
            this.$message.error("操作失败");
          })
        } else {
          this.form.detail_list.splice(index, 1);
        }


      },
      resetForm(){},
      submitForm(){}

    }
  }
</script>

<style scoped>
  /deep/ .el-form{
    height:calc(100%-120px)
  }
</style>
