<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />

    <title>设备管理</title>

    <link rel="stylesheet" href="/static/layui/css/layui.css" />

    <link rel="stylesheet" href="/static/css/style.css" />
  </head>

  <body>
    <div class="layui-fluid">
      <div class="layui-card">
        <div class="layui-card-header">
          <span>设备型号管理</span>

          <button
            class="layui-btn layui-btn-sm layui-btn-normal"
            id="add-device"
          >
            <i class="layui-icon">&#xe654;</i> 添加设备型号
          </button>
        </div>

        <div class="layui-card-body">
          <!-- 搜索表单 -->

          <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">设备型号</label>

                <div class="layui-input-inline">
                  <input
                    type="text"
                    name="deviceModel"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
              </div>

              <div class="layui-inline">
                <label class="layui-form-label">设备类型</label>

                <div class="layui-input-inline">
                  <select name="deviceType">
                    <option value="">全部</option>

                    <option value="软件">软件</option>

                    <option value="网站">网站</option>

                    <option value="嵌入式设备">嵌入式设备</option>

                    <option value="单片机设备">单片机设备</option>
                  </select>
                </div>
              </div>

              <div class="layui-inline">
                <label class="layui-form-label">所属公司</label>

                <div class="layui-input-inline">
                  <input
                    type="text"
                    name="company"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
              </div>

              <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="search">
                  <i class="layui-icon">&#xe615;</i> 搜索
                </button>

                <button
                  type="button"
                  class="layui-btn layui-btn-primary"
                  id="export-devices"
                >
                  <i class="layui-icon">&#xe67d;</i> 导出
                </button>
              </div>
            </div>
          </form>

          <!-- 数据表格 -->

          <table id="device-table" lay-filter="device-table"></table>
        </div>
      </div>
    </div>

    <!-- 表格工具栏模板 -->

    <script type="text/html" id="tableToolbar">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="refresh">
          <i class="layui-icon">&#xe669;</i> 刷新
        </button>

        <button
          class="layui-btn layui-btn-sm layui-btn-danger"
          lay-event="batchDel"
        >
          <i class="layui-icon">&#xe640;</i> 批量删除
        </button>
      </div>
    </script>

    <!-- 行工具栏模板 -->

    <script type="text/html" id="tableRowBar">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

      <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"
        >删除</a
      >
    </script>

    <!-- 设备型号表单模板 -->

    <script type="text/html" id="deviceFormTpl">
      <form class="layui-form" style="padding: 20px;" lay-filter="deviceForm">
        <input type="hidden" name="id" />

        <div class="layui-form-item">
          <label class="layui-form-label">设备型号</label>

          <div class="layui-input-block">
            <input
              type="text"
              name="model_name"
              required
              lay-verify="required"
              placeholder="请输入设备型号"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">设备类型</label>

          <div class="layui-input-block">
            <select name="device_type" required lay-verify="required">
              <option value="software">软件</option>

              <option value="website">网站</option>

              <option value="embedded">嵌入式设备</option>

              <option value="mcu">单片机设备</option>
            </select>
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">所属公司</label>

          <div class="layui-input-block">
            <input
              type="text"
              name="company"
              placeholder="请输入所属公司"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">状态</label>

          <div class="layui-input-block">
            <input type="radio" name="status" value="active" title="启用" checked>
            <input type="radio" name="status" value="disabled" title="禁用">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">备注说明</label>

          <div class="layui-input-block">
            <textarea
              name="remark"
              placeholder="请输入备注说明"
              class="layui-textarea"
            ></textarea>
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="deviceSubmit">
              提交
            </button>

            <button type="reset" class="layui-btn layui-btn-primary">
              重置
            </button>
          </div>
        </div>
      </form>
    </script>

    <script src="/static/layui/layui.js"></script>

    <script src="/static/js/devices.js"></script>
  </body>
</html>