<template>
  <div
    class="recommend-popover"
    :style="wrap_style"
    data-weiling-mobile-ui-bc-business-stage-recommend-popover
  >
    <slot></slot>
  </div>
</template>

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

<script setup lang="ts">
import { ref, watchEffect, watch, computed } from "vue";
import { bo_recommand_popup } from "@mobileUI/utils/cdn";
type Props = {
  modelValue?: boolean;
  background_image_url?: string;
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  background_image_url: "",
});

const emit = defineEmits<{
  (e: "update:modelValue", val: boolean);
}>();

const visible = ref(false);

const wrap_style = computed(() => {
  return {
    "background-image": `url(${
      props.background_image_url || bo_recommand_popup
    })`,
  };
});

watchEffect(() => {
  visible.value = props.modelValue;
});

watch(
  () => visible.value,
  (val) => emit("update:modelValue", val),
);
</script>

<style lang="scss">
.recommend-popover[data-weiling-mobile-ui-bc-business-stage-recommend-popover] {
  width: j(186);
  height: j(57);
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
}
</style>
