<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('顶部banner')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <style>
        .home_page {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .right_content {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
        }
        .left_content {
            flex: 1;
        }
        .left_title, .right_title {
            margin-bottom: 12px;
        }
        .function_btn {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .function_btn .hot_title {
            font-size: 16px;
            font-weight: 600;
        }
        .function_btn .tags {
            display: flex;
            align-items: center;
        }
        .function_btn .tags .tag {
            padding: 6px 12px 4px;
            border: 1px solid #ccc;
            border-radius: 5px;
            position: relative;
            margin-right: 12px;
        }
        .function_btn .tags .tag span {
            display: inline-block;
            position: absolute;
            top: -8px;
            right: -8px;
            width: 18px;
            height: 18px;
            line-height: 16px;
            border: 1px solid #aaa;
            border-radius: 50%;
            background: #fff;
            text-align: center;
            cursor: pointer;
        }
        .banner_list {
            display: flex;
            flex-direction: column;
        }
        .banner_item {
            border: 1px dashed #ccc;
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 20px;
        }
        .img_show, .set_method, .set_function {
            display: flex;
        }
        .title {
            font-size: 16px;
            font-weight: 600;
            width: 80px;
            text-align: right;
        }
        .kv-upload-progress {
            display: none !important;
        }
        .ibox-content .imgBox {
            width: 350px;
            max-height: 180px;
        }
        .jump, .ticket_name, .set_function_time {
            display: flex;
            flex-grow: 1;
            align-items: center;
        }
        .iptOrSelect {
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="home_page">
        <div class="left_content">
            <div class="left_title">
                
            </div>
            <div class="function_btn">
                <div class="hot_title">
                    展示形式：
                </div>
                <div class="tags" style="font-weight: 600;font-size: 16px;">
                    轮播
                </div>
            </div>
            <div class="function_btn">
                <div class="hot_title">
                    选择照片：
                </div>
                <div class="tags">
                    <button type="button" class="btn btn-warning" style="margin-right: 12px;" onclick="addItem()">添加banner</button>
                    <span id="tall">(最多允许添加10张图，建议宽度750像素)</span>
                </div>
            </div>
            <div id="bannerList" class="banner_list">
                
            </div>
            
            <div class="footer_btn">
                <button type="button" class="btn btn-success" onclick="save()">保存</button>
            </div>
        </div>
        <div class="right_content">
            <div class="right_title">
                
            </div>
            <div class="function_area">
                <iframe src="http://m.zhengzai.tv" width="375" height="896" frameborder="0"></iframe>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer"/>
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var prefix2 = ctx + "local";
        var platformUrl = [[${platformUrl}]];
        let num = 0;
        let type = 0;
        $(function(){
            let name = 'id';
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            type = unescape(r[2]);
            if (type == 2) {
                $("#tall").html('至少添加8张图，建议尺寸1：1')
            }
        })
        function addItem () {
            if (num == 10) {
                return layer.msg('最多可添加10张图片')
            }
            num++
            let str = `<div class="banner_item">
                        <div class="img_show">
                            <div class="title">
                                图片展示：
                            </div>
                            <div class="ibox-content" style="border: none;">
                                <img id="viewImg${num}" class="imgBox" src="" alt="">
                                <div class="form-group">
                                    <div class="file-loading">
                                        <input id="fileinput${num}" type="file" name="file" data-browse-on-zone-click="true" data-theme="fas">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="set_method" style="margin-bottom: 20px;">
                            <div class="jump">
                                <div class="title">
                                    跳转方式：
                                </div>
                                <div class="iptOrSelect" style="margin-right: 12px;">
                                    <select id="jumpSelect${num}" class="type form-control" data-first-title="请选择">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="ticket_name">
                                <div class="title">
                                    票务名称：
                                </div>
                                <div class="iptOrSelect">
                                    <input id="ticketName${num}" type="text" class="layui-input form-control">
                                </div>
                            </div>
                        </div>
                        <div class="set_function">
                            <div class="set_function_time">
                                <div class="title">
                                    时间设置：
                                </div>
                                <div class="select_tiem">
                                    <input type="text" class="layui-input form-control" id="startTime${num}" autocomplete="off" placeholder="配置活动时间">
                                </div>
                            </div>
                            <div class="set_function_time" style="width: 40%;">
                                <div class="title">
                                    排序：
                                </div>
                                <div class="select_tiem">
                                    <input id="px${num}" type="text" class="layui-input form-control" placeholder="请输入顺序数字">
                                </div>
                            </div>
                        </div>
                    </div>`;
            $("#bannerList").append(str);
            common(num)
        }
        function save () {
            if (type == 2) {
                if (num < 8) return layer.msg('请添加至少8张图')
            }
            refreshItem()
        }
        function common (num) {
            layui.use('laydate', function(){
                var laydate = layui.laydate;
                //执行一个laydate实例
                laydate.render({
                    elem: `#startTime${num}`, //指定元素
                    type: 'datetime'
                });
            });
            $("#fileinput"+num+"").fileinput({
                'theme': 'explorer-fas',
                'uploadUrl':  "https://devplatform.zhengzai.tv/platform/basicServices/alOss/upload",
                "uploadExtraData": {
                    "pathName" : "banner",
                    "buckType" : 1
                },
                autoReplace: true,
                showCaption: false,
                showPreview: false,
                showRemove: false,
                showUpload: false,
                showCancel: false,
                showClose: false,
                autoReplace: true,
                dropZoneTitle: "请上传文件",
                maxFileCount: 1
            }).on("filebatchselected", function (event, files) {         //默认上传
                $(this).fileinput("upload");
            })
            .on("fileuploaded", function (event, data) {       //上传回调事件
                let showPicture = 'https://img.zhengzai.tv/' + data.response.data.ossPath;
                $("#viewImg"+num+"").attr('src', showPicture)
            })
        }
    </script>
</body>
</html>