<template>
  <div style="height: 100%">
    <FixedDialog
      v-if="position === 'fixed'"
      :imgUrl="imgUrl"
      :title="title"
      :subtitle="subtitle"
      v-bind="$attrs"
      @onClickImg="onClickImg"
    />
    <SuspensionDialog
      v-else
      v-bind="$attrs"
      :imgUrl="imgUrl"
      :title="title"
      :subtitle="subtitle"
      @onClickIcon="onClickIcon"
      @onClickImg="onClickImg"
    />
  </div>
</template>

<script lang="ts">
export default {
  name: "CodeDialog",
};
</script>
<script lang="ts" setup>
import FixedDialog from "./component/FixedDialog/index.vue";
import SuspensionDialog from "./component/SuspensionDialog/index.vue";
type Props = {
  position: string;
  imgUrl?: string;
  title?: string;
  subtitle?: string;
};
const props = withDefaults(defineProps<Props>(), {
  position: "suspension",
  imgUrl: "",
  title: "",
  subtitle: "",
});

const emit = defineEmits(["onClickImg", "onClickIcon"]);
const onClickImg = () => {
  emit("onClickImg", {
    title: props.title,
    subtitle: props.subtitle,
    url: props.imgUrl,
  });
};
const onClickIcon = () => {
  emit("onClickIcon", {
    title: props.title,
    subtitle: props.subtitle,
    url: props.imgUrl,
  });
};
</script>
