<template>
  <div>
  <el-form
    v-for="(n,i) in list"
    :key="i"
    :inline="true"
    :model="n"
    ref="ruleForm"
    size="mini"
    :rules="rules"
  >
      <el-form-item prop="key1">
        <el-input
          placeholder="请输入材料BOM物料编码"
          v-model="n.key1"
          size="mini"
          clearable />
      </el-form-item>
      <el-form-item prop="key2">
        <el-input
          placeholder="请输入材料BOM物料名称"
          v-model="n.key2"
          size="mini"
          clearable />
      </el-form-item>
      <el-form-item prop="key3">
        <el-input
          placeholder="请输入用量"
          style="width:120px"
          v-model="n.key3"
          size="mini"
          clearable />
      </el-form-item>
      <el-form-item prop="key4">
        <el-input
          placeholder="请输入单重"
          style="width:120px"
          v-model="n.key4"
          size="mini"
          clearable />
      </el-form-item>
      <el-form-item v-if="i == 0">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="save"
        >保存</el-button>
        <el-button
          type="primary"
          plain
          size="mini"
          @click="addlist"
        >添加</el-button>
      </el-form-item>

      <el-form-item v-else>
        <el-button
          type="danger"
          plain
          size="mini"
          @click="dellist(i)"
        >删除</el-button>
      </el-form-item>

    </el-form>



</div>
</template>

<script>

  export default {
    props:{
      showdel:{
        type:Boolean,
        default:true
      },
      obj:{
        type:Object,
        default(){
          return {}
         }
      }
    },
    data() {
      return {
        list:[{
          key1:'',
          key2:'',
          key3:'',
          key4:''
        }],
        rules: {
          key1: [
            { required: true, message: "请输入材料BOM物料编码", trigger: "blur" }
          ],
          key2: [
            { required: true, message: "请输入材料BOM物料名称", trigger: "blur" }
          ],
          key3: [
            { required: true, message: "请输入用量", trigger: "blur" }
          ],
          key4: [
            { required: true, message: "请输入单重", trigger: "blur" }
          ]
        }
      }
    },
    methods:{
      addlist() {
        this.list.push({
          key1:'',
          key2:'',
          key3:'',
          key4:''
        })
      },
      dellist(i) {
        this.list.splice(i,1)
      },
      save() {
        const _this = this
        let isyz = true
        this.list.forEach((n,i) => {
          this.$refs['ruleForm'][i].validate((valid) => {
            if (!valid) {
              isyz = false
            }
          })
        })
        if(isyz){
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        }
      }

    }
}
</script>
