@layout("/common/_container.html"){
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal">
            <div class="row">
                <div class="form-group">
                    <label class="col-sm-3 control-label">*所在省：</label>
                    <div class="col-sm-4">
                        <select class="form-control" id="provinceCode" name="provinceCode">
                            @for(obj in province){
                            <option value="${obj.code}">${obj.name}</option>
                            @}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">*所在市：</label>
                    <div class="col-sm-4">
                        <select class="form-control" id="cityCode" name="cityCode">
                            @for(obj in city){
                            <option value="${obj.code}">${obj.name}</option>
                            @}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">*所属门店：</label>
                    <div class="col-sm-4">
                        <select class="form-control" id="storeId" name="storeId">
                            @for(obj in store){
                            <option value="${obj.id}">${obj.name}</option>
                            @}
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">*上课场地：</label>
                    <div class="col-sm-4">
                        <select class="form-control" id="siteId" name="siteId">
                            @for(obj in site){
                            <option value="${obj.id}">${obj.name}</option>
                            @}
                        </select>
                    </div>
                </div>


                <div class="hr-line-dashed"></div>

                <div id="config">

                    <div>
            <div class="col-sm-4">
                <div>游戏1*</div>
                <div id="pic">
                    <div id="headPic" class="headPic">
                    <label class="col-sm-3 control-label">所在省：</label>
                    <img src="${ctxPath}/img/NoPIC.png" id="img" style="width: 200px; height: 150px; border: 1px solid black;">
                </div>
                    <input type="file" id="fil" class="fil" hidden="hidden">
                </div>

                <input type="text" class="form-control">
                <input type="text" class="form-control">
                <input type="text" class="form-control">
            </div>

                        <div class="col-sm-4">
                            <div>游戏1*</div>

                            <div id="pic">
                                图片:<div id="headPic" class="headPic">
                                <img src="${ctxPath}/img/NoPIC.png" id="img" style="width: 200px; height: 150px; border: 1px solid black;">
                            </div>
                                <input type="file" id="fil"  class="fil" hidden="hidden">
                            </div>

                            <input type="text" class="form-control">
                            <input type="text" class="form-control">
                            <input type="text" class="form-control">
                        </div>





                    </div>
                </div>

                <h3>课时设置</h3>
                <div class="form-group">
                    <label class="col-sm-3 control-label">*支付方式：</label>
                    <div class="col-sm-4" style="margin-top: 6px;">
                        <input type="checkbox" name="payType" value="1"> 现金&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="checkbox" name="payType" value="2"> 玩湃币&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                </div>

<!--                <input type="text" id = "counpons">-->
            </div>
            <div class="row btn-group-m-t">
                <div class="col-sm-10">
                    <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="CoursePackageInfo.addSubmit()"/>
                    <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="CoursePackageInfo.close()"/>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/modular/system/ball/ball_info.js"></script>
<script type="text/javascript">
    laydate.render({
        elem: '#classStartTime'
        ,type: 'time'
        ,range: true
    });

    laydate.render({
        elem: '#holitime'
        ,range: true //或 range: '~' 来自定义分割字符
    });

    var avatarUp = new $WebUpload("coverDrawing");
    avatarUp.setUploadBarId("progressBar");
    avatarUp.init();

    var avatarUp1 = new $WebUpload("detailDrawing");
    avatarUp1.setUploadBarId("progressBar");
    avatarUp1.init();

    var avatarUp1 = new $WebUpload("introduceDrawing");
    avatarUp1.setUploadBarId("progressBar");
    avatarUp1.init();
    function addTime(){
        var i =  $('#dayTime > div').length

        let htmlStr ='           <div style="display:flex">\n' +
            '                                <input class="form-control" id="classStartTime'+i+'" name="classStartTime" placeholder="请选择" style="width: 200px;">\n' +
            '                                <i class="fa fa-trash-o" style="font-size:24px" onclick="removePrice1(this)"></i>\n' +
            '                            </div>'
        $('#dayTime').append(htmlStr);
        console.log("========="+i)
        laydate.render({
            elem: '#classStartTime'+i,
            type: 'time',
            range: true
        });
    }



    let fil = document.querySelector('#fil') // 文件框，只不过隐藏了起来
    let headPic = document.querySelector('#headPic') //图片上传框

    headPic.addEventListener('click', function () {
        fil.click()  //点击上传图片，文件上传框打开
    })

    //头像上传
    fil.addEventListener('change', function (e) {//注意，头像上传时用的时change事件
        // console.log(this.files[0]);  //文件的信息都放在files里
        let fd = new FormData()
        fd.append('file', this.files[0])
        //原生ajax实现实现图片上传
        let xhr = new XMLHttpRequest() //创建ajax对象
        xhr.open('post', Feng.ctxPath + '/mgr/uploadImg')
        xhr.send(fd)  //将格式处理好的数据，作为参数发送
        xhr.onreadystatechange = function () {
            // if (xhr.code != 1) {
                let data = xhr.responseText;
                console.log(data);
            $('#img').src = data;
                img.src = data
            // }
        }
    })

    // document.addEventListener('DOMContentLoaded', function() {
    //
    // let filList = document.querySelectorAll('.fil'); // 获取所有具有类名为 'fil' 的元素列表
    // let headPicList = document.querySelectorAll('.headPic'); // 获取所有具有类名为 'headPic' 的元素列表
    //
    // // 为每个元素添加事件监听器
    // filList.forEach(function(fil) {
    //     fil.addEventListener('change', function(e) {
    //         let fd = new FormData();
    //         fd.append('file', this.files[0]);
    //         let xhr = new XMLHttpRequest();
    //         xhr.open('post', Feng.ctxPath + '/mgr/uploadImg');
    //         xhr.send(fd);
    //         xhr.onreadystatechange = function() {
    //             // if (xhr.readyState === 4 && xhr.status === 200) {
    //                 let data = xhr.responseText;
    //                 console.log(data);
    //                 headPicList.forEach(function(headPic) {
    //                     headPic.querySelector('img').src = data;
    //                 });
    //             // }
    //         };
    //     });
    // });
    //
    // // 为每个元素添加点击事件监听器
    // headPicList.forEach(function(headPic) {
    //     headPic.addEventListener('click', function() {
    //         let fil = this.querySelector('.fil');
    //         fil.click();
    //     });
    // });
    // });

</script>
@}