<template>
  <div class="excel-box">
    <div id="leftExcel"></div>
    <div>
      <iframe
        height="100%"
        width="100%"
        ref="iframe"
        src="/static/views/excel.html"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          name: "11",
          color: "",
          status: "1",
          order: "0",
          data: [
            [
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
            ],
            [
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
            ],
            [
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
            ],
            [
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
            ],
            [
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
            ],
            [
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
            ],
            [
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
            ],
            [
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
            ],
            [
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
            ],
            [
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
              null,
            ],
          ],
          config: {
            authority: {
              //当前工作表的权限配置
              sheet: 1, //如果为1或true，则该工作表受到保护；如果为0或false，则该工作表不受保护。
              hintText: "当前工作表正在编辑中", //弹窗提示的文字
            },
          },
        },
      ],
    };
  },
  methods: {
    getData() {
      this.$http({
        url: "/keywork/load",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { id: "", opMonth: "" },
      }).then((res) => {
        console.log(res);
      });
    },
    fatherpost(e) {
      //点击给iframe传值
      this.$refs.iframe.contentWindow.postMessage("我是来自父页面的data", "*");
    },
    initExcel() {
      let _this = this;
      luckysheet.create({
        container: "leftExcel",
        isTrue: function () {
          //  当前工作表名
          var sheetName = luckysheet.getSheet().name;
          //  选取范围坐标
          var position = luckysheet.getRange()[0];
          //  当前表所有数据
          for (var i = position.row[0]; i <= position.row[1]; i++) {
            for (var j = position.column[0]; j <= position.column[1]; j++) {
              luckysheet.setCellValue(i, j, { bg: "#00ff00" });
              luckysheet.setCellValue(i, j, { bg: "#00ff00" });
            }
          }
          var data = luckysheet.getSheetData(sheetName);
          data.position = position;
          _this.fatherpost();
          // util.ajaxJson(
          //   "正在加载中",
          //   ctx + "/keywork/save",
          //   {
          //     data,
          //   },
          //   function (data) {
          //     if (data.result == 0) {
          //       $("#aaa")[0].contentWindow.postMessage(
          //         {
          //           module: "aaa",
          //           param: luckysheet.getluckysheetfile(),
          //         },
          //         "http://localhost:8080"
          //       );
          //     }
          //   }
          // );
        },
        data: this.data,
        showtoolbar: true,
        showConfigWindowResize: false,
        showtoolbarConfig: { paintFormat: false, italic: true }, // 工具栏
        showtoolbar: true,
        showinfobar: true,
        column: 12,
        row: 10,
        lang: "zh",
        showsheetbar: true, // 底部sheet显示/隐藏
        showstatisticBar: false, // 底部计数
        myFolderUrl: false,
        showinfobar: true,
        functionButton:
          '<button id="updates" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">开启编辑</button> <button id="saves" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">保存</button>',
        cellRightClickConfig: {
          copy: true, // 复制
          copyAs: false, // 复制为
          paste: true, // 粘贴
          insertRow: true, // 插入行
          insertColumn: true, // 插入列
          deleteRow: true, // 删除选中行
          deleteColumn: true, // 删除选中列
          deleteCell: false, // 删除单元格
          hideRow: false, // 隐藏选中行和显示选中行
          hideColumn: false, // 隐藏选中列和显示选中列
          rowHeight: false, // 行高
          columnWidth: false, // 列宽
          clear: false, // 清除内容
          matrix: false, // 矩阵操作选区
          sort: false, // 排序选区
          filter: false, // 筛选选区
          chart: false, // 图表生成
          image: false, // 插入图片
          link: false, // 插入链接
          data: false, // 数据验证
          cellFormat: false, // 设置单元格格式
          isTrue: true,
        },
        hook: {
          /*
						col:行
						row:列
						value:值
						boole:是否刷新
					*/
          cellUpdateBefore: function (col, row, value, boole) {
            // console.log(col)
            // console.log(row)
            // console.log(obj)
            // console.log(boole)
            // return false // 不渲染
          },
          /*
						cell:单元格对象
						position:{Number} [r]:单元格所在行号
								 {Number} [c]:单元格所在列号
								 {Number} [start_r]:单元格左上角的水平坐标
								 {Number} [start_c]:单元格左上角的垂直坐标
								 {Number} [end_r]:单元格右下角的水平坐标
								 {Number} [end_c]:单元格右下角的垂直坐标
						sheet:表名
					*/
          cellMousedownBefore: function (cell, positon, sheet) {
            // console.log(cell)
            // console.log(positon)
            // console.log(sheet)
          },
        },
      });
      $("#updates").click(function () {
        console.log(luckysheet.getSheet().name);
      });
      $("#saves").click(function () {
        //  当前工作表名
        var sheetName = luckysheet.getSheet().name;
        //  选取范围坐标
        var position = luckysheet.getRange()[0];
        //  当前表所有数据
        var data = luckysheet.getSheet(sheetName);
        for (var i = position.row[0]; i <= position.row[1]; i++) {
          for (var j = position.column[0]; j <= position.column[1]; j++) {
            luckysheet.setCellValue(i, j, {
              m: "asdas",
              v: "1111",
              bg: "#00ff00",
            });
          }
        }
      });
    },
  },
  mounted() {
    this.getData();
    this.initExcel();
  },
};
</script>
<style lang="scss" scoped>
.excel-box {
  display: flex;
  height: 100%;
  div {
    width: 50%;
    height: 100%;
  }
}
</style>