<template>
  <div
    class="suspension"
    :class="suspensionSize === 'small' ? 'suspension-small' : ''"
  >
    <i
      v-if="closeIconShow"
      class="iconfont icon-mobile-ui-guanbi suspension-close-icon"
      :class="closeIcon"
      @click.stop="onClickIcon"
    ></i>
    <WlPic :src="imgUrl"></WlPic>
    <div class="suspension-content">
      <span class="suspension-content-title" :style="titleStyle">{{
        title
      }}</span>
      <span class="suspension-content-subtitle" :style="subtitleStyle">{{
        subtitle
      }}</span>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts">
export default {
  name: "SuspensionDialog",
};
</script>

<script lang="ts" setup>
import type { CSSProperties } from "vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
type Props = {
  styleExtra: CSSProperties;
  imgUrl: string;
  title: string;
  titleStyle: CSSProperties;
  subtitle: string;
  subtitleStyle: CSSProperties;
  closeIcon: string;
  closeIconShow: boolean;
  suspensionSize: string;
  needCos: boolean;
  cosSuffix: string;
};
withDefaults(defineProps<Props>(), {
  styleExtra: null,
  imgUrl: "url",
  title: "title",
  titleStyle: null,
  subtitle: "subtitle",
  subtitleStyle: null,
  closeIcon: "icon-mobile-ui-cuowu",
  closeIconShow: true,
  suspensionSize: "static",
  needCos: true,
  cosSuffix: "imageView2/1/w/100/h/100/q/85",
});
const emit = defineEmits(["onClickIcon"]);
const onClickIcon = () => {
  emit("onClickIcon");
};
</script>

<style lang="scss">
.suspension-code[data-weiling-mobile-ui-bc-suspension-code] {
  .suspension {
    position: relative;

    &-small {
      width: j(95);
      padding: j(15) j(20) j(10) j(20);

      .suspension-close-icon {
        font-size: j(10);
        top: j(6);
        right: j(7);
      }

      .suspension-content-title {
        margin-bottom: j(2);
        font-size: j(13);
        line-height: j(15);
      }

      .suspension-content-subtitle {
        font-size: j(12);
        line-height: j(12);
      }
    }

    width: j(160);
    background: rgba(255, 255, 255, 0.88);
    border: j(1) solid var(--wl-primary-color);
    box-sizing: content-box;
    box-shadow: 0px j(5) j(6) rgba(28, 159, 255, 0.1);
    backdrop-filter: blur(j(10));
    border-radius: j(9);
    padding: j(28) j(22) j(20) j(22);
    @extend %flex-middle;
    @extend %flex-direction-column;

    &-close-icon {
      position: absolute;
      font-size: j(15);
      color: var(--wl-text-color-placeholder);
      font-size: j(13);
      top: j(13);
      right: j(12);
    }

    &-content {
      text-align: center;
      margin-top: j(5);
      @extend %flex-direction-column;

      &-title {
        font-weight: 600;
        font-size: j(15);
        line-height: j(25);
        color: var(--wl-primary-color);
        margin-bottom: j(2);
        white-space: pre;
      }

      &-subtitle {
        font-size: j(13);
        line-height: j(16);
        color: var(--wl-text-color-placeholder);
      }
    }
  }
}
</style>
