<template>
  <div
    class="suspension-code"
    data-weiling-mobile-ui-bc-suspension-code
    @click.stop="onClickCode"
  >
    <component
      :is="componentType"
      v-bind="$attrs"
      @onClickImg="onClickImg"
      @onClickIcon="onClickIcon"
    />
  </div>
</template>

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

<script lang="ts" setup>
import CircularCode from "./component/CircularCode/index.vue";
import CodeDialog from "./component/CodeDialog/index.vue";
import AvatarCode from "./component/AvatarCode/index.vue";
import MessageCode from "./component/MessageCode/index.vue";
import { computed, useAttrs } from "vue";
interface Props {
  type: string;
}
const props = withDefaults(defineProps<Props>(), {
  type: "circular",
});
const attrs = useAttrs();
const componentType = computed(() => {
  if (props.type === "circular") return CircularCode;
  else if (props.type === "avtatar") return AvatarCode;
  else if (props.type === "msg") return MessageCode;
  else if (props.type === "static") return CodeDialog;
  else return {};
});

const emit = defineEmits(["onClick"]);
const onEmitClick = (data) => {
  emit("onClick", data);
};
const onClickImg = (data) => {
  onEmitClick({
    type: "img",
    data,
  });
};
const onClickIcon = (data) => {
  onEmitClick({
    type: "icon",
    data,
  });
};
const onClickCode = () => {
  onEmitClick({
    type: "card",
    data: attrs,
  });
};
</script>
