<template>
  <el-dialog class="create-dialog" title="新建拓扑图" width="600px" :visible.sync="outerVisible" :close-on-click-modal="false" custom-class="createDialog"
    @close="closeModal" @closed="closed">
    <graphTypeDialog ref="graphTypeDialog" @selectNode="selectNode"></graphTypeDialog>
    <div class="dialog-bodys">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
        <el-form-item label="所属类别" prop="type">
          <el-button @click="getprojectType" class="typeButton">
            <span v-if="buttonStr" style="color:#C3C6CBFF">已选 : </span>
            {{buttonStr?buttonStr:'请选择所属类别'}}
          </el-button>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入名称" size="small"  :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="标签" prop="resource">
          <div class="tagContainer">
            <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>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm('ruleForm')">取消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import graphTypeDialog from "@/components/homeView/graphTypeDialog"
import { createGraph } from "@/api/home"
import { mapState } from "vuex";
export default {
  components: {
    graphTypeDialog
  },
  data() {
    return {
      buttonStr: '',
      ruleForm: {
        name: "",
        type: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { max: 20, message: "最长为20个字符", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请选择所属类别", trigger: "change" },
        ]
      },
      value: [],
      outerVisible: false,
      dynamicTags: [],
      inputValue: '',
      inputVisible: false,
    }
  },
  computed: {
    ...mapState([ "projectId"]),
  },
  methods: {
    showDialog() {
      this.outerVisible = true;
    },
    // 获取所属类别
    getprojectType() {
      this.$refs.graphTypeDialog.showDialog()
    },
    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 = '';
    },
    // 选好所属类别
    selectNode(node) {
      console.log(node);
      this.ruleForm.type = node.data.code;
      this.buttonStr = node.data.name
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.createDraftsGraph()
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.dynamicTags = [];
      this.buttonStr = '';
      this.$refs[formName].resetFields();
      this.outerVisible = false
    },
    // 创建拓扑图接口
    createDraftsGraph() {
      const pa = {
        content: [{
          categoryId: this.ruleForm.type,
          name: this.ruleForm.name,
          label: this.dynamicTags
        }]
      }
      createGraph(pa).then(res => {
        if (res.result == "success") {
          this.outerVisible = false;
          // this.$message.success('创建成功');
          this.routeUrl = this.$router.resolve({
            name: 'Editer',
            query: {
              graphId: res.entityList[0].graphId,
              id: res.entityList[0].id,
              categoryName: encodeURI(this.buttonStr),
              projectId: this.projectId,
              isPub: 0
            }
          })
        } else {
          this.$message(res.message)
        }
      })
    },
    closeModal() {
      this.resetForm('ruleForm');
    },
    closed() {
      if (this.routeUrl) {
        window.open(this.routeUrl.href, "_blank");
      }
      this.routeUrl = ''
    }
  },
}
</script>
<style lang="less" scoped>
/deep/ .createDialog {
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #f0f1f2ff;
  }
  .dialog-bodys {
    // max-height: 250px;
  }
  /deep/ .el-dialog__body {
    padding: 16px 120px;
    height: 270px;
    overflow: auto;
  }
  .el-dialog__footer {
    padding: 0 20px 20px;
    .el-button {
      padding: 0;
      width: 80px;
      height: 32px;
      text-align: center;
      line-height: 1;
    }
  }
  .el-form-item {
    margin-bottom: 0;
    & + .el-form-item {
      margin-top: 18px;
    }
  }
  .el-form-item__label {
    line-height: 1;
  }
  .el-tag {
    background: #eff0f1;
    border-radius: 2px;
    color: #1f2429ff;
    margin: 0 8px 8px 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;
      }
    }
  }
  .input-new-tag {
    width: 150px;
    // input{
    //   height: 24px;
    // }
  }
  .button-new-tag {
    width: 60px;
    height: 24px;
    margin-bottom: 8px;
    padding: 0;
    line-height: 1;
    border-radius: 2px;
    border: 1px dotted #0091ff;
    color: #0091ff;
    &:hover {
      background: #fff;
      color: #0091ff;
      border: 1px dotted #0091ff;
    }
  }
  .typeButton {
    min-width: 122px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
    padding: 0;
    border: 1px solid #c3c6cb;
  }
  .tagContainer {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #c3c6cb;
    padding: 7px 12px;
    line-height: 1;
  }
}
</style>