<template>
  <component
    :is="mark"
    v-if="componentNames.includes(mark)"
    ref="Component"
    :disabled="disabled"
    :form-business-id="formBusinessId"
  />
</template>

<script>
import { toast } from "@mega-design/ui-vue";
import mixin from "./mixin";

export default {
  mixins: [mixin],
  props: {
    mark: {
      require: true,
      type: String,
      default: () => null,
    },
    formBusinessId: {
      type: String,
      default: undefined,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    componentNames() {
      return Object.keys(mixin.components);
    },
  },
  mounted() {
    if (this.mark && !this.componentNames.includes(this.mark)) {
      toast({
        enableCountDown: false,
        closable: false,
        title: () => this.$t("TIPS"),
        content: () => (
          <div class="py-4">
            <a-icon type="close-circle" class="text-error text-lg" />
            <span class="pl-4">
              {this.$t("NO_COMPONENT_WARNING").replace("{}", this.mark)}
            </span>
          </div>
        ),
        footer: () => (
          <div class="w-full flex justify-center">
            <a-button type="primary" onClick={this.goRoute}>
              {this.$t("CONFIRM")}
            </a-button>
          </div>
        ),
      });
    }
  },
  methods: {
    goRoute() {
      toast({ visible: false });
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/flowable/launch" },
        vm: this,
      });
    },
  },
};
</script>
