/* eslint-disable */
import $ from "jquery";
const draw = {
  common: {},
  // 是否已经加载货位状态数据
  isLoadedPosition: false,
  // 仓库数据
  storageData: {
    positionRegular: null,
    channelRegular: null,
    shelvesRegular: null,
    rowRegular: null,
    columnRegular: null,
    action: "add"
  },
  // 库区数据
  areaData: {
    storage_Id: 1,
    storageName: "北京仓库",
    positionType: 1,
    areaCode: "A",
    pickMode: "U型",
    shelveMode: "立体货架",
    maxCapacity: 100,
    channelNum: 3,
    rowNum: 4,
    columnNum: 5,
    shelveNumA_1: 1,
    shelveNumA_2: 5,
    shelveNumB_1: 6,
    shelveNumB_2: 10,
    positionRegular: null,
    channelRegular: null,
    shelvesRegular: null,
    rowRegular: null,
    columnRegular: null,
    action: "add",
    colTitle: "层数"
  },
  // 货架信息
  shelveDataList: [{
      storage_Id: 1,
      areaCode: "A",
      channelCode: "01",
      shelveCode: "01",
      rowNum: 2,
      columnNum: 3
    },
    {
      storage_Id: 1,
      areaCode: "A",
      channelCode: "01",
      shelveCode: "02",
      rowNum: 3,
      columnNum: 5
    }
  ],

  // 创建货架
  createShelve(channelCode, shelveCode, line, odd_Even, percent) {
    let rowHtml = "";

    const findShelveInfo = this.shelveDataList.find(item => {
      return (
        item.storage_Id === this.areaData.storage_Id &&
        item.areaCode === this.areaData.areaCode &&
        item.channelCode === channelCode &&
        item.shelveCode === shelveCode
      );
    });

    let rowNum = this.areaData.rowNum;
    let columnNum = this.areaData.columnNum;
    if (findShelveInfo) {
      rowNum = findShelveInfo.rowNum;
      columnNum = findShelveInfo.columnNum;
    }

    for (let i = rowNum; i > 0; i--) {
      let cellHtml = "";
      for (let j = 0; j < columnNum; j++) {
        let xTip = "";
        let yTip = "";
        const rowNo = this.rowCodeCreator(i);

        let colIndex = j + 1;
        if (odd_Even === "odd") colIndex = j * 2 + 1;
        if (odd_Even === "even") colIndex = (j + 1) * 2;
        const colNo = this.columnCodeCreator(colIndex);
        if (line === "A") {
          if (i === rowNum) {
            xTip = '<span class="t-n" channelCode="' + channelCode + '" shelveCode="' + shelveCode + '" colNo="' + colNo + '">' + colNo + "</span>";
          }
        } else if (line === "B") {
          if (i === 1) {
            xTip = '<span class="b-n" channelCode="' + channelCode + '" shelveCode="' + shelveCode + '" colNo="' + colNo + '">' + colNo + "</span>";
          }
        }

        let positionTmpl = this.areaData.positionRegular || this.storageData.positionRegular;
        if (findShelveInfo) {
          let _positionRegular = "";
          const _rowNo = (i < 10 ? "0" : "") + i;
          const _colNo = (j < 10 ? "0" : "") + (j + 1);
          if (findShelveInfo.columnConfigs) {
            // 列级别配置
            const columnCofing = findShelveInfo.columnConfigs.find(cItem => {
              return cItem.colNo === _colNo;
            });
            if (columnCofing) {
              _positionRegular = columnCofing.positionRegular;
            }
          }
          if (!_positionRegular && findShelveInfo.rowConfigs) {
            // 层级别配置
            const rowCofing = findShelveInfo.rowConfigs.find(cItem => {
              return cItem.rowNo === _rowNo;
            });
            if (rowCofing) {
              _positionRegular = rowCofing.positionRegular;
            }
          }

          if (!_positionRegular && findShelveInfo.positionRegular) {
            // 通道级别配置
            positionTmpl = findShelveInfo.positionRegular;
          } else {
            positionTmpl = _positionRegular;
          }
        }

        positionTmpl = positionTmpl.replace("{库区}", this.areaData.areaCode);
        // positionTmpl = positionTmpl.replace("{通道}", channelCode);
        positionTmpl = positionTmpl.replace("{货架}", shelveCode);
        positionTmpl = positionTmpl.replace("{层}", rowNo);
        positionTmpl = positionTmpl.replace("{列}", colNo);
        // if (j === 0) {
        //   yTip = '<span class="l-n" channelCode="' + channelCode + '" shelveCode="' + shelveCode + '" rowNo="' + rowNo + '">' + rowNo + "</span>";
        // }
        // var _html = $("#" + row.positionName).html(); //找到某个库位的下属html代码
        // $("#" + row.positionName).html("<div style='background-color:white;width:20%;float:right;'></div> <div style='background-color:yellow;width:80%;float:right;'>80%</div>");
        //创建进度条
        // yTip =
        //   " <div style='min-width:100px;'><div style='margin-left:-1px;height:5px;background-color:green;width:" +
        //   percent +
        //   "%;float:left;'></div><div style='height:5px;background-color:white;float:right;'></div></div>";

        if (j === columnNum) {
          yTip += '<span class="l-n" channelCode="' + channelCode + '" shelveCode="' + shelveCode + '" rowNo="' + rowNo + '">' + rowNo + "</span>";
        }
        cellHtml +=
          '<li id="' +
          positionTmpl +
          '" ' +
          (i === 1 ? 'class="border-bottom"' : "") +
          ' channelCode="' +
          channelCode +
          '" shelveCode="' +
          shelveCode +
          '" rowNo="' +
          rowNo +
          '" colNo="' +
          colNo +
          '">' +
          xTip +
          yTip +
          positionTmpl +
          "</li>";
      }
      rowHtml += '<ul class="table-list-ul">' + cellHtml + "</ul>";
    }
    if (line === "A") {
      const tableHtml =
        '<div class="table-reset" channelCode="' +
        channelCode +
        '" shelveCode="' +
        shelveCode +
        '">' +
        '<h3 class="table-num ' +
        (this.areaData.shelveMode === "地堆" ? "didui" : "") +
        '" channelCode="' +
        channelCode +
        '" shelveCode="' +
        shelveCode +
        '">' +
        (this.areaData.shelveMode !== "地堆" ? "货架" : "") +
        '<strong channelCode="' +
        channelCode +
        '" shelveCode="' +
        shelveCode +
        '">' +
        shelveCode +
        "</strong></h3>" +
        rowHtml +
        "</div>";
      return tableHtml;
    } else {
      const tableHtml =
        '<div class="table-reset" channelCode="' +
        channelCode +
        '" shelveCode="' +
        shelveCode +
        '">' +
        rowHtml +
        '<h3 class="table-num" channelCode="' +
        channelCode +
        '" shelveCode="' +
        shelveCode +
        '">货架<strong channelCode="' +
        channelCode +
        '" shelveCode="' +
        shelveCode +
        '">' +
        shelveCode +
        "</strong></h3>" +
        "</div>";
      return tableHtml;
    }
  },

  // 创建货架 - U型B面，倒序排列
  createShelve_U_B(channelCode, shelveCode) {
    let rowHtml = "";
    const findShelveInfo = this.shelveDataList.find(item => {
      return (
        item.storage_Id === this.areaData.storage_Id &&
        item.areaCode === this.areaData.areaCode &&
        item.channelCode === channelCode &&
        item.shelveCode === shelveCode
      );
    });

    let rowNum = this.areaData.rowNum;
    let columnNum = this.areaData.columnNum;
    if (findShelveInfo) {
      rowNum = findShelveInfo.rowNum;
      columnNum = findShelveInfo.columnNum;
    }

    for (let i = rowNum; i > 0; i--) {
      let cellHtml = "";
      for (let j = columnNum; j > 0; j--) {
        let xTip = "";
        let yTip = "";
        const rowNo = this.rowCodeCreator(i); // (i < 10 ? '0' : '') + (i);
        const colNo = this.columnCodeCreator(j); // (j < 10 ? '0' : '') + (j + 1);
        if (i === 1) {
          xTip = '<span class="b-n" channelCode="' + channelCode + '" shelveCode="' + shelveCode + '" colNo="' + colNo + '">' + colNo + "</span>";
        }

        // let positionTmpl = this.storageData.action === "add" ? this.storageData.positionRegular : this.areaData.positionRegular;
        let positionTmpl = this.areaData.positionRegular || this.storageData.positionRegular;

        positionTmpl = positionTmpl.replace("{库区}", this.areaData.areaCode);
        positionTmpl = positionTmpl.replace("{通道}", channelCode);
        positionTmpl = positionTmpl.replace("{货架}", shelveCode);
        positionTmpl = positionTmpl.replace("{层}", rowNo);
        positionTmpl = positionTmpl.replace("{列}", colNo);

        if (j === columnNum) {
          yTip = '<span class="l-n" channelCode="' + channelCode + '" shelveCode="' + shelveCode + '" rowNo="' + rowNo + '">' + rowNo + "</span>";
        }

        cellHtml +=
          '<li id="' +
          positionTmpl +
          '" ' +
          (i === 1 ? 'class="border-bottom"' : "") +
          ' channelCode="' +
          channelCode +
          '" shelveCode="' +
          shelveCode +
          '" rowNo="' +
          rowNo +
          '" colNo="' +
          colNo +
          '">' +
          xTip +
          yTip +
          positionTmpl +
          "</li>";
      }
      rowHtml += '<ul class="table-list-ul">' + cellHtml + "</ul>";
    }

    const tableHtml =
      '<div class="table-reset" channelCode="' +
      channelCode +
      '" shelveCode="' +
      shelveCode +
      '">' +
      rowHtml +
      '<h3 class="table-num">货架<strong channelCode="' +
      channelCode +
      '" shelveCode="' +
      shelveCode +
      '">' +
      shelveCode +
      "</strong></h3>" +
      "</div>";
    return tableHtml;
  },

  // 创建通道
  createChannel(channelCode) {
    if (this.areaData.pickMode === "U型") {
      // A面
      debugger;
      let tableHtml = "";
      for (let i = this.areaData.shelveNumA_1; i <= this.areaData.shelveNumA_2; i++) {
        const shelveCode = this.shelveCodeCreator(i); // (i < 10 ? '0' : '') + i;
        tableHtml += this.createShelve(channelCode, shelveCode, "A", "", 20);
      }
      const columnLineA =
        '<div class="column-line">' + '<div class="nood-a clearfix">' + '  <span class="nood-text">A面</span>' + tableHtml + "</div>" + "</div>";
      // B面
      tableHtml = "";
      for (let i = this.areaData.shelveNumB_2; i >= this.areaData.shelveNumB_1; i--) {
        const shelveCode = this.shelveCodeCreator(i); // (i < 10 ? '0' : '') + i;
        tableHtml += this.createShelve_U_B(channelCode, shelveCode, "B");
      }
      const columnLineB =
        '<div class="column-line">' + '<div class="nood-b clearfix">' + '  <span class="nood-text">B面</span>' + tableHtml + "</div>" + "</div>";
      const channelHtml =
        '<div id="channel-' +
        channelCode +
        '" class="table-row clearfix">' +
        '<div class="column-num" channelCode="' +
        channelCode +
        '">通道 <p>' +
        channelCode +
        "</p></div>" +
        '<div class="t-box clearfix">' +
        '<span class="guanlian-line"></span>' +
        columnLineA +
        columnLineB +
        "</div>" +
        "</div>";
      return channelHtml;
    } else if (this.areaData.pickMode === "Z型") {
      // A面
      let tableHtml = "";
      for (let i = this.areaData.shelveNumA_1; i <= this.areaData.shelveNumA_2; i = i + 2) {
        const shelveCode = this.shelveCodeCreator(i); // (i < 10 ? '0' : '') + i;
        tableHtml += this.createShelve(channelCode, shelveCode, "A", "", 90);
      }
      const columnLineA =
        '<div class="column-line">' + '<div class="nood-a clearfix">' + '  <span class="nood-text">A面</span>' + tableHtml + "</div>" + "</div>";
      // B面
      tableHtml = "";
      for (let i = this.areaData.shelveNumA_1 + 1; i <= this.areaData.shelveNumA_2; i = i + 2) {
        const shelveCode = this.shelveCodeCreator(i); // (i < 10 ? '0' : '') + i;
        tableHtml += this.createShelve(channelCode, shelveCode, "B", "", 20);
      }
      const columnLineB =
        '<div class="column-line">' + '<div class="nood-b clearfix">' + '  <span class="nood-text">B面</span>' + tableHtml + "</div>" + "</div>";
      debugger;
      let areaCode = this.areaData.areaCode;
      const channelHtml =
        '<div id="channel-' +
        channelCode +
        '" class="table-row clearfix">' +
        '<div class="column-num" channelCode="' +
        channelCode +
        '">巷道 <p>' +
        areaCode +
        "</p></div>" +
        '<div class="t-box clearfix">' +
        '<span class="guanlian-line"></span>' +
        columnLineA +
        columnLineB +
        "</div>" +
        "</div>";
      return channelHtml;
    } else if (this.areaData.pickMode === "AB面奇偶型") {
      // A面
      let tableHtml = "";
      let shelveCode = this.shelveCodeCreator(1);
      tableHtml += this.createShelve(channelCode, shelveCode, "A", "odd", 20);
      const columnLineA =
        '<div class="column-line">' + '<div class="nood-a clearfix">' + '  <span class="nood-text">A面</span>' + tableHtml + "</div>" + "</div>";
      // B面
      tableHtml = "";
      shelveCode = this.shelveCodeCreator(2);
      tableHtml += this.createShelve(channelCode, shelveCode, "B", "even", 20);
      const columnLineB =
        '<div class="column-line">' + '<div class="nood-b clearfix">' + '  <span class="nood-text">B面</span>' + tableHtml + "</div>" + "</div>";
      const channelHtml =
        '<div id="channel-' +
        channelCode +
        '" class="table-row clearfix">' +
        '<div class="column-num" channelCode="' +
        channelCode +
        '">通道 <p>' +
        channelCode +
        "</p></div>" +
        '<div class="t-box clearfix">' +
        '<span class="guanlian-line"></span>' +
        columnLineA +
        columnLineB +
        "</div>" +
        "</div>";
      return channelHtml;
    }
  },

  // 创建通道 - 地堆
  createChannel_didui(channelCode) {
    // A面
    const shelveCode = this.shelveCodeCreator(1);
    const tableHtml = this.createShelve(channelCode, shelveCode, "A", "", 20);
    const columnLineA =
      '<div class="column-line didui">' +
      '<div class="nood-a clearfix">' +
      '  <span class="nood-text hidden">A面</span>' +
      tableHtml +
      "</div>" +
      "</div>";
    const channelHtml =
      '<div id="channel-' +
      channelCode +
      '" class="table-row didui clearfix">' +
      '<div class="column-num" channelCode="' +
      channelCode +
      '">通道 <p>' +
      channelCode +
      "</p></div>" +
      '<div class="t-box clearfix">' +
      '<span class="guanlian-line hidden"></span>' +
      columnLineA +
      "</div>" +
      "</div>";
    return channelHtml;
  },

  // 创建库区
  createArea() {
    if (this.isLoadedPosition) {
      // 计算横向滚动条
      const w = $(".table-wrap").width();
      $(".position-layout").width(w + 200);
      return;
    }
    this.isLoadedPosition = true;

    $(".table-wrap").empty();
    const positionTmpl = this.areaData.positionRegular || this.storageData.positionRegular;
    if (!positionTmpl) {
      return;
    }

    let areaHtml = "";
    for (let i = 1; i <= this.areaData.channelNum; i++) {
      this.channelCodeCreator(i);
      const channelCode = this.channelCodeCreator(i); // (i < 10 ? '0' : '') + i;
      if (this.areaData.shelveMode === "地堆") {
        areaHtml += this.createChannel_didui(channelCode);
      } else {

        areaHtml += this.createChannel(channelCode);
      }
    }
    $(".table-wrap").append(areaHtml);
    if (this.areaData.shelveMode !== "地堆") {
      this.adjustLine();
    }
    // 计算横向滚动条
    const w = $(".table-wrap").width();
    $(".position-layout").width(w + 200);

    this.createTip(); // 创建tip
    this.loadPositionStatus();
  },

  // js连线的位置
  adjustLine() {
    $(".guanlian-line").each(function (i) {
      const tbox = $(this).parent();
      const boxTop = tbox.offset().top;
      const NoodeAToffset = $(".nood-a .nood-text", tbox).offset().top;
      const NoodeBToffset = $(".nood-b .nood-text", tbox).offset().top;
      $(this).css({
        height: NoodeBToffset - NoodeAToffset,
        top: NoodeAToffset - boxTop + 20
      });
    });
  },

  // 通道编码规则
  channelCodeCreator(numIndex) {
    let channelRegular = this.storageData.action === "add" ? this.storageData.channelRegular : this.areaData.channelRegular;
    if (!channelRegular) {
      channelRegular = "{数字}{数字}";
      this.areaData.channelRegular = channelRegular;
      this.storageData.channelRegular = channelRegular;
    }

    return this.codeCreator(numIndex, channelRegular);
  },

  // 货架编码规则
  shelveCodeCreator(numIndex) {
    let shelvesRegular = this.storageData.action === "add" ? this.storageData.shelvesRegular : this.areaData.shelvesRegular;
    if (!shelvesRegular) {
      shelvesRegular = "{数字}{数字}";
      this.areaData.shelvesRegular = shelvesRegular;
      this.storageData.shelvesRegular = shelvesRegular;
    }
    return this.codeCreator(numIndex, shelvesRegular);
  },

  // 行编码规则
  rowCodeCreator(numIndex) {
    let rowRegular = this.storageData.action === "add" ? this.storageData.rowRegular : this.areaData.rowRegular;
    if (!rowRegular) {
      rowRegular = "{数字}{数字}";
      this.areaData.rowRegular = rowRegular;
      this.storageData.rowRegular = rowRegular;
    }
    return this.codeCreator(numIndex, rowRegular);
  },

  // 货架编码规则
  columnCodeCreator(numIndex) {
    let columnRegular = this.storageData.action === "add" ? this.storageData.columnRegular : this.areaData.columnRegular;
    if (!columnRegular) {
      columnRegular = "{数字}{数字}";
      this.areaData.columnRegular = columnRegular;
      this.storageData.columnRegular = columnRegular;
    }
    return this.codeCreator(numIndex, columnRegular);
  },

  // 通用编码规则
  codeCreator(numIndex, regular) {
    const letterList = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z".split(",");
    if (!regular) {
      regular = "{数字}{数字}";
    }
    const codeList = regular.match(/数字|字母/g);
    const codeValue = [];
    let index = 0;
    for (let i = codeList.length - 1; i >= 0; i--) {
      const item = codeList[codeList.length - 1];
      if (item === "数字") {
        if (numIndex < 10) {
          codeValue.push(numIndex);
          numIndex = 0;
        } else {
          const lastNum = numIndex % 10;
          codeValue.push(lastNum);
          numIndex = Math.floor(numIndex / 10);
        }
      } else if (item === "字母") {
        if (numIndex < 27) {
          codeValue.push(letterList[numIndex - 1]);
          numIndex = 0;
        } else {
          const lastNum = numIndex % 27;
          codeValue.push(lastNum);
          numIndex = Math.floor(numIndex / 27);
        }
      }
      index = index + 1;
    }

    for (let i = 0; i < codeList.length; i++) {
      regular = regular.replace("{" + codeList[i] + "}", codeValue[codeList.length - 1 - i]);
    }
    return regular;
  },

  // 加载货位状态
  loadPositionStatus() {
    const url = "/api/basicInfo/base/position/getPositionList";
    const param = {
      storage_Id: this.areaData.storage_Id,
      areaCode: this.areaData.areaCode
    };
    debugger;
    this.common.ajax(url, param, res => {
      if (!res.result) return;

      if (this.isViewer) {
        loadPositionData();
      }
      // 显示状态
      $.each(res.data, (i, row) => {
        if (row.enable !== 1) {
          $("#" + row.positionName)
            .css({
              "border-color": "white",
              color: "white"
            })
            .addClass("disabled");

          // 如果存在多层时，下面一层不可用，上面可用，将上面一层底部加上颜色边框
          var index = $("#" + row.positionName).index();
          if ($("#" + row.positionName).hasClass("disabled")) {
            var prevLi = $("#" + row.positionName)
              .parent()
              .prev()
              .children(":eq(" + index + ")");
            if (!prevLi.hasClass("disabled")) {
              prevLi.addClass("border-bottom");
              // prevLi.addClass("border-top");
            }
          }
        } else {
          if (row.positionName === "2-02-13-01") {

          }
          if (row.isMixProduct === 1) {
            // 混物料
            $("#" + row.positionName).append('<span title="混物料" class="isMixProduct"></span>');
          }
          //$("#" + row.positionName).append('<span title="混物料" class="isMixProduct"></span>');
          if (row.isLocked === 1) {
            $("#" + row.positionName).append('<span title="货位已锁定" class="locked"></span>');
          }
          var typeRow = this.common.translateText(row.positionType, 501);
          $("#" + row.positionName).append(`<span title="${typeRow}" class="postype-${row.positionType}" /></span>`);
          if (row.positionLength !== null && row.isFreeze === 1 && row.positionType === 1) {
            var pi = 100 - row.positionLength;

            //#ffffff  #bb3455
            $("#" + row.positionName).css({
              color: " #f1f1f1",
              background: "linear-gradient(to right, #20B2AA +" + row.positionLength + "%, #8877dd " + 0 + "%)"
            });

            // "background-color": "green"
          }
        }
      });
    });

    const loadPositionData = () => {
      // 加载货位数据

      const url = "/api/basicInfo/base/position/loadPositionData";
      const param = {
        storage_Id: this.areaData.storage_Id,
        areaCode: this.areaData.areaCode
      };
      this.common.ajax(url, param, res => {
        if (!res.result) return;

        // 显示状态
        $.each(res.data, (i, row) => {
          $(".nostorage", "#" + row.positionName).remove(); // 移除无货位标识
          if ($("#" + row.positionName).hasClass("disabled")) return true;

          // 库存比例
          var rate = (row.productStorage ? row.productStorage : 1) / row.maxCapacity;
          rate = rate * 100;
          var rateHtml = `<div class="StorageRate" title="货位使用率为${rate}%">
              <div style="height:100%;background-color:pink;width:${rate > 100 ? 100 : rate}%;"></div>
            </div>`;
          $("#" + row.positionName).append(rateHtml);

          //库存数据

        });

        this.adjustLine();
      });
    };
  },
  // 创建工具栏和显示库存详情对话框
  createTip() {
    var the = this;

    if (this.isViewer) {
      // 点击货位事件
      $(".table-list-ul li")
        .unbind("click")
        .click(function (e) {
          var id = $(this).attr("id");
          if (!$(this).hasClass("disabled")) {
            the.binding.value.displayDetail(this, id);
          }
        });
    } else {
      $(".position-layout .column-num, .table-list-ul li span.t-n,.table-list-ul li span.b-n, .table-list-ul li span.l-n, .table-num")
        .unbind("click")
        .click(function (e) {
          var channelCode = this.getAttribute("channelcode");
          var shelveCode = this.getAttribute("shelveCode");
          var colNo = this.getAttribute("colNo");
          var rowNo = this.getAttribute("rowNo");

          var attr = "";
          if (channelCode) attr += '[channelCode="' + channelCode + '"]';
          if (shelveCode) attr += '[shelveCode="' + shelveCode + '"]';
          if (colNo) attr += '[colNo="' + colNo + '"]';
          if (rowNo) attr += '[rowNo="' + rowNo + '"]';
          var shelveList = [];
          // 当点击通道时候获取通道下所有货架编号
          if (!shelveCode) {
            $(this)
              .closest(".table-row")
              .find(".table-reset")
              .each(function (v, val) {
                shelveList.push({
                  shelveCode: $(this).attr("shelvecode"),
                  channelCode: $(this).attr("channelcode")
                });
              });
          }
          var positionList = [];
          $(".table-list-ul li" + attr).each(function (i, item) {
            positionList.push({
              PlateCode: $(this).attr("id"),
              Quantity: 1
            });
          });
          the.binding.value.displayTool(this, positionList, shelveList);
        });
    }
  }
};

/* eslint-disable */
let drawposition = {
  bind: function (el, binding, vnode) {},
  update: function (el, binding, vnode) {
    $(".position-layout").width(50000);
    if (binding.value.isRefresh) {
      draw.isLoadedPosition = false;
      binding.value.updateRefresh(false);
    }

    draw.vnode = vnode;
    draw.binding = binding;
    draw.common = vnode.context.common;
    // isViewer=true预览数据，false=设计
    draw.isViewer = binding.value.isViewer;
    draw.storageData = binding.value.storageData;
    draw.areaData = binding.value.areaData;
    draw.shelveDataList = binding.value.shelveDataList;
    draw.createArea();
  }
};

export {
  drawposition
};