<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>
                <!-- .content -->
                <section class="content">
                    <div id="table"></div>
                    <div id="toolbar">
                        <div class="col-sm-12">
                            <label for="selectGiftName" class="col-sm-1 control-label">名称:</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" name="selectGiftName" id="selectGiftName"
                                    placeholder="礼物名称" />
                            </div>

                            <label for="selectGiftGoldMin" class="col-sm-1 control-label">价格:</label>
                            <div class="col-sm-2">
                                <input type="number" class="form-control" name="selectGiftGoldMin" id="selectGiftGoldMin"
                                    placeholder="下限" />
                            </div>
                            <label for="selectGiftGoldMax" class="col-sm-1 control-label">-</label>
                            <div class="col-sm-2">
                                <input type="number" class="form-control" name="selectGiftGoldMax" id="selectGiftGoldMax"
                                    placeholder="上限" />
                            </div>
                        </div>

                        <div class="col-sm-12">
                            <label for="condition_type" class="col-sm-1 control-label">状态:</label>
                            <div class="col-sm-2">
                                <select name="condition_type" id="condition_type" class="form-control">
                                    <option value="0" selected="selected">全部</option>
                                    <option value="1">有效</option>
                                    <option value="2">无效</option>
                                </select>
                            </div>

                            <label for="consume_type" class="col-sm-1 control-label">消费类型:</label>
                            <div class="col-sm-2">
                                <select name="consume_type" id="consume_type" class="form-control">
                                    <option value="" selected="selected">全部</option>
                                    <option value="1">金币礼物</option>
                                    <option value="2">萝卜礼物</option>
                                    <option value="3">免费礼物</option>
                                </select>
                            </div>

                            <label for="gift_type" class="col-sm-1 control-label">礼物类型:</label>
                            <div class="col-sm-2">
                                <select name="gift_type" id="gift_type" class="form-control">
                                    <option value="" selected="selected">全部</option>
                                    <option value="2">普通面板礼物</option>
                                    <option value="3">福袋礼物</option>
                                    <option value="5">福袋奖池礼物</option>
                                    <option value="7">贵族礼物</option>
                                    <option value="8">周星榜礼物</option>
                                    <option value="9">合成礼物</option>
                                    <option value="10">涂鸦礼物</option>
                                    <option value="11">个播人气礼物</option>
                                    <option value="13">星座礼物</option>
                                    <option value="15">线性福袋礼物</option>
                                    <option value="16">条件解锁礼物</option>
                                    <option value="17">附赠装扮礼物</option>
                                </select>
                            </div>

                        </div>
                        <div class="col-sm-12">
                            <label for="searchLevel" class="col-sm-1 control-label">礼物等级:</label>
                            <div class="col-sm-2">
                                <select name="searchLevel" id="searchLevel" class="form-control">
                                    
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-12">
                            <button id="gift-add" class="btn btn-default">
                                <i class="glyphicon glyphicon-plus"></i>增加
                            </button>

                            <button id="gift-multiDel" class="btn btn-default">
                                <i class="glyphicon glyphicon-wrench"></i>批量删除
                            </button>

                            <button id="gift-version-reset" class="btn btn-default">
                                <i class="glyphicon glyphicon-wrench"></i>设置礼物版本
                            </button>

                            <button id="gift-refresh" class="btn btn-default">
                                <i class="glyphicon glyphicon-wrench"></i>查询
                            </button>
                        </div>
                    </div>
                </section><!-- .content -->
            </div>
        </div>
    </section>
    <div class="modal fade" id="giftVersionModal" tabindex="-1" role="dialog" aria-labelledby="gift-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">&times;</span>
                    </button>
                    <h4 class="modal-title" id="gift-modalLabel">版本信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="giftVersionForm">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">当前礼物版本</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="giftVersion" id="giftVersion"
                                    readonly="false">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">新版本</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required]" name="configValue"
                                    id="newGiftVersion">
                            </div>
                        </div>
                        <input type="hidden" name="configId" id="gift-configId" />
                        <input type="hidden" name="configName" id="gift-configName" />
                        <input type="hidden" name="nameSpace" id="gift-nameSpace" />
                        <input type="hidden" name="configStatus" id="gift-configStatus" />

                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="gift-version-save">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="giftModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" style="height: 100%; overflow: hidden; overflow: scroll;">
        <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">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modalLabel">礼物信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="giftForm">
                        <input type="hidden" name="giftId" id="giftId" />
                        <input type="hidden" name="sendDressIdBak" id="sendDressIdBak" />
                        <input type="hidden" name="receiveDressIdBak" id="receiveDressIdBak" />
                        <div class="form-group">
                            <label for="consumeType" class="col-sm-3 control-label">消费类型</label>
                            <div class="col-sm-8">
                                <select class="form-control" name="consumeType" id="consumeType"
                                    data-btn-class="btn-warning" onchange="selectConsumeChange(this)">
                                    <option value="1" selected="selected">金币礼物</option>
                                    <option value="2">萝卜礼物</option>
                                    <option value="3">免费礼物</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="giftName" class="col-sm-3 control-label">礼物名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required]" name="giftName" id="giftName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="goldPrice" class="col-sm-3 control-label">礼物价格</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required]" name="goldPrice" id="goldPrice">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="giftType" class="col-sm-3 control-label">礼物类型</label>
                            <div class="col-sm-8">
                                <select name="giftType" id="giftType" data-btn-class="btn-warning" class="form-control" v-model="gift.giftType">
                                    <option value="2">普通面板礼物</option>
                                    <option value="3">福袋礼物</option>
                                    <option value="5">福袋奖池礼物</option>
                                    <option value="1">轻聊或者竞拍房</option>
                                    <option value="4">卡片</option>
                                    <option value="7">贵族礼物</option>
                                    <option value="8">周星榜礼物</option>
                                    <option value="9">合成礼物</option>
                                    <option value="10">涂鸦礼物</option>
                                    <option value="11">个播人气礼物</option>
                                    <option value="13">星座礼物</option>
                                    <option value="15">线性福袋礼物</option>
                                    <option value="16">条件解锁礼物</option>
                                    <option value="17">附赠装扮礼物</option>
                                </select>
                            </div>
                        </div>
                        <div v-if="gift.giftType == 16">
                            <div class="form-group">
                                <label for="subGiftType" class="col-sm-3 control-label">解锁礼物类型</label>
                                <div class="col-sm-8">
                                    <select name="subGiftType" id="subGiftType" data-btn-class="btn-warning" class="form-control" v-model="gift.subGiftType">
                                        <option value="">无</option> 
                                        <option value="0">基础解锁礼物</option>
                                        <option value="1">被解锁礼物</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" v-if="gift.subGiftType == 1">
                                <label for="baseGiftId" class="col-sm-3 control-label">需要的基础解锁礼物</label>
                                <div class="col-sm-8">
                                    <select name="baseGiftId" id="baseGiftId" data-btn-class="btn-warning" class="form-control"> 
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" v-if="gift.subGiftType == 1">
                                <label for="unlockNum" class="col-sm-3 control-label">需要的该基础礼物个数</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" name="unlockNum" id="unlockNum" min="1"> 
                                </div>
                            </div>
                        </div>

                        <div v-if="gift.giftType == 17">
                            <div class="form-group">
                                <label for="sendDressType" class="col-sm-3 control-label">送礼者获得装扮类型</label>
                                <div class="col-sm-8">
                                    <select name="sendDressType" id="sendDressType" data-btn-class="btn-warning" class="form-control" @change="changeDressType('send')"> 
                                        <option value="">无</option> 
                                        <option value="HEADWEAR">头像装饰</option>
                                        <option value="CHATBUBBLE">气泡装饰</option>
                                        <option value="CAR">座驾</option>
                                        <option value="NAMEPLATE">铭牌</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="sendDressId" class="col-sm-3 control-label">送礼者获得装扮内容</label>
                                <div class="col-sm-8">
                                    <select name="sendDressId" id="sendDressId" data-btn-class="btn-warning" class="form-control"> 
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="sendDressTime" class="col-sm-3 control-label">送礼者获得装扮时长</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" name="sendDressTime" id="sendDressTime" min="1"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="receiveDressType" class="col-sm-3 control-label">收礼者获得装扮类型</label>
                                <div class="col-sm-8">
                                    <select name="receiveDressType" id="receiveDressType" data-btn-class="btn-warning" class="form-control" @change="changeDressType('receive')">
                                        <option value="">无</option>  
                                        <option value="HEADWEAR">头像装饰</option>
                                        <option value="CHATBUBBLE">气泡装饰</option>
                                        <option value="CAR">座驾</option>
                                        <option value="NAMEPLATE">铭牌</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="receiveDressId" class="col-sm-3 control-label">收礼者获得装扮内容</label>
                                <div class="col-sm-8">
                                    <select name="receiveDressId" id="receiveDressId" data-btn-class="btn-warning" class="form-control"> 
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="receiveDressTime" class="col-sm-3 control-label">收礼者获得装扮时长</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" name="receiveDressTime" id="receiveDressTime" min="1"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="dressBanner" class="col-sm-3 control-label">礼物介绍banner</label>
                                <div class="col-sm-8">
                                    <img src="" id="dressBannerImage" style="width:250px;height:90px;" alt="">
                                    <input type="file" id="dressBannerFile" name="uploadFile"/>
                                    <input type="hidden" id="dressBanner" name="dressBanner" class="form-control validate[required]" />
                                    <span class="btn col-sm-4" id="dressBannerUploadInfo" style="color:red;"></span>
                                </div>
                            </div> 
                            <div class="form-group">
                                <label class="col-sm-3 control-label"></label>
                                <div class="col-sm-8">
                                    <button class="btn btn-default col-sm-4" type="button" id="dressBannerUploadBtn" @click="uploadDressBanner">上传</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="bannerSkipUrl" class="col-sm-3 control-label">礼物介绍banner跳转</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="bannerSkipUrl" id="bannerSkipUrl">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="giftLevel" class="col-sm-3 control-label">礼物等级</label>
                            <div class="col-sm-8">
                                <select name="giftLevel" id="giftLevel" data-btn-class="btn-warning" class="form-control">
                                </select>
                            </div>
                        </div>
                        <div id="roomFreeGift">
                            <div class="form-group">
                                <label for="maxStage" class="col-sm-3 control-label">每日获得上限</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" name="maxStage" id="maxStage" min="1"
                                        placeholder="1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="firstStageSecond" class="col-sm-3 control-label">首次倒计时秒数</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" name="firstStageSecond" id="firstStageSecond"
                                        min="1" placeholder="1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="otherStageSecond" class="col-sm-3 control-label">其余倒计时秒数</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" name="otherStageSecond" id="otherStageSecond"
                                        min="1" placeholder="1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="resetTime" class="col-sm-3 control-label">重置时间</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control datepicker" name="resetTime" id="resetTime">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">礼物状态</label>
                            <div class="col-sm-3">
                                <label class="radio-inline"><input type="radio" name="giftStatus" value="1"
                                        checked>有效</label>
                                <label class="radio-inline"><input type="radio" name="giftStatus" value="2">无效</label>
                            </div>

                            <label class="col-sm-3 control-label">特效</label>
                            <div class="col-sm-3">
                                <label class="radio-inline"><input type="radio" name="hasEffect" value="0" checked>否</label>
                                <label class="radio-inline"><input type="radio" name="hasEffect" value="1">是</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">vgg特效</label>
                            <div class="col-sm-3">
                                <label class="radio-inline"><input type="radio" name="hasVggPic" value="0" checked>否</label>
                                <label class="radio-inline"><input type="radio" name="hasVggPic" value="1">是</label>
                            </div>

                            <label class="col-sm-3 control-label">svga动画</label>
                            <div class="col-sm-3">
                                <label class="radio-inline"><input type="radio" name="hasSvga" value="0" checked>否</label>
                                <label class="radio-inline"><input type="radio" name="hasSvga" value="1">是</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">最新礼物</label>
                            <div class="col-sm-3">
                                <label class="radio-inline"><input type="radio" name="isLatest" value="0" checked>否</label>
                                <label class="radio-inline"><input type="radio" name="isLatest" value="1">是</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">限时礼物</label>
                            <div class="col-sm-3">
                                <label class="radio-inline"><input type="radio" name="isTimeLimit" value="0"
                                        checked>否</label>
                                <label class="radio-inline"><input type="radio" name="isTimeLimit" value="1">是</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">房间专属礼物</label>
                            <div class="col-sm-3">
                                <label class="radio-inline"><input type="radio" name="roomExclude" value="0"
                                        onclick="setRoomId(this)" checked>否</label>
                                <label class="radio-inline"><input type="radio" name="roomExclude" value="1"
                                        onclick="setRoomId(this)">是</label>
                            </div>
                            <div class="col-sm-10">
                                <input type="text" style="display:none" placeholder="输入房间ID,逗号隔开" class="form-control"
                                    name="roomExcludeId" id="roomExcludeId">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="giftTag" class="col-sm-3 control-label">礼物标签</label>
                            <div class="col-sm-8">
                                <img src="" id="giftTagImage" style="width:250px;height:90px;" alt="">
                                <input type="file" id="giftTagFile" name="uploadFile"/>
                                <input type="hidden" id="giftTag" name="giftTag" class="form-control validate[required]" />
                                <span class="btn col-sm-4" id="giftTagUploadInfo" style="color:red;"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"></label>
                            <div class="col-sm-8">
                                <button class="btn btn-default col-sm-4" type="button" id="giftTagUploadBtn" @click="uploadGiftTag">上传</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="startValidTime" class="col-sm-3 control-label">定时上线时间</label>
                            <div class="col-sm-8">
                                <input type="text" class="input-sm datetime form-control" name="startValidTime" id="startValidTime">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="endValidTime" class="col-sm-3 control-label">定时下线时间</label>
                            <div class="col-sm-8">
                                <input type="text" class="input-sm datetime form-control" name="endValidTime" id="endValidTime">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">礼物图片:</label>
                            <div class="col-sm-8">
                                <img src="" id="picImage" style="width:250px;height:90px;" alt="">
                                <input type="file" id="picUploadFile" name="file">
                                <button class="btn btn-success" type="button" id="picUploadBtn">上传</button>
                                <input type="hidden" id="picUrl" name="picUrl" class="form-control validate[required]" />
                                <span id="picImgInfo" style="color:red;"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">vgg图片:</label>
                            <div class="col-sm-8">
                                <img src="" id="vggImage" style="width:250px;height:90px;" alt="">
                                <input type="file" id="vggUploadFile" name="file">
                                <button class="btn btn-success" type="button" id="vggUploadBtn">上传</button>
                                <input type="hidden" id="vggUrl" name="vggUrl" class="form-control validate[required]" />
                                <span id="vggImgInfo" style="color:red;"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">svga文件:</label>
                            <div class="col-sm-8">
                                <input type="file" id="svgaUploadFile" name="file">
                                <button class="btn btn-success" type="button" id="svgaUploadBtn">上传</button>
                                <span>注：这里只适用于福袋svga动效上传</span>
                                <input type="hidden" id="luckyGiftSvgaUrl" name="luckyGiftSvgaUrl"
                                    class="form-control validate[required]" />
                                <span id="svgaImgInfo" style="color:red;"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="otherViewType" class="col-sm-3 control-label">其他视图文件类型:</label>
                            <div class="col-sm-8">
                                <select name="otherViewType" id="otherViewType" data-btn-class="btn-warning" class="form-control">
                                    <option value="0">全部</option>
                                    <option value="1">MP4</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">其他视图文件:</label>
                            <div class="col-sm-8">
                                <video src="" id="viewFile" style="width:50%;height:50%;" alt="" autoplay="true"></video>
                                <input type="file" id="viewUploadFile" name="file">
                                <button class="btn btn-success" type="button" id="viewFileUploadBtn">上传</button>
                                <span>注：如果上面已经上传svga素材，此处不要再上传</span>
                                <input type="hidden" id="viewUrl" name="viewUrl" class="form-control validate[required]" />
                                <span id="viewFileInfo" style="color:red;"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="giftExplainUrl" class="col-sm-3 control-label">礼物说明</label>
                            <div class="col-sm-8">
                                <input type="text" placeholder="礼物说明链接，非必填" class="form-control" name="giftExplainUrl"
                                    id="giftExplainUrl">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="seqNo" class="col-sm-3 control-label">排序</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required]" name="seqNo" id="seqNo">
                            </div>
                        </div>
                        <label class="col-sm-3 control-label">全服通知</label>
                        <div class="col-sm-3">
                            <label class="radio-inline"><input type="radio" name="isWholeServerLabel" value="0" checked
                                    disabled>否</label>
                            <label class="radio-inline"><input type="radio" name="isWholeServerLabel" value="1"
                                    disabled>是</label>
                        </div>
                        <input type="hidden" name="isWholeServer" id="isWholeServer" />
                        <input type="hidden" name="notifyStaySecond" id="notifyStaySecond" />
                        <input type="hidden" name="isSkipRoom" id="isSkipRoom" />
                        <input type="hidden" name="isSendMsg" id="isSendMsg" />
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal first fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">提示信息</h4>
                </div>
                <div class="modal-body" id="tipMsg"></div>
            </div>
        </div>
    </div>
    <!-- 为用户赠送礼物饰弹窗 -->
    <div class="modal fade" id="sendGiftModal" 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="modalSendLabel">赠送礼物</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="giftSendForm">
                        <input type="hidden" name="sendGiftId" id="sendGiftId" />
                        <div class="form-group">
                            <label for="sendErbanNo" class="col-sm-3 control-label">平台号</label>
                            <div class="col-sm-9">
                                <textarea name="sendErbanNo" id="sendErbanNo" class="form-control validate[required]"
                                    placeholder="多个平台号使用英文逗号,分隔"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="giftNum" class="col-sm-3 control-label">赠送数量</label>
                            <div class="col-sm-9">
                                <input type="text" name="giftNum" id="giftNum" class="form-control validate[required]"
                                    value="1" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="send">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!--礼物专属房间列表-->
    <div class="modal fade" id="roomGiftModel" tabindex="-1" role="dialog" aria-labelledby="gift-modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content room_class">
                <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="roomGiftLabel">礼物专属房间列表</h4>
                </div>
                <div class="modal-body">
                    <div class="box box-primary">
                        <div class="box-body">
                            <section class="content">
                                <div id="roomGiftTable"></div>
                                <div id="roomGiftToolbar">
                                    <div class="col-sm-12">
                                        <label for="erbanNo" class="col-sm-2 control-label">用户平台号:</label>
                                        <div class="col-sm-3">
                                            <form class="form-horizontal" id="roomGiftForm">
                                                <input type="hidden" class="form-control" name="giftId" id="query_gift_id">
                                                <input type="text" class="form-control" name="erbanNo" id="erbanNo">
                                            </form>
                                        </div>
                                        <button id="roomGiftSearch" class="btn btn-default">
                                            <i class="glyphicon glyphicon-wrench"></i>查询
                                        </button>
                                        <button id="roomGiftAdd" class="btn btn-default">
                                            <i class="glyphicon glyphicon-plus"></i>增加
                                        </button>
                                        <button id="roomGiftImport" class="btn btn-default">
                                            <i class="glyphicon glyphicon-import"></i>批量导入
                                        </button>
                                        <button id="roomGiftMultiDel" class="btn btn-default">
                                            <i class="glyphicon glyphicon-remove"></i>批量删除
                                        </button>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--导入专属房间列表-->
    <div class="modal fade" id="roomImportModel" tabindex="-1" role="dialog" aria-labelledby="gift-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">&times;</span>
                    </button>
                    <h4 class="modal-title" id="roomImportLabel">礼物专属房间列表</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="roomImportForm">
                        <div class="form-group">
                            <input type="hidden" id="import_gift_id" name="giftId" />
                            <label for="uploadFile" class="col-sm-3 control-label">上传文件:</label>
                            <div class="col-sm-9">
                                <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
                            application/vnd.ms-excel" class="form-control validate[required]" name="uploadFile"
                                    id="uploadFile" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">注意:</label>
                            <div class="col-sm-9">
                                <span>
                                    <font color="#dd4b39">1.上传文件仅支持.xls/.xlsx格式的文件<br>
                                        2.表格的第一行为标题,房间号请从表格的第二行开始填写<br>
                                        3.导入之前请确认是用户正在使用的平台号，否则会导入失败<br>
                                        4.导入之前请确认房间是否已存在，如果已存在会导致导入报错</font>
                                </span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="upload">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!--添加专属房间列表-->
    <div class="modal fade" id="roomAddModel" tabindex="-1" role="dialog" aria-labelledby="gift-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">&times;</span>
                    </button>
                    <h4 class="modal-title" id="roomAddLabel">礼物专属房间列表</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="roomAddForm">
                        <div class="form-group">
                            <input type="hidden" id="add_gift_id" name="giftId" />
                            <label for="addErbanNos" class="col-sm-3 control-label">房主平台号:</label>
                            <div class="col-sm-9">
                                <textarea type="text" class="form-control validate[required]" name="erbanNos"
                                    id="addErbanNos" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">注意:</label>
                            <div class="col-sm-9">
                                <span>
                                    <font color="#dd4b39">1.多个平台号用换行符分隔<br>
                                        2.最多支持20个平台号输入<br>
                                        3.超过20个平台号请使用文件导入方式增加<br>
                                        4.增加之前请确认房间是否已存在，如果已存在会导致添加报错</font>
                                </span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="roomAdd">确定</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import ComboboxHelper from '@/assets/plugins/bootstrap-combobox/js/bootstrap-combobox-helper';
