<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('库位列表')"/>
  <link th:href="@{/ruoyi/css/ry-ui-custom.css?v=4.7.3}" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="container-div">
  <div class="row" style="height: auto !important;">
    <div class="col-sm-12 pr0 pl0 shadow">
      <div class="ibox float-e-margins ">
        <div class="ibox-title">
          <div class="col-sm-8  pl0 pr0">
            <h8>库位列表</h8>
          </div>
        </div>
        <div class="ibox-content ibox-content-1" style="margin: 0; height: 350px">
          <div class="btn-group-sm" id="toolbar" role="group">
            <form id="formId">
              <div class="select-list">
                <ul>
                  <li>
                    <label>库位编号：</label>
                    <input type="text" name="locationId"/>
                  </li>
                  <li>
                    <a class="btn btn-primary btn-rounded btn-sm"
                       onclick="$.table.search('formId')"><i
                            class="fa fa-search"></i>&nbsp;搜索</a>
                    <a class="btn btn-warning btn-rounded btn-sm"
                       onclick="$.form.reset('formId')"><i
                            class="fa fa-refresh"></i>&nbsp;重置</a>
                  </li>
                </ul>
              </div>
            </form>
          </div>
          <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-resizable="true"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
  var prefix = ctx + "business/locationMonitor";

  /**
   * 表格初始化
   */
  $(function () {
    var options = {
      url: prefix + "/list",
      modalName: "库位列表",
      showSearch: false,
      showToggle: false,
      showRefresh: false,
      showColumns: false,
      search: false,
      striped: true,
      columns: [
        {
          field: 'locationId',
          title: '库位号',
          sortable: true
        },
        {
          field: 'abcId',
          title: '巷道',
          sortable: true
        },
        {
          field: 'islock',
          title: '是否锁定',
          sortable: true,
          formatter: function (value, row, index) {
            return value === "0" ? "未锁定" : "锁定";
          }
        },
        {
          title: '操作',
          align: 'center',
          formatter: function (value, row, index) {
            var actions = [];
            if (row.islock === "0") {
              actions.push('<button id="solve" class="btn btn-default btn-xs" onclick="lockLocation(\'' + row.locationId + '\',\'' + "1" + '\')">锁定库位</button>');
            }
            if (row.islock === "1") {
              actions.push('<button id="solve" class="btn btn-default btn-xs" onclick="lockLocation(\'' + row.locationId + '\',\'' + "0" + '\')">解锁库位</button>');
            }
            return actions.join('');
          }
        },
        {
          field: 'status',
          title: '是否占用',
          sortable: true,
          formatter: function (value, row, index) {
            return value === "0" ? "空闲" : "有货";
          }
        },
        {
          title: '操作',
          align: 'center',
          formatter: function (value, row, index) {
            var actions = [];
            if (row.status === "0") {
              actions.push('<button id="solve" class="btn btn-default btn-xs" onclick="occupyLocation(\'' + row.locationId + '\',\'' + "1" + '\')">占用库位</button>');
            }
            if (row.status === "1") {
              actions.push('<button id="solve" class="btn btn-default btn-xs" onclick="occupyLocation(\'' + row.locationId + '\',\'' + "0" + '\')">释放库位</button>');
            }
            return actions.join('');
          }
        },
      ]
    };
    $.table.init(options);
  });

  // 锁定---解锁
  function lockLocation(locationId, isLock) {
    $.ajax({
      type: "post",
      url: prefix + "/lockLocation",
      data: {
        "locationId": locationId,
        "islock": isLock
      },
      success: function (data) {
        console.log(data)
        if (data.code === 0) {
          if (data.msg === "1") {
            $.modal.msgSuccess('库位已更新')
            $.table.refresh();
          } else {
            $.modal.msgError('错误')
          }
        } else {
          $.modal.msgError('错误')
        }
      },
      error: function () {
        $.modal.msgError('错误')
      }
    });
  }

  // 占用---释放
  function occupyLocation(locationId, status) {
    $.ajax({
      type: "post",
      url: prefix + "/occupyLocation",
      data: {
        "locationId": locationId,
        "status": status
      },
      success: function (data) {
        console.log(data)
        if (data.code === 0) {
          if (data.msg === "1") {
            $.modal.msgSuccess('库位已更新')
            $.table.refresh();
          } else {
            $.modal.msgError('错误')
          }
        } else {
          $.modal.msgError('错误')
        }
      },
      error: function () {
        $.modal.msgError('错误')
      }
    });
  }
</script>
</body>
</html>
<style>
  .inner_row_style {
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 5px;
  }
</style>