<template>
  <div class="page-prop-edit">
    <el-form ref="form" :model="form" label-width="70px">
      <el-form-item label="纸张规格">
        <el-select
          v-model="form.pageSize"
          placeholder="请选择"
          :disabled="pageSizeOptions.length < 2"
          @change="modifyPageSize"
        >
          <el-option
            v-for="item in pageSizeOptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="栏位布局">
        <el-button
          v-for="(item, index) in columnOptions"
          :key="index"
          class="column-btn"
          :title="item.title"
          :disabled="item.disabled"
          @click="columnNumChange"
        >
          <i
            :class="[
              'icon',
              form.columnNumber == item.value
                ? `icon-column-${item.label}-act`
                : `icon-column-${item.label}`,
            ]"
          ></i>
        </el-button>
      </el-form-item> -->
      <el-form-item label="页码">
        <el-checkbox v-model="form.showPageNo" @change="configChange"
          >显示</el-checkbox
        >
      </el-form-item>
      <el-form-item v-if="form.pageSize !== 'A4'" label="侧边栏">
        <el-checkbox v-model="form.showSide" @change="configChange"
          >显示</el-checkbox
        >
      </el-form-item>
      <el-form-item label="封面">
        <el-checkbox v-model="form.showCover" @change="coverConfigChange"
          >显示</el-checkbox
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { objAssign } from "../../card/plugins/utils";
import { getModel as getPageModel } from "../elements/page/model";

const COLUMN_OPTIONS = [
  {
    value: 1,
    title: "一栏",
    label: "one",
    sizeValid: ["A4"],
    disabled: false,
  },
  {
    value: 2,
    title: "二栏",
    label: "two",
    sizeValid: ["A3"],
    disabled: false,
  },
  {
    value: 3,
    title: "三栏",
    label: "three",
    sizeValid: ["A3"],
    disabled: false,
  },
  {
    value: 4,
    title: "四栏",
    label: "four",
    sizeValid: ["A3"],
    disabled: false,
  },
];
const PAGE_SIZE_OPTIONS = {
  A3: {
    columnNumber: 2,
    columnGap: 20,
    showPageNo: true,
    showSide: true,
  },
  A4: {
    columnNumber: 1,
    columnGap: 20,
    showPageNo: true,
    showSide: false,
  },
};

export default {
  name: "PagePropEdit",
  data() {
    return {
      columnOptions: [],
      pageSizeOptions: ["A3", "A4"],
      form: {
        pageSize: "A3",
        columnNumber: 2,
        columnGap: 20,
        showPageNo: true,
        showCover: false,
        showSide: true,
      },
      prePageSize: "A3",
    };
  },
  computed: {
    ...mapState("paper-export", ["pageConfig", "pages"]),
  },
  watch: {
    pageConfig: {
      immediate: true,
      handler(val) {
        this.form = objAssign(this.form, val);
        this.prePageSize = this.form.pageSize;
        this.columnOptions = COLUMN_OPTIONS.filter((item) =>
          item.sizeValid.includes(this.form.pageSize)
        );
      },
    },
  },
  methods: {
    ...mapMutations("paper-export", [
      "setCurElement",
      "setPages",
      "setTopics",
      "setPageConfig",
    ]),
    ...mapActions("paper-export", [
      "modifyPagesInfo",
      "rebuildPages",
      "resetElementProp",
      "changePage",
      "directChangePage",
    ]),
    modifyColumnNum(item) {
      this.$confirm(
        "此操作会导致当前题卡编辑的所有元素清空, 是否继续?",
        "提示",
        {
          type: "warning",
        }
      )
        .then(() => {
          this.columnNumChange(item.value);
        })
        .catch(() => {});
    },
    columnNumChange(val) {
      this.form.columnNumber = val;
      this.setPageConfig(this.form);
      this.setPages([]);
      this.setTopics([]);
      this.$emit("init-page");
    },
    configChange() {
      this.setPageConfig(this.form);
      this.modifyPagesInfo(this.form);
      this.$nextTick(() => {
        this.rebuildPages();
        this.setCurElement({});
        this.$nextTick(() => {
          this.resetElementProp(true);
        });
      });
    },
    coverConfigChange(val) {
      this.setPageConfig(this.form);
      if (val) {
        this.pages.unshift(
          getPageModel({ ...this.pageConfig, pageType: "cover" })
        );
        this.setPages(this.pages);
        this.changePage();
      } else {
        this.setPages(this.pages.slice(1));
        this.directChangePage(0);
      }
    },
    modifyPageSize() {
      this.$confirm("此操作将会重置当前页面所有元素信息, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.form = Object.assign(
            {},
            this.form,
            PAGE_SIZE_OPTIONS[this.form.pageSize]
          );
          this.setPageConfig(this.form);
          this.setPages([]);
          this.setTopics([]);
          this.$emit("init-page");
        })
        .catch(() => {
          this.form.pageSize = this.prePageSize;
        });
    },
  },
};
</script>
