<template>
  <div @click.stop="onClickCode">
    <component
      :is="componentType"
      v-bind="$attrs"
      @onClickImg="onClickImg"
      @onClickIcon="onClickIcon"
    />
  </div>
</template>
<script>
/* @Author: yangxin
 * @Date: 2021-09-18 10:22:06
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2021-11-25 20:00:39
 */
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";

export default {
  name: "MtSuspensionCode",
  components: {
    CircularCode,
    CodeDialog,
    AvatarCode,
    MessageCode,
  },
  props: {
    type: {
      type: String,
      default: "circular",
    }
  },
  computed: {
    componentType() {
      const dict = {
        circular: "CircularCode",
        avtatar: "AvatarCode",
        msg: "MessageCode",
        static: "CodeDialog",
      };
      return dict[this.type];
    },
  },
  methods: {
    onEmitClick(data) {
      this.$emit("onClick", data);
    },
    onClickImg(data) {
      this.onEmitClick({
        type: "img",
        data,
      });
    },
    onClickIcon(data) {
      this.onEmitClick({
        type: "icon",
        data,
      });
    },
    onClickCode() {
      this.onEmitClick({
        type: "card",
        data: this.$attrs,
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
