<template>
  <div class="fixed-dialog" :style="styleExtra">
    <div
      class="fixed-dialog-img"
      :class="`${fixedSize === 'small' ? 'fixed-dialog-img-small' : ''}`"
      @click.stop="onClickImg"
      :style="picExtraStyle"
    >
      <WlPic :src="imgUrl" :needCos="needCos" :cosSuffix="cosSuffix"></WlPic>
    </div>
    <div class="fixed-dialog-content">
      <span class="fixed-dialog-content-title" :style="titleStyle">
        {{ title }}
      </span>
      <span class="fixed-dialog-content-subtitle" :style="subtitleStyle">
        {{ subtitle }}
      </span>
    </div>
    <slot></slot>
  </div>
</template>
<script lang="ts">
export default {
  name: "FixedDialog",
};
</script>
<script lang="ts" setup>
import WlPic from "@mobileUI/components/WlPic/src/index.vue";

interface Props {
  styleExtra: Object;
  imgUrl: string;
  title: string;
  titleStyle: Object;
  subtitle: string;
  subtitleStyle: Object;
  needCos: boolean;
  cosSuffix: string;
  picExtraStyle: Object;
  fixedSize: string;
}
const props = withDefaults(defineProps<Props>(), {
  styleExtra: () => {
    return {};
  },
  imgUrl: "",
  title: "",
  titleStyle: () => {
    return {};
  },
  subtitle: "",
  subtitleStyle: () => {
    return {};
  },
  needCos: true,
  cosSuffix: "imageView2/1/w/100/h/100/q/85",
  picExtraStyle: () => {
    return {};
  },
  fixedSize: "static",
});
const emit = defineEmits(["onClickImg"]);
const onClickImg = () => {
  emit("onClickImg", {
    title: props.title,
    subtitle: props.subtitle,
    url: props.imgUrl,
  });
};
</script>
<style lang="scss">
.suspension-code[data-weiling-mobile-ui-bc-suspension-code] {
  .fixed-dialog {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    max-height: j(345);
    background-color: white;
    @extend %flex-direction-column;
    @extend %flex-middle-center;

    &-img {
      width: j(140);
      height: j(140);
      border-radius: j(6);
      overflow: hidden;
      margin-bottom: j(6);
    }

    &-img-small {
      width: j(100);
      height: j(100);
    }

    &-content {
      text-align: center;
      @extend %flex-direction-column;

      &-title {
        font-weight: 600;
        font-size: j(15);
        line-height: j(21);
        margin-bottom: j(4);
        color: var(--wl-primary-color);
        white-space: pre;
        @include textEllipsis(1);
      }

      &-subtitle {
        font-size: j(12);
        line-height: j(17);
        color: var(--wl-text-color-placeholder);
        white-space: pre;
        @include textEllipsis(1);
      }
    }
  }
}
</style>
