@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 id="s1" value="${item.redemptionMethod}" hidden>
        <input id="s2" value="${item.userPopulation}" hidden>
        <div class="form-horizontal" id="carInfoForm">
            <#label  id="types" name="商品类型" type="text" value="课包商品" />

            <div id="b2" >
                <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">
                            <option value="">${item.province}</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="">${item.city}</option>
                        </select>
                    </div>
                </div>

                <div class="form-group" >
                    <label class="col-sm-3 control-label">所属门店：</label>
                    <div class="col-sm-9">
                        <select class="form-control" id="storeId" name="storeId">
                            <option value="">${shopName}</option>
                        </select>
                    </div>
                </div>

                <div class="form-group" >
                    <label class="col-sm-3 control-label">课包类型：</label>
                    <div class="col-sm-9">
                        <select class="form-control" id="coursePackageTypeId" name="pCode" onchange="TGoodsInfoDlg.packageChange(this)">
                            <option value="">${typeName}</option>
                        </select>
                    </div>
                </div>

                <div class="form-group" >
                    <label class="col-sm-3 control-label">课包名称：</label>
                    <div class="col-sm-9">
                        <select class="form-control" id="coursePackageId" name="coursePackageId" onchange="TGoodsInfoDlg.timeChange(this)">
                            <option value="">${pageName}</option>
                        </select>
                    </div>
                </div>

                <div class="form-group" >
                    <label class="col-sm-3 control-label">课时数：</label>
                    <div class="col-sm-9">
                        <select class="form-control" id="coursePackageConfigId" name="coursePackageConfigId">
                            <option value="">${classHours}</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">原价：</label>
                    <div class="col-sm-9">
                        <input class="form-control" id="price1" name="price" type="text" value="${item.price}"  readonly>
                    </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" checked onclick="updateMethod(1)"> 积分
                        <input type="radio" name="redemptionMethod" value="2" onclick="updateMethod(2)"> 现金+积分
                    </div>
                </div>

                <div class="form-group" id="y3" hidden>
                    <label class="col-sm-3 control-label">所需现金：</label>
                    <div class="col-sm-9">
                        <input class="form-control" id="cash1" name="cash" type="text" value="${item.cash}">

                    </div>
                </div>
                <div class="form-group" id="y4">
                    <label class="col-sm-3 control-label">所需积分：</label>
                    <div class="col-sm-9">
                        <input class="form-control" id="integral1" name="integral" type="text" value="${item.integral}">

                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label head-scu-label">*商品图片:</label>
                    <div class="col-sm-4">
                        <img  height="100px" width="100px" src="${item.cover}">
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label head-scu-label">*商品图片:</label>
                    <div class="col-sm-4">
                        @for(im in pictures){
                        <img  height="100px" width="100px" src="${im}">
                        @}
                    </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="quantityIssued1" name="quantityIssued" type="text" value="${item.quantityIssued}" readonly>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">限领数量：</label>
                    <div class="col-sm-9">
                        <input class="form-control" id="pickUpQuantity1" name="pickUpQuantity" type="text" value="${item.pickUpQuantity}" readonly>
                    </div>
                </div>
                <#input id="startTime1" name="有效期" type="text" value="${sTime} - ${eTime}" readonly="true"/>

                <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="editor1"  style="height: 300px;width: 800px;" readonly>${item.redemptionInstructions}</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="sort1" name="sort" type="text" value="${item.sort}" readonly>

                    </div>
                </div>

            </div>


        </div>
</div>

<div class="row btn-group-m-t">
    <div class="col-sm-10 col-sm-offset-5">
        <#button btnCss="danger" name="关闭" id="cancel" icon="fa-eraser" clickFun="TGoodsInfoDlg.close()"/>
    </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
    });
    laydate.render({
        elem: '#startTime1',
        range: true
    });
    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++;
            }

        }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();
    }




    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() {
        },
    });
    var vue2 = new Vue({
        el: '#app1',
        data: {
            autoUpload: true,//自动上传
            imageUrl1: '',//模型数据，用于上传图片完成后图片预览
            dialogVisible: false
        },
        methods: {
            handleAvatarSuccess(res, file) {
                TGoodsInfoDlg.goodsPicArray1.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() {
        },
    });


    window.onload = function(){
        var OBJradio=document.getElementsByName("redemptionMethod")
        if(OBJradio==1){
            $("#y4").show()
            $("#y3").hide()
        }
        if(OBJradio==2){
            $("#y4").show()
            $("#y3").show()
        }
        for(i=0;i<OBJradio.length;i++){//循环查找这个radio
            if($("#s1").val()==OBJradio[i].value){//判断是否与radio的值相同
                OBJradio[i].checked=true//修改选中状态
            }
        }
        var OBJradio=document.getElementsByName("userPopulation")
        for(i=0;i<OBJradio.length;i++){//循环查找这个radio
            if($("#s2").val()==OBJradio[i].value){//判断是否与radio的值相同
                OBJradio[i].checked=true//修改选中状态
            }
        }
    }
</script>
@}