<template>
  <el-form
    ref="form"
    :model="value"
    :label-width="labelWidth + 'px'"
    :disabled="disabled"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item
          :label="title + ':'"
          :prop="fieldKey"
          :rules="[
            {
              required: true,
              type: 'array',
              message: '请输入并添加',
              trigger: 'change',
            },
          ]"
        >
          <el-row type="flex" justify="space-between">
            <el-col :span="20">
              <el-input v-model="dataVal" :placeholder="placeholder"></el-input>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" @click="keyWordAdd">添加</el-button>
            </el-col>
          </el-row>
          <div class="e_tag">
            <el-tag
              v-for="(tag, index) in this.value[fieldKey]"
              :key="index"
              closable
              @close="handleFieldClose(fieldKey, index)"
            >
              {{ tag }}
            </el-tag>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { industry } from "@/api/config";
export default {
  props: {
    value: Object,
    labelWidth: {
      type: Number,
      default: 120,
    },
    title: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    fieldKey: {
      require: true,
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataVal: "",
    };
  },
  methods: {
    keyWordAdd() {
      if (!this.dataVal.length)
        return this.$message.error("请输入" + this.title);
      this.value[this.fieldKey].push(this.dataVal);
      this.dataVal = "";
    },
    handleFieldClose(val, index) {
      this.value[val].splice(index, 1);
    },
    submitForm() {
      let flag = false;
      this.$refs["form"].validate((valid) => {
        flag = valid;
      });
      return flag;
    },
  },
};
</script>
<style lang="scss" scoped>
.e_tag {
  .el-tag {
    margin-right: 10px;
  }
}
</style>