<template>
  <div class="header-box bg-white dark:bg-dark-900">
    <DesignLogo />

    <div class="header-title">{{ t(title || '新增流程设计') }}</div>

    <div class="button-box">
      <UpdateFormData />
      <a-button
        type="primary"
        class="bpmn-button !mr-0"
        :loading="iconLoading"
        @click="debounceDraftFn"
        v-if="isCanDraft"
        >{{ t('保存草稿') }}</a-button
      >
      <a-button
        type="primary"
        class="bpmn-button"
        :disabled="submitLoading"
        :loading="iconLoading"
        @click="submit"
        >{{ t('保存模板') }}</a-button
      >
      <a-button type="primary" class="clean-icon" @click="$emit('close')">{{ t('关闭') }}</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { DesignLogo } from '/@/components/ModalPanel/index';
  import UpdateFormData from '/@bpmn/components/UpdateFormData.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { onUnmounted, ref } from 'vue';
  import { debounce } from 'lodash-es';
  const { t } = useI18n();
  const emits = defineEmits(['save', 'close', 'updateFormData', 'saveDraft']);
  defineProps({
    title: String,
    isCanDraft: Boolean,
    submitLoading: Boolean,
  });

  const iconLoading = ref<boolean>(false);
  const submit = () => {
    emits('save');
  };
  const saveDraft = () => {
    emits('saveDraft');
  };
  const debounceFn = debounce(submit, 2000, {
    leading: true, // 延长开始后调用
    trailing: false, // 延长结束前调用
  });
  const debounceDraftFn = debounce(saveDraft, 2000, {
    leading: true, // 延长开始后调用
    trailing: false, // 延长结束前调用
  });
  //移除组件时，取消防抖
  onUnmounted(() => {
    debounceFn.cancel();
  });
</script>

<style lang="less" scoped>
  .header-box {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 12px;
  }

  .header-title {
    font-size: 16px;
    color: #333;
    margin-right: 10px;
  }

  [data-theme='dark'] .header-title {
    color: #fff;
  }

  .button-box {
    display: flex;
    align-items: center;
    font-size: 12px;
  }

  .inline-box {
    font-size: 12px;
  }

  .bpmn-button {
    margin: 0 15px;
    width: 82px;
    padding: 0;
    border-radius: 4px;
  }

  .clean-icon {
    background-color: @clear-color;
    border-color: @clear-color;
    border-radius: 4px;
    width: 82px;
  }
</style>
