<template>
  <div style="padding-left: 10px;">
  <!-- <el-row style="padding: 0 0 10px 20px;" v-for="(n,i) in list">
      <el-col :span="12">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input
          placeholder="请输入字段A"
          v-model="n.key1"
            size="mini"
          clearable />
        </el-col>
        <el-col :span="4">
          <el-input
          placeholder="请输入字段B"
          v-model="n.key2"
            size="mini"
          clearable />
        </el-col>
        <el-col :span="4">
          <el-input
          placeholder="请输入字段C"
          v-model="n.key3"
            size="mini"
          clearable />
        </el-col>
        <el-col :span="4">
          <el-input
          placeholder="请输入字段D"
          v-model="n.key4"
            size="mini"
          clearable />
        </el-col>
        <el-col :span="4">
          <el-input
          placeholder="请输入字段E"
          @keyup.enter.native="save"
          v-model="n.key5"
            size="mini"
          clearable />
        </el-col>
        <template v-if="i == 0">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="save"
            >保存</el-button>
          </el-col>
          <el-col :span="2">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="addlist"
            >添加</el-button>
          </el-col>
        </template>
        <template v-else>
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="save"
            >保存</el-button>
          </el-col>
          <el-col :span="2">
            <el-button
              type="danger"
              plain
              size="mini"
              @click="dellist(i)"
            >删除</el-button>
          </el-col>
        </template>
      </el-row>
    </el-col>
  </el-row> -->
  <el-form
    v-for="(n,i) in list"
    :inline="true"
    :model="n"
    ref="ruleForm"
    size="mini"
    :key="i"
    :rules="rules"
  >
      <el-form-item prop="key1">
        <el-select
          v-model="n.key1"
          placeholder="请选择工作中心"
          clearable
        >
          <el-option label="类型一" value="shanghai" />
          <el-option label="类型二" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item prop="key2">
        <el-select
          v-model="n.key2"
          placeholder="请选择工序名称"
          clearable
        >
          <el-option label="类型一" value="shanghai" />
          <el-option label="类型二" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item prop="key3">
        <el-input
            placeholder="请输入工序说明"
            v-model="n.key3"
              size="mini"
            clearable />
      </el-form-item>
      <el-form-item prop="key4">
        <el-select
          v-model="n.key4"
          placeholder="请选择工序控制"
          clearable
        >
          <el-option label="类型一" value="shanghai" />
          <el-option label="类型二" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item prop="key5">
        <el-input
          placeholder="请输入活动时长"
          style="width:130px"
          v-model="n.key5"
          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:'',
          key5:''
        }],
        rules: {
          key1: [
            { required: true, message: "请选择工作中心", trigger: "blur" }
          ],
          key2: [
            { required: true, message: "请选择工序名称", trigger: "blur" }
          ],
          key3: [
            { required: true, message: "请输入工序说明", trigger: "blur" }
          ],
          key4: [
            { required: true, message: "请选择工序控制", trigger: "blur" }
          ],
          key5: [
            { required: true, message: "请输入活动时长", trigger: "blur" }
          ]
        }
      }
    },
    methods:{
      addlist() {
        this.list.push({
          key1:'',
          key2:'',
          key3:'',
          key4:'',
          key5:''
        })
      },
      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>
