<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"></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) {
            console.table(data);
            this.dialogVisible = true;
            this.input = data.name;
            this.data = data;
        },
        // 确认修改
        confirm() {
            const newName = this.input.trim();
            if (!newName) {
                return;
            }
            const pa = {
                content: [
                    {
                        id: this.data.id,
                        graphId: this.data.graphId,
                        name: newName,
                    },
                ],
                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>