<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap Switch -->
<script src="plugins/bootstrap/js/bootstrap-switch.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">

<body>
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">热词展示与设置</h3>
          <div class="card-tools">
            <div class="input-group input-group-sm" style="width: 150px;">
              <input type="text" name="table_search" class="form-control float-right" placeholder="Search">
              <div class="input-group-append">
                <button type="submit" class="btn btn-default">
                  <i class="fas fa-search"></i>
                </button>
              </div>
            </div>
          </div>
        </div>

        <div class="card-body table-responsive p-0" style="height: 300px;">
          <table class="table table-head-fixed text-nowrap">
            <thead>
              <tr>
                <th>id</th>
                <th>unique_id</th>
                <th>type</th>
                <th>words</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {% for word in words_list %}
              <tr>
                <td id="id">{{word.id}}</td>
                <td id="unique_id">{{word.unique_id}}</td>
                <td id="type">{{word.type}}</td>
                <td>
                  <textarea name="get_hot_words" id="get_hot_words">{{word.words}}</textarea>
                </td>
                <td>
                  <button type="button" name="set_hot_words" onclick="sava_hot_words(this);">保存并发布热词</button>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

      </div>

    </div>
  </div>
</body>

<script>
  var x = document.getElementById("get_hot_words").value;
  x = x.split(',')
  var y = ""
  if (x.length == 0) {
    y = ""
  }
  else if (x.length == 1) {
    y = x[0];
  }
  else {
    for (i = 0; i < x.length; i++) {
      if (i < x.length - 1)
        y = y + x[i] + "\n"
      else
        y = y + x[i]
    }
  }
  $("#get_hot_words").val(y);


  function sava_hot_words() {
    let unique_id = document.getElementById("unique_id").innerHTML;
    let type = document.getElementById("type").innerHTML;
    let res = $("#get_hot_words").val();
    words = res.split("\n");
    var data = { "unique_id": unique_id, "hotwords_type": type, "words": words }

    $.ajaxSetup({ "xhrFields": true });
    $.ajax({
      url: "/v1/asr/hotwords",
      data: JSON.stringify(data),
      contentType: "application/json",
      type: "post",
      traditional: true,
      success: function (j) {
        if (j["error_code"] == 0) {
          alert("热词发布成功");
        } else {
          alert("热词发布失败");
        }
      }
    });
  }
</script>