<template>
  <el-dialog
    class="element-prop-edit edit-dialog"
    :visible.sync="openElementEditDialog"
    :title="title"
    top="10vh"
    width="640px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="cancel"
    append-to-body
  >
    <component
      :is="curEditComponent"
      ref="ComponentForm"
      :key="curElement.id"
      :instance="curElement"
      @modified="modified"
    ></component>

    <div slot="footer">
      <el-button type="primary" @click="submit">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { getElementName } from "../elementModel";
import EditText from "../../card/elements/text/EditText";
import EditFieldText from "../elements/field-text/EditFieldText";
import EditImage from "../../card/elements/image/EditImage";
import EditLine from "../../card/elements/line/EditLine";
import EditLines from "../../card/elements/lines/EditLines";
import EditGrids from "../../card/elements/grids/EditGrids";
import EditPane from "../../card/elements/pane/EditPane";
import EditGutter from "../../card/elements/gutter/EditGutter";
import EditFillField from "../elements/fill-field/EditFillField";
import EditFillTable from "../../card/elements/fill-table/EditFillTable";
import EditFillPane from "../../card/elements/fill-pane/EditFillPane";
import EditPaneBox from "../elements/pane-box/EditPaneBox.vue";
import EditPaperStruct from "../elements/paper-struct/EditPaperStruct";

export default {
  name: "ElementPropEdit",
  components: {
    EditText,
    EditFieldText,
    EditImage,
    EditLine,
    EditLines,
    EditGrids,
    EditPane,
    EditGutter,
    EditFillField,
    EditFillTable,
    EditFillPane,
    EditPaneBox,
    EditPaperStruct,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("paper-export", ["curElement", "openElementEditDialog"]),
    title() {
      return this.curElement.type
        ? getElementName(this.curElement.type)
        : "属性编辑";
    },
    curEditComponent() {
      if (!this.curElement.type) return;
      let type = this.curElement.type.toLowerCase().replace("_", "-");
      if (type.indexOf("line-") === 0) type = "line";
      return `edit-${type}`;
    },
  },
  methods: {
    ...mapMutations("paper-export", ["setOpenElementEditDialog"]),
    ...mapActions("paper-export", [
      "modifyElement",
      "modifySideElement",
      "modifyElementChild",
      "rebuildPages",
    ]),
    cancel() {
      this.setOpenElementEditDialog(false);
    },
    open() {
      this.setOpenElementEditDialog(true);
    },
    submit() {
      this.$refs.ComponentForm.submit();
    },
    modified(element) {
      if (this.curElement["_side"]) {
        this.modifySideElement(element);
        this.cancel();
        return;
      }
      if (this.curElement["_edit"]) {
        if (element["container"]) {
          this.modifyElementChild(element);
        } else {
          this.modifyElement(element);
        }
      } else {
        this.addElement(element);
      }
      this.cancel();
      this.$nextTick(() => {
        this.rebuildPages();
      });
    },
  },
};
</script>
