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

    <div class="header-title">{{ t(title ?? '') }}</div>

    <div class="button-box">
      <a-button type="primary" class="save-button" :loading="iconLoading" @click="debounceFn">{{
        t('保存草稿')
      }}</a-button>
      <a-button type="primary" class="finish-button" :loading="iconLoading" @click="debounceFn">{{
        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 { useI18n } from '/@/hooks/web/useI18n';
  import { onUnmounted, ref } from 'vue';
  import { debounce } from 'lodash-es';
  const { t } = useI18n();
  const emits = defineEmits(['save', 'close', 'updateFormData']);
  defineProps({
    title: String,
  });

  const iconLoading = ref<boolean>(false);
  const submit = () => {
    emits('save');
  };
  const debounceFn = debounce(submit, 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;
  }

  .save-button {
    background-color: #f70;
    border-color: #f70;
    margin: 0 10px;
    width: 82px;
    padding: 0;
    border-radius: 4px;
  }

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

  .finish-button {
    background-color: #1c8dff;
    border-color: #1c8dff;
    margin: 0 10px;
    width: 82px;
    padding: 0;
    border-radius: 4px;
  }
</style>
