<template>
  <div class="preview-box">
    <div class="btn-box">
      <a-button type="primary" :icon="h(SaveOutlined)" @click="onSave(2)" class="ml-2"
        >暂存
      </a-button>
      <a-button type="primary" :icon="h(SaveOutlined)" @click="onSave(1)" class="ml-2"
        >保存
      </a-button>
      <a-button
        type="primary"
        :icon="h(CloseCircleOutlined)"
        @click="closePreview"
        class="ml-2"
        danger
        >关闭
      </a-button>
    </div>
    <process-designer-page
      :key="designerOpen"
      style="border: 1px solid rgba(0, 0, 0, 0.1)"
      ref="modelDesigner"
      v-loading="designerData.loading"
      :schemeCode="props.code"
      @save="onSaveDesigner"
    />
  </div>
</template>

<script lang="ts" setup>
  import { h, ref, reactive } from 'vue';
  import { ProcessDesignerPage } from '@/components/ProcessDesigner/page';
  import { SaveOutlined } from '@ant-design/icons-vue';
  import { CloseCircleOutlined } from '@ant-design/icons-vue';
  import { postAdd, update } from '@/api/sys/WFSchemeInfo';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  import { flowStore } from '@/store/modules/flow';

  const flowWfDataStore = flowStore();
  const props = defineProps({
    code: String,
  });
  const emit = defineEmits(['closeModel']);

  const designerOpen = ref(false);
  const designerData = reactive({
    loading: false,
  });
  const modelDesigner = ref<any>();
  async function onSave(type) {
    let validateData = await modelDesigner.value.validateFlow();
    let formData = await modelDesigner.value.getFlow();
    console.log("formData",formData);
    if (validateData) {
      // 1正式 2草稿
      formData.scheme.type = Number(type);
      if (!props.code) {
        let data = await postAdd(formData);
        if (data) {
          closePreview();
          return createMessage.success('新增成功');
        } else {
          return createMessage.error('新增失败');
        }
      } else {
        let data = await update(formData);
        if (data) {
          closePreview();
          return createMessage.success('编辑成功');
        } else {
          return createMessage.error('编辑失败');
        }
      }
    }
  }
  function closePreview() {
    emit('closeModel');
    // if (!schemeCode) {
    //   tabStore.closeTabByKey('/dashboard/scheme_preview/add', router);
    // } else {
    //   // /dashboard/scheme_preview/add?code=测试1
    //   tabStore.closeTabByKey('/dashboard/scheme_preview/add?code=' + schemeCode, router);
    // }
  }
  function onSaveDesigner() {}
</script>
<style scoped>
  .preview-box {
    .btn-box {
      padding: 10px;
      justify-content: flex-end;
      display: flex;
    }
  }
</style>
