<template>
  <section class="content">
    <div class="box box-primary">
      <section class="content-header">
        <h1 id="itemTitle"></h1>
      </section>
      <section>
        <div id="toolbar">
          <div class="col-sm-12">
            <label for="giftId" class="col-sm-3 control-label">选择礼物:</label>
            <div class="col-sm-3">
              <select name="giftId" id="giftId" class="form-control" @change="renderTableInfo"></select>
            </div>
          </div>
        </div>
      </section>
      <br />
      <br />
      <section class="content">
        <div class="group-table-section">
          <div class="group-wrapper js-group-wrapper">
            <div class="header-wrapper">
              <div class="title">幸运礼物区间</div>
              <div class="right-content js-no-editing">
                <div class="action-btn-wrap">
                  <button class="btn btn-primary js-edit-group">编辑</button>
                </div>
              </div>
              <div class="right-content right-content-edit js-editing">
                <div class="action-btn-wrap">
                  <button class="btn btn-primary js-add">新增</button>
                  <button class="btn btn-danger js-edit">保存</button>
                  <button class="btn btn-default js-cancel">取消</button>
                </div>
              </div>
            </div>
            <table class="group-table table table-hover table-striped">
              <tr>
                <th>刷礼个数大于等于</th>
                <th>刷礼个数小于</th>
              </tr>
            </table>
          </div>
        </div>
      </section>
    </div>
  </section>

  <!-- 添加弹窗 -->
  <div
    class="modal fade"
    id="addModal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalLabel"
  >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">x</span>
          </button>
          <h4 class="modal-title" id="addModalLabel">刷礼区间配置</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
            <div class="form-group">
              <label for="minValue" class="col-sm-3 control-label"
                >刷礼个数大于等于:</label
              >
              <div class="col-sm-8">
                <input
                  type="text"
                  id="minValue"
                  name="minValue"
                  class="form-control validate[required]"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="maxValue" class="col-sm-3 control-label">刷礼个数小于:</label>
              <div class="col-sm-8">
                <input type="text" id="maxValue" name="maxValue" class="form-control" />
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" type="button" id="addCancel">取消</button>
          <button class="btn btn-primary" type="button" id="addSave">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getLuckyGiftRangeConfigList,
  saveLuckyGiftRangeConfig,
} from "@/api/lucky/luckyGiftRangeConfig";
import { getGiftList } from "@/api/common/gift";
import { buildSelectOption } from "@/utils/system-helper";
import { apiResult } from "@/utils/maintainer";

