@layout("/common/_container.html"){
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        height: 100px;
        width: 100px;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        margin-top: 34px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

    .col-sm-12 {
        margin-top: 20px;
    }

    .col-sm-12 select {
        height: 33px;
    }
</style>
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <input hidden id="userType" value="${userType}">
        <div class="form-horizontal" id="carInfoForm">
            <#input id="name" name="门票名称" type="text"/>
            <div class="form-group">
                <label class="col-sm-3 control-label">商品类型：</label>
                <div class="col-sm-9">
                    <input type="radio" name="type" value="1" checked onclick="updateType(1)"> 日卡
                    <input type="radio" name="type" value="2" > 月卡
                    <input type="radio" name="type" value="3" > 季卡
                    <input type="radio" name="type" value="3" > 年卡
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">原价：</label>
                <div class="col-sm-9">
                    <input class="form-control" id="price" name="price" type="number">

                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">兑换方式：</label>
                <div class="col-sm-9">
                    <input type="radio" name="redemptionMethod" value="1"  onclick="updateMethod(3)" checked> 积分
                    <input type="radio" name="redemptionMethod" value="2" onclick="updateMethod(4)"> 现金+积分
                    <input type="radio" name="redemptionMethod" value="3" onclick="updateMethod(5)"> 现金
                </div>
            </div>
            <div class="form-group" id="y1" hidden>
                <label class="col-sm-3 control-label">所需现金：</label>
                <div class="col-sm-9">
                    <input class="form-control" id="cash" name="cash" type="number">

                </div>
            </div>
            <div class="form-group" id="y2">
                <label class="col-sm-3 control-label">所需积分：</label>
                <div class="col-sm-9">
                    <input class="form-control" id="integral" name="integral" type="number">

                </div>
            </div>
            <#avatar id="cover" name="*门票封面(推荐像素350x350px)" />

            <div class="row" id="app" >
                <div class="col-sm-6" style="width: 100%;margin-left: 7%">
                    <div class="form-group">
                        <label class="col-sm-3 control-label" style="width: 15%;margin-left: 7%">*门票图片(请上传不超过五张图片,推荐像素780x440px): </label>
                        <div class="col-sm-2" style="width: 100%;margin-left: 12%;margin-top: 1%">
                            <el-upload
                                    :limit="5"
                                    class="avatar-uploader"
                                    action="/tCouponManage/uploadPic"
                                    list-type="picture-card"
                                    accept=".jpg,.jpeg,.png,.JPG,.JPEG"
                                    :on-success="handleAvatarSuccess"
                                    :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="imageUrl1" alt=""></el-dialog>
                        </div>
                    </div>

                </div>
            </div>



            <div class="form-group">
                <label class="col-sm-3 control-label">用户人群：</label>
                <div class="col-sm-9">
                    <input type="radio" name="userPopulation" value="1" checked> 全部用户
                    <input type="radio" name="userPopulation" value="2" > 年度会员
                    <input type="radio" name="userPopulation" value="3" > 已有学员用户
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">发放数量：</label>
                <div class="col-sm-9">
                    <input class="form-control" id="quantityIssued" name="quantityIssued" type="number">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">限领数量：</label>
                <div class="col-sm-9">
                    <input class="form-control" id="pickUpQuantity" name="pickUpQuantity" type="number">
                </div>
            </div>
            <#input id="startTime" name="有效期" type="text"/>
            @if(userType!=3){
            <div class="row" id="belongsCon" >
                <div class="form-group">
                    <div class="form-group">
                        <div class="initialLevel col-sm-12 control-label form-group">
                            <label class="col-sm-3">*兑换地点: </label>
                            <div class="col-sm-2" id="belongsNationwide" >
                                <input class="col-sm-1" onclick="scopeOfApplication1()" name="company" type="radio"
                                       value="1" checked style="margin-top: 10px"/>
                                <label class="col-sm-1" style="width: 38%;margin-top: 7px">全国通用</label>
                            </div>
                            <div class="col-sm-2" id="belongsCity"  >
                                <input class="col-sm-1" name="company" onclick="scopeOfApplication2()" type="radio"
                                       value="2"  style="margin-top: 10px"/>
                                <label class="col-sm-1" style="width: 38%;margin-top: 7px">指定城市</label>
                            </div>
                            <div class="col-sm-2" id="belongsStore"  >
                                <input class="col-sm-1" name="company" onclick="scopeOfApplication3()" type="radio"
                                       value="3" style="margin-left: 4%;margin-top: 10px;width: 13px;height: 13px"/>
                                <label class="col-sm-1" style="width: 38%;margin-top: 6px;">指定门店</label>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            @}

            <div class="row" id="citySelect" hidden="hidden">
                <div class="form-group">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">*指定城市: </label>
                        <div class="col-sm-9 control-label">
                            <select class="col-sm-1"  id="provinceData" style="margin-top: 1%;width: 25%" onchange="changeCity(null)">
                                <option value="">请选择</option>
                            </select>
                            <label class="col-sm-1"  style="width: 9%;margin-top: 7px">省</label>
                            <select  class="col-sm-1" style="margin-top: 1%;width: 25%" id="cityData">
                                <option value="">请选择</option>
                            </select>
                            <label class="col-sm-1" style="width: 7%;margin-top: 7px">市</label>
                            <label name="addBranch" class="col-sm-1" onclick="TGoodsInfoDlg.addBranch()" style="border: 0px;cursor: pointer;margin-top: 1%"><i class="fa fa-plus-circle"></i></label>
                        </div>
                        <div id="cityDemo"></div>
                    </div>

                </div>
            </div>

            <div class="row" id="storeSelect" hidden="hidden">
                <div class="form-group">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <label class="col-sm-3 control-label">*指定门店: </label>
                            <button onclick="storeList1()"
                                    style="height: 22px;width: 82px;background-color: #4a8ff1;color: white;z-index: 15;position:relative;border: none;margin-top: 1%">
                                选择门店
                            </button>
                        </div>
                        <div class="col-sm-12" style="margin-left: -57px;margin-top: 20px">
                            <table class="table table-bordered" style="width: 70%;margin-left: 228px;" id="storeTable">
                                <thead>
                                <tr>
                                    <td>所在省市</td>
                                    <td>所属账号</td>
                                    <td>门店名称</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody id="coun"></tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
            <div class="form-group" style="margin-left:262px">
                <label class="col-sm-1 control-label">兑换说明：</label>
                <div class="col-sm-5">
                    <textarea type="text/plain" id="editor"  style="height: 300px;width: 800px;"></textarea>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">排序：</label>
                <div class="col-sm-9">
                    <input class="form-control" id="sort" name="sort" type="number">

                </div>
            </div>
            </div>

            <div id="b2" hidden>

                <div class="form-group" id="provinceCode">
                    <label class="col-sm-3 control-label">所在省：</label>
                    <div class="col-sm-9">
                        <select class="form-control" id="pCode" name="pCode" onchange="TCarInfoDlg.oneChange(this)">
                            <option value="">选择省</option>
                            @for(obj in list){
                            <option value="${obj.code}">${obj.name}</option>
                            @}
                        </select>
                    </div>
                </div>
                <div class="form-group" id="cityCode">
                    <label class="col-sm-3 control-label">所在市：</label>
                    <div class="col-sm-9">
                        <select class="form-control" id="cCode" name="cCode">
                            <option value="">选择市</option>
                        </select>
                    </div>
                </div>

            </div>


        </div>
</div>

<div class="row btn-group-m-t">
    <div class="col-sm-10 col-sm-offset-5">
        <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="TGoodsInfoDlg.addSubmit1()"/>
        <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="TGoodsInfoDlg.close()"/>
    </div>
</div>
        </div>
    </div>
</div>
<script src="${ctxPath}/js/vue/vue.js"></script>
<script src="${ctxPath}/js/elementui/index.js"></script>
<link rel="stylesheet" href="${ctxPath}/js/elementui/index.css">
<script src="${ctxPath}/modular/system/tGoods/tGoods_info.js"></script>
<script src="${ctxPath}/modular/system/tGoods/TStoreInfo.js"></script>
<script>
    laydate.render({
        elem: '#startTime',
        range: true
    });
    function updateType(e) {
        if(e==2){
            $("#b1").hide()
            $("#b2").show()
        }else {
            $("#b2  ").hide()
            $("#b1").show()
        }
    }



    function changeCity(n){

        var provinceSelect = null;
        if (n === undefined || n === null || n === ''){
            provinceSelect = document.getElementById("provinceData");
        }else {
            provinceSelect = document.getElementById("provinceData"+n);
        }

        var citySelect = null;
        if (n === undefined || n === null || n === ''){
            citySelect = document.getElementById("cityData");
        }else {
            citySelect = document.getElementById("cityData"+n);
        }

        var selectedProvince = provinceSelect.value;
        // 清空城市下拉框
        citySelect.innerHTML = '<option value="">请选择</option>';
        if (selectedProvince === "") {
            return;
        }
        var ajax = new $ax(Feng.ctxPath + "/tCouponManage/getCity", function(data){
            data.forEach(province => {
                var option = document.createElement("option");
                option.value = province.id;  // 根据你的数据结构确定省份的id字段
                option.text = province.name;  // 根据你的数据结构确定省份的name字段
                citySelect.appendChild(option);
            });
        },function(data){
            console.log('data:',data)
            Feng.error("获取失败!" + data.responseJSON.message + "!");
        });
        ajax.set('province',selectedProvince);
        ajax.start();
    }

    /**
     * 全国通用
     */
    function scopeOfApplication1() {
        $("#storeSelect").hide();
        $("#citySelect").hide();
    }
    /**
     * 指定城市
     */
    function scopeOfApplication2() {
        $("#storeSelect").hide();
        $("#citySelect").show();
    }
    /**
     * 指定门店
     */
    function scopeOfApplication3() {
        $("#storeSelect").show();
        $("#citySelect").hide();
    }

    function updateMethod(e) {
        console.log(e)
        if(e==1){
            $("#y3").hide()
            $("#y4").show()
        }else if(e==2){
            $("#y4").show()
            $("#y3").show()
        }else if(e==3){
            $("#y1").hide()
            $("#y2").show()
        }else if(e==4){
            $("#y1").show()
            $("#y2").show()
        }else if(e==5) {
            $("#y2").hide()
            $("#y1").show()
        }

    }
    let i =1;
    function updateType(e) {

        if(e==2){
            $("#b1").hide()
            $("#b2").show()
            if(i==1){
                var drivingLicensePhoto = new $WebUpload("cover1");
                drivingLicensePhoto.setUploadBarId("progressBar");
                drivingLicensePhoto.init();
                i++;
            }
            $("#ticket").hide()
        }else {
            $("#b2").hide()
            $("#b1").show()
            $("#ticket").show()
        }
    }


    var vue2 = new Vue({
        el: '#app',
        data: {
            autoUpload: true,//自动上传
            imageUrl1: '',//模型数据，用于上传图片完成后图片预览
            dialogVisible: false
        },
        methods: {
            handleAvatarSuccess(res, file) {
                TGoodsInfoDlg.goodsPicArray.push(file);
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 10MB!');
                }
                return isLt2M;
            },
            handleRemove(file, fileList) {
                couponInfoDlg.goodsPicArray = couponInfoDlg.goodsPicArray.filter(item => {
                    return item.uid != file.uid;
                });
            },
        },
        created() {
        },
    });
</script>
@}