<template>
  <el-dialog title="删除" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="deleteDialog">
    <p>确认删除吗?</p>
    <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 { deleteDraftsGraph, deletePubGraph } from "@/api/home"
export default {
  props: {
    isPub: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogVisible: false,
      data: []
    };
  },
  methods: {
    showDialog(data) {
      this.dialogVisible = true;
      this.data = data;
    },
    // 确认修改
    confirm() {
      if (!this.data.length) {
        return
      }
      const pa = this.data.map(t => {
        return {
          id: t.id,
          graphId: t.graphId
        }
      })
      if (this.isPub) { // 已发布
        deletePubGraph(pa).then(res => {
          this.updateCall(res)
        })
      } else { // 未发布
        deleteDraftsGraph(pa).then(res => {
          this.updateCall(res)
        })
      }
    },
    // 更新成功回调
    updateCall(res) {
      if (res.result == "success") {
        this.dialogVisible = false;
        this.$emit("deleteSuc");
        this.$message.success('删除成功');
      } else {
        this.$message(res.message)
      }
    }
  }
};
</script>
<style lang="less">
.deleteDialog {
  /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>