<template>
  <div class="container" style="margin: 15px 0 0 0" v-loading="loading">
    <fullscreen
      :fullscreen.sync="fullscreen"
      class="container-box"
      style="margin: 0 !important; padding: 0 !important"
    >
      <div class="titbox">
        <h2>绩效模板</h2>
        <div>
          <i class="el-icon-refresh" @click="iconCli(1)"></i>
          <i class="el-icon-full-screen" @click="iconCli(2)"></i>
          <!--                    <i class="el-icon-folder-opened"></i>-->
          <!--                    <i class="el-icon-view"></i>-->
          <!--                    <i class="el-icon-more"></i>-->
        </div>
      </div>
      <div style="overflow: hidden">
        <div class="search" style="float: right">
          <el-button
            size="small"
            v-if="$route.query.type == 'update'"
            @click="save"
            type="primary"
            >保存</el-button
          >
          <el-button
            type="primary"
            plain
            v-if="$route.query.type == 'see'"
            @click="exportExcel"
            >导出</el-button
          >
          <el-button size="small" @click="goBack" type="primary"
            >返回</el-button
          >
        </div>
      </div>
      <div id="tabbox">
        <div style="width: 50%; margin: 0px auto">
          <el-input
            :disabled="$route.query.type == 'see'"
            v-model="dataBody.table.tabName"
          ></el-input>
        </div>
        <table
          class="dataBody-box"
          ref="tableBox"
          border-collapse="collapse"
          border="1"
        >
          <tbody>
            <tr v-for="(item, index) in formList" :key="index">
              <td
                class="cell"
                @contextmenu="showMenu(index, zindex)"
                v-for="(row, zindex) in formList[index]"
                :key="zindex"
                :rowspan="row.rowSpan"
                :colspan="row.colSpan"
              >
                <div v-show="false">
                  {{ (row.rowNum = index) }}
                  {{ (row.colNum = zindex) }}
                </div>
                <el-input
                  :disabled="$route.query.type == 'see'"
                  class="table-input"
                  v-model="row.cellVal"
                ></el-input>
                <div
                  class="auto-dom"
                  :style="index == xindex && zindex == yindex ? autoStyle : ''"
                  v-if="index == 0"
                ></div>
              </td>
            </tr>
          </tbody>
        </table>
        <vue-context-menu
          :contextMenuData="contextMenuData"
          @deleteHang="deleteHang"
          @deleteLie="deleteLie"
          @addHangUp="addHangUp"
          @addHangDown="addHangDown"
          @addLeftLie="addLeftLie"
          @addRightLie="addRightLie"
        ></vue-context-menu>
      </div>
    </fullscreen>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      cellWidth: { width: "auto" },
      isMove: false,
      autoStyle: {},
      xindex: "",
      yindex: "",
      dataBody: {
        rows: [
          [
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
          ],
          [
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
          ],
          [
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
          ],
          [
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
          ],
          [
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
          ],
          [
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
            {
              value: null,
              style: { width: "" },
              cellVal: "",
              colNum: 0,
              colSpan: "",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: 0,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            },
          ],
        ],
        table: {
          opName: "",
          opNo: "",
          opTime: "",
          opTimeFrom: "",
          opTimeTo: "",
          tabCode: "",
          tabCodePks: "",
          tabName: "",
        },
      },
      contextMenuData: {
        menuName: "demo",
        //菜单显示的位置
        axis: {
          x: null,
          y: null,
        },
        //菜单选项
        menulists: [
          {
            fnHandler: "deleteHang", //绑定事件
            btnName: "删除行", //菜单名称
          },
          {
            fnHandler: "deleteLie",
            btnName: "删除列",
          },
          {
            fnHandler: "addHangUp", //绑定事件
            btnName: "向上增加行", //菜单名称
          },
          {
            fnHandler: "addHangDown", //绑定事件
            btnName: "向下增加行", //菜单名称
          },
          {
            fnHandler: "addLeftLie",
            btnName: "向左增加列",
          },
          {
            fnHandler: "addRightLie",
            btnName: "向右增加列",
          },
        ],
      },
      hangIndex: "",
      lieIndex: "",
      fullscreen: false,
    };
  },
  computed: {
    formList: function () {
      return this.dataBody.rows.map((item) => {
        return item.filter((row) => {
          if (row.displayFlag == "0") {
            return row;
          }
        });
      });
      console.log(arr);
    },
  },
  methods: {
    exportExcel() {
      this.$http({
        url: "/market/kpitemps/downloadTemp",
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
        responseType: "blob",
        params: { tabCode: this.dataBody.table.tabCode },
      }).then((response) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          window.navigator.msSaveOrOpenBlob(
            blob,
            this.dataBody.table.tabName + ".xlsx"
          );
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = this.dataBody.table.tabName + ".xlsx";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      });
    },
    goBack() {
      this.$router.push("/kpiMuban");
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    showMenu(index, zindex) {
      this.hangIndex = index;
      this.lieIndex = zindex;
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      // Get the current location
      this.contextMenuData.axis = {
        x,
        y,
      };
    },
    save() {
      this.loading = true;
      this.$http({
        url: "/market/kpitemps/add",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: this.dataBody,
      }).then((res) => {
        this.loading = false;
        if (res.data.result == 0) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
        }
      });
    },
    // 删除行
    deleteHang() {
      this.dataBody.rows.splice(this.hangIndex, 1);
    },
    // 删除列
    deleteLie() {
      this.dataBody.rows.map((item, zindex) => {
        item.map((row, index) => {
          if (index == this.lieIndex) {
            this.dataBody.rows[zindex].splice(index, 1);
          }
        });
      });
    },
    // 向下增加行
    addHangDown() {
      let arr = [];
      this.dataBody.rows[this.hangIndex].map((item, index) => {
        arr.push({
          value: null,
          style: { width: "" },
          cellVal: null,
          colNum: this.hangIndex + 1,
          colSpan: "1111",
          id: "",
          idPks: "",
          opName: "",
          opNo: "",
          opTime: "",
          opTimeFrom: "",
          opTimeTo: "",
          rowNum: this.dataBody.rows[this.hangIndex].length - 1,
          rowSpan: "",
          tabCode: "",
          tabCodePks: "",
          tabName: "",
        });
      });
      this.dataBody.rows.splice(this.hangIndex + 1, 0, arr);
    },
    // 向上增加行
    addHangUp() {
      let arr = [];
      this.dataBody.rows[this.hangIndex].map((item, index) => {
        arr.push({
          value: null,
          style: { width: "" },
          cellVal: null,
          colNum: this.hangIndex,
          colSpan: "2222",
          id: "",
          idPks: "",
          opName: "",
          opNo: "",
          opTime: "",
          opTimeFrom: "",
          opTimeTo: "",
          rowNum: this.dataBody.rows[this.hangIndex].length - 1,
          rowSpan: "",
          tabCode: "",
          tabCodePks: "",
          tabName: "",
        });
      });
      this.dataBody.rows.splice(this.hangIndex, 0, arr);
    },
    // 向右增加列
    addRightLie() {
      this.dataBody.rows.map((item, zindex) => {
        item.map((row, index) => {
          if (index == this.lieIndex) {
            this.dataBody.rows[zindex].splice(index + 1, 0, {
              value: null,
              style: { width: "" },
              cellVal: null,
              colNum: zindex,
              colSpan: "2222",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: index + 1,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            });
          }
        });
      });
    },
    // 向左增加列
    addLeftLie() {
      this.dataBody.rows.map((item, zindex) => {
        item.map((row, index) => {
          if (index == this.lieIndex) {
            this.dataBody.rows[zindex].splice(index, 0, {
              value: null,
              style: { width: "" },
              cellVal: null,
              colNum: zindex,
              colSpan: "2222",
              id: "",
              idPks: "",
              opName: "",
              opNo: "",
              opTime: "",
              opTimeFrom: "",
              opTimeTo: "",
              rowNum: index,
              rowSpan: "",
              tabCode: "",
              tabCodePks: "",
              tabName: "",
            });
          }
        });
      });
    },
    getInitData() {
      this.loading = true;
      this.$http({
        url: "/market/kpitemps/load",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { tabCode: this.$route.query.tabCode },
      }).then((res) => {
        if (res.data.result == 0) {
          this.dataBody = res.data.body;
        }
        this.loading = false;
      });
    },
  },
  mounted() {
    this.getInitData();
  },
};
</script>
<style>
#tabbox .el-input.is-disabled .el-input__inner {
  color: black;
  background-color: white;
}
</style>
<style lang="scss" scoped>
#tabbox {
  height: 75%;
  overflow-y: auto;
}
.dataBody-box {
  border-collapse: collapse;
  margin-top: 20px;
  .cell {
    position: relative;
  }
}

.btn-wrapper-simple {
  height: auto !important;
}
.fcous {
  border-color: red;
}
.auto-dom {
  width: 3px;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
  cursor: pointer;
  height: 100%;
}
</style>>
<style scoped lang="scss">
.btn-default {
  display: inline;
  margin-left: 10px;
}
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}
</style>

