<template>
  <section class="content">
    <div class="box box-primary">
      <div class="box-body">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1 id="itemTitle"></h1>
          添加/解锁新的贵族等级请联系产品经理
        </section>
        <div id="toolbar"></div>
      </div>
      <!-- .content -->
      <div id="table"></div>
    </div>

    <div
      class="modal fade"
      id="editModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="modalLabel"
      style="height: 100%; overflow: hidden; overflow: scroll"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 500px">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="modalLabel">贵族编辑</h4>
          </div>
          <div class="modal-body">
            <div class="form-horizontal" id="addForm">
              <input type="hidden" name="vipLevel" id="vipLevel" />
              <input type="hidden" name="addSize" id="addSize" />
              <div class="form-group">
                <label for="vipName" class="col-sm-4 control-label"
                  >名称:</label
                >
                <div class="col-sm-6">
                  <input
                    type="text"
                    class="form-control validate[required]"
                    name="vipName"
                    id="vipName"
                    disabled
                  />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-4 control-label">贵族中心大图:</label>
                <div class="col-sm-6">
                  <input
                    type="file"
                    id="logoUploadIconPic"
                    name="uploadFile"
                    accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                  />
                  <button
                    class="btn btn-success upload fromBtn"
                    name="vipLogo"
                    type="button"
                    id="logoUploadBtn"
                  >
                    上传
                  </button>
                  <input
                    type="text"
                    id="vipLogo"
                    name="vipLogo"
                    class="form-control upload-input-vipLogo"
                  />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-4 control-label">贵族Icon:</label>
                <div class="col-sm-6">
                  <img
                    src=""
                    id="iconPicUrl"
                    name="vipIcon"
                    style="height: 44px"
                    alt=""
                  />
                  <input
                    type="file"
                    id="iconUploadIconPic"
                    name="uploadFile"
                    accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                  />
                  <button
                    class="btn btn-success upload fromBtn"
                    name="vipIcon"
                    type="button"
                    id="iconUploadBtn"
                  >
                    上传
                  </button>
                  <input
                    type="hidden"
                    id="vipIcon"
                    name="vipIcon"
                    class="form-control upload-input-vipIcon"
                  />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-4 control-label">贵族升级飘屏背景:</label>
                <div class="col-sm-6">
                  <input
                    type="file"
                    id="floatUploadIconPic"
                    name="uploadFile"
                    accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                  />
                  <button
                    class="btn btn-success upload fromBtn"
                    name="floatPic"
                    type="button"
                    id="floatUploadBtn"
                  >
                    上传
                  </button>
                  <input
                    type="text"
                    id="floatPic"
                    name="floatPic"
                    class="form-control upload-input-floatPic"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="levelKeepScore" class="col-sm-4 control-label"
                  >保级值:</label
                >
                <div class="col-sm-6">
                  <input
                    type="text"
                    class="form-control validate[required]"
                    name="levelKeepScore"
                    id="levelKeepScore"
                    disabled
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="levelUpScore" class="col-sm-4 control-label"
                  >升级值:</label
                >
                <div class="col-sm-6">
                  <input
                    type="text"
                    class="form-control validate[required]"
                    name="name"
                    id="levelUpScore"
                    disabled
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="comingSoon" class="col-sm-4 control-label"
                  >是否敬请期待:</label
                >
                <div class="col-sm-6">
                  <select
                    name="comingSoon"
                    id="comingSoon"
                    data-btn-class="btn-warning"
                    class="form-control"
                    disabled="disabled"
                  >
                    <option value="1">否</option>
                    <option value="2">是</option>
                  </select>
                </div>
              </div>
              <!--权限-->
              <div id="authDiv">
                <div class="form-group">
                  <label for="buyAmount" class="col-sm-4 control-label"
                    >购买价格:</label
                  >
                  <div class="col-sm-6">
                    <input
                      type="text"
                      class="form-control"
                      name="buyAmount"
                      id="buyAmount"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label for="isReturnProfit" class="col-sm-4 control-label"
                    >是否返利:</label
                  >
                  <div class="col-sm-6">
                    <select
                      name="isReturnProfit"
                      id="isReturnProfit"
                      data-btn-class="btn-warning"
                      class="form-control"
                      onchange="swapProfit()"
                    >
                      <option value="1">是</option>
                      <option value="0">否</option>
                    </select>
                  </div>
                </div>
                <div id="profitDiv">
                  <div class="form-group">
                    <label class="col-sm-4 control-label">返利日期配置</label>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-4 control-label"></label>
                    <div class="col-sm-8" id="returnProfits"></div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-4 control-label"></label>
                    <div class="col-sm-3">
                      <button
                        type="button"
                        class="btn btn-primary form-control"
                        id="returnProfitAdd"
                      >
                        + 添加
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="namePlateIds"
                      value="1"
                    />贵族铭牌
                  </label>
                  <div class="col-sm-6">
                    <input
                      type="text"
                      class="form-control validate[required] refBoxValue-1"
                      name="namePlateIds"
                      id="namePlateIds"
                      placeholder="请输入铭牌id,多个用,隔开"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="infoCardIds"
                      value="5"
                      data-refitemname="info-card"
                    />贵族资料卡
                  </label>
                  <div class="col-sm-6">
                    <input
                      type="text"
                      class="form-control validate[required] refBoxValue-5"
                      name="infoCardIds"
                      id="infoCardIds"
                      placeholder="请输入资料卡id,多个用,隔开"
                    />
                  </div>
                </div>
                <!-- <div class="form-group">
                  <input
                    type="checkbox"
                    class="authCheckBox"
                    name="hasGift"
                    style="margin-left: 80px"
                    value="4"
                  />贵族礼物
                </div> -->
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="levelBuffValue"
                      value="6"
                    />财富值经验加成
                  </label>
                  <div class="col-sm-6">
                    <input
                      type="text"
                      class="form-control validate[required] refBoxValue-6"
                      name="levelBuffValue"
                      id="levelBuffValue"
                      placeholder="不可超过1"
                    />
                  </div>
                </div>
                <!-- <div class="form-group">
                  <input
                    type="checkbox"
                    class="authCheckBox"
                    name="hasFace"
                    style="margin-left: 80px"
                    value="7"
                  />贵族表情
                </div> -->
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="micCircleLogo"
                      value="8"
                      style="margin-left: 60px"
                    />麦序光圈
                  </label>
                  <div class="col-sm-6 refBoxValue-8">
                    <input
                      type="file"
                      id="micCircleUploadIconPic"
                      name="uploadFile"
                    />
                    <button
                      class="btn btn-success upload fromBtn"
                      name="micCircleLogo"
                      type="button"
                      id="micCircleUploadBtn"
                    >
                      上传
                    </button>
                    <input
                      type="text"
                      id="micCircleLogo"
                      name="micCircleLogo"
                      class="form-control validate[required] upload-input-micCircleLogo"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="nickColorValue"
                      value="9"
                    />麦位昵称颜色
                  </label>
                  <div class="col-sm-6">
                    <input
                      type="text"
                      class="form-control validate[required] refBoxValue-9"
                      name="nickColorValue"
                      id="nickColorValue"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="friendNickColorValue"
                      value="10"
                    />好友昵称颜色
                  </label>
                  <div class="col-sm-6">
                    <input
                      type="text"
                      class="form-control validate[required] refBoxValue-10"
                      name="friendNickColorValue"
                      id="friendNickColorValue"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="chatBubbleValue"
                      value="11"
                    />聊天气泡
                  </label>
                  <div class="col-sm-6">
                    <input
                      type="text"
                      class="form-control validate[required] refBoxValue-11"
                      name="chatBubbleValue"
                      id="chatBubbleValue"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="headValue"
                      value="2"
                    />头饰
                  </label>
                  <div class="col-sm-6">
                    <input
                      type="text"
                      class="form-control validate[required] refBoxValue-2"
                      name="headValue"
                      id="headValue"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="carValue"
                      value="3"
                    />座驾
                  </label>
                  <div class="col-sm-6">
                    <input
                      type="text"
                      class="form-control validate[required] refBoxValue-3"
                      name="carValue"
                      id="carValue"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="roomHornValue"
                      value="14"
                    />房间小喇叭次数
                  </label>
                  <div class="col-sm-6">
                    <input
                      type="text"
                      class="form-control validate[required] refBoxValue-14"
                      name="roomHornValue"
                      id="roomHornValue"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="enterRoomEffects"
                      value="12"
                    />进场特效
                  </label>
                  <div class="col-sm-6">
                    <input
                      type="text"
                      class="form-control validate[required] refBoxValue-12"
                      name="enterRoomEffects"
                      id="enterRoomEffects"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="enterHide"
                      value="13"
                    />隐身进房
                  </label>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="preventKick"
                      value="15"
                    />防被踢
                  </label>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                        type="checkbox"
                        class="authCheckBox"
                        name="medalValue"
                        value="16"
                    />勋章
                  </label>
                  <div class="col-sm-6">
                    <input
                        type="text"
                        class="form-control validate[required] refBoxValue-16"
                        name="medalValue"
                        id="medalValue"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                        type="checkbox"
                        class="authCheckBox"
                        name="preventKick"
                        value="17"
                    />不给跟随进房
                  </label>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                        type="checkbox"
                        class="authCheckBox"
                        name="preventKick"
                        value="18"
                    />不给关注
                  </label>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                        type="checkbox"
                        class="authCheckBox"
                        name="preventKick"
                        value="19"
                    />动态头像
                  </label>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                        type="checkbox"
                        class="authCheckBox"
                        name="preventKick"
                        value="20"
                    />送礼飘屏
                  </label>
                </div>
                <div class="form-group">
                <label class="col-sm-4 control-label">
                  <input
                      type="checkbox"
                      class="authCheckBox"
                      name="privateChatCountLimitValue"
                      value="21"
                  />私聊次数限制
                </label>
                <div class="col-sm-6">
                  <input
                      type="text"
                      class="form-control validate[required] refBoxValue-21"
                      name="privateChatCountLimitValue"
                      id="privateChatCountLimitValue"
                  />
                </div>
              </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                        type="checkbox"
                        class="authCheckBox"
                        name="preventKick"
                        value="22"
                    />私聊限制
                  </label>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      name="discount"
                      value="23"
                    />商店折扣
                  </label>
                  <div class="col-sm-6">
                    <input
                      type="text"
                      class="form-control validate[required] refBoxValue-23"
                      name="discount"
                      id="discount"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                      type="checkbox"
                      class="authCheckBox"
                      value="24"
                    />公屏支持发送图片
                  </label>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                        type="checkbox"
                        class="authCheckBox"
                        value="25"
                    />无痕浏览个人页
                  </label>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label">
                    <input
                        type="checkbox"
                        class="authCheckBox"
                        value="26"
                    />查看访客
                  </label>
                </div>
                <div class="form-group">
                <label class="col-sm-4 control-label">
                  <input
                      type="checkbox"
                      class="authCheckBox"
                       name="medalSeatValue"
                      value="27"
                  />勋章席位
                </label>
                <div class="col-sm-6">
                  <input
                      type="text"
                      class="form-control validate[required] refBoxValue-27"
                       name="medalSeatValue"
                       id="medalSeatValue"
                  />
                </div>
              </div>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button type="button" class="btn btn-primary" id="button-save">
              保存
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import TableHelper from "@/utils/bootstrap-table-helper";

