<?php $data = $this->data; ?>
<?= view("header.php",$data); ?>
    <?= view("devManage/aside.php",$data); ?>
    <div class="span9" id="content" style="width:100%;">
        <div style="width:100%;min-height:700px;">
            <div style="width:100%;height:200px;_background:pink;margin:auto;">
                <div style="margin:0px 10px;margin-top:10px;padding:0px 10px;_background:pink;_min-height:50px;">
                    <input class="input-xlarge focused" id="dev_id" type="text" value="<?php if(count($data["devInfo"]) != 0){echo $data["devInfo"]["id"];} ?>" placeholder="输入设备id" style="display:inline;margin: 0px;width:200px;">
                    <button class="btn btn-primary" onclick="showDevById()">查 看</button>
                    <?php if(count($data["devInfo"]) != 0){ ?>
                        <button class="btn btn-primary" onclick="editDevInfo(this)" status="0">编 辑</button>
                        <button class="btn btn-primary">提 交</button>

                        <form class="form-horizontal" style="display:inline;">
                            <div style="margin-bottom:0px;display:inline-block;border-style: solid;border-width: 1px;border-color: #ddd;border-radius: 5px;">
                                <label class="control-label" for="fileInput" style="width:110px;">上传设备图片：</label>
                                <div class="controls" style="margin-left: 120px;">
                                    <input class="input-file uniform_on" id="fileInput" type="file" _accept="image/*" accept="image/jpeg,image/jpg,image/png">
                                </div>
                            </div>
                        </form>
                        <button class="btn btn-primary" onclick="uploadFile()">上 传</button>
                    <?php } ?>
                </div>

                <div class="row-fluid" _style="margin:0px 10px;padding:0px 10px;">
                    <!-- block -->
                    <div class="block" style="margin:10px 20px;">
                        <div class="navbar navbar-inner block-header">
                            <div class="muted pull-left"> 设备详情 </div>
                        </div>
                        <?php if(count($data["devInfo"]) == 0){ ?>
                        <h2 style="text-align:center;">未查询到设备信息</h2>
                        <?php }else{ ?>
                        <div class="block-content collapse in">
                            <div class="span12">
                                <table class="table table-bordered">
                                    <tbody>
                                    <tr>
                                        <td>
                                            <label>设备id：</label>
                                            <input disabled class="input-xlarge focused" id="dev_id_show" type="text" value="<?= $data["devInfo"]["id"] ?>">
                                        </td>
                                        <td>
                                            <label>设备名：</label>
                                            <input disabled class="input-xlarge focused" id="dev_name_show" type="text" value="<?= $data["devInfo"]["dev_name"] ?>">
                                        </td>
                                        <td>
                                            <label>设备编号：</label>
                                            <input disabled class="input-xlarge focused" id="dev_code_show" type="text" value="<?= $data["devInfo"]["dev_code"] ?>">
                                        </td>
                                        <td>
                                            <label>设备品牌：</label>
                                            <input disabled class="input-xlarge focused" id="dev_brand_show" type="text" value="<?= $data["devInfo"]["dev_brand"] ?>">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>设备型号：</label>
                                            <input disabled class="input-xlarge focused" id="dev_model_show" type="text" value="<?= $data["devInfo"]["dev_model"] ?>">
                                        </td>
                                        <td>
                                            <label>设备系统：</label>
                                            <input disabled class="input-xlarge focused" id="dev_system_show" type="text" value="<?= $data["devInfo"]["dev_system"] ?>">
                                        </td>
                                        <td>
                                            <label>设备版本：</label>
                                            <input disabled class="input-xlarge focused" id="dev_version_show" type="text" value="<?= $data["devInfo"]["dev_version"] ?>">
                                        </td>
                                        <td>
                                            <label>设备颜色：</label>
                                            <input disabled class="input-xlarge focused" id="dev_color_show" type="text" value="<?= $data["devInfo"]["dev_color"] ?>">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>添加时间：</label>
                                            <input disabled class="input-xlarge focused" id="dev_add_time_show" type="text" value="<?= $data["devInfo"]["add_time"] ?>">
                                        </td>
                                        <td>
                                            <label>更新时间：</label>
                                            <input disabled class="input-xlarge focused" id="dev_update_time_show" type="text" value="<?= $data["devInfo"]["update_time"] ?>">
                                        </td>
                                        <td>
                                            <label>设备特征：</label>
                                            <input disabled class="input-xlarge focused" id="dev_feature_show" type="text" value="<?= $data["devInfo"]["dev_feature"] ?>">
                                        </td>
                                        <td>
                                            <label>第一分类：</label>
                                            <input disabled class="input-xlarge focused" id="dev_first_category_show" type="text" value="<?= $data["devInfo"]["first_category_id"] ?>">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>第二分类：</label>
                                            <input disabled class="input-xlarge focused" id="dev_second_category_show" type="text" value="<?= $data["devInfo"]["second_category_id"] ?>">
                                        </td>
                                        <td>
                                            <label>所属部门：</label>
                                            <input disabled class="input-xlarge focused" id="dev_org_section_show" type="text" value="<?= $data["devInfo"]["org_section_id"] ?>">
                                        </td>
                                        <td>
                                            <label>设备状态：</label>
                                            <input disabled class="input-xlarge focused" id="dev_status_show" type="text" value="<?= $data["devInfo"]["dev_status"] ?>">
                                        </td>
                                        <td>
                                            <label style="color:red;">签借人：</label>
                                            <input disabled class="input-xlarge focused" id="dev_borrower_show" type="text" value="">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>借出时间：</label>
                                            <input disabled class="input-xlarge focused" id="dev_borrow_time_show" type="text" value="">
                                        </td>
                                        <td>
                                            <label>归还时间：</label>
                                            <input disabled class="input-xlarge focused" id="dev_return_time_show" type="text" value="">
                                        </td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="4">
                                            <label>设备描述:</label>
                                            <textarea disabled style="width:99%;height:40px;margin-bottom:0px;" id="dev_detail_show"><?= $data["devInfo"]["dev_detail"] ?></textarea>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <?php } ?>
                    </div>
                    <!-- /block -->
                </div>

                <div style="margin: 5px 20px;padding: 0px 5px;min-height: 30px;border-style: solid;border-width: 1px;border-color: #ddd;border-radius: 5px;">
                    <h4>设备图片：</h4>
                    <div class="row-fluid padd-bottom">
                        <?php  for($i = 0;$i < count($data["devImg"]);$i++){ ?>
                        <div class="span3" onclick="showImg(this)">
                            <a href="#"><span img_id="<?= $data["devImg"][$i]["id"] ?>" class="badge badge-important pull-right" style="position: relative;left: 8px;padding: 1px 4px;z-index:100;margin-top:-5px;" onclick="deleteDevImg(this)">X</span></a>
                            <a href="#" class="thumbnail">
                            <img href="#showDevPicWindow" data-toggle="modal" src='<?= base_url()."/".IMG_ORI.$data["devImg"][$i]["img_ori"] ?>' style="_width: 260px; height: 180px;" >
                            </a>
                        </div>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 展示大图弹窗 -->
    <div id="showDevPicWindow" class="modal hide" style="width:60%;max-height:93%;transform: translateX(-50%);margin:0px;left:50%;top:4%;">
        <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button">&times;</button>
            <h3>图片详情</h3>
        </div>
        <div class="modal-body" style="height:auto;max-height:93%;">
            <div style="width:100%;text-align: center;">
                <img id="img_show" src='' style="_width: 260px; max-height: 600px;" >
            </div>
        </div>
    </div>

    <?= view("footer.php",$data); ?>


<style>
td {
    width: 25%;
}
tbody tr td label {
    width:22%;
    text-align:left;
    display:inline-block;
}
tbody tr td input {
    width:70% !important;
    text-align:left;
    display:inline !important;
    margin-bottom: 0px !important;

}
.span3 {
    width: 200px !important;
    margin-left: 10px !important;
}
</style>

<script>
/*****************************************************
*          上传设备图片
*****************************************************/
function uploadFile(){
    var formData = new FormData();
    var devId = $("#dev_id_show").val();
    formData.append("photo",$("#fileInput")[0].files[0]);
    formData.append("devId",devId);
    
    var host = window.location.host;
    var url = "http://" + host + "/devManageCtr/devImageUpload"

    $.ajax({
        url: url, 
        type:'post',
        async: false,       //使用同步请求，图片未上传完不可进行其他操做
        data: formData,
        contentType: false,
        processData: false,
        success:function(res){
            alert(res.message);
            location.reload();
            // $("#fileInput").val("");
        }
    });
}
/*****************************************************
*          删除设备图片
*****************************************************/
function deleteDevImg(e){
    var devId = $("#dev_id_show").val();
    var imgId = $(e).attr("img_id");
    var host = window.location.host;
    var url = "http://" + host + "/devManageCtr/deleleDevImg"
    var postData = {};
    postData["devId"] = devId;
    postData["imgId"] = imgId;
    var isSure = confirm("确定删除该设备?");
    if(isSure == true){
        $.ajax({
            url: url,
            data: JSON.stringify(postData),
            type: "DELETE",
            dataType: "json",
            contentType:"application/json",
            success: function(data) {
                if(data.status == "200"){
                    location.reload();
                }else{
                    
                }
            }
        });
    }
}

/*****************************************************
*          展示设备图片
*****************************************************/
function showImg(e){
    var imgUrl = $($($(e).children()[1]).children()[0]).attr("src");
    $("#img_show").attr("src","");
    $("#img_show").attr("src",imgUrl);
}

/*****************************************************
*          查看设备
*****************************************************/
function showDevById(){
    var devId = $("#dev_id").val();
    var host = window.location.host;
    var username = $.cookie('username');
    var token = $.cookie('token');
    if(username == undefined){
        username = "";
    }
    if(token == undefined){
        token = "";
    }
    window.location.href = "http://" + host + "/devManage/devDetail" + "?username=" + username + "&token=" + token + "&devId=" + devId;

}

/*****************************************************
*          编辑设备信息
*****************************************************/
function editDevInfo(e){
    var status = $(e).attr("status");
    if(status == "0"){
        $(e).attr("status","1");
        $(e).text("取 消");

        $("#dev_id_show").removeAttr("disabled");
        $("#dev_name_show").removeAttr("disabled");
        $("#dev_code_show").removeAttr("disabled");
        $("#dev_brand_show").removeAttr("disabled");
        $("#dev_model_show").removeAttr("disabled");
        $("#dev_system_show").removeAttr("disabled");
        $("#dev_version_show").removeAttr("disabled");
        $("#dev_color_show").removeAttr("disabled");
        // $("#dev_add_time_show").removeAttr("disabled");
        // $("#dev_update_time_show").removeAttr("disabled");
        $("#dev_feature_show").removeAttr("disabled");
        $("#dev_first_category_show").removeAttr("disabled");
        $("#dev_second_category_show").removeAttr("disabled");
        $("#dev_org_section_show").removeAttr("disabled");
        $("#dev_status_show").removeAttr("disabled");
        $("#dev_borrower_show").removeAttr("disabled");
        // $("#dev_borrow_time_show").removeAttr("disabled");
        // $("#dev_return_time_show").removeAttr("disabled");
        $("#dev_detail_show").removeAttr("disabled");
    }else{
        $(e).attr("status","0");
        $(e).text("编 辑");

        $("#dev_id_show").attr("disabled","disabled");
        $("#dev_name_show").attr("disabled","disabled");
        $("#dev_code_show").attr("disabled","disabled");
        $("#dev_brand_show").attr("disabled","disabled");
        $("#dev_model_show").attr("disabled","disabled");
        $("#dev_system_show").attr("disabled","disabled");
        $("#dev_version_show").attr("disabled","disabled");
        $("#dev_color_show").attr("disabled","disabled");
        // $("#dev_add_time_show").attr("disabled","disabled");
        // $("#dev_update_time_show").attr("disabled","disabled");
        $("#dev_feature_show").attr("disabled","disabled");
        $("#dev_first_category_show").attr("disabled","disabled");
        $("#dev_second_category_show").attr("disabled","disabled");
        $("#dev_org_section_show").attr("disabled");
        $("#dev_status_show").attr("disabled","disabled");
        $("#dev_borrower_show").attr("disabled","disabled");
        // $("#dev_borrow_time_show").attr("disabled","disabled");
        // $("#dev_return_time_show").attr("disabled","disabled");
        $("#dev_detail_show").attr("disabled","disabled");
    }
}

</script>
        
