<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 :key="designerOpen" style="border:1px solid rgba(0, 0, 0, 0.1);" ref="modelDesigner"
      v-loading="designerData.loading" :schemeCode="schemeCode" @save="onSaveDesigner" />
  </div>

</template>

<script lang="ts" setup>
  import { h, ref, provide, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
  import ProcessDesigner from '@/components/ProcessDesigner/index.vue';
  import { SaveOutlined, CloseCircleOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
  import { postAdd, update } from '@/api/sys/WFSchemeInfo'
  import { useRoute } from 'vue-router'
  import { useMultipleTabStore } from '@/store/modules/multipleTab';
  import { useRouter } from 'vue-router';
  import { flowStore } from '@/store/modules/flow';

  const flowWfDataStore = flowStore();
  const tabStore = useMultipleTabStore();
  const router = useRouter();

  const route = useRoute()
  const schemeCode = route.query.code
  const designerOpen = ref(false)
  const designerData = reactive({
    loading: false,
  })
  const modelDesigner = ref < any > ()
  async function onSave(type) {
    console.log(flowWfDataStore.getWfData)
    let validateData = await modelDesigner.value.validateFlow()
    if (validateData) {
      let formData = await modelDesigner.value.getFlow()
      // 1正式 2草稿
      formData.scheme.type = Number(type)
      if (!schemeCode) {
        let data = await postAdd(formData)
      } else {
        let data = await update(formData)
      }
      closePreview()
    }
  }
  function closePreview() {
    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);
    }
  }
</script>
<style scoped>
  .preview-box {
    .btn-box {
      padding: 10px;
      justify-content: flex-end;
      display: flex;

    }
  }
</style>