<template>
  <div class="ks-model-builder-actions">
    <a-space>
      <a-tooltip placement="top">
        <template #title>
          返回
        </template>
        <a-button class="ks-model-builder-goback" size="small" @click="goback">
          <RollbackOutlined />
          <span>返回</span>
        </a-button>
      </a-tooltip>
      <a-tooltip v-if="graph && node" placement="top">
        <template #title>
          保存
        </template>
        <a-popconfirm
          title="确定保存?"
          @confirm="handleSave"
        >
          <a-button class="ks-model-builder-save" size="small">
            <CheckOutlined />
            <span>保存</span>
          </a-button>
        </a-popconfirm>
      </a-tooltip>
    </a-space>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CheckOutlined, RollbackOutlined } from '@ant-design/icons-vue';
import { elementProps } from './builder/props';

export default defineComponent({
  components: {
    CheckOutlined,
    RollbackOutlined,
  },
  props: elementProps,
  emits: ['save'],
  setup(props, ctx) {

    const handleSave = () => {
      ctx.emit('save');
    };

    const goback = () => {

    };

    return {
      graph: props.graph,
      node: props.node,
      handleSave,
      goback,
    };
  },
});
</script>