<template>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <section class="content">
                    <div id="table"></div>
                    <div id="toolbar">
                        <div class="col-sm-12">
                            <label for="skipType" class="col-sm-1 control-label">跳转类型: </label>
                            <div class="col-sm-2">
                                <select name="skipType" id="skipType" class="input-m form-control">
                                    <option value="0">--全部--</option>
                                    <option value="1">跳转app内部</option>
                                    <option value="2">跳转房间</option>
                                    <option value="3">跳转H5页面</option>
                                </select>
                            </div>
                            <label for="status" class="col-sm-1 control-label">状态:</label>
                            <div class="col-sm-2">
                                <select name="status" id="status" class="input-m form-control">
                                    <option value="0">--全部--</option>
                                    <option value="1">激活启用中</option>
                                    <option value="2">未激活</option>
                                </select>
                            </div>
                            <label for="app" class="col-sm-1 control-label">app:</label>
                            <div class="col-sm-2">
                                <select name="app" id="app" class="input-m form-control">
                                    <option value="">--全部--</option>
                                </select>
                            </div>    
                        </div>
                        <div class="col-sm-12">
                            <label for="beginTime" class="col-sm-1 control-label">开始日期:&nbsp;&nbsp;</label>
                            <div class="col-sm-2">
                                <input type="text" name="timeBegin" id="beginTime" class="input-sm form-control" value="">
                            </div>
                            <label for="endTime" class="col-sm-1 control-label">结束日期:&nbsp;&nbsp;</label>
                            <div class="col-sm-2">
                                <input type="text" name="timeEnd" id="endTime" class="input-sm form-control" value="">
                            </div>
                            <label for="partitionId" class="col-sm-1 control-label">地区:</label>
                            <div class="col-sm-2">
                                <select name="partitionId" id="partitionId" class="form-control"></select>
                            </div>
                            
                        </div>

                        <button id="btnSearch" class="btn btn-sm btn-primary">查询</button>

                        <button id="add" class="btn btn-default">
                            <i class="glyphicon glyphicon-plus"></i>增加
                        </button>

                        <button id="btnMultiDel" class="btn btn-default">
                            <i class="glyphicon"></i>删除选中
                        </button>
                    </div>
                </section>
            </div>
        </div>
    </section>
    <div class="modal fade" id="bannerModal" 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="modalLabel">banner信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="bannerForm">
                        <div id="bannerPartitionDiv">
                            <div class="form-group">
                                <label name="partition" class="col-sm-3 control-label">选择地区*:</label>
                                <div class="form-check" id = "partitionCheck">
                                    <!--                                分区展示-->
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name" class="col-sm-3 control-label">Banner名字:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required]" name="bannerName" id="name">
                                <input type="hidden" id="bannerId" name="bannerId">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">banner图:</label>
                            <div class="col-sm-8">
                                <img src="" id="imgUrl" style="width:250px;height:90px;" alt="">
                                <input type="file" id="uploadFile" name="uploadFile">
                                <button class="btn btn-success" type="button" id="uploadBtn">上传</button>
                                <span class="attention">注意:图片尺寸请注意在750*250,选择图片后请点击上传按钮</span>
                                <input type="hidden" id="bannerPic" name="bannerPic"
                                    class="form-control validate[required]" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">跳转链接:</label>
                            <select name="skipType" id="skipUrlSort" class="col-sm-2">
                                <option value="1">跳转app内部</option>
                                <option value="2">跳转房间</option>
                                <option value="3">跳转H5页面</option>
                            </select>
                            <div class="col-sm-6">
                                <input type="text" class="form-control validate[required]" name="skipUri"
                                    id="skipUrlContent" oninput="this.value = this.value.replace(/[\u4e00-\u9fa5]/g, '')">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="startDate" class="col-sm-3 control-label">起始时间:</label>
                            <div class="col-sm-8">
                                <input id="startDate" type="text" name="startTime" class="form-control validate[required]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="endDate" class="col-sm-3 control-label">结束时间:</label>
                            <div class="col-sm-8">
                                <input id="endDate" type="text" name="endTime" class="form-control validate[required]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="seqNo" class="col-sm-3 control-label">排序设置:</label>
                            <div class="col-sm-3">
                                <input type="text" id="seqNo" name="seqNo" class="form-control validate[required]">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-group">
                                <label for="iosVersion" class="col-sm-3 control-label">ios版本号:</label>
                                <div class="col-sm-3">
                                    <input type="text" id="iosVersion" name="iosVersion"
                                        class="form-control validate[required]">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="androidVersion" class="col-sm-3 control-label">安卓版本号:</label>
                                <div class="col-sm-3">
                                    <input type="text" id="androidVersion" name="androidVersion"
                                        class="form-control validate[required]">
                                </div>
                            </div>
                            <span style="color:red; padding-left: 60px">注:app版本号大于配置的版本号才显示该banner</span>
                        </div>
                        <div class="form-group">
                            <div class="form-group">
                                <label for="noShowChannels" class="col-sm-3 control-label">不展示的渠道:</label>
                                <div class="col-sm-8">
                                    <input type="text" id="noShowChannels" name="noShowChannels" class="form-control ">
                                </div>
                            </div>
                            <span style="color:red; padding-left: 60px">注:留空则为所有渠道展示。多个渠道用英文逗号“,”隔开</span>
                        </div>
                        <div class="form-group">
                            <label for="bannerStatus" class="col-sm-3 control-label">激活设置:</label>
                            <select name="bannerStatus" id="bannerStatus" class="col-sm-2">
                                <option value="1">激活</option>
                                <option value="2">不激活</option>
                            </select>
                        </div>
                        <!--<div class="form-group">-->
                        <!--<label for="appId" class="col-sm-3 control-label">app:</label>-->
                        <!--<select name="appId" id="appId" class="col-sm-2">-->
                        <!--</select>-->
                        <!--</div>-->
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Banner位置:</label>
                            <div class="col-sm-4">
                                <select name="bannerType" id="bannerType" class="col-sm-10"
                                    onchange="selectOnChange(this.value)">
                                    <option value="9">活动banner</option>
                                </select>
                            </div>
                            <div class="col-sm-5 hidden titleListDev">
                                <select name="titleId" id="titleList" class="col-sm-10 titleList">

                                </select>
                            </div>

                        </div>
                        <div id="bannerTypeDiv">
                            <div class="form-group">
                                <label for="platform" class="col-sm-3 control-label">展示平台:</label>
                                <select name="platform" id="platform" class="col-sm-3">
                                    <option value="all">全平台展示</option>
                                    <option value="ios">只展示IOS</option>
                                    <option value="android">只展示安卓</option>
                                    <option value="none">都不展示</option>
                                </select>
                            </div>
                        </div>

                        <div id="actLimitDiv">
                            <div class="form-group">
                                <label for="limitLevelExper" class="col-sm-3 control-label">活动限制等级经验:</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control " name='limitLevelExper' id="limitLevelExper">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="showType" class="col-sm-3 control-label">h5页面是否全屏展示:</label>
                                <select name="showType" id="showType" class="col-sm-2">
                                    <option value="1">全屏</option>
                                    <option value="2">非全屏</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="showRule" class="col-sm-3 control-label">活动入口展示规则:</label>
                                <select name="showRule" id="showRule" class="col-sm-4">
                                    <option value="1">始终展示</option>
                                    <option value="2">达到限制等级展示</option>
                                </select>
                            </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="save">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addBannerModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">x</span></button>
                    <h4 class="modal-title" id="addModalLabel">新增banner</h4>
                </div>
                <div class="modal-body">
                    <form id="addBannerForm" class="form-horizontal">
                        <div id="bannerAddPartitionDiv">
                            <div class="form-group">
                                <label name="partition" class="col-sm-3 control-label">选择地区*:</label>
                                <div class="form-check" id = "partitionAddCheck">
                                    <!--                                分区展示-->
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addName" class="col-sm-3 control-label">Banner名字:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required]" name="bannerName" id="addName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">banner图:</label>
                            <div class="col-sm-8">
                                <img src="" id="addImgUrl" style="width:250px;height:90px;" alt="">
                                <input type="file" id="addUploadFile" name="uploadFile">
                                <button class="btn btn-success" type="button" id="addUploadBtn">上传</button>
                                <input type="hidden" id="addBannerPic" name="bannerPic"
                                    class="form-control validate[required]" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">跳转链接:</label>
                            <select name="skipType" id="addSkipUrlSort" class="col-sm-2">
                                <option value="1">跳转app内部</option>
                                <option value="2">跳转房间</option>
                                <option value="3">跳转H5页面</option>
                            </select>
                            <div class="col-sm-6">
                                <input type="text" class="form-control validate[required]" name="skipUri"
                                    id="addSkipUrlContent" oninput="this.value = this.value.replace(/[\u4e00-\u9fa5]/g, '')">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addStartDate" class="col-sm-3 control-label">起始时间:</label>
                            <div class="col-sm-8">
                                <input id="addStartDate" type="text" name="startTime"
                                    class="form-control validate[required]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addEndDate" class="col-sm-3 control-label">结束时间:</label>
                            <div class="col-sm-8">
                                <input id="addEndDate" type="text" name="endTime" class="form-control validate[required]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="seqNo" class="col-sm-3 control-label">排序设置:</label>
                            <div class="col-sm-3">
                                <input type="text" id="addSeqNo" name="seqNo" class="form-control validate[required]">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="form-group">
                                <label for="iosVersion" class="col-sm-3 control-label">ios版本号:</label>
                                <div class="col-sm-3">
                                    <input type="text" id="addIosVersion" name="iosVersion"
                                        class="form-control validate[required]">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="androidVersion" class="col-sm-3 control-label">安卓版本号:</label>
                                <div class="col-sm-3">
                                    <input type="text" id="addAndroidVersion" name="androidVersion"
                                        class="form-control validate[required]">
                                </div>
                            </div>
                            <span style="color:red; padding-left: 60px ">注意:app版本号大于配置的版本号才显示该banner</span>
                        </div>
                        <div class="form-group">
                            <div class="form-group">
                                <label for="noShowChannels" class="col-sm-3 control-label">不展示的渠道:</label>
                                <div class="col-sm-8">
                                    <input type="text" id="addNoShowChannels" name="noShowChannels" class="form-control ">
                                </div>
                            </div>
                            <span style="color:red; padding-left: 60px">注:留空则为所有渠道展示。多个渠道用英文逗号“,”隔开</span>
                        </div>
                        <div class="form-group">
                            <label for="bannerStatus" class="col-sm-3 control-label">激活设置:</label>
                            <select name="bannerStatus" id="addBannerStatus" class="col-sm-2">
                                <option value="1">激活</option>
                                <option value="2">不激活</option>
                            </select>
                        </div>
                        <!--<div class="form-group">-->
                        <!--<label for="appId" class="col-sm-3 control-label">app:</label>-->
                        <!--<select name="appId" id="addAppId" class="col-sm-2 validate[required]">-->
                        <!--<option value="">请选择</option>-->
                        <!--</select>-->
                        <!--</div>-->
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Banner位置:</label>
                            <div class="col-sm-4">
                                <select name="bannerType" id="addBannerType" class="col-sm-10"
                                    onchange="addSelectOnChange(this.value)">
                                    <option value="9">活动banner</option>
                                </select>
                            </div>
                            <div class="col-sm-5 hidden titleListDev">
                                <select name="titleId" id="addTitleList" class="col-sm-10 titleList">

                                </select>
                            </div>
                        </div>
                        <div id="addBannerTypeDiv">
                            <div class="form-group">
                                <label for="platform" class="col-sm-3 control-label">展示平台:</label>
                                <select name="platform" id="addPlatform" class="col-sm-3">
                                    <option value="all">全平台展示</option>
                                    <option value="ios">只展示IOS</option>
                                    <option value="android">只展示安卓</option>
                                    <option value="none">都不展示</option>
                                </select>
                            </div>
                        </div>
                        <div id="addActLimitDiv">
                            <div class="form-group">
                                <label for="limitLevelExper" class="col-sm-3 control-label">活动限制等级经验:</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control " name='limitLevelExper' id="addLimitLevelExper">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="showType" class="col-sm-3 control-label">h5页面是否全屏展示:</label>
                                <select name="showType" id="addShowType" class="col-sm-2">
                                    <option value="1">全屏</option>
                                    <option value="2">非全屏</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="showRule" class="col-sm-3 control-label">活动入口展示规则:</label>
                                <select name="showRule" id="addShowRule" class="col-sm-4">
                                    <option value="1">始终展示</option>
                                    <option value="2">达到限制等级展示</option>
                                </select>
                            </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="addSave">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div id="imgMask"><img src="" alt=""></div>
