<template>
  <sar-popup
    effect="zoom"
    :visible="visible"
    @overlay-click="onOverlayClick"
    :duration="duration"
    :root-style="{ maxWidth: 'var(--sar-dialog-max-width)' }"
  >
    <view :class="dialogClass" :style="dialogStyle">
      <view v-if="headed" :class="bem.e('header')">
        <view v-if="title" :class="bem.e('title')">
          {{ title }}
        </view>
        <view :class="bem.e('close')">
          <sar-button
            type="pale-text"
            theme="secondary"
            size="large"
            @click="onClose"
          >
            <sar-icon name="close" />
          </sar-button>
        </view>
      </view>

      <view v-if="(!headed && title) || message" :class="bem.e('body')">
        <view v-if="!headed && title" :class="bem.e('title')">
          {{ title }}
        </view>
        <view v-if="message" :class="bem.e('message')">
          {{ message }}
        </view>
      </view>
      <slot></slot>

      <view :class="bem.e('footer')">
        <sar-button
          v-if="showCancel"
          :root-class="bem.e('button')"
          :loading="loading.cancel"
          :type="buttonProps.cancel.type"
          :theme="buttonProps.cancel.theme"
          :size="buttonProps.cancel.size"
          :round="buttonProps.confirm.round"
          @click="onCancel"
        >
          {{ cancelText || t('cancel') }}
        </sar-button>
        <view
          v-if="showCancel && buttonType === 'text'"
          :class="bem.e('divider')"
        />
        <sar-button
          v-if="showConfirm"
          :root-class="bem.e('button')"
          :loading="loading.confirm"
          :type="buttonProps.confirm.type"
          :theme="buttonProps.confirm.theme"
          :size="buttonProps.confirm.size"
          :round="buttonProps.confirm.round"
          @click="onConfirm"
        >
          {{ confirmText || t('confirm') }}
        </sar-button>
      </view>
    </view>
  </sar-popup>
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { computed, ref, watch } from "vue";
import { classNames, stringifyStyle, createBem, noop } from "../utils";
import { useTranslate } from "../locale";
import SarPopup from "../popup/popup.vue";
import SarButton from "../button/button.vue";
import SarIcon from "../icon/icon.vue";
import { dialogProps } from "./common";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "dialog",
  props: dialogProps,
  emits: ["update:visible", "close", "cancel", "confirm"],
  setup(__props, { expose: __expose, emit: __emit }) {
    __expose();
    const props = __props;
    const emit = __emit;
    const bem = createBem("dialog");
    const { t } = useTranslate("dialog");
    const innerVisible = ref(props.visible);
    watch(
      () => props.visible,
      () => {
        innerVisible.value = props.visible;
      }
    );
    const loading = ref({
      cancel: false,
      confirm: false,
      close: false
    });
    const perhapsClose = (type) => {
      emit(type);
      if (typeof props.beforeClose === "function") {
        const result = props.beforeClose(type);
        if (result instanceof Promise) {
          loading.value[type] = true;
          return result.then(() => {
            innerVisible.value = false;
            emit("update:visible", false);
          }).catch(noop).finally(() => {
            loading.value[type] = false;
          });
        } else if (result === false) {
          return;
        }
      }
      innerVisible.value = false;
      emit("update:visible", false);
    };
    const onOverlayClick = () => {
      if (props.overlayClosable) {
        perhapsClose("close");
      }
    };
    const onClose = () => {
      perhapsClose("close");
    };
    const onConfirm = () => {
      perhapsClose("confirm");
    };
    const onCancel = () => {
      perhapsClose("cancel");
    };
    const buttonProps = computed(() => {
      return {
        text: {
          cancel: {
            type: "text",
            theme: "secondary",
            size: "large"
          },
          confirm: {
            type: "text",
            theme: "primary",
            size: "large"
          }
        },
        round: {
          cancel: {
            type: "pale",
            theme: "primary",
            round: true
          },
          confirm: {
            type: "default",
            theme: "primary",
            round: true
          }
        }
      }[props.buttonType];
    });
    const dialogClass = computed(() => {
      return classNames(
        bem.b(),
        bem.m("headed", props.headed),
        bem.m("untitled", !props.title),
        bem.m(props.buttonType),
        props.rootClass
      );
    });
    const dialogStyle = computed(() => {
      return stringifyStyle(props.rootStyle);
    });
    const __returned__ = { props, emit, bem, t, innerVisible, loading, perhapsClose, onOverlayClick, onClose, onConfirm, onCancel, buttonProps, dialogClass, dialogStyle, SarPopup, SarButton, SarIcon };
    return __returned__;
  }
});
</script>

<style lang="scss">
@use './index.scss';
</style>