import { formatTime, showLoading, hideLoading, buildSelectOption } from '@/utils/maintainer';
import { getGiftLevelList } from '@/api/gift/giftLevel';
import { getGiftUnlockList, getLockGiftList } from '@/api/gift/giftUnlock';
import { uploadFile } from '@/api/common/upload';

export default {
    name: "GiftManageView",
    data() {
        return {
            giftLevel: [],
            gift: {
                giftId: null,
                giftType: 2,
                subGiftType: 0,
            },
        };
    },
    setup() {
        function selectConsumeChange(obj) {
            var val = $('#consumeType').val();
            if (val == 2) {
                $('.noble').addClass("hidden");
            } else {
                $('.noble').removeClass("hidden");
            }
            if (val == 3) {
                $("#giftType").val(2);
                $("#giftType").attr('readonly', true);
                $('#roomFreeGift').removeClass("hidden");
            } else {
                $("#giftType").attr('readonly', false);
                $('#roomFreeGift').addClass("hidden");
            }
        }
        // 添加房间专属礼物
        function setRoomId(checkedRadio) {
            checkedRadio.checked = true;
            if (checkedRadio.value == '1') {
                document.getElementById("roomExcludeId").style.display = '';
            } else if (checkedRadio.value == '0') {
                document.getElementById("roomExcludeId").style.display = 'none';
            }
        }
        window.selectConsumeChange = selectConsumeChange;
        window.setRoomId = setRoomId;
        return {
            selectConsumeChange,
            setRoomId,
        };
    },
    created() {
        this.$nextTick(function () {
            this.giftUnlockList();
            this.levelList();
            this.initData();
        });
    },
    methods: {
        changeDressType(type) {
            let options = [];
            let dressType = $('#' + type + 'DressType').val();
            if (dressType == 'NAMEPLATE') {
                $.ajax({
                    type: "get",
                    url: "/admin/nameplate/total/list",
                    dataType: "json",
                    async: false,
                    success: function (json) {
                        if (json.success == 'true' || json.code == 200) {
                            var data = json.data;
                            for (var i = 0, len = data.length; i < len; i++) {
                                var nameplate = data[i];
                                options[i] = {
                                    value: nameplate.id,
                                    text: nameplate.name
                                };
                            }
                        }
                    }
                });
            } else if (dressType == 'CAR') {
                $.ajax({
                    type: "get",
                    url: "/admin/car/goods/total/list",
                    dataType: "json",
                    async: false,
                    success: function (json) {
                        if (json.success == 'true' || json.code == 200) {
                            var data = json.data;
                            for (var i = 0, len = data.length; i < len; i++) {
                                var car = data[i];
                                options[i] = {
                                    value: car.id,
                                    text: car.name
                                };
                            }
                        }
                    }
                });
            } else if (dressType == 'HEADWEAR') {
                $.ajax({
                    type: "get",
                    url: "/admin/headwear/total/list",
                    dataType: "json",
                    async: false,
                    success: function (json) {
                        if (json.success == 'true' || json.code == 200) {
                            var data = json.data;
                            for (var i = 0, len = data.length; i < len; i++) {
                                var headWear = data[i];
                                options[i] = {
                                    value: headWear.headwearId,
                                    text: headWear.name
                                };
                            }
                        }
                    }
                });
            } else if (dressType == 'CHATBUBBLE') {
                $.ajax({
                    type: "get",
                    url: "/admin/chatbubble/list",
                    dataType: "json",
                    async: false,
                    success: function (json) {
                        if (json.success == 'true' || json.code == 200) {
                            var data = json.data;
                            for (var i = 0, len = data.length; i < len; i++) {
                                var chatBubble = data[i];
                                options[i] = {
                                    value: chatBubble.id,
                                    text: chatBubble.name
                                };
                            }
                        }
                    }
                });
            }
            let $dressId = $('#' + type + 'DressId');
            let dressId = $('#' + type + 'DressIdBak').val();
            $dressId.children().remove();
            console.log(options);
            if (options.length > 0) {
                for (let j = 0; j < options.length; j++) {
                    var option = options[j];
                    var $option = $('<option/>');
                    $option.attr('value', option.value);
                    $option.attr('data-id', option.value);
                    $option.attr('data-name', option.text);
                    if (dressId && dressId == option.value) {
                        $option.attr('selected', true);
                    }
                    $option.html(option.text);
                    $dressId.append($option);
                }
                ComboboxHelper.build(options, '#' + type + 'DressId', dressId);
            }
        },
        giftUnlockList() {
            getGiftUnlockList().then(res => {
                let data = res.data;
                let lockGifts = data.map(e => {
                    return {
                        text: e.giftName,
                        value: e.giftId,
                    };
                });
                ComboboxHelper.setDef(lockGifts, '#baseGiftId', null);
            });            
        },
        levelList() {
            getGiftLevelList().then(res => {
                let data = res.data;
                this.giftLevel = data.map(e => {
                    return {
                        text: e.levelName,
                        value: e.levelValue
                    };
                });
                buildSelectOption('#giftLevel', '', [{text:'无', value: ''}].concat(this.giftLevel));
                buildSelectOption('#searchLevel', '', [{text:'无', value: ''}].concat(this.giftLevel));
            });
        },
        uploadDressBanner() {
            uploadFile('dressBannerFile').then(res => {
                let path = res.path;
                console.log(path);
                $('#dressBanner').val(path);
                $('#dressBannerImage').attr('src', path);
                if (path != '') {
                    $("#dressBannerUploadInfo").html('已上传成功');
                } else {
                    $("#dressBannerUploadInfo").html('未上传成功');
                }
            });
        },
        uploadGiftTag() {
            uploadFile('giftTagFile').then(res => {
                let path = res.path;
                console.log(path);
                $('#giftTag').val(path);
                $('#giftTagImage').attr('src', path);
                if (path != '') {
                    $("#giftTagUploadInfo").html('已上传成功');
                } else {
                    $("#giftTagUploadInfo").html('未上传成功');
                }
            });
        },
        initData() {
            let $this = this;
            $(function () {
                $('#table').bootstrapTable('destroy');
                // 清空分页组件的容器
                $('.fixed-table-pagination').empty();
                $('#table').bootstrapTable({
                    columns: [
                        { field: 'tmp', title: 'ID', align: 'center', checkbox: true },
                        { field: 'giftId', title: '礼物ID', align: 'center', width: '5%' },
                        { field: 'giftName', title: '礼物名称', align: 'center', width: '15%' },
                        {
                            field: 'giftStatus',
                            title: '礼物状态',
                            align: 'center',
                            width: '10%',
                            formatter: function (val, row, index) {
                                if (val == 1) {
                                    return '有效';
                                } else {
                                    return '无效';
                                }
                            }
                        },
                        { field: 'goldPrice', title: '礼物价格', align: 'center', width: '10%' },
                        {
                            field: 'consumeType',
                            title: '消费类型',
                            align: 'center',
                            width: '10%',
                            formatter: function (val, row, index) {
                                if (val == 1) {
                                    return '金币礼物';
                                } else if (val == 2) {
                                    return '萝卜礼物';
                                } else if (val == 3) {
                                    return '免费礼物';
                                } else {
                                    return '-';
                                }
                            }
                        },
                        {
                            field: 'hasEffect',
                            title: '特效',
                            align: 'center',
                            width: '5%',
                            formatter: function (val, row, index) {
                                if (val == true) {
                                    return '有';
                                } else {
                                    return '无'
                                }
                            }
                        },
                        {
                            field: 'hasVggPic',
                            title: 'vgg特效',
                            align: 'center',
                            width: '5%',
                            formatter: function (val, row, index) {
                                if (val == true) {
                                    return '有';
                                } else {
                                    return '无'
                                }
                            }
                        },
                        {
                            field: 'hasSvga',
                            title: 'svga动画',
                            align: 'center',
                            width: '5%',
                            formatter: function (val, row, index) {
                                if (val == true) {
                                    return '有';
                                } else {
                                    return '无'
                                }
                            }
                        },
                        {
                            field: 'isLatest',
                            title: '最新礼物',
                            align: 'center',
                            width: '5%',
                            formatter: function (val, row, index) {
                                if (val == true) {
                                    return '是';
                                } else {
                                    return '否'
                                }
                            }
                        },
                        {
                            field: 'isTimeLimit',
                            title: '限时礼物',
                            align: 'center',
                            width: '10%',
                            formatter: function (val, row, index) {
                                if (val == true) {
                                    return '是';
                                } else {
                                    return '否'
                                }
                            }
                        },
                        {
                            field: 'roomExclude',
                            title: '房间专属',
                            align: 'center',
                            width: '10%',
                            formatter: function (val, row, index) {
                                if (val == true) {
                                    return '是';
                                } else {
                                    return '否'
                                }
                            }
                        },
                        {
                            field: 'giftLevel',
                            title: '礼物等级',
                            align: 'center',
                            width: '10%',
                            formatter: function (val, row, index) {
                                let value = '';
                                let data = $this.giftLevel.filter(v => v.levelValue == val);
                                if (data.length > 0) {
                                    value = data[0].text;
                                }
                                return value;
                            }
                        },
                        { field: 'seqNo', title: '排序', align: 'center', width: '10%' },
                        {
                            field: 'startValidTime', title: '上线时间', align: 'center', width: '10%',
                            formatter: function (val) {
                                if (val) {
                                    const date = new Date(val);
                                    return date.format('yyyy-MM-dd hh:mm:ss');
                                } else {
                                    return '-';
                                }
                            }
                        },
                        {
                            field: 'endValidTime', title: '下线时间', align: 'center', width: '10%',
                            formatter: function (val) {
                                if (val) {
                                    const date = new Date(val);
                                    return date.format('yyyy-MM-dd hh:mm:ss');
                                } else {
                                    return '-';
                                }
                            }
                        },
                        {
                            field: 'giftId', title: '操作', align: 'center', width: '15%', formatter: function (val, row, index) {
                                var str = '<button class="btn btn-sm btn-success opt-edit" data-id=' + val + '>' +
                                    '<i class="glyphicon glyphicon-edit"></i>编辑</button>' +
                                    '<button class="btn btn-sm btn-danger opt-remove" data-id=' + val +
                                    '><i class="glyphicon glyphicon-remove"></i>删除</button>' +
                                    '<button class="btn btn-sm btn-warning opt-send" data-id=' + val +
                                    '><i class="glyphicon glyphicon-send"></i> 赠送</button>';
                                if (row.roomExclude) {
                                    str = str + '<button class="btn btn-sm btn-primary opt-query" data-id=' + val +
                                        '><i class="glyphicon glyphicon-eye-open"></i> 查看房间列表</button>';
                                }
                                return str;
                            }
                        }
                    ],
                    cache: false,
                    striped: true,
                    showRefresh: false,
                    pageSize: 10,
                    pagination: true,
                    pageList: [1, 10, 20, 30, 50],
                    search: false,
                    sidePagination: "server", //表示服务端请求
                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                    //设置为limit可以获取limit, offset, search, sort, order
                    queryParamsType: "undefined",
                    queryParams: function queryParams(params) {   //设置查询参数
                        let giftLevel = $('#searchLevel').val();
                        if (!giftLevel || giftLevel == '') {
                            giftLevel = null;
                        }
                        var param = {
                            pageNumber: params.pageNumber,
                            pageSize: params.pageSize,
                            searchText: params.searchText,
                            type: $('#condition_type').val(),
                            consumeType: $('#consume_type').val(),
                            giftType: $('#gift_type').val(),
                            selectGiftName: $('#selectGiftName').val(),
                            selectGiftGoldMin: $('#selectGiftGoldMin').val(),
                            selectGiftGoldMax: $('#selectGiftGoldMax').val(),
                            giftLevel: giftLevel,
                        };
                        return param;
                    },
                    toolbar: '#toolbar',
                    url: '/admin/gift/getList.action',
                    onLoadSuccess: function () {  //加载成功时执行
                        console.log("load success");
                    },
                    onLoadError: function () {  //加载失败时执行
                        console.log("load fail");
                    }
                });
                $("#table").on("click", '.opt-remove', function () {
                    var id = $(this).attr("data-id");
                    if (id == 'undefined') {
                        $("#tipMsg").text("id参数有误");
                        $("#tipModal").modal('show');
                        return;
                    }
                    if (confirm("你确认删除该记录吗?" +
                        "\r\n删除后再也不能找回，请谨慎操作！")) {
                        $.ajax({
                            type: 'post',
                            url: "/admin/gift/del.action",
                            data: { 'ids': JSON.stringify([id]) },
                            dataType: "json",
                            success: function (json) {
                                if (json.success == 'true') {
                                    $("#tipMsg").text("删除成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("删除失败");
                                    $("#tipModal").modal('show');
                                }
                            }
                        });
                    }
                });
                $("#gift-add").click(function () {
                    $this.gift.giftId = null;
                    $this.gift.giftType = 2;
                    $this.gift.subGiftType = 0;
                    $("#giftForm")[0].reset();
                    $('#picUrl').val('');
                    $('#picImage').attr("src", '');
                    $("#picImgInfo").html('');
                    $("#picUploadFile").val('');
                    $('#vggUrl').val('');
                    $("#vggUploadFile").val('');
                    $('#vggImage').attr("src", '');
                    $("#vggImgInfo").html('');
                    $("#svgaUploadFile").val('');
                    $('#luckyGiftSvgaUrl').val('');
                    $('#svgaImgInfo').html('');
                    $('#giftExplainUrl').val('');
                    $("#seqNo").val('');
                    $("#giftId").val('');
                    $('#viewUploadFile').val('');
                    $('#viewUrl').attr('');
                    $('#viewFile').attr("src", '');
                    $("#viewFileInfo").html('');
                    $("#startValidTime").val('');
                    $("#endValidTime").val('');
                    $("#nobleId").btComboBox('disable');
                    ComboboxHelper.setDef("#nobleId", '0');
                    $('#giftType').val('2');
                    $("input:radio[name='giftStatus']")[0].checked = true;
                    $("input:radio[name='hasEffect']")[0].checked = true;
                    $("input:radio[name='hasVggPic']")[0].checked = true;
                    $("input:radio[name='hasSvga']")[0].checked = true;
                    $("input:radio[name='isLatest']")[0].checked = true;
                    $("input:radio[name='isTimeLimit']")[0].checked = true;
                    $("input:radio[name='roomExclude']")[0].checked = true;
                    $("#notifyStaySecond").val('');
                    $("#isSkipRoom").val('');
                    $("#isSendMsg").val('');
                    $("#consumeType").removeAttr("disabled");
                    window.selectConsumeChange($("#consumeType"));
                    $('#roomExcludeId').val('');
                    $('#giftLevel').val('');
                    $('#giftType').removeAttr('disabled');
                    $('#subGiftType').removeAttr('disabled');
                    $('#baseGiftId').removeAttr('disabled');
                    $('#unlockNum').removeAttr('disabled');
                    $('#sendDressType').val('');
                    $('#sendDressId').val('');
                    $('#sendDressTime').val('');
                    $('#receiveDressType').val('');
                    $('#receiveDressId').val('');
                    $('#receiveDressTime').val('');
                    $('#dressBanner').val('');
                    $('#dressBannerImage').attr("src", '');
                    $("#dressBannerUploadInfo").html('');
                    $("#dressBannerFile").val('');
                    $('#bannerSkipUrl').val('');
                    $('#sendDressIdBak').val('');
                    $('#receiveDressIdBak').val();
                    $("#giftModal").modal('show');
                });
                $("#gift-version-save").click(function () {
                    if ($("#giftVersionForm").validationEngine('validate')) {
                        $.ajax({
                            type: "post",
                            url: "/admin/sysConf/save.action",
                            data: $('#giftVersionForm').serialize(),
                            dataType: "json",
                            success: function (json) {
                                if (json.success == 'true') {
                                    $("#giftVersionModal").modal('hide');
                                    $("#tipMsg").text("设置成功");
                                    $("#tipModal").modal('show');
                                } else {
                                    $("#tipMsg").text("设置失败");
                                    $("#tipModal").modal('show');
                                }
                            }
                        });
                    }

                })
                $("#nobleId").on('change', function () {
                    if (ComboboxHelper.getSelected("#nobleId") != 0) {
                        var nobleName = $("#nobleId").btComboBox('selectedOption')[1];
                        $("#nobleName").val(nobleName);
                    }
                    else {
                        $("#nobleName").val('');
                    }
                })
                $("#notNoble").on('change', function () {
                    ComboboxHelper.setDef("#nobleId", '0');
                    $("#nobleName").val('');
                    $("#nobleId").btComboBox('disable');
                })
                $("#isNoble").on('change', function () {
                    $("#nobleId").btComboBox('enable');
                })
                $("#gift-version-reset").click(function () {
                    $("#giftVersion").val('');
                    $("#gift-configName").val('');
                    $("#gift-configId").val('');
                    $("#gift-nameSpace").val('');
                    $("#gift-configStatus").val('');
                    $("#newGiftVersion").val('');
                    $.ajax({
                        type: "get",
                        url: "/admin/gift/getCurGiftVersion.action",
                        data: {},
                        dataType: "json",
                        success: function (json) {
                            if (json.entity) {
                                $("#giftVersion").val(json.entity.configValue);
                                $("#gift-configName").val(json.entity.configName);
                                $("#gift-configId").val(json.entity.configId);
                                $("#gift-nameSpace").val(json.entity.nameSpace);
                                $("#gift-configStatus").val(json.entity.configStatus);
                                $("#giftVersionModal").modal("show");
                            } else {
                                $("#tipMsg").text("获取当前礼物版本失败");
                                $("#tipModal").modal('show');
                            }
                        }
                    });
                });
                $("#gift-refresh").click(function () {
                    $("#table").bootstrapTable('refresh', { url: '/admin/gift/getList.action' });
                })
                $("#gift-multiDel").click(function () {
                    var rows = $("#table").bootstrapTable("getSelections");
                    if (rows.length == 0) {
                        alert("请先选择要删除的记录");
                        return;
                    }
                    console.log("rows: " + rows.length);
                    var idArr = [];
                    for (var i = 0; i < rows.length; i++) {
                        idArr.push(rows[i]['giftId']);
                    }
                    console.log(idArr);
                    if (confirm("你确认批量删除该记录吗?" +
                        "\r\n删除后再也不能找回，请谨慎操作！")) {
                        $.ajax({
                            type: 'post',
                            url: "/admin/gift/del.action",
                            data: { 'ids': JSON.stringify(idArr) },
                            dataType: "json",
                            success: function (json) {
                                if (json.success == 'true') {
                                    $("#tipMsg").text("删除成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("删除失败");
                                    $("#tipModal").modal('show');
                                }
                            }
                        });
                    }
                });
                $('#picUploadBtn').on('click', function () {
                    showLoading();
                    $.ajaxFileUpload({
                        fileElementId: 'picUploadFile',    //需要上传的文件域的ID，即<input type="file">的ID。
                        url: '/admin/gift/upload', //后台方法的路径
                        type: 'post',   //当要提交自定义参数时，这个参数要设置成post
                        dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                        secureuri: false,   //是否启用安全提交，默认为false。
                        async: true,   //是否是异步
                        success: function (json) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                            if (json.path) {
                                $('#picUrl').val(json.path);
                                $('#picImage').attr("src", json.path);
                                if (json.path != '') {
                                    $("#picImgInfo").html('已上传成功');
                                } else {
                                    $("#picImgInfo").html('未上传成功');
                                }
                                console.log(json.path);
                                hideLoading();
                            } else {
                                $("#tipMsg").text(json.msg);
                                $("#tipModal").modal('show');
                                hideLoading();
                            }
                        },
                        error: function (data, status, e) {  //提交失败自动执行的处理函数。
                            console.error(e);
                        }
                    });
                })
                $('#vggUploadBtn').on('click', function () {
                    showLoading();
                    $.ajaxFileUpload({
                        url: '/admin/gift/upload',//后台请求地址
                        type: 'post',//请求方式  当要提交自定义参数时，这个参数要设置成post
                        secureuri: false,//是否启用安全提交，默认为false。
                        fileElementId: 'vggUploadFile',// 需要上传的文件域的ID，即<input type="file">的ID。
                        dataType: 'json',//服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。如果json返回的带pre,这里修改为json即可解决。
                        success: function (json, status) {//提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                            console.log(json);
                            if (json.path) {
                                $('#vggUrl').val(json.path);
                                $('#vggImage').attr("src", json.path);
                                if (json.path != '') {
                                    $("#vggImgInfo").html('已上传成功');
                                } else {
                                    $("#vggImgInfo").html('未上传成功');
                                }
                                console.log(json.path);
                                hideLoading();
                            } else {
                                $("#tipMsg").text(json.msg);
                                $("#tipModal").modal('show');
                                hideLoading();
                            }
                        }
                    });
                })
                $('#svgaUploadBtn').on('click', function () {
                    showLoading();
                    $.ajaxFileUpload({
                        url: '/admin/gift/upload',//后台请求地址
                        type: 'post',//请求方式  当要提交自定义参数时，这个参数要设置成post
                        secureuri: false,//是否启用安全提交，默认为false。
                        fileElementId: 'svgaUploadFile',// 需要上传的文件域的ID，即<input type="file">的ID。
                        dataType: 'json',//服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。如果json返回的带pre,这里修改为json即可解决。
                        success: function (json, status) {//提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                            console.log(json);
                            if (json.path) {
                                $('#luckyGiftSvgaUrl').val(json.path);
                                if (json.path != '') {
                                    $("#svgaImgInfo").html('已上传成功');
                                } else {
                                    $("#svgaImgInfo").html('未上传成功');
                                }
                                console.log(json.path);
                                hideLoading();
                            } else {
                                $("#tipMsg").text(json.msg);
                                $("#tipModal").modal('show');
                                hideLoading();
                            }
                        }
                    });
                })
                $('#viewFileUploadBtn').on('click', function () {
                    showLoading();
                    $.ajaxFileUpload({
                        url: '/admin/gift/upload',//后台请求地址
                        type: 'post',//请求方式  当要提交自定义参数时，这个参数要设置成post
                        secureuri: false,//是否启用安全提交，默认为false。
                        fileElementId: 'viewUploadFile',// 需要上传的文件域的ID，即<input type="file">的ID。
                        dataType: 'json',//服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。如果json返回的带pre,这里修改为json即可解决。
                        success: function (json, status) {//提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                            console.log(json);
                            if (json.path) {
                                $('#viewUrl').val(json.path);
                                $('#viewFile').attr("src", json.path);
                                if (json.path != '') {
                                    $("#viewFileInfo").html('已上传成功');
                                } else {
                                    $("#viewFileInfo").html('未上传成功');
                                }
                                console.log(json.path);
                                hideLoading();
                            } else {
                                $("#tipMsg").text(json.msg);
                                $("#tipModal").modal('show');
                                hideLoading();
                            }
                        }
                    });
                })
                $("#cancel").click(function () {
                    TableHelper.unCheckAll("#table");
                });
                function parseNum(val) {
                    if (val == undefined || val == 'false' || val == 0) {
                        return 0;
                    }
                    else {
                        return 1;
                    }
                }
                $('#resetTime').datetimepicker({
                    format: 'hh:ii:00',
                    autoclose: true,
                });
                $("#table").on("click", '.opt-edit', function () {
                    console.log("btnEdit");
                    var id = $(this).attr("data-id");
                    $.ajax({
                        type: "get",
                        url: "/admin/gift/get.action",
                        data: { id: id },
                        dataType: "json",
                        success: function (json) {
                            let entity = json.entity;
                            if (json.roomFreeGiftConfig) {
                                $("#maxStage").val(json.roomFreeGiftConfig.maxStage);
                                $("#firstStageSecond").val(json.roomFreeGiftConfig.firstStageSecond);
                                $("#otherStageSecond").val(json.roomFreeGiftConfig.otherStageSecond);
                                $("#resetTime").val(json.roomFreeGiftConfig.resetTime);
                                $("#resetTimeCron").val(json.roomFreeGiftConfig.resetTimeCron);
                            }
                            if (json.entity) {
                                $("#giftId").val(json.entity.giftId);
                                $("#giftName").val(json.entity.giftName);
                                $("#goldPrice").val(json.entity.goldPrice);
                                $("#seqNo").val(json.entity.seqNo);
                                $("#giftExplainUrl").val(json.entity.giftExplainUrl);
                                var consumeType = json.entity.consumeType;
                                $("#consumeType").val(consumeType);
                                $("#consumeType").attr("disabled", true);
                                $('#giftType').val(json.entity.giftType);
                                if (consumeType == 1) {
                                    ComboboxHelper.setDef("#nobleId", '0');
                                    $("#nobleId").btComboBox('disable');
                                    $("#nobleName").val('');
                                }
                                if (consumeType == 2) {
                                    $('.noble').addClass("hidden");
                                } else {
                                    $('.noble').removeClass("hidden");
                                }
                                if (consumeType == 3) {
                                    $("#giftType").attr('readonly', true);
                                    $('#roomFreeGift').removeClass("hidden")
                                } else {
                                    $("#giftType").attr('readonly', false);
                                    $('#roomFreeGift').addClass("hidden")
                                }
                                $("#startValidTime").val(formatTime(json.entity.startValidTime));
                                $("#endValidTime").val(formatTime(json.entity.endValidTime));
                                var hasEffect = parseNum(json.entity.hasEffect);
                                var hasVggPic = parseNum(json.entity.hasVggPic);
                                var hasSvga = parseNum(json.entity.hasSvga);
                                var isLatest = parseNum(json.entity.isLatest);
                                var isTimeLimit = parseNum(json.entity.isTimeLimit);
                                var isWholeServer = parseNum(json.entity.isWholeServer);
                                var roomExclude = parseNum(json.entity.roomExclude);
                                $("#isWholeServer").val(isWholeServer);
                                // 礼物状态的值跟其他不同, 1为有效 2为无效
                                if (json.entity.giftStatus == 1) {
                                    $("input:radio[name='giftStatus']")[0].checked = true;
                                } else {
                                    $("input:radio[name='giftStatus']")[1].checked = true;
                                }
                                // 设置radio
                                $("input:radio[name='hasEffect']")[hasEffect].checked = true;
                                $("input:radio[name='hasVggPic']")[hasVggPic].checked = true;
                                $("input:radio[name='hasSvga']")[hasSvga].checked = true;
                                $("input:radio[name='isLatest']")[isLatest].checked = true;
                                $("input:radio[name='isTimeLimit']")[isTimeLimit].checked = true;
                                $("input:radio[name='isWholeServerLabel']")[isWholeServer].checked = true;
                                $("input:radio[name='roomExclude']")[roomExclude].checked = true;
                                $("#notifyStaySecond").val(json.entity.notifyStaySecond);
                                $("#isSkipRoom").val(json.entity.isSkipRoom);
                                $("#isSendMsg").val(json.entity.isSendMsg);
                                // 设置礼物图片
                                $("#picUploadFile").val('');
                                $('#picUrl').val(json.entity.picUrl);
                                $('#picImage').attr("src", json.entity.picUrl);
                                if (json.entity.picUrl != '') {
                                    $("#picImgInfo").html('已上传');
                                } else {
                                    $("#picImgInfo").html('未上传');
                                }
                                // 设置vgg图片
                                $("#vggUploadFile").val('');
                                $('#vggUrl').val(json.entity.vggUrl);
                                $('#vggImage').attr("src", json.entity.vggUrl);
                                if (json.entity.vggUrl != '') {
                                    $("#vggImgInfo").html('已上传');
                                } else {
                                    $("#vggImgInfo").html('未上传');
                                }
                                // 设置svga图片
                                $("#svgaUploadFile").val('');
                                $('#luckyGiftSvgaUrl').val(json.entity.luckyGiftSvgaUrl);
                                if (json.entity.luckyGiftSvgaUrl != undefined) {
                                    $("#svgaImgInfo").html('已上传');
                                } else {
                                    $("#svgaImgInfo").html('未上传');
                                }
                                // 设置其他视图文件效果图片
                                $('#viewUploadFile').val('');
                                $('#otherViewType').val(json.entity.otherViewType);
                                $('#viewUrl').val(json.entity.viewUrl);
                                $('#viewFile').attr("src", json.entity.viewUrl);
                                if (json.entity.viewUrl != null && json.entity.viewUrl != 'undefined' && json.entity.viewUrl != '') {
                                    $("#viewFileInfo").html('已上传');
                                } else {
                                    $("#viewFileInfo").html('未上传');
                                }
                                $('#giftLevel').val(json.entity.giftLevel);
                                $('#giftTag').val(json.entity.giftTag);
                                $('#subGiftType').val(entity.subGiftType);
                                $('#baseGiftId').val(entity.baseGiftId);
                                $('#unlockNum').val(entity.unlockNum);
                                $this.gift.giftId = entity.giftId;
                                $this.gift.giftType = entity.giftType;
                                $this.gift.subGiftType = entity.subGiftType;
                                if (entity.giftType == 16) {
                                    $('#giftType').attr('disabled', 'disabled');
                                    $('#subGiftType').attr('disabled', 'disabled');
                                    $('#baseGiftId').attr('disabled', 'disabled');
                                    $('#unlockNum').attr('disabled', 'disabled');
                                }
                                $('#sendDressType').val(entity.sendDressType);
                                $('#sendDressId').val(entity.sendDressId);
                                $('#sendDressTime').val(entity.sendDressTime);
                                $('#receiveDressType').val(entity.receiveDressType);
                                $('#receiveDressId').val(entity.receiveDressId);
                                $('#receiveDressTime').val(entity.receiveDressTime);
                                $("#dressBannerFile").val('');
                                $('#dressBanner').val(entity.dressBanner);
                                $('#dressBannerImage').attr("src", entity.dressBanner);
                                if (entity.dressBanner != null && entity.dressBanner != 'undefined' && entity.dressBanner != '') {
                                    $("#dressBannerUploadInfo").html('已上传');
                                } else {
                                    $("#dressBannerUploadInfo").html('未上传');
                                }
                                $('#bannerSkipUrl').val(entity.bannerSkipUrl);
                                $('#sendDressIdBak').val(entity.sendDressId);
                                $('#receiveDressIdBak').val(entity.receiveDressId);
                                // 打开编辑弹窗
                                $("#giftModal").modal('show');
                            } else {
                                $("#tipMsg").text("获取菜单信息出错");
                                $("#tipModal").modal('show');
                            }
                        }
                    });
                });
                $("#save").click(function () {
                    let giftId = $('#giftId').val();
                    let giftName = $('#giftName').val();
                    let giftStatus = $('#giftStatus').val();
                    let giftType = $('#giftType').val();
                    if (giftType == 16) {
                        let subGiftType = $this.gift.subGiftType;
                        if (subGiftType == 0) {
                            if (!giftId && !confirm('基础解锁礼物保存后礼物类型无法更改，确认保存吗？')) {
                                return;
                            }
                            if (giftStatus == 2) {
                                getLockGiftList(giftId).then(res => {
                                    let data = res.data;
                                    if (data) {
                                        let targetGiftName = data.map(e => {
                                            return e.giftName;
                                        }).join(',');
                                        if (!confirm('该礼物为' + giftName + '，' + giftName + '的基础解锁礼物，设置该礼物为无效会导致[' + targetGiftName + ']一并设置为无效，确认设置无效')) {
                                            return;
                                        } 
                                    } 
                                });
                            }
                        } else if (subGiftType == 1) {
                            let baseGiftId = $this.gift.baseGiftId;
                            let unlockNum = $this.gift.unlockNum;
                            if (!baseGiftId || baseGiftId == 0) {
                                $("#tipMsg").text("基础解锁礼物不能为空");
                                $("#tipModal").modal('show');
                                return;
                            }
                            if (!unlockNum || unlockNum == 0) {
                                $("#tipMsg").text("解锁礼物个数不能为0");
                                $("#tipModal").modal('show');
                                return;
                            }
                            if (!giftId && !confirm('被解锁礼物保存后相关解锁需要的设置（礼物类型，解锁礼物，个数）无法更改，确认保存吗？')) {
                                return;
                            }
                        }
                    }
                    if ($("#giftForm").validationEngine('validate')) {
                        $("#consumeType").removeAttr("disabled");
                        $.ajax({
                            type: "post",
                            url: "/admin/gift/save.action",
                            data: $('#giftForm').serialize(),
                            dataType: "json",
                            success: function (json) {
                                if (json.code == 200) {
                                    $("#giftModal").modal('hide');
                                    $("#tipMsg").text("保存成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("保存失败." + json.msg);
                                    $("#tipModal").modal('show');
                                }
                            }
                        });
                    }
                });
            });
            //打开赠送礼物弹窗
            $("#table").on('click', '.opt-send', function () {
                //清除数据
                $('#sendGiftModal').find('input').val('');
                $('#sendGiftModal').find('textarea').val('');
                //设置数据
                var giftId = $(this).attr("data-id");
                $('#sendGiftId').val(giftId);
                $('#giftNum').val('1');
                $('#sendGiftModal').modal('show');
            });
            //赠送礼物
            $("#send").click(function () {
                var erbanNo = $('#sendErbanNo').val().trim();//去掉首尾的空格和换行符
                if (!(erbanNo.length > 0)) {
                    $("#tipMsg").text("请输入平台号");
                    $("#tipModal").modal('show');
                    return;
                }
                var erbanList = erbanNo.split("\n");
                if (erbanList.length > 100) {
                    $("#tipMsg").text("输入平台号超过100个");
                    $("#tipModal").modal('show');
                    return;
                }
                var giftId = $('#sendGiftId').val();
                var giftNum = $('#giftNum').val();
                if (!giftNum) {
                    $("#tipMsg").text("请输入赠送数量");
                    $("#tipModal").modal('show');
                    return;
                }
                var reg = giftNum.match(/^[0-9]*$/);
                if (giftNum && reg == null) {
                    $("#tipMsg").text("请输入合理的赠送数量");
                    $("#tipModal").modal('show');
                    return;
                }
                $("#tipMsg").text("赠送中，请稍后...");
                $("#tipModal").modal('show');
                if ($("#giftSendForm").validationEngine('validate')) {
                    $.ajax({
                        type: "post",
                        url: "/admin/gift/send.action",
                        data: {
                            giftId: giftId,
                            erbanNo: erbanNo,
                            giftNum: giftNum
                        },
                        dataType: "json",
                        success: function (json) {
                            if (json.code == 100) {
                                $('#sendGiftModal').modal('hide');
                                $("#tipMsg").text("全部赠送成功");
                                TableHelper.doRefresh("#table");
                            } else if (json.code == 200) {
                                $("#tipMsg").text("部分用户赠送失败,赠送失败平台号:" + json.erban + ",赠送失败原因:" + json.message);
                            } else {
                                $("#tipMsg").text("全部赠送失败,赠送失败原因:" + json.message);
                            }
                        }
                    });
                }
            });

            //打开查看房间列表弹窗
            $("#table").on('click', '.opt-query', function () {
                //清除数据
                $("#erbanNo").val("");
                //设置数据
                var giftId = $(this).attr("data-id");
                $("#query_gift_id").val(giftId);
                roomGiftTableInit();
                $('#roomGiftModel').modal('show');
            });
            //查询房间列表
            $("#roomGiftSearch").on("click", function () {
                roomGiftTableInit();
            });
            //打开导入房间列表弹窗
            $("#roomGiftImport").on('click', function () {
                var giftId = $("#query_gift_id").val();
                $("#import_gift_id").val(giftId);
                $('#roomImportModel').modal('show');
            });
            //打开增加房间列表弹窗
            $("#roomGiftAdd").on("click", function () {
                var giftId = $("#query_gift_id").val();
                $("#add_gift_id").val(giftId);
                $('#roomAddModel').modal('show');
            });
            //初始化房间列表
            function roomGiftTableInit() {
                $('#roomGiftTable').bootstrapTable('destroy');
                // 清空分页组件的容器
                $('.fixed-table-pagination').empty();
                $('#roomGiftTable').bootstrapTable({
                    columns: [
                        { field: 'tmp', title: 'ID', align: 'center', checkbox: true },
                        { field: 'erbanNo', title: '用户平台号', align: 'center', width: '10%' },
                        { field: 'nick', title: '用户昵称', align: 'center', width: '30%' },
                        { field: 'roomTitle', title: '房间标题', align: 'center', width: '30%' },
                        { field: 'roomTag', title: '房间标签', align: 'center', width: '20%' },
                        {
                            field: 'permitRoom',
                            title: '房间类型',
                            align: 'center',
                            width: '10%',
                            formatter: function (val, row, index) {
                                switch (val) {
                                    case 1:
                                        return '牌照房';
                                    case 2:
                                        return '非牌照房';
                                    case 3:
                                        return '新秀房';
                                }
                            }
                        },
                        {
                            field: 'id', title: '操作', align: 'center', width: '10%', formatter: function (val, row, index) {
                                var id = row.id;
                                var str = '<button class="btn btn-sm btn-danger opt-delete" data-id=' + id +
                                    '><i class="glyphicon glyphicon-remove"></i>删除</button>&nbsp;&nbsp;';
                                return str;
                            }
                        }
                    ],
                    cache: false,
                    striped: true,
                    showRefresh: true,
                    pageSize: 10,
                    pagination: true,
                    pageList: [1, 10, 20, 30, 50],
                    search: false,
                    sidePagination: "server", //表示服务端请求
                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                    //设置为limit可以获取limit, offset, search, sort, order
                    queryParamsType: "undefined",
                    queryParams: function queryParams(params) {   //设置查询参数
                        var param = {
                            pageNumber: params.pageNumber,
                            pageSize: params.pageSize,
                            erbanNo: $('#erbanNo').val(),
                            giftId: $('#query_gift_id').val()
                        };
                        return param;
                    },
                    toolbar: '#roomGiftToolbar',
                    url: '/admin/gift/getRoomList.action',
                    onLoadSuccess: function () {  //加载成功时执行
                        console.log("load success");
                    },
                    onLoadError: function () {  //加载失败时执行
                        console.log("load fail");
                    }
                })
            }
            //确认导入房间列表
            $("#upload").on('click', function () {
                var giftId = $("#import_gift_id").val();
                if (giftId == null) {
                    $("#tipMsg").text("礼物ID不能为空.");
                    $("#tipModal").modal('show');
                    return;
                }
                var file = $("#uploadFile").val();
                if (file == null || file == undefined || file == '') {
                    $("#tipMsg").text("上传文件不能为空.");
                    $("#tipModal").modal('show');
                    return;
                }
                showLoading();
                var option = ({
                    type: "POST",
                    url: "/admin/gift/uploadRoomList.action",
                    cache: false,
                    contentType: false,    //不可缺
                    processData: false,    //不可缺
                    dataType: "json",
                    success: function (json) {
                        $("#roomImportModel").modal('hide');
                        hideLoading();
                        if (json.code == 200) {
                            TableHelper.doRefresh('#roomGiftTable');
                            $("#tipMsg").text("上传成功");
                            $("#tipModal").modal('show');
                        } else if (json.code == 300) {
                            $("#tipMsg").text(json.message + ",导入失败的行：" + json.data.row + ",导入失败原因：" + json.data.reason);
                            $("#tipModal").modal('show');
                        }
                    },
                    error: function () {
                        hideLoading();
                        $("#tipMsg").text("上传失败.");
                        $("#tipModal").modal('show');
                    }
                });
                $("#roomImportForm").ajaxSubmit(option);
            });
            //确认增加房间列表
            $("#roomAdd").on('click', function () {
                var giftId = $("#add_gift_id").val();
                if (giftId == null) {
                    $("#tipMsg").text("礼物ID不能为空.");
                    $("#tipModal").modal('show');
                    return;
                }
                var erbanNos = $("#addErbanNos").val().trim();
                if (erbanNos == null || erbanNos == '') {
                    $("#tipMsg").text("房主平台号不能为空.");
                    $("#tipModal").modal('show');
                    return;
                }
                debugger;
                var erbanList = erbanNos.split("\n");
                if (erbanList.length > 20) {
                    $("#tipMsg").text("输入平台号超过20个，请使用批量导入方式上传");
                    $("#tipModal").modal('show');
                    return;
                }
                if ($("#roomAddForm").validationEngine('validate')) {
                    showLoading();
                    $.ajax({
                        type: "post",
                        url: "/admin/gift/addRoomList.action",
                        data: {
                            giftId: giftId,
                            erbanNos: erbanNos
                        },
                        dataType: "json",
                        success: function (json) {
                            $('#roomAddModel').modal('hide');
                            hideLoading();
                            if (json.code == 200) {
                                $('#sendGiftModal').modal('hide');
                                TableHelper.doRefresh("#roomGiftTable");
                                $("#tipMsg").text("添加成功");
                                $("#tipModal").modal('show');
                            } else if (json.code == 300) {
                                $("#tipMsg").text(json.message + ",添加失败的平台号：" + json.data.row + ",添加失败原因：" + json.data.reason);
                                $("#tipModal").modal('show');
                            }
                        },
                        error: function () {
                            hideLoading();
                            $("#tipMsg").text("添加失败.");
                            $("#tipModal").modal('show');
                        }
                    });
                }
            });
            //单个删除
            $("#roomGiftTable").on('click', '.opt-delete', function () {
                var id = $(this).attr("data-id");
                if (confirm("确认删除该条记录吗?删除后不能找回，请谨慎操作！")) {
                    $.ajax({
                        type: "post",
                        url: "/admin/gift/del.action",
                        data: {
                            id: id
                        },
                        dataType: "json",
                        success: function (json) {
                            if (json.code == 200) {
                                TableHelper.doRefresh("#roomGiftTable");
                                $("#tipMsg").text("删除成功");
                                $("#tipModal").modal('show');
                            } else {
                                $("#tipMsg").text("删除失败");
                                $("#tipModal").modal('show');
                            }
                        },
                        error: function () {
                            $("#tipMsg").text("删除失败.");
                            $("#tipModal").modal('show');
                        }
                    });
                }
            })
            //批量删除
            $("#roomGiftMultiDel").on('click', function () {
                var rows = $("#roomGiftTable").bootstrapTable("getSelections");
                if (rows.length == 0) {
                    alert("请先选择要删除的记录");
                    return;
                }
                var idArr = [];
                for (var i = 0; i < rows.length; i++) {
                    idArr.push(rows[i]['id']);
                }
                if (confirm("确认批量删除该记录吗?\r\n删除后再也不能找回，请谨慎操作!")) {
                    $.ajax({
                        type: 'post',
                        url: "/admin/gift/batchDel.action",
                        data: { 'ids': JSON.stringify(idArr) },
                        dataType: "json",
                        success: function (json) {
                            if (json.code == 200) {
                                TableHelper.doRefresh("#roomGiftTable");
                                $("#tipMsg").text("批量删除成功");
                                $("#tipModal").modal('show');
                            } else {
                                $("#tipMsg").text("批量删除失败");
                                $("#tipModal").modal('show');
                            }
                        },
                        error: function () {
                            $("#tipMsg").text("批量删除失败.");
                            $("#tipModal").modal('show');
                        }
                    });
                }
            })

            $("#startValidTime").datetimepicker({
                format: 'yyyy-mm-dd hh:ii:00',
                autoclose: true,
                startDate: new Date()
            });
            $('#endValidTime').datetimepicker({
                format: 'yyyy-mm-dd hh:ii:00',
                startDate: new Date()
            });
        }
    }
};
</script>

<style scoped>
.room_class {
    width: 150%;
}

.btn-sm {
    width: 100%;
}

.first {
    z-index: 2000;
}
</style>