let vipMap = {};
let authItems = {};
const VIP_AUTH_TYPE = {
  /**
   * 铭牌
   */
  NAMEPLATE: 1,
  /**
   * 头饰
   */
  HEADWEAR: 2,
  /**
   * 座驾
   */
  CAR: 3,
  /**
   * 礼物
   */
  GIFT: 4,
  /**
   * 用户资料卡
   */
  USER_INFO_CARD: 5,
  /**
   * 财富等级提成
   */
  LEVEL_EXP_BUFF: 6,
  /**
   * 表情
   */
  FACE: 7,
  /**
   * 麦位光圈
   */
  MIC_CIRCLE: 8,
  /**
   * 麦位昵称颜色
   */
  MIC_NICK_COLOUR: 9,
  /**
   * 好友昵称颜色
   */
  FRIEND_NICK_COLOUR: 10,
  /**
   * 聊天气泡
   */
  ROOM_CHAT_BUBBLE: 11,
  /**
   * 进场特效
   */
  IN_ROOM_SPECIAL_EFFECTS: 12,
  /**
   * 隐身进房
   */
  INVISIBLE_IN_ROOM: 13,
  /**
   * 房间小喇叭
   */
  ROOM_HORN: 14,
  /**
   * 防被踢
   */
  PREVENT_KICK: 15,
  /**
   * 勋章
   */
  MEDAL: 16,
  /**
   * 防跟踪
   * */
  PREVENT_TRACE: 17,
  /**
   * 不给关注
   */
  PREVENT_FOLLOW: 18,
  /**
   * 动态头像
   */
  GIF_AVATAR: 19,
  /**
   * 送礼飘屏
   */
  GIFT_FLOATING_SCREEN: 20,
  /**
   * 私聊次数限制
   */
  PRIVATE_CHAT_COUNT_LIMIT: 21,
  /**
   * 私聊限制
   */
  PRIVATE_CHAT_LIMIT: 22,
  /**
   * 商店折扣
   */
  SHOP_DISCOUNT: 23,
  /**
   * 公屏支持发送图片
   */
  PUBLIC_SCREEN_SUPPORTS_SENDINGPICTURES: 24,
  /**
   * 查看方可欣
   */
  LOOK_GUEST: 26,
  /**
   * 无痕浏览个人页
   */
  INVISIBLE_GUEST: 25,
  /**
   * 勋章席位
   */
  Medal_Seat:27

};
export default {
  name: "VipManageView",
  setup() {
    function swapProfit() {
      let isReturnProfit = $("#isReturnProfit").val();
      if (isReturnProfit && isReturnProfit == 1) {
        document.getElementById("profitDiv").style.display = "block";
      } else {
        document.getElementById("profitDiv").style.display = "none";
      }
    }
    window.swapProfit = swapProfit;
    return {
      swapProfit,
    };
  },
  created() {
    this.$nextTick(function () {
      this.initData();
    });
  },
  methods: {
    initData() {
      $(function () {
        $("#table").bootstrapTable("destroy");
        $("#table").bootstrapTable({
          columns: [
            {
              field: "vipLevel",
              title: "贵族等级",
              align: "center",
              width: "5%",
            },
            {
              field: "vipName",
              title: "贵族名称",
              align: "center",
              width: "5%",
            },
            {
              field: "vipIcon",
              title: "贵族icon",
              align: "center",
              width: "5%",
              formatter: function (val, row, index) {
                if (val) {
                  return (
                    "<img style='max-width: 40px;max-height: 40px' src='" +
                    val +
                    "'>"
                  );
                } else {
                  return "-";
                }
              },
            },
            {
              field: "levelKeepScore",
              title: "保级值",
              align: "center",
              width: "5%",
            },
            {
              field: "levelUpScore",
              title: "所需升级值",
              align: "center",
              width: "5%",
            },
            {
              field: "comingSoon",
              title: "是否敬请期待",
              visible: false,
              align: "center",
              width: "5%",
            },
            {
              field: "authItems",
              title: "贵族特权",
              align: "center",
              width: "5%",
              formatter: function (val, row) {
                if (row.comingSoon == 2) {
                  return "敬请期待";
                } else {
                  const desc = buildTableAuthField(row.vipLevel);
                  return desc;
                }
              },
            },
            {
              field: "isReturnProfit",
              title: "是否返利",
              align: "center",
              width: "5%",
              formatter: function (val, row) {
                let value = "否";
                if (val == 1) {
                  value = "是";
                }
                return value;
              },
            },
            {
              field: "returnProfits",
              title: "返利日期+返利金币数量",
              align: "center",
              width: "5%",
              formatter: function (val, row) {
                let value = "";
                if (val && val.length > 0) {
                  for (let i = 0, len = val.length; i < len; i++) {
                    let item = val[i];
                    let profitDate = item.profitDate;
                    let profitAmount = item.profitAmount;
                    if (profitDate == 0) {
                      value += "立即返利：" + profitAmount;
                    } else {
                      value += "第" + profitDate + "天：" + profitAmount;
                    }
                    if (i != len - 1) {
                      value += "<br/>";
                    }
                  }
                } else {
                  value = "/";
                }
                return value;
              },
            },
            {
              field: "buyAmount",
              title: "购买价格",
              align: "center",
              width: "5%",
            },
            {
              field: "opt",
              title: "操作",
              align: "middle",
              width: "5%",
              formatter: function (val, row, index) {
                return (
                  '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' +
                  row.vipLevel +
                  ">" +
                  '<i class="glyphicon glyphicon-edit"></i>编辑</button>&nbsp;&nbsp;'
                );
              },
            },
          ],
          cache: false,
          striped: true,
          showRefresh: false,
          pageSize: 10,
          pagination: true,
          pageList: [10, 20, 50, 100],
          uniqueId: "id",
          search: false,
          sidePagination: "server", //表示服务端请求
          //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
          //设置为limit可以获取limit, offset, search, sort, order
          queryParamsType: "-",
          queryParams: function queryParams(params) {
            //设置查询参数
            var param = {
              page: params.pageNumber,
              pageSize: params.pageSize,
            };
            return param;
          },
          ajax: function (request) {
            //使用ajax请求
            $.ajax({
              type: "GET",
              url: "/admin/vip/listByPage",
              contentType: "application/json;charset=utf-8",
              dataType: "json",
              data: request.data,
              success: function (res) {
                console.log(res);
                for (let i = 0; i < res.rows.length; i++) {
                  const vip = res.rows[i];
                  vipMap[vip.vipLevel] = vip;
                }
                console.log(vipMap);
                request.success({
                  rows: res.rows,
                  total: res.total,
                });
              },
              error: function (error) {
                console.log(error);
              },
            });
          },
          toolbar: "#toolbar",
          onLoadSuccess: function () {
            //加载成功时执行
            console.log("load success");
          },
          onLoadError: function () {
            //加载失败时执行
            console.log("load fail");
          },
        });

        // 查询刷新
        $("#btnSearch").on("click", function () {
          TableHelper.doRefresh("#table");
        });

        // 编辑
        $("#table").on("click", "#btnEdit", function () {
          var id = $(this).attr("data-id");
          const vip = vipMap[id];
          console.log(vip);
          initEditModal(vip);
          initVipAuth(vip);
          initReturnProfit(vip);
          $("#editModal").modal("show");
        });

        function initEditModal(val) {
          $("#addForm")
            .find("input[type=text],input[type=hidden],input[type=file]")
            .each(function () {
              $(this).val("");
            });
          // 清除复选框的值
          $(".authCheckBox").attr("checked", false);
          $(".authCheckBox").attr("checked", false);
          // 赋值
          $("#addForm #vipLevel").val(val.vipLevel);
          $("#addForm #vipName").val(val.vipName);
          $("#logoPicUrl").attr("src", val.vipLogo);
          $("#addForm #vipLogo").val(val.vipLogo);
          $("#iconPicUrl").attr("src", val.vipIcon);
          $("#addForm #vipIcon").val(val.vipIcon);
          $("#floatPicUrl").attr("src", val.floatPic);
          $("#addForm #floatPic").val(val.floatPic);
          $("#addForm #levelKeepScore").val(val.levelKeepScore);
          $("#addForm #levelUpScore").val(val.levelUpScore);
          $("#addForm #comingSoon").val(val.comingSoon);
          $("#addForm #isReturnProfit").val(val.isReturnProfit);
          $("#addForm #buyAmount").val(val.buyAmount);
          if (val.comingSoon === 2) {
            document.getElementById("authDiv").style.display = "none";
          } else {
            document.getElementById("authDiv").style.display = "block";
          }
          let isReturnProfit = val.isReturnProfit;
          if (isReturnProfit && isReturnProfit == 1) {
            document.getElementById("profitDiv").style.display = "block";
          } else {
            document.getElementById("profitDiv").style.display = "none";
          }
        }

        function initVipAuth(val) {
          authItems = val.authItems;
          var boxes = document.getElementsByClassName("authCheckBox");
          for (let i = 0; i < boxes.length; i++) {
            for (const authType in authItems) {
              let value = authItems[authType];
              if (boxes[i].value === authType) {
                boxes[i].checked = true;
                // 展示具体的值
                const name = boxes[i].name;
                $("#" + `${name}`).val(value);
                break;
              }
            }
          }
          for (let i = 0; i < boxes.length; i++) {
            const value = boxes[i].value;
            console.log(value);
            if (boxes[i].checked) {
              $(".refBoxValue-" + `${value}`).show();
            } else {
              $(".refBoxValue-" + `${value}`).hide();
            }
          }
        }

        // 上传图片
        $(".fromBtn").on("click", function () {
          const name = $(this).attr("name");
          var options = {
            type: "post",
            url: "/admin/upload/img",
            dataType: "json",
            success: function (json) {
              if (json.path) {
                $(".upload-input-" + `${name}`).val(json.path);
                $(`img[name=${name}]`).attr("src", json.path);
              }
            },
          };
          $("#addForm").ajaxSubmit(options);
        });

        // 更改checkBox
        $(".authCheckBox").click(function () {
          const value = $(this).attr("value");
          if ($(this).prop("checked")) {
            $(".refBoxValue-" + `${value}`).show();
          } else {
            $(".refBoxValue-" + `${value}`).hide();
          }
        });

        function initReturnProfit(val) {
          if (!val) {
            return;
          }
          $("#returnProfits").children().remove();
          let returnProfits = val.returnProfits;
          if (!returnProfits || returnProfits.length <= 0) {
            return;
          }
          $("#addSize").val(returnProfits.length);
          let $div = $("#returnProfits");
          for (let i = 0, len = returnProfits.length; i < len; i++) {
            let returnProfit = returnProfits[i];
            let returnProfitId = returnProfit.id;
            let profitDate = returnProfit.profitDate;
            let profitAmount = returnProfit.profitAmount;
            let $span = $("<span/>");
            $span.attr("id", "returnProfit" + i);
            let $input = $("<input/>");
            $input.attr("type", "hidden");
            $input.attr("name", "returnProfitId" + i);
            $input.attr("id", "returnProfitId" + i);
            $input.attr("value", returnProfitId);
            $span.append($input);
            let html = "";
            if (!profitDate || profitDate == 0) {
              html +=
                '立即返利<input type="hidden" data-index="' +
                i +
                '" id="profitDate' +
                i +
                '" value="0"/>，';
            } else {
              html +=
                '第 <input type="text" data-index="' +
                i +
                '" id="profitDate' +
                i +
                '" value="' +
                profitDate +
                '" style="width:41px;"/> 天，';
            }
            html +=
              '返利 <input type="text" data-index="' +
              i +
              '" id="profitAmount' +
              i +
              '" value="' +
              profitAmount +
              '" style="width:41px;"/> 金币 <button class="btn btn-sm btn-default opt-del" data-index="' +
              i +
              '">删除</button><br/>';
            $span.append(html);
            $div.append($span);
          }
        }

        //添加返利
        $("#returnProfitAdd").click(function () {
          let i = parseInt($("#addSize").val());
          if (!i) {
            i = 0;
          }
          let $div = $("#returnProfits");
          let $span = $("<span/>");
          $span.attr("id", "returnProfit" + i);
          let html = "";
          if (!i || i == 0) {
            html +=
              '立即返利<input type="hidden" data-index="' +
              i +
              '" id="profitDate' +
              i +
              '" value="0"/>，';
          } else {
            html +=
              '第 <input type="text" data-index="' +
              i +
              '" id="profitDate' +
              i +
              '" style="width:41px;"/> 天，';
          }
          html +=
            '返利 <input type="text" data-index="' +
            i +
            '" id="profitAmount' +
            i +
            '" style="width:41px;"/> 金币 <button class="btn btn-sm btn-default opt-del" data-index="' +
            i +
            '">删除</button><br/>';
          $span.html(html);
          $div.append($span);
          $("#addSize").val(++i);
        });

        //删除
        $("#editModal .modal-body .form-horizontal").on(
          "click",
          ".opt-del",
          function () {
            var index = $(this).data("index");
            var returnProfitId = $("#returnProfitId" + index).val();
            if (returnProfitId) {
              const msg = "确定要删除吗？";
              if (confirm(msg)) {
                $.ajax({
                  type: "get",
                  url:
                    "/admin/vip/return/profit/del?returnProfitId=" +
                    returnProfitId,
                  dataType: "json",
                  success: function (json) {
                    if (json.success == "true" || json.code == 200) {
                      $("#tipMsg").text("删除成功");
                      $("#tipModal").modal("show");
                    } else {
                      $("#tipMsg").text("删除失败." + json.message);
                      $("#tipModal").modal("show");
                    }
                  },
                });
              }
            }
            let addSize = $("#addSize").val();
            if (!addSize) {
              addSize = 0;
            }
            if (addSize > 0) {
              $("#addSize").val(--addSize);
            }
            $("#returnProfit" + index).remove();
          }
        );

        // 保存
        $("#button-save").on("click", function () {
          let params = buildSaveParams();
          if (!params) {
            return;
          }
          console.log(params);
          $.ajax({
            type: "post",
            url: "/admin/vip/updateVip",
            data: params,
            dataType: "json",
            success: function (res) {
              if (res.code == 200) {
                $("#editModal").modal("hide");
                $("#tipMsg").text("保存成功");
                $("#tipModal").modal("show");
                TableHelper.doRefresh("#table");
              } else {
                $("#tipMsg").text("保存失败，错误码：" + res.message);
                $("#tipModal").modal("show");
              }
            },
          });
        });

        function buildSaveParams() {
          let authMap = {};
          var boxes = document.getElementsByClassName("authCheckBox");
          for (let i = 0; i < boxes.length; i++) {
            const value = boxes[i].value;
            const name = boxes[i].name;
            if (boxes[i].checked) {
              if (value == 13 || value == 15
                  || value == 17 || value == 18 || value == 19 || value == 20 || value == 22 || value == 24 || value == 25 || value == 26) {
                authMap[value] = "false";
              } else if (value == 8) {
                console.log("name", name);
                authMap[value] = $("#" + `${name}`).val();
              } else {
                authMap[value] = $(".refBoxValue-" + `${value}`).val();
              }
            }
          }
          let vipLevel = $("#addForm #vipLevel").val();
          let addSize = $("#addSize").val();
          if (addSize && addSize > 5) {
            $("#tipMsg").text("返利数量超过5个！！！");
            $("#tipModal").modal("show");
            return null;
          }
          let isReturnProfit = $("#isReturnProfit").val();
          let returnProfitArray = [];
          if (isReturnProfit && isReturnProfit == 1) {
            for (let i = 0; i < addSize; i++) {
              let returnProfitId = $("#returnProfitId" + i).val();
              let profitDate = parseFloat($("#profitDate" + i).val());
              let profitAmount = $("#profitAmount" + i).val();
              if (!returnProfitId && !profitDate && !profitAmount) {
                continue;
              }
              if (profitDate != 0 && profitDate > 29) {
                $("#tipMsg").text("返利日期不能超过30天！");
                $("#tipModal").modal("show");
                return null;
              }
              if (!profitAmount || profitAmount <= 0) {
                $("#tipMsg").text("返利数量不能为空！");
                $("#tipModal").modal("show");
                return null;
              }
              let returnProfit = {
                vipLevel: vipLevel,
                profitDate: profitDate,
                profitAmount: parseInt(profitAmount),
                seqNo: vipLevel,
              };
              if (returnProfitId) {
                returnProfit.id = returnProfitId;
              }
              returnProfitArray.push(returnProfit);
            }
          }
          const param = {
            vipLevel: $("#addForm #vipLevel").val(),
            vipLogo: $("#addForm #vipLogo").val(),
            vipIcon: $("#addForm #vipIcon").val(),
            floatPic: $("#addForm #floatPic").val(),
            isReturnProfit: isReturnProfit,
            buyAmount: $("#buyAmount").val(),
            authMap: authMap,
            returnProfitJson:
              returnProfitArray && returnProfitArray.length > 0
                ? JSON.stringify(returnProfitArray)
                : null,
          };
          return param;
        }

        function buildTableAuthField(vipLevel) {
          const vipInfo = vipMap[vipLevel];
          const authItems = vipInfo.authItems;
          const options = [];
          for (const authType in authItems) {
            let value = authItems[authType];
            let desc = getDescByType(authType);

            if (
              authType == VIP_AUTH_TYPE.NAMEPLATE ||
              authType == VIP_AUTH_TYPE.USER_INFO_CARD ||
              authType == VIP_AUTH_TYPE.CAR ||
              authType == VIP_AUTH_TYPE.ROOM_CHAT_BUBBLE ||
              authType == VIP_AUTH_TYPE.MEDAL || authType == VIP_AUTH_TYPE.MIC_NICK_COLOUR || authType == VIP_AUTH_TYPE.FRIEND_NICK_COLOUR || authType == VIP_AUTH_TYPE.ROOM_HORN || authType == VIP_AUTH_TYPE.PRIVATE_CHAT_COUNT_LIMIT || authType == VIP_AUTH_TYPE.Medal_Seat || authType == VIP_AUTH_TYPE.HEADWEAR 
            ) {
              value = authItems[authType];
            } else if (authType == VIP_AUTH_TYPE.LEVEL_EXP_BUFF || authType == VIP_AUTH_TYPE.SHOP_DISCOUNT) {
              value = value * 100 + "%";
            } else {
              value = "";
            }

            // if (!desc || !value){
            //   continue
            // }

            // console.log("desc:" + desc)

            options.push(
              "" + desc + "&nbsp;&nbsp;" + value + "&nbsp;&nbsp;<br>"
            );
          }
          console.log("options", options);
          return options.join("");
        }

        function getDescByType(authType) {
          switch (Number(authType)) {
            case 1:
              return "贵族铭牌";
              case 2:
              return "头饰";
            case 5:
              return "贵族资料卡";
            case 4:
              return "贵族礼物";
            case 6:
              return "财富值经验加成";
              case 8:
              return "麦序光圈";
              case 7:
              return "贵族表情";
              case 9:
              return "麦位昵称颜色";
              case 10:
              return "好友昵称颜色";
              case 11:
              return "聊天气泡";
              case 3:
              return "座驾";
              case 14:
              return "房间小喇叭次数";
              case 12:
              return "进场特效";
              case 13:
              return "隐身进房";
              case 15:
              return "防被踢";
              case 16:
              return "勋章";
              case 17:
              return "不给跟随进房";
              case 18:
              return "不给关注";
              case 19:
              return "动态头像";
              case 20:
              return "送礼飘屏";
              case 21:
              return "私聊次数限制";
              case 22:
              return "私聊限制";
              case 23:
              return "商店折扣";
              case 24:
              return "公屏支持发送图片";
              case 25:
              return "无痕浏览个人页";
              case 26:
              return "查看访客";
              case 27:
              return "勋章席位";

          }
          // if (authType == VIP_AUTH_TYPE.NAMEPLATE) {
          //   return "贵族铭牌";
          // } else if (authType == VIP_AUTH_TYPE.USER_INFO_CARD) {
          //   return "贵族资料卡";
          // } else if (authType == VIP_AUTH_TYPE.GIFT) {
          //   return "贵族礼物";
          // } else if (authType == VIP_AUTH_TYPE.LEVEL_EXP_BUFF) {
          //   return "财富值经验加成";
          // } else if (authType == VIP_AUTH_TYPE.FACE) {
          //   return "贵族表情";
          // } else if (authType == VIP_AUTH_TYPE.MIC_CIRCLE) {
          //   return "麦序光圈";
          // } else if (authType == VIP_AUTH_TYPE.MIC_NICK_COLOUR) {
          //   return "麦位昵称颜色";
          // } else if (authType == VIP_AUTH_TYPE.FRIEND_NICK_COLOUR) {
          //   return "好友红名";
          // } else if (authType == VIP_AUTH_TYPE.CAR) {
          //   return "座驾";
          // } else if (authType == VIP_AUTH_TYPE.ROOM_CHAT_BUBBLE) {
          //   return "聊天气泡";
          // } else if (authType == VIP_AUTH_TYPE.ROOM_HORN) {
          //   return "房内小喇叭";
          // } else if (authType == VIP_AUTH_TYPE.IN_ROOM_SPECIAL_EFFECTS) {
          //   return "进场特效";
          // } else if (authType == VIP_AUTH_TYPE.INVISIBLE_IN_ROOM) {
          //   return "隐身进房";
          // } else if (authType == VIP_AUTH_TYPE.PREVENT_KICK) {
          //   return "防被踢";
          // } else if (authType == VIP_AUTH_TYPE.MEDAL) {
          //   return "勋章";
          // } else if (authType == VIP_AUTH_TYPE.PREVENT_TRACE) {
          //   return "防跟随进房";
          // } else if (authType == VIP_AUTH_TYPE.PREVENT_FOLLOW) {
          //   return "不给关注";
          // } else if (authType == VIP_AUTH_TYPE.GIF_AVATAR) {
          //   return "动态头像";
          // } else if (authType == VIP_AUTH_TYPE.GIFT_FLOATING_SCREEN) {
          //   return "送礼飘屏";
          // } else if (authType == VIP_AUTH_TYPE.PRIVATE_CHAT_COUNT_LIMIT) {
          //   return "私聊次数限制";
          // } else if (authType == VIP_AUTH_TYPE.PRIVATE_CHAT_LIMIT) {
          //   return "私聊限制";
          // } else if (authType == VIP_AUTH_TYPE.PUBLIC_SCREEN_SUPPORTS_SENDINGPICTURES) {
          //   return "公屏支持发送图片";
          // }
        }
      });
    },
  },
};
</script>

<style scoped>
#imgMask {
  position: absolute;
  top: 0;
  left: 0;
  width: 450px;
  height: 450px;
  padding: 4px;
  background: #fff;
  z-index: 999;
  display: none;
}

#imgMask img {
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.control-span {
  padding-top: 7px;
  margin-bottom: 0;
  font-weight: 400;
  display: block;
}

.ul-li {
  margin-bottom: 20px !important;
}

.ul-i {
  margin-right: 10px !important;
}

.i-font {
  color: #00acd6;
}

.ul-li label {
  color: #c9cccf;
}

.fixed-table-body {
  height: auto !important;
}
</style>