<template>
  <CrmDrawer
    v-model:show="visible"
    :width="props.width"
    :min-width="props.minWidth"
    :footer="false"
    :closable="false"
    :close-on-esc="false"
    :mask-closable="false"
    :loading="loading"
    header-class="crm-process-drawer-header"
    body-content-class="!p-0"
    @mask-click="handleCancel"
  >
    <template #header>
      <div class="crm-process-drawer-header-content">
        <div class="crm-process-drawer-header-item crm-process-drawer-header-item--title flex items-center">
          <n-button text class="mr-[4px] w-[32px]" @click="handleCancel">
            <n-icon size="16">
              <ChevronBackOutline />
            </n-icon>
          </n-button>
          <div class="crm-process-drawer-title-wrap flex flex-1 items-center gap-[8px]">
            <slot name="title">
              <n-tooltip trigger="hover" :delay="300" :disabled="!props.title">
                <template #trigger>
                  <div class="one-line-text !leading-[20px]"> {{ props.title ?? '-' }}</div>
                </template>
                {{ props.title ?? '-' }}
              </n-tooltip>
            </slot>
          </div>
        </div>
        <div class="flex justify-center">
          <CrmTab
            v-model:active-tab="activeTab"
            class="-mb-[9px] flex"
            no-content
            :tab-list="props.tabList"
            type="line"
            :before-leave="props.beforeChangeTab"
          />
        </div>
        <div class="crm-process-drawer-header-item flex justify-end gap-[12px]">
          <slot v-if="!props.readonly" name="headerActions">
            <n-button type="primary" ghost class="n-btn-outline-primary" @click="handleCancel">
              {{ t('common.cancel') }}
            </n-button>
            <n-button
              type="primary"
              ghost
              class="n-btn-outline-primary"
              :disabled="activeTab === props.tabList[props.tabList.length - 1].name"
              @click="() => emit('nextStep')"
            >
              {{ t('common.nextStep') }}
            </n-button>
            <n-button type="primary" :loading="loading" @click="() => emit('save')">
              {{ t('common.save') }}
            </n-button>
          </slot>
        </div>
      </div>
    </template>
    <div class="h-full">
      <slot></slot>
    </div>
  </CrmDrawer>
</template>

<script setup lang="ts">
  import { watchEffect } from 'vue';
  import { NButton, NIcon, NTooltip } from 'naive-ui';
  import { ChevronBackOutline } from '@vicons/ionicons5';

  import { useI18n } from '@lib/shared/hooks/useI18n';

  import CrmDrawer from '@/components/pure/crm-drawer/index.vue';
  import CrmTab, { CrmTabListItem } from '@/components/pure/crm-tab/index.vue';

  const { t } = useI18n();

  const props = withDefaults(
    defineProps<{
      tabList: CrmTabListItem[];
      loading: boolean;
      title?: string;
      readonly?: boolean;
      width?: string | number;
      minWidth?: number;
      beforeChangeTab?: (newVal: string | number, oldVal: string | number | null) => boolean | Promise<boolean>;
    }>(),
    {
      width: '75%',
      minWidth: 800,
    }
  );

  const emit = defineEmits<{
    (e: 'save'): void;
    (e: 'nextStep'): void;
    (e: 'cancel'): void;
  }>();

  const visible = defineModel<boolean>('visible', {
    required: true,
  });

  const activeTab = defineModel<string | number>('activeTab', {
    default: '',
  });

  function handleCancel() {
    emit('cancel');
  }

  watchEffect(() => {
    if (!activeTab.value && props.tabList.length) {
      activeTab.value = props.tabList[0].name as string | number;
    }
  });
</script>

<style scoped lang="less">
  .crm-process-drawer-header-content {
    padding: 8px;
    gap: 24px;
    box-sizing: border-box;
    @apply flex items-center;
    .crm-process-drawer-header-item {
      @apply flex flex-1;

      min-width: 0;
    }
    .crm-process-drawer-header-item--title {
      flex: 1 1 0;
      min-width: 0;
    }
    .crm-process-drawer-title-wrap {
      overflow: hidden;
      min-width: 0;
    }
  }
</style>

<style lang="less">
  .crm-process-drawer-header {
    padding: 0 16px !important;
    .n-drawer-header__main {
      max-width: 100%;
    }
  }
</style>
