<template>
  <el-col :span="span">
    <el-form-item :label="label" :prop="prop">
      <el-row>
        <el-col :span="7" v-for="(item, index) of form" class="el_pl">
          <Field
            :span="24"
            clearable
            v-model="item.value"
            type="select"
            @change="emit"
            @input="emit"
            :enumData="enumData"
            :placeholder="`请选择审批人${index + 1}`"
          />
        </el-col>
        <el-col span="3" class="el_pl">
          <el-button @click="addDomain" type="primary" size="small"
            >添加</el-button
          >
        </el-col>
      </el-row>
    </el-form-item>
  </el-col>
</template>
<script>
export default {
  props: {
    span: {
      type: Number,
      default: 24,
    },
    // 字段值
    value: {
      type: [String, Number, Array],
    },
    // 字段name
    prop: {
      type: String,
      default: "",
    },
    // 字段中文标题
    label: {
      type: String,
      default: "",
    },
    // 字段所需的枚举类型
    enumData: {
      type: Object,
      default: () => {},
    },
  },
  created() {
    // console.log(this.enumData);
  },
  watch: {
    value: function (v) {
      //赋值form.value
      if (typeof this.value == "string") {
        this.form = this.value.split(",").map((v) => {
          return { value: v };
        });
      }
    },
  },
  data() {
    return {
      form: [],
    };
  },
  methods: {
    verification() {
      return this.form.every((v) => v.value != undefined && v.value != "");
    },
    addDomain() {
      if (this.form.length < 3) {
        this.form.push({ value: undefined });
      }
    },
    emit() {
      let newArr = [];
      Object.values(this.form).forEach((v) => {
        if (v.value) {
          newArr.push(parseInt(v.value));
        }
      });
      this.$emit("input", newArr.join());
      this.$emit("change", newArr.join());
    },
  },
};
</script>
<style lang="less" scoped>
.el_pl {
    max-height: 34px !important;
  & + .el_pl {
    padding-left: 10px !important;
  }
}
</style>