</template>

<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { getPartitionInfoList } from '@/api/partition/partitionInfo';
import { buildSelectOption } from '@/utils/system-helper';

var app = {};
var validApp = {};
export default {
    name: "FirstPageActivityBannerView",
    setup() {
        function selectOnChange(val) {
            if (val == 1) {
                $("#bannerTypeDiv").show();
                $("#actLimitDiv").hide();
            } else if (val == 2) {
                $("#actLimitDiv").show();
                $("#bannerTypeDiv").hide();
            } else {
                $("#bannerTypeDiv").hide();
                $("#actLimitDiv").hide();
            }
        }
        function addSelectOnChange(val) {
            if (val == 1) {
                $("#addBannerTypeDiv").show();
                $("#addActLimitDiv").hide();
            } else if (val == 2) {
                $("#addActLimitDiv").show();
                $("#addBannerTypeDiv").hide();
            } else {
                $("#addBannerTypeDiv").hide();
                $("#addActLimitDiv").hide();
            }
        }
        window.selectOnChange = selectOnChange;
        window.addSelectOnChange = addSelectOnChange;
        return {
            selectOnChange,
            addSelectOnChange
        };
    },
    created() {
        this.$nextTick(function () {
            this.initPartition();
            this.initData();
        });
    },
    methods: {
        initData() {
            $(function () {
                var isEdit = false;
                $('#table').bootstrapTable('destroy');
                initTable();

                //getAppNames();
                // function getAppNames() {
                //     $.get('/admin/appName/listAll', {}, function (res) {
                //         if (res.rows.length > 0) {
                //             renderSelect(res.rows);
                //             renderAppObj(res.rows);
                //         }
                //     })
                // }

                // function renderSelect(data) {
                //     var $select = $('#app');
                //     for (var i = 0; i < data.length; i++) {
                //         var $option = $('<option value="' + data[i].app + '" />');
                //         $option.html(data[i].appName);
                //         $select.append($option);
                //     }
                // }
                //
                // function renderAppObj(rows) {
                //     for(var i = 0; i < rows.length; i++) {
                //         var row = rows[i];
                //         app[row.app] = row.appName;
                //         // 有效的app
                //         if(row.status == 1) {
                //             validApp[row.app] = row.appName;
                //         }
                //     }
                // }

                function initTable() {
                    $('#table').bootstrapTable({
                        columns: [
                            { field: 'sel', title: 'ID', align: 'center', valign: 'middle', checkbox: true, width: '1%' },
                            {field: 'partitionDesc', title: '地区', align: 'center', valign: 'middle', width: '5%'},
                            { field: 'bannerId', title: 'bannerID', align: 'center', valign: 'middle', width: '5%' },
                            { field: 'bannerName', title: '名称', align: 'center', valign: 'middle', width: '10%' },
                            {
                                field: 'bannerType', title: 'banner位置', align: 'center', valign: 'middle', width: '10%',
                                formatter: function (val, row, index) {
                                    switch (val) {
                                        case 1:
                                            return '首页';
                            
                                        case 2:
                                            return '房间内';
                                
                                        case 3:
                                            return '我的装扮';
                             
                                        case 9:
                                            return '活动banner';
                                    
                                    }
                                }
                            },
                            {
                                field: 'bannerPic',
                                title: 'banner图',
                                align: 'center',
                                width: '10%',
                                formatter: function (val, row, index) {
                                    return "<img src='" + val + "' width='60' height='50'>";
                                }
                            },
                            {
                                field: 'skipType', title: '跳转类型', align: 'center', valign: 'middle', width: '10%',
                                formatter: function (val, row, index) {
                                    switch (val) {
                                        case 1:
                                            return 'App页面';
                                       
                                        case 2:
                                            return '聊天室';
                                            
                                        case 3:
                                            return 'H5页面';
                                         
                                    }
                                }
                            },
                            {
                                field: 'seqNo',
                                title: 'banner排序',
                                align: 'center',
                                width: '8%',
                                valign: 'middle'
                            },
                            {
                                field: 'bannerStatus',
                                title: '状态',
                                align: 'center',
                                width: '10%',
                                valign: 'middle',
                                formatter: function (val, row, index) {
                                    console.log(val);
                                    switch (val) {
                                        case 1:
                                            return '正在启用';
                                        
                                        case 2:
                                            return '未激活';
                                  
                                    }
                                }
                            },
                            {
                                field: 'platform', title: '展示平台', align: 'center', valign: 'middle', width: '10%',
                                formatter: function (val, row, index) {
                                    if (row.bannerType == 1) {
                                        switch (val) {
                                            case 'all':
                                                return '所有平台展示';
                                            
                                            case 'none':
                                                return '都不展示';
                                             
                                            case 'ios':
                                                return '只在IOS展示';
                                              
                                            case 'android':
                                                return '只在安卓展示';
                                     
                                        }
                                    } else {
                                        return '-'
                                    }
                                }
                            },
                            { field: 'iosVersion', title: 'ios版本号', align: 'center', valign: 'middle', width: '10%' },
                            { field: 'androidVersion', title: '安卓版本号', align: 'center', valign: 'middle', width: '10%' },
                            { field: 'noShowChannels', title: '不展示的渠道', align: 'center', valign: 'middle', width: '10%' },
                            {
                                field: 'startTime',
                                title: '活动开始时间',
                                align: 'center',
                                width: '5%',
                                valign: 'middle',
                                formatter: function (val, row, index) {
                                    if (val) {
                                        var date = new Date(val);
                                        return date.format("yyyy-MM-dd hh:mm:ss");
                                    } else {
                                        return '-';
                                    }
                                }
                            },
                            {
                                field: 'endTime',
                                title: '活动结束时间',
                                align: 'center',
                                width: '5%',
                                valign: 'middle',
                                formatter: function (val, row, index) {
                                    if (val) {
                                        var date = new Date(val);
                                        return date.format("yyyy-MM-dd hh:mm:ss");
                                    } else {
                                        return '-';
                                    }

                                }
                            },
                            { field: 'operator', title: '操作人', align: 'center', width: '5%' },
                            {
                                field: 'updateTime',
                                title: '操作时间',
                                align: 'center',
                                width: '5%',
                                valign: 'middle',
                                formatter: function (val, row, index) {
                                    if (val) {
                                        var date = new Date(val);
                                        return date.format("yyyy-MM-dd hh:mm:ss");
                                    } else {
                                        return '-';
                                    }

                                }
                            },
                            {
                                field: 'tmp',
                                title: '操作',
                                align: 'center',
                                width: '10%',
                                valign: 'middle',
                                formatter: function (val, row, index) {
                                    var key = row.bannerId;
                                    var str;
                                    str = "<button class='btn btn-sm btn-success opt-edit' data-id=" + key + ">编辑</button>";
                                    str += "<button class='btn btn-sm btn-success opt-del' data-id=" + key + ">删除</button>";
                                    return str;
                                }
                            }
                        ],
                        cache: false,
                        striped: true,
                        showRefresh: false,
                        pageSize: 10,
                        pagination: true,
                        pageList: [10, 20, 30, 50],
                        sidePagination: "server", //表示服务端请求
                        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                        //设置为limit可以获取limit, offset, search, sort, order
                        queryParamsType: "undefined",
                        queryParams: function queryParams(params) {   //设置查询参数
                            var beginTime = ($('#beginTime').val()) ? ($("#beginTime").val() + ' 00:00:00') : null;
                            var endTime = ($('#endTime').val()) ? ($('#endTime').val() + ' 23:59:59') : null;
                            var param = {
                                pageSize: params.pageSize,
                                pageNumber: params.pageNumber,
                                beginTime: beginTime,
                                endTime: endTime,
                                bannerStatus: parseInt($('#status').val()),
                                skipType: parseInt($('#skipType').val()),
                                bannerType: 9,
                                partitionId: $('#partitionId').val(),
                            };
                            //                console.log(param);
                            return param;
                        },
                        uniqueId: 'code',
                        toolbar: '#toolbar',
                        url: '/admin/banner/list',
                        onLoadSuccess: function () {  //加载成功时执行
                            console.log("load success");
                        },
                        onLoadError: function () {  //加载失败时执行
                            console.log("load fail");
                        }
                    })
                }

                $('#btnSearch').on('click', function () {
                    TableHelper.doRefresh('#table');
                })


                // 获取信息
                $("#table").on("click", '.opt-edit', function () {
                    $('#titleList').html('');
                    $('.titleListDev').addClass("hidden");
                    var bannerId = parseInt($(this).data('id'));
                    isEdit = true;
                    $.ajax({
                        type: 'get',
                        url: '/partition/listPartitionInfo',
                        dataType: 'json',
                        success: function (json) {
                            if (json.code == 200) {
                                var length = json.data.length;
                                var partitionCheck = $("#partitionCheck");
                                partitionCheck.empty();
                                // 分区
                                for (var i = 0; i < length; i++) {
                                    var checkbox = $("<input>", {type: "checkbox", id: "checkbox" + json.data[i].id, name: "partitionIds", value: json.data[i].id});
                                    var label = $("<label>", {class: "partition-checkbox-label", text: json.data[i].desc});

                                    partitionCheck.append(checkbox,label);
                                }
                                $.ajax({
                                    type: "get",
                                    url: "/admin/banner/get",
                                    data: { bannerId: bannerId },
                                    dataType: "json",
                                    success: function (json) {
                                        if (json.code == 200) {
                                            var date = json.data.endTime ? new Date(json.data.endTime).format("yyyy-MM-dd hh:mm:ss") : '';
                                            var startDate = json.data.startTime ? new Date(json.data.startTime).format("yyyy-MM-dd hh:mm:ss") : '';
                                            $('#name').val(json.data.bannerName);
                                            $('#imgUrl').attr('src', json.data.bannerPic);
                                            $('#bannerPic').val(json.data.bannerPic);
                                            $('#skipUrlSort').val(json.data.skipType);
                                            $('#skipUrlContent').val(json.data.skipUri);
                                            $("#bannerType").val(json.data.bannerType);
                                            $('#seqNo').val(json.data.seqNo);
                                            //$("#appId").val(json.data.appId);
                                            $('#iosVersion').val(json.data.iosVersion);
                                            $('#androidVersion').val(json.data.androidVersion);
                                            $('#noShowChannels').val(json.data.noShowChannels);
                                            $('#bannerStatus').val(json.data.bannerStatus);
                                            $('#startDate').val(startDate);
                                            $('#endDate').val(date);
                                            $('#bannerId').val(json.data.bannerId);
                                            $('#platform').val(json.data.platform);
                                            $('#limitLevelExper').val(json.data.limitLevelExper);
                                            $('#showType').val(json.data.showType);
                                            $('#showRule').val(json.data.showRule);
                                            window.selectOnChange(json.data.bannerType, json.data.titleId);
                                            $('#titleList').val(json.data.titleId);
                                            // 分区信息
                                            var partitionIds = json.data.partitionIds;
                                            var length = partitionIds.length;
                                            for (var i = 0; i < length; i++) {
                                                $("#checkbox" + partitionIds[i]).prop('checked', true);
                                            }
                                            $('#bannerModal').modal('show');
                                            // picker1.datetimepicker('setStartDate', startDate);
                                        } else {
                                            $("#tipMsg").text("获取信息出错");
                                            $("#tipModal").modal('show');
                                        }
                                    }
                                });
                            } else {
                                $("#tipMsg").text("获取信息出错");
                                $("#tipModal").modal('show');
                            }
                        }
                    });
                });


                function cleanModal(obj) {
                    $('#addBannerForm').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
                        $(this).val('');
                    })
                    $('#addBannerForm').find('img').attr('src', '');
                    //清空输入框
                    obj.find('input:text').val('');
                    //清空隐藏域
                    obj.find('input:hidden').val('');
                    //清空单选按钮
                    obj.find('input:radio').attr("checked", false);
                    //清空文本域
                    obj.find('textarea').val('');
                    //清空图片
                    obj.find('img').attr("src", "");
                    //清空已上传
                }
                // 事件编辑
                var $timeBegin = $('#beginTime').datepicker({
                    format: 'yyyy-mm-dd',
                    autoclose: true
                });
                var $timeEnd = $('#endTime').datepicker({
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                });

                $timeBegin.on('changeDate', function () {
                    var date = $('#beginTime').datepicker('getDate');
                    $timeEnd.datepicker('setStartDate', date);
                });
                $timeEnd.on('changeDate', function () {
                    var date = $('#endTime').datepicker('getDate');
                    $timeBegin.datepicker('setEndDate', date);
                });
                $('#save').on('click', function () {
                    // if(!$('#appId').val()){
                    //     $("#tipMsg").text("请选择app");
                    //     $("#tipModal").modal('show');
                    //     return;
                    // }
                    if ($('#bannerForm').validationEngine('validate')) {
                        $.ajax({
                            type: "post",
                            url: "/admin/banner/save?startTimeString=" + $('#startDate').val()
                                + "&endTimeString=" + $('#endDate').val(),
                            data: $('#bannerForm').serialize(),
                            dataType: 'json',
                            success: function (json) {
                                if (json.code == 200) {
                                    $("#bannerModal").modal('hide');
                                    $("#tipMsg").text("保存成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("保存失败，错误码：" + json.message);
                                    $("#tipModal").modal('show');
                                }
                            }
                        })
                    }
                });
                $("#add").on('click', function () {
                    cleanModal($("#addBannerForm"));
                    $('#addTitleList').html('');
                    $('#addStartDate').val('');
                    $('#addEndDate').val('');

                    // 分区处理
                    $.ajax({
                        type: 'get',
                        url: '/partition/listPartitionInfo',
                        dataType: 'json',
                        success: function (json) {
                            if (json.code == 200) {
                                var length = json.data.length;
                                var partitionCheck = $("#partitionAddCheck");
                                partitionCheck.empty();
                                // 创建3个checkbox元素并添加到myDiv元素上
                                for (var i = 0; i < length; i++) {
                                    var checkbox = $("<input>", {
                                        type: "checkbox",
                                        id: "checkbox" + json.data[i].id,
                                        name: "partitionIds",
                                        value: json.data[i].id
                                    });
                                    var label = $("<label>", {class: "partition-checkbox-label", text: json.data[i].desc});

                                    partitionCheck.append(checkbox, label);
                                }
                            }
                        }
                    });

                    // 处理appId
                    // $('#addAppId').empty();
                    // $('#addAppId').append('<option value="">请选择</option>');
                    // for(var key in validApp) {
                    //     $('#addAppId').append('<option value="'+key+'">'+validApp[key]+'</option>');
                    // }

                    $('#addBannerTypeDiv').hide();
                    $('#addActLimitDiv').hide();

                });
                $('#addSave').on('click', function () {
                    var startDateVal = $('#addStartDate').val();
                    var endDateVal = $('#addEndDate').val();

                    if (!startDateVal || !endDateVal) {
                        $("#tipMsg").text("请选择日期");
                        $("#tipModal").modal('show');
                        return;
                    }

                    if ($('#addBannerForm').validationEngine('validate')) {
                        $.ajax({
                            type: "post",
                            url: "/admin/banner/save?startTimeString=" + $('#addStartDate').val()
                                + "&endTimeString=" + $('#addEndDate').val(),
                            data: $('#addBannerForm').serialize(),
                            dataType: 'json',
                            success: function (json) {
                                console.log(json);
                                if (json.code == 200) {
                                    $('#addBannerModal').modal('hide');
                                    $("#tipMsg").text("保存成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("保存失败，错误码：" + json.message);
                                    $("#tipModal").modal('show');
                                }
                            }
                        })
                    }
                });

                var picker2 = $('#addStartDate').datetimepicker({
                    format: 'yyyy-mm-dd hh:ii:00',
                    autoclose: true
                })
                var picker3 = $('#addEndDate').datetimepicker({
                    format: 'yyyy-mm-dd hh:ii:00',
                    autoclose: true
                })
                picker2.on('changeDate', function () {
                    var date = $('#addStartDate').datetimepicker('getDate');
                    picker2.datetimepicker('setStartDate', date);
                });
                picker3.on('changeDate', function () {
                    var date = $('#addEndDate').datetimepicker('getDate');
                    picker3.datetimepicker('setEndDate', date);
                });
                var picker4 = $('#startDate').datetimepicker({
                    format: 'yyyy-mm-dd hh:ii:00',
                    autoclose: true
                })
                var picker5 = $('#endDate').datetimepicker({
                    format: 'yyyy-mm-dd hh:ii:00',
                    autoclose: true
                })
                picker4.on('changeDate', function () {
                    var date = $('#startDate').datetimepicker('getDate');
                    picker4.datetimepicker('setStartDate', date);
                });
                picker5.on('changeDate', function () {
                    var date = $('#endDate').datetimepicker('getDate');
                    picker5.datetimepicker('setEndDate', date);
                });
                $('#uploadBtn').on('click', function () {
                    var options = {
                        type: 'post',
                        url: '/admin/banner/upload',
                        dataType: 'json',
                        success: function (json) {
                            if (json.code == 200) {
                                $('#bannerPic').val(json.data);
                                $('#imgUrl').attr("src", json.data);
                            } else {
                                $("#tipMsg").text(json.msg);
                                $("#tipModal").modal('show');
                            }
                        }
                    }
                    $("#bannerForm").ajaxSubmit(options);
                })
                $('#addUploadBtn').on('click', function () {
                    var options = {
                        type: 'post',
                        url: '/admin/banner/upload',
                        dataType: 'json',
                        success: function (json) {
                            if (json.code == 200) {
                                $('#addBannerPic').val(json.data);
                                $('#addImgUrl').attr('src', json.data);
                                console.log(json.data);
                            } else {
                                $('#tipMsg').text(json.msg);
                                $('#tipModal').modal('show');
                            }
                        }
                    }
                    $('#addBannerForm').ajaxSubmit(options);
                })
                $('#add').on('click', function () {
                    isEdit = false;
                    $('#addBannerForm')[0].reset();
                    $('#addImgUrl').attr('src', '');
                    $('#addBannerPic').val('');
                    //ComboboxHelper.setDef("#displayType", 0);
                    // // 处理appId
                    // $('#addAppId').empty();
                    // $('#addAppId').append('<option value="">请选择</option>');
                    // for(var key in validApp) {
                    //     $('#addAppId').append('<option value="'+key+'">'+validApp[key]+'</option>');
                    // }
                    $('#addBannerModal').modal('show');
                })
                $('#table').on('mouseenter', 'img', function (e) {
                    console.log($(this), e.clientX);
                    var src = $(this).attr('src');
                    $('#imgMask img').attr('src', src);
                    $('#imgMask').show();
                    $('#imgMask').css({
                        top: e.clientY + 20,
                        left: e.clientX + 20
                    })
                })
                $('#table').on('mouseleave', 'img', function (e) {
                    console.log('移出');
                    $('#imgMask').hide();
                })

                $('#btnMultiDel').on('click', function () {
                    var rows = $("#table").bootstrapTable("getSelections");
                    if (rows.length == 0) {
                        alert("请先选择要删除的记录");
                        return;
                    }
                    var idArr = [];

                    for (var i = 0; i < rows.length; i++) {
                        idArr.push(rows[i]['bannerId']);
                    }

                    if (confirm("你确认删除选中Banner吗?")) {
                        $.ajax({
                            type: 'post',
                            url: "/admin/banner/delete",
                            data: {
                                'ids': JSON.stringify(idArr)
                            },
                            dataType: "json",
                            success: function (json) {
                                if (json.code == 200) {
                                    $("#tipMsg").text("已删除选中Banner");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("操作失败");
                                    $("#tipModal").modal('show');
                                }
                            }
                        });
                    }
                });


                $('#table').on('click', '.opt-del', function () {
                    var key = parseInt($(this).attr('data-id'));
                    var idArr = [];
                    idArr.push(key);
                    if (confirm("你确认删除Banner吗?")) {
                        $.ajax({
                            type: 'post',
                            url: "/admin/banner/delete",
                            data: {
                                'ids': JSON.stringify(idArr)
                            },
                            dataType: "json",
                            success: function (json) {
                                if (json.code == 200) {
                                    $("#tipMsg").text("已删除Banner");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("操作失败");
                                    $("#tipModal").modal('show');
                                }
                            }
                        });
                    }
                })
            });
        },
        initPartition() {
            getPartitionInfoList().then(res => {
                let data = res.data;
                buildSelectOption(
                    "#partitionId",
                    null,
                    [{
                        value: '',
                        text: '全部',
                    }].concat(data.map((v) => {
                    return {
                        value: v.id,
                        text: v.desc,
                    };
                    }))
                );
            });
        },
    },

};
</script>

<style scoped>
#skipType,
#status {
    margin-right: 10px;
}

.btn {
    margin: 0 4px;
}

#uploadBtn,
#addUploadBtn {
    margin-top: 4px;
}

#skipUrlSort,
#bannerStatus,
#addSkipUrlSort,
#addBannerStatus {
    height: 34px;
}

.attention {
    line-height: 30px;
    display: inline-block;
    margin-top: 4px;
    color: red;
}

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

#imgMask img {
    width: 100%;
    height: 100%;
    vertical-align: top;
}
</style>