<template>
  <el-dialog title="重命名" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="renameDialog">
    <div>
      <el-input v-model="input" placeholder="请输入名称" size="small" :maxlength="20"></el-input>
    </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 { updateDraftsGraph, updatePubGraph } from "@/api/home"
export default {
  props: {
    isPub: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogVisible: false,
      input: '',
      data: {}
    };
  },
  methods: {
    showDialog(data) {
      this.dialogVisible = true;
      this.input = data.name;
      this.data = data;
    },
    // 确认修改
    confirm() {
      const newName = this.input.trim()
      console.log('newName',newName.length)
      if (!newName) {
        return
      }
      if(newName.length>20){
         this.$message.error('最长为20个字符');
         return
      }
      const pa = {
        content: [{
          id: this.data.id,
          graphId: this.data.graphId,
          name: newName,
          categoryId: this.data.categoryId
        }],
        projection: ['name']
      }
      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">
.renameDialog {
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #f0f1f2ff;
  }
  /deep/ .el-dialog__body {
    padding: 16px 60px;
  }
  .el-dialog__footer {
    padding: 14px 20px 20px;
    .el-button {
      padding: 0;
      width: 80px;
      height: 32px;
      text-align: center;
      line-height: 1;
    }
  }
}
</style>