<template>
  <el-dialog
    title="Add Tag"
    :visible.sync="dialogVisible"
    width="600px">
    <el-form
      ref="ruleForm"
      label-width="60px"
    >
      <el-form-item label="Tags: " prop="tags">
        <ul class="tag-list-form">
          <li v-for="(item, i) in tagList" :key="i">
            <el-input v-model="item.name"/>
            <i class="el-icon-plus ml-10" @click="addTags"></i>
            <i class="el-icon-minus ml-10" @click="minusTags(i)" v-if="tagList.length > 1"></i>
          </li>
        </ul>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">Cancel</el-button>
      <el-button type="primary" size="small" @click="confirm">Confirm</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tagList: [{name: ''}],
    };
  },
  methods: {
    addTags(){
      this.tagList.push({name: ''});
    },
    minusTags(index){
      this.tagList.splice(index, 1);
    },
    show() {
      this.dialogVisible = true;
    },
    confirm() {
      this.dialogVisible = false;
      this.$emit("getTagList", this.tagList.filter(item => item.name));
    },
  },
};
</script>

<style scoped lang="scss">
.tag-list-form {
  li {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    i {
      font-size: 18px;
      font-weight: 600;
      color: #0B2C55;
      cursor: pointer;
    }
  }
}
</style>
