<template>
  <div id="app">
    <printDesign ref="printDesign" v-if="show" :print-api-data="printApiData" :defaultList="defaultList" :panel="panel">
    </printDesign>
    <PrintPreview v-if="preview" :print-api-data="printApiData" :defaultList="defaultList" :panel="panel">
    </PrintPreview>
  </div>
</template>

<script>
import printDesign from "./print/index";
import PrintPreview from "./print/printPreview.vue";
export default {
  name: "App",
  components: { printDesign, PrintPreview },
  data() {
    return {
      show: false,
      preview: false,
      printApiData: {},
      defaultList: [],
      panel: {
        panels: [
          {
            index: 0,
            name: 1,
            height: 297,
            width: 210,
            paperHeader: 49.5,
            paperFooter: 780,
            printElements: [],
            paperNumberLeft: 565.5,
            paperNumberTop: 819,
            watermarkOptions: {},
          },
        ],
      },
    };
  },
  mounted() {
    let self = this;
    var urlType = self.getQueryVariable('type');
    window.addEventListener("message", function (event) {
      // 加强 iframe判断 是否来源于主框架
      if (event.data && event.data.type != 'webpackOk') {
        // 处理消息
        if (event.data.type == "save") {
          let json = self.$refs.printDesign.getJson();
          self.sendJsonMessage(json, urlType);
        } else if (event.data.type == "preview") {
          self.initDesignData(event);
          self.preview = true;
          self.show = false;
        } else if (event.data.type == "api") {
          self.initDesignData(event);
          if (self.defaultList) {
            self.preview = false;
            self.show = true;
          } else {
            console.log('你是否配置错误，请重新再试');
          }
        } else {
          // self.initDesignData(event);
          // if (self.defaultList) {
          //   self.preview = false;
          //   self.show = true;
          // } else {
          //   console.log('你是否配置错误，请重新再试');
          // }
        }
      }
    });
  },
  methods: {
    // url参数提取
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
      }
      return (false);
    },
    sendJsonMessage(json, urlType) {
      window.parent.postMessage({ json, urlType }, "\*");
    },
    initDesignData(event) {
      let fields = [];
      if (event.data.printData) this.printApiData = event.data.printData;
      // 主表
      if (event.data.fields) {
        fields = event.data.fields;
      }
      window.localStorage.setItem("fields", JSON.stringify(fields));
      // 子表
      let subTabulation = [];
      if (event.data.subTabulation) {
        subTabulation = event.data.subTabulation;
      }
      let defaultList = [];
      if (subTabulation.length > 0) {
        subTabulation.forEach((table) => {
          let tid = "aProviderModule.table" + table.field;
          let tableName = table.field;
          let title = table.text;
          let fields = table.columns;
          let columns = fields.map((ele) => {
            return {
              title: ele.text,
              align: "center",
              field: ele.field,
              width: 100,
            };
          });
          let config = this.getDefaultConfig(tid, title, tableName, fields, columns);
          defaultList.push(config);
        });
      }
      this.defaultList = defaultList;
      if (event.data.json) this.panel = JSON.parse(event.data.json);
    },
    getDefaultConfig(tid, title, tableName, fields, columns) {
      return {
        tid: tid,
        title: title,
        type: "table",
        options: {
          field: tableName,
          tableHeaderRepeat: "first",
          tableFooterRepeat: "last",
          fields: fields,
        },
        editable: true,
        columnDisplayEditable: true, //列显示是否能编辑
        columnDisplayIndexEditable: false, //列顺序显示是否能编辑
        columnTitleEditable: true, //列标题是否能编辑
        columnResizable: true, //列宽是否能调整
        columnAlignEditable: true, //列对齐是否调整
        isEnableEditField: true, //编辑字段
        isEnableContextMenu: true, //开启右键菜单 默认true
        isEnableInsertRow: true, //插入行
        isEnableDeleteRow: true, //删除行
        isEnableInsertColumn: true, //插入列
        isEnableDeleteColumn: true, //删除列
        isEnableMergeCell: true, //合并单元格
        columns: [columns],
      };
    },
  },
};
</script>

<style lang="less">
#app {
  height: 100%;
}

.logos {
  padding: 6px 24px;
  display: flex;
  justify-content: center;
  align-self: center;

  img {
    height: 40px;
    width: 40px;
  }
}

.menus {
  padding: 10px 24px;
}

// hiprint 拖拽图片
.hiprint-printElement-image-content {
  img {
    content: url("~@/assets/logo.png");
  }
}

// 修改 页眉/页脚线 样式
.hiprint-headerLine,
.hiprint-footerLine {
  border-color: red !important;
}

.hiprint-headerLine:hover,
.hiprint-footerLine:hover {
  border-top: 3px dashed red !important;
}

.hiprint-headerLine:hover:before {
  content: "页眉线";
  left: calc(50% - 18px);
  position: relative;
  background: #ffff;
  top: -12px;
  color: red;
  font-size: 12px;
}

.hiprint-footerLine:hover:before {
  content: "页脚线";
  left: calc(50% - 18px);
  position: relative;
  color: red;
  background: #ffff;
  top: -12px;
  font-size: 12px;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: #f0f0f0;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 4px #f0f0f0;
  border-radius: 4px;
  background-color: #f0f0f0;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 4px #f0f0f0;
  background-color: #f0f0f0;
}
</style>
