<template>
  <el-dialog title="修改标签" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="tagDialog">
    <div>
      <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
        {{tag}}
      </el-tag>
      <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
        @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updatePubGraph, updateDraftsGraph } from "@/api/home"
export default {
  props: {
    isPub: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogVisible: false,
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      data: {}
    };
  },
  methods: {
    showDialog(data) {
      this.dialogVisible = true;
      this.dynamicTags = JSON.parse(JSON.stringify(data.label)) || [];
      this.data = data;
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      const inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    // 确认修改
    confirm() {
      const pa = {
        content: [{
          id: this.data.id,
          graphId: this.data.graphId,
          label: this.dynamicTags
        }],
        projection: ['label']
      }
      if (this.isPub) { // 已发布
        updatePubGraph(pa).then(res => {
          this.updateCall(res)
        })
      } else {
        updateDraftsGraph(pa).then(res => {
          this.updateCall(res)
        })
      }
    },
    // 更新成功回调
    updateCall(res) {
      if (res.result == "success") {
        this.dialogVisible = false;
        this.$emit("updateSuc")
        this.$message.success('更新成功');
      } else {
        this.$message(res.message)
      }
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .tagDialog {
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #f0f1f2ff;
  }
  /deep/ .el-dialog__body {
    max-height: 192px;
    overflow: auto;
    padding: 20px;
  }
  .el-dialog__footer {
    padding: 14px 20px 20px;
    .el-button {
      padding: 0;
      width: 80px;
      height: 32px;
      text-align: center;
      line-height: 1;
    }
  }
  .el-tag {
    background: #eff0f1;
    border-radius: 2px;
    color: #1f2429ff;
    margin: 0 10px 10px 0;
    padding: 5px 6px 5px 8px;
    font-size: 14px;
    height: 24px;
    line-height: 1;
    border: none;
    &:hover {
      border: none;
    }
    .el-icon-close {
      color: #9ca2a9ff;
      right: 0;
      &:hover {
        color: #fff;
        background-color: #ccc;
      }
    }
  }
  .button-new-tag {
    height: 24px;
    line-height: 30px;
    margin-bottom: 8px;
    padding: 0 8px;
    line-height: 1;
    border-radius: 2px;
    border: 1px dotted #0091ff;
    color: #0091ff;
    &:hover {
      background: #fff;
      color: #0091ff;
      border: 1px dotted #0091ff;
    }
  }
  .input-new-tag {
    width: 90px;
    vertical-align: top;
  }
}
</style>