@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: 32px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

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

    .col-sm-12 select {
        height: 33px;
    }
</style>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=77b37f0753049c4e712ea79a24e0719c"></script>
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal" id="carInfoForm">
            <div class="form-group" >
                <input hidden id="id" value="${id}">
                <input hidden id="type" value="${data.type}">
                <label class="col-sm-3 control-label">*运营商名称：</label>
                <div class="col-sm-9" style="display: flex;">
                    <input style="width: 300px" class="form-control" id="name" value="${data.name}"  placeholder="请输入运营商名称" type="text">
                </div>
            </div>
            <div class="form-group" >
                <label class="col-sm-3 control-label">*管理员姓名：</label>
                <div class="col-sm-9" style="display: flex;">
                    <input style="width: 300px" class="form-control" id="userName" value="${userName}"  placeholder="请输入管理员姓名" type="text">
                </div>
            </div>
            <div class="form-group" >
                <label class="col-sm-3 control-label">*管理员手机号：</label>
                <div class="col-sm-9" style="display: flex;">
                    <input style="width: 300px" class="form-control" id="phone" value="${phone}"  placeholder="请输入管理员手机号" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">*管理区域：</label>
                <div class="col-sm-2"  style="display: flex;align-items: center;">
                    <div class="radio radio-info radio-inline">
                        <input type="radio" id="areaType1" value="1" name="areaType"  onclick="TSite.areaTypeClick(1)">
                        <label for="areaType1"> 全国 </label>
                    </div>
                    <div class="radio radio-success radio-inline">
                        <input type="radio" id="areaType2" value="2" name="areaType" checked="" onclick="TSite.areaTypeClick(2)">
                        <label for="areaType2"> 指定地区 </label>
                    </div>
                </div>
                <div class="col-sm-2">
                    <#button btnCss="info" name="添加" id="ensure" icon="fa-check" clickFun="TSite.addArea()"/>
                </div>
            </div>
            <div class="form-group" id="areaType1Div">
                <label class="col-sm-3 control-label">*管理地区：</label>
                <div class="col-sm-3">
                    <select class="form-control" id="pCode" onchange="TSite.oneChange(this)">
                        <option value="">选择省</option>
                        @for(obj in provinceList){
                        <option value="${obj.code}">${obj.name}</option>
                        @}
                    </select>
                </div>
                <div class="col-sm-3">
                    <select class="form-control" id="cCode" >
                        <option value="">选择市</option>
                    </select>
                </div>
            </div>
            <div class="form-group" id = "data">
                <label class="col-sm-3 control-label">已添加管理地区</label>
                <div class="col-sm-6">
                    <div style="height: 200px; border: 1px solid #e5e6e7;overflow-y: auto;">
                        <table class="table table-striped table-bordered table-hover table-condensed">
                            <thead>
                            <tr>
                                <th style="width: 300px;text-align: center;">所在省</th>
                                <th style="width: 300px;text-align: center;">所在市</th>
                                <th style="width: 100px;text-align: center;">操作</th>
                            </tr>
                            </thead>
                            <tbody id="areaValue">
                                @for(obj in list){
                                <tr class="areaValueClass">
                                    <td style="text-align: center;"><input type="hidden" id="provinceCode" name="provinceName" value="${obj.provinceCode}">
                                        <input type="hidden" id="provinceName" name="provinceCode" value="${obj.province}">${obj.province}</td>
                                    <td style="text-align: center;"><input type="hidden" id="cityCode" name="cityName" value="${obj.cityCode}">
                                        <input type="hidden" id="cityName" name="cityCode" value="${obj.city}">${obj.city}</td>
                                    <td style="text-align: center;"><button onclick="deleteSub(this)">移除</button></td>
                                </tr>
                                @}
                            </tbody>
                        </table>
                    </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="TSite.updateSubmit()"/>
                    <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="TSite.close()"/>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script src="${ctxPath}/modular/system/operator/operator_add.js"></script>
<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>
    window.onload = function(){
        var OBJradio = document.querySelectorAll('input[type="radio"]');
        console.log("看看集合")
        console.log(OBJradio)
        for(i=0;i<OBJradio.length;i++){//循环查找这个radio
            if($("#type").val()==OBJradio[i].value){//判断是否与radio的值相同
                OBJradio[i].checked=true//修改选中状态
            }
        }
        if ($("#type").val()==1){
            $("#areaType1Div").hide();
            $("#areaType2Div").hide();
            $("#data").hide();
            $("#ensure").hide();
        }
    }
</script>
@}