<template>
  <static-content-wrapper
    :designer="designer"
    :field="field"
    :design-state="designState"
    :parent-widget="parentWidget"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :sub-form-row-id="subFormRowId"
  >
    <div
      v-if="designState"
      class="designer-vue-page-container"
      :style="containerStyle"
    >
      <div class="designer-vue-page-title">Vue页面</div>
      <div class="designer-vue-page-path">
        {{ componentPath || "请配置 Vue 页面路径" }}
      </div>
    </div>
    <div v-else class="vue-page-container" :style="containerStyle">
      <div v-if="!componentPath" class="vue-page-placeholder">
        {{ $t1("请配置 Vue 页面路径") }}
      </div>
      <div v-else-if="loadError" class="vue-page-error">{{ loadError }}</div>
      <div v-else-if="loading" class="vue-page-loading">
        {{ $t1("页面加载中...") }}
      </div>
      <component
        v-if="showComponent && dynamicComponent"
        :is="dynamicComponent"
        :key="componentRenderKey"
        v-bind="componentProps"
        visible-key="showComponent"
        :parent-target="_self"
        @reload="$reloadHandle"
      />
    </div>
  </static-content-wrapper>
</template>

<script>
import StaticContentWrapper from "./static-content-wrapper";
import emitter from "../../../utils/emitter";
import i18n from "../../../utils/i18n";
import fieldMixin from "./fieldMixin";
import { loadView } from "@base/store/modules/permission";

export default {
  name: "vue-page-widget",
  componentName: "FieldWidget",
  mixins: [emitter, fieldMixin, i18n],
  props: {
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      type: Number,
      default: -1,
    },
    subFormColIndex: {
      type: Number,
      default: -1,
    },
    subFormRowId: {
      type: String,
      default: "",
    },
  },
  components: {
    StaticContentWrapper,
  },
  data() {
    return {
      showComponent: false,
      dynamicComponent: null,
      componentProps: {},
      componentRenderKey: 0,
      loading: false,
      loadError: null,
    };
  },
  computed: {
    componentPath() {
      return (this.field.options.componentPath || "").trim();
    },
    containerStyle() {
      const height = (this.field.options.componentHeight || "").trim();
      if (!height) {
        return {};
      }
      return {
        height,
        minHeight: height,
        overflow: "auto",
      };
    },
  },
  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },
  mounted() {
    this.handleOnMounted();
  },
  beforeDestroy() {
    this.unregisterFromRefList();
  },
  methods: {
    normalizeComponentPath(path) {
      return path.replace(/\.vue$/i, "");
    },
    resetComponentState() {
      this.showComponent = false;
      this.dynamicComponent = null;
      this.componentProps = {};
      this.loading = false;
      this.loadError = null;
    },
    loadPage() {
      if (this.designState) {
        return;
      }

      const path = this.normalizeComponentPath(this.componentPath);
      if (!path) {
        this.resetComponentState();
        return;
      }

      if (this.dynamicComponent) {
        this.updateComponentProps();
        this.showComponent = true;
        return;
      }

      this.showComponent = false;
      this.loadError = null;
      this.loading = true;

      try {
        const loader = loadView(path);
        loader((component) => {
          if (path !== this.normalizeComponentPath(this.componentPath)) {
            return;
          }
          this.loading = false;
          if (!component) {
            this.loadError = this.$t1("页面组件未找到");
            return;
          }
          this.dynamicComponent = component.default || component;
          this.componentRenderKey += 1;
          this.updateComponentProps();
          this.showComponent = true;
        });
      } catch (error) {
        this.loading = false;
        this.loadError = error.message || this.$t1("页面加载失败");
      }
    },
    reloadPage() {
      if (!this.dynamicComponent) {
        this.loadPage();
        return;
      }
      this.$openEditView("showComponent");
    },
    updateComponentProps() {
      if (this.designState || !this.dynamicComponent) {
        return;
      }

      let props = this.handleCustomEvent(this.field.options.componentConfig);
      this.componentProps = props && typeof props === "object" ? props : {};
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/global.scss";

.designer-vue-page-container {
  outline: 1px dashed #336699;
  padding: 12px;
  margin: 5px;
  min-height: 120px;
  background: #f8fbff;
}

.designer-vue-page-title {
  font-size: 14px;
  font-weight: 600;
  color: #336699;
  margin-bottom: 8px;
}

.designer-vue-page-path {
  font-size: 12px;
  color: #666;
  word-break: break-all;
}

.vue-page-container {
  width: 100%;
  min-height: 120px;
}

.vue-page-placeholder,
.vue-page-loading,
.vue-page-error {
  padding: 16px;
  font-size: 13px;
  color: #909399;
  text-align: center;
}

.vue-page-error {
  color: #f56c6c;
}
</style>
