<template>
  <div class="page-wrapper page-asset-design" style="overflow: auto">
    <div class="page-container">
      <div class="page-title">
        <span class="divide-block__left">页面设计</span>
      </div>
      <PageGridDesign
        ref="PageGridDesign"
        :layout-data="layoutData"
        :components="components"
        :multiple="multiple"
      />
    </div>
    <div class="page-bottom-op">
      <a-button type="primary" @click="confirm">
        <MegaIcon type="icon-cur-save_1" :size="18" />
        {{ $t("SAVE") }}
      </a-button>
      <a-button @click="cancel">
        <MegaIcon type="icon-dir-f-rollback" :size="18" />
        {{ $t("CANCEL") }}
      </a-button>
    </div>
  </div>
</template>

<script>
import { Icon as MegaIcon } from "@mega-design/ui-vue";
import PageGridDesign from "@/components/grid/Container.vue";
import ApiConstant from "@/api/ApiConstant";
import { formatJson } from "@/utils/formatter";

export default {
  components: {
    MegaIcon,
    PageGridDesign,
  },
  data() {
    return {
      layoutData: {},
      components: [],
      multiple: false,
    };
  },
  mounted() {
    const { id } = this.$route.query;
    id &&
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/idewebpage/get-by-id/${id}`)
        .then((res) => {
          this.multiple = res.data.data.singleComponent !== "Y";
          if (res.data.data.pageJson) {
            const val = formatJson(res.data.data.pageJson) || {};
            this.layoutData = val?.layoutData || {};
            this.components = val?.components || [];

            if (
              this.$refs.PageGridDesign &&
              // eslint-disable-next-line no-prototype-builtins
              this.$refs.PageGridDesign.hasOwnProperty("visible")
            ) {
              this.$refs.PageGridDesign.visible = false;
            }
          }
        });
  },
  methods: {
    confirm() {
      const fn = this.$refs.PageGridDesign?.savePage;
      const json = fn instanceof Function ? fn() : {};
      this.$axios
        .put(`${ApiConstant.PREFIX_CORE}/api/idewebpage`, {
          id: this.$route.query.id,
          pageJson: JSON.stringify(json),
        })
        .then(() => {
          this.$message.success(this.$t("DESIGN_COMPLETE"));
          this.$store.dispatch("tagsView/jumpBeforeView", {
            to: { path: "/upms/devCenter/tools/pageDevelopment" },
            vm: this,
          });
        });
    },
    cancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/upms/devCenter/tools/pageDevelopment" },
        vm: this,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.page-asset-design {
  position: absolute;
  width: 100%;
  height: 100%;
  .page-title {
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid #eef1f4;
  }
  .page-container {
    position: absolute;
    width: 100%;
    height: 100%;
    /deep/.page-design {
      padding: 12px;
      height: calc(100% - 56px - 48px);
    }
  }
}
</style>