export default {
  name: "LuckyGiftRangeConfigView",
  data() {
    return {
      isEdit: false,
      items: [],
    };
  },
  setup() {
    return {};
  },
  created() {
    this.$nextTick(function () {
      this.getGiftInfo();
      this.initData();
    });
  },
  methods: {
    initData() {
      let $this = this;
      $(function () {
        $("#addSave").click(function () {
          $this.add();
          $("#addModal").modal("hide");
        });
        $(".js-edit-group").click(function () {
          $this.editTableInfo();
          $this.renderTableInfo();
        });
        $(".js-add").click(function () {
          $("#minValue").val("");
          $("#maxValue").val("");
          $("#addModal").modal("show");
        });
        $(".js-edit").click(function () {
          $this.save();
        });
        $(".js-cancel").click(function () {
          $this.disableTableInfo();
          $this.renderTableInfo();
        });
      });
    },
    add() {
      let minValue = $("#minValue").val();
      let maxValue = $("#maxValue").val();
      let item = {
        minValue: minValue,
        maxValue: maxValue,
      };
      this.items.splice(this.items.length, 0, item);
      this.renderTableInfo();
    },
    save() {
      let giftId = $("#giftId").val();
      saveLuckyGiftRangeConfig({
        giftId: giftId,
        rangeConfigJson: JSON.stringify(this.items),
      }).then((res) => {
        apiResult(res);
        this.disableTableInfo();
        this.renderTableInfo();
      });
    },
    editTableInfo() {
      this.isEdit = true;
    },
    disableTableInfo() {
      this.isEdit = false;
    },
    renderTableInfo() {
      let $this = this;
      let isEdit = this.isEdit;
      let giftId = $("#giftId").val();
      if (giftId == null) {
        return;
      }
      let $jsNoEditing = $(".js-group-wrapper .js-no-editing");
      let $jsEditing = $(".js-group-wrapper .js-editing");
      if (isEdit) {
        $jsNoEditing.hide();
        $jsEditing.show();
      } else {
        $jsNoEditing.show();
        $jsEditing.hide();
      }
      let $groupTable = $(".js-group-wrapper .group-table");
      $(".js-group-wrapper .group-table input").unbind("change");
      $(".js-group-wrapper .group-table .js-remove-item").unbind("click");
      $groupTable.html(
        "<thead><tr><th>刷礼个数大于等于</th><th>刷礼个数小于</th></tr></thead>"
      );
      $groupTable.append("<tbody>");
      for (let i = 0, len = $this.items.length; i < len; i++) {
        let item = $this.items[i];
        let tds = [];
        if (isEdit) {
          tds.push(
            `<td><input class="input-sm" name="minValue" data-idx="${i}" value="${item.minValue}"></td>`
          );
          tds.push(
            `<td><input class="input-sm" name="maxValue" data-idx="${i}" value="${item.maxValue}"></td>`
          );
        } else {
          tds.push(
            `<td><i class="glyphicon glyphicon-remove js-remove-item" data-idx="${i}"></i>${item.minValue}</td>`
          );
          tds.push(`<td>${item.maxValue}</td>`);
        }
        let row = `<tr>${tds.join()}</tr>`;
        $groupTable.append(row);
      }
      $groupTable.append("</tbody>");
      $(".js-group-wrapper .group-table input").bind("change", function (e) {
        let target = e.target;
        const index = $(target).attr("data-idx");
        const propName = $(target).attr("name");
        const inputValue = target.value;
        $this.items[index][propName] = inputValue;
        $this.renderTableInfo();
      });
      $(".js-group-wrapper .group-table .js-remove-item").bind("click", function (e) {
        let target = e.target;
        const index = new Number($(target).attr("data-idx"));
        let items = $this.items;
        if (items && items.length > index) {
          let item = items[index];
          if (item && item.isDefault == 1) {
            $("#tipMsg").text("默认区间不允许删除");
            $("#tipModal").modal("show");
            return;
          }
        }
        if (confirm("你确定要删除该礼物区间吗？")) {
          items.splice(index, 1);
          $this.renderTableInfo();
        }
      });
    },
    getTableInfo() {
      let giftId = $("#giftId").val();
      console.log(giftId);
      if (giftId == null) {
        return;
      }
      getLuckyGiftRangeConfigList({
        giftId: giftId,
      }).then((res) => {
        this.items = res.data;
        this.renderTableInfo();
      });
    },
    getGiftInfo() {
      let $this = this;
      $("#giftId").children().remove();
      getGiftList({
        giftType: 16,
      }).then((res) => {
        let data = res.data;
        
        if (data.length > 0) {
          buildSelectOption(
            "#giftId",
            data[0].giftId,
            data.map((v) => {
              return {
                value: v.giftId,
                text: v.giftName,
              };
            })
          );
          $this.getTableInfo();
        }
      });
    },
  },
};
</script>

<style scoped>
.group-table-section {
  display: flex;
  width: 100%;
}

.group-table-section .group-wrapper {
  width: 50%;
}

.group-wrapper .header-wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 512px;
}

.group-wrapper .header-wrapper .title {
  font-size: 20px;
}

.group-wrapper .header-wrapper .right-content {
  display: flex;
  justify-content: flex-start;
}

.group-wrapper .header-wrapper .right-content.right-content-edit {
  display: none;
}

.group-wrapper .header-wrapper .action-btn-wrap button:not(last-child) {
  margin-right: 10px;
}

.group-wrapper .group-table {
  margin-top: 12px;
  margin-right: 10px;
  max-width: 1024px;
  color: red;
  cursor: pointer;
}
</style>
