<script setup>
import { ref, computed } from "vue";
import { useNamespace, useLocale } from "@yh-ui/hooks";
import { YhButton } from "../../button";
import { YhCheckbox } from "../../checkbox";
import { YhIcon } from "../../icon";
import { YhTooltip } from "../../tooltip";
import { useComponentTheme } from "@yh-ui/theme";
import { popconfirmProps, popconfirmEmits } from "./popconfirm";
defineOptions({
  name: "YhPopconfirm"
});
const props = defineProps(popconfirmProps);
const emit = defineEmits(popconfirmEmits);
const ns = useNamespace("popconfirm");
const { themeStyle } = useComponentTheme(
  "popconfirm",
  computed(() => props.themeOverrides)
);
const { t } = useLocale();
const internalVisible = ref(false);
const visible = computed({
  get: () => props.visible !== null ? props.visible : internalVisible.value,
  set: (val) => {
    internalVisible.value = val;
    emit("update:visible", val);
  }
});
const confirmLoading = ref(false);
const dontAskAgainChecked = ref(false);
const handleConfirm = async () => {
  if (confirmLoading.value) return;
  if (props.beforeConfirm) {
    confirmLoading.value = true;
    try {
      const result = await props.beforeConfirm();
      if (result !== false) {
        visible.value = false;
        emit("confirm", dontAskAgainChecked.value);
      }
    } catch {
    } finally {
      confirmLoading.value = false;
    }
  } else {
    visible.value = false;
    emit("confirm", dontAskAgainChecked.value);
  }
};
const handleCancel = () => {
  if (confirmLoading.value) return;
  visible.value = false;
  emit("cancel");
};
defineExpose({
  visible,
  toggle: (val) => visible.value = val
});
</script>

<template>
  <YhTooltip
    v-model:visible="visible"
    :class="ns.b()"
    trigger="click"
    :placement="placement"
    :disabled="disabled"
    :teleported="teleported"
    :offset="offset"
    :z-index="zIndex"
    :show-arrow="showArrow"
    :show-after="0"
    :hide-after="0"
    :popper-class="`${ns.e('popper')} ${popperClass}`"
    :popper-style="popperStyle"
    persistent
    interactive
  >
    <!-- 触发触发元素 -->
    <slot />

    <!-- 气泡框内容 -->
    <template #content>
      <div
        :class="ns.e('content')"
        :style="[{
  width: typeof width === 'number' ? `${width}px` : width
}, themeStyle]"
      >
        <div :class="ns.e('main')">
          <div v-if="!hideIcon" :class="ns.e('icon')" :style="{
  color: iconColor
}">
            <slot name="icon">
              <!-- 支持旧版图标名称 -->
              <YhIcon :name="icon" />
            </slot>
          </div>
          <div :class="ns.e('inner')">
            <div :class="ns.e('title')">
              <slot name="title">{{ title }}</slot>
            </div>
            <div v-if="description || $slots.description" :class="ns.e('description')">
              <slot name="description">{{ description }}</slot>
            </div>
          </div>
        </div>

        <!-- YH-UI 自创高级功能：不再提示 -->
        <div v-if="showDontAskAgain" :class="ns.e('extra')">
          <YhCheckbox v-model="dontAskAgainChecked">
            {{ dontAskAgainText || t("popconfirm.dontAskAgain") }}
          </YhCheckbox>
        </div>

        <div :class="ns.e('footer')" @click.stop>
          <!-- 自创高级功能：交换按钮位置 -->
          <template v-if="swapButtons">
            <YhButton
              size="small"
              :type="confirmButtonType"
              :loading="confirmLoading"
              @click.stop="handleConfirm"
            >
              {{ confirmButtonText || t("popconfirm.confirm") }}
            </YhButton>
            <YhButton
              v-if="!hideCancel"
              size="small"
              :type="cancelButtonType"
              :disabled="confirmLoading"
              @click.stop="handleCancel"
            >
              {{ cancelButtonText || t("popconfirm.cancel") }}
            </YhButton>
          </template>
          <template v-else>
            <YhButton
              v-if="!hideCancel"
              size="small"
              :type="cancelButtonType"
              :disabled="confirmLoading"
              @click.stop="handleCancel"
            >
              {{ cancelButtonText || t("popconfirm.cancel") }}
            </YhButton>
            <YhButton
              size="small"
              :type="confirmButtonType"
              :loading="confirmLoading"
              @click.stop="handleConfirm"
            >
              {{ confirmButtonText || t("popconfirm.confirm") }}
            </YhButton>
          </template>
        </div>
      </div>
    </template>
  </YhTooltip>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-popconfirm__popper {
  /* 与 Popover 空间感保持绝对对齐 */
  border-radius: 12px !important;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  padding: 0 !important;
  min-width: 200px;
  overflow: visible !important;
}
.yh-popconfirm__popper .yh-popconfirm__content {
  padding: 20px 24px;
}
.yh-popconfirm__popper .yh-popconfirm__content .yh-popconfirm__main {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.yh-popconfirm__popper .yh-popconfirm__content .yh-popconfirm__icon {
  font-size: 20px;
  line-height: 1.4;
  flex-shrink: 0;
}
.yh-popconfirm__popper .yh-popconfirm__content .yh-popconfirm__inner {
  flex: 1;
  min-width: 0;
}
.yh-popconfirm__popper .yh-popconfirm__content .yh-popconfirm__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.yh-popconfirm__popper .yh-popconfirm__content .yh-popconfirm__description {
  font-size: 14px;
  line-height: 1.62;
  opacity: 0.88;
}
.yh-popconfirm__popper .yh-popconfirm__content {
  /* 底部按钮排版 */
}
.yh-popconfirm__popper .yh-popconfirm__content .yh-popconfirm__footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.yh-popconfirm__popper {
  /* 消除基座自带的 padding */
}
.yh-popconfirm__popper .yh-tooltip__content {
  padding: 0 !important;
}

.yh-popconfirm {
  display: inline-block;
  line-height: 1;
}
</style>
