@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;
        display: inline-block;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 110px;
        margin-top: 40px;
        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">
        <div class="form-horizontal" id="carInfoForm">
            <div id="b1">
                <#input id="name" name="*商品名称:" type="text" value="${item.name}" readonly="true" />

                <#input id="cover" name="*原价:" avatarImg="${item.price}" readonly="true" />
                <div class="form-group">
                    <label class="col-sm-3 control-label head-scu-label">*兑换方式:</label>
                    <div class="col-sm-4">
                        @if(exchangeMethod == 1){
                        <input class="col-sm-1 control-label" name="userGroup" type="radio"
                               value="1" checked style="margin-top: 10px" disabled/>
                        <label class="col-sm-1" style="margin-left: -15px;width: 16%;margin-top: 7px">全部用户</label>
                        <input class="col-sm-1 control-label" name="userGroup" type="radio"
                               value="2"  style="margin-left: 5%;margin-top: 10px;width: 13px;height: 13px" disabled/>
                        <label class="col-sm-1" style="width: 16%;margin-top: 7px">年度会员</label>
                        <input class="col-sm-1 control-label" name="userGroup" type="radio"
                               value="3"  style="margin-left: 4%;margin-top: 10px;width: 13px;height: 13px" disabled/>
                        <label class="col-sm-1" style="width: 18%;margin-top: 5px">已有学员用户</label>
                        @}

                        @if(exchangeMethod == 2){
                        <input class="col-sm-1 control-label" name="userGroup" type="radio"
                               value="1"  style="margin-top: 10px" disabled/>
                        <label class="col-sm-1" style="margin-left: -15px;width: 16%;margin-top: 7px">全部用户</label>
                        <input class="col-sm-1 control-label" name="userGroup" type="radio"
                               value="2"  checked style="margin-left: 5%;margin-top: 10px;width: 13px;height: 13px" disabled/>
                        <label class="col-sm-1" style="width: 16%;margin-top: 7px">年度会员</label>
                        <input class="col-sm-1 control-label" name="userGroup" type="radio"
                               value="3"  style="margin-left: 4%;margin-top: 10px;width: 13px;height: 13px" disabled/>
                        <label class="col-sm-1" style="width: 18%;margin-top: 5px">已有学员用户</label>
                        @}

                        @if(exchangeMethod == 3){
                        <input class="col-sm-1 control-label" name="userGroup" type="radio"
                               value="1"  style="margin-top: 10px" disabled/>
                        <label class="col-sm-1" style="margin-left: -15px;width: 16%;margin-top: 7px">全部用户</label>
                        <input class="col-sm-1 control-label" name="userGroup" type="radio"
                               value="2"  style="margin-left: 5%;margin-top: 10px;width: 13px;height: 13px" disabled/>
                        <label class="col-sm-1" style="width: 16%;margin-top: 7px">年度会员</label>
                        <input class="col-sm-1 control-label" name="userGroup" type="radio"
                               value="3" checked  style="margin-left: 4%;margin-top: 10px;width: 13px;height: 13px" disabled/>
                        <label class="col-sm-1" style="width: 18%;margin-top: 5px">已有学员用户</label>
                        @}

                    </div>
                </div>

                <#input id="cover" name="*所需现金:" avatarImg="${item.cash}" readonly="true" />
                <#input id="cover" name="*所需积分:" avatarImg="${item.integral}" readonly="true" />

                <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">
                        @if(pictures != null){
                        @for(im in pictures){
                            <img  height="100px" width="100px" src="${im}">
                        @}
                        @}
                    </div>
                </div>

                <#input id="quantityIssued" name="*用户人群:" type="text" value="${item.userPopulation}" readonly="true" />
                <#input id="quantityIssued" name="*发放数量:" type="text" value="${item.quantityIssued}" readonly="true" />
                <#input id="quantityIssued" name="*限领数量:" type="text" value="${item.pickUpQuantity}" readonly="true" />
                <#input id="quantityIssued" name="*已兑换数量:" type="text" value="${item.hasPicked}" readonly="true" />
                <#input id="quantityIssued" name="*有效期:" type="text" value="${item.validTime}" readonly="true" />

                <#input id="quantityIssued" name="*兑换地点:" type="text" value="${item.exchangeArea}" readonly="true" />

                @if(item.useScope == 3){
                <table class="table table-bordered" style="width: 70%;margin-left: 228px;" >
                    <thead>
                    <tr>
                        <td>所在省市</td>
                        <td>所属账号</td>
                        <td>门店名称</td>
                    </tr>
                    </thead>
                    @for(s in store){
                    <td>${s.num1}</td>
                    <td>${s.num2}</td>
                    <td>${s.num3}</td>
                    @}
                </table>
                @}

                @if(item.useScope == 2){
                <table class="table table-bordered" style="width: 70%;margin-left: 228px;" >
                    <thead>
                    <tr>
                        <td>所在省</td>
                        <td>所在市</td>
                    </tr>
                    </thead>
                    @for(c in city){
                    <tr>
                    <td>${c.num1}</td>
                    <td>${c.num2}</td>
                    </tr>
                    @}
                </table>
                @}
                <div class="form-group" style="margin-left:262px">
                    <label class="col-sm-3 control-label">兑换说明：</label>
                    <div class="col-sm-4">
                        <textarea type="text/plain" id="editor"  style="height: 300px;width: 800px;" readonly>${item.redemptionInstructions}</textarea>
                    </div>
                </div>
                <#input id="quantityIssued" name="*排序:" type="text" value="${item.sort}" readonly="true" />

            </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>

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