<?php

use yii\helpers\Url;
use domain\upgrade\UpgradeStatus;

$this->title = '上传版本';
$this->params['breadcrumbs'][] = ['label' => '版本管理', 'url' => ['/upgrade/upgrade/index', "type" => (isset($info["type"]) ? $info["type"] : UpgradeStatus::TYPE_APP)]];
$this->params['breadcrumbs'][] =  $this->title;

?>
<style>
    #upload-container, #upload-list{width: 500px; margin: 0 auto; }
    #upload-container{cursor: pointer; border-radius: 15px; background: #EEEFFF; height: 200px;}
    #upload-list{height: 100px; border: 1px solid #EEE; border-radius: 5px; margin-top: 10px; padding: 10px 20px;}
    #upload-container>span{widows: 100%; text-align: center; color: gray; display: block; padding-top: 15%;}
    .upload-item{margin-top: 5px; padding-bottom: 5px; border-bottom: 1px dashed gray;}
    .percentage{height: 5px; background: green;}
    .btn-delete, .btn-retry{cursor: pointer; color: gray;}
    .btn-delete:hover{color: orange;}
    .btn-retry:hover{color: green;}
    .webuploader-pick {
        padding: 6px 15px!important;
        margin-right: 20px;
    }
    .combo-select{max-width: 100% !important;}
</style>
<link rel="stylesheet" type="text/css" href="<?= Yii::$app->request->baseUrl . "/exts/combo-select/css/combo.select.css"?>" />
<form action="<?php echo Url::toRoute(['/upgrade/upgrade/do-edit']); ?>" name="myFrom" id="myFrom" method="post" enctype="multipart/form-data">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group col-sm-12" style="text-align: center">
                <?php if (isset($info["type"]) && $info["type"] == UpgradeStatus::TYPE_OTA) { ?>
                    <h3>编辑OTA版本</h3>
                <?php } else { ?>
                    <h3>编辑APP版本</h3>
                <?php } ?>
            </div>
            <div class="form-group col-sm-12">
                <label for="skillName" class="col-sm-4 control-label text-right"><span style="color: #ff0000;">*</span>
                    <?php if (isset($info["type"]) && $info["type"] == UpgradeStatus::TYPE_OTA) { ?>
                        OTA版本号
                    <?php } else { ?>
                        APP版本号
                    <?php } ?>：</label>
                <div class="col-sm-4 text-left">
                    <input type="text" value="<?= (isset($info["version"]) ? $info["version"] : "") ?>" name="version" placeholder="请填写APP版本号" style="margin-top: -6px;" class="form-control"">
                </div>
            </div>
            <div class="form-group col-sm-12">
                <label for="skillName" class="col-sm-4 control-label text-right"><span style="color: #ff0000;">*</span>安装包名称：</label>
                <div class="col-sm-4 text-left">
                    <input type="text" value="<?= (isset($info["package_name"]) ? $info["package_name"] : "") ?>" name="package_name" placeholder="请填写安装包名称" style="margin-top: -6px;" class="form-control"">
                </div>
            </div>
            <div class="form-group col-sm-12">
                <label for="skillName" class="col-sm-4 control-label text-right"><span style="color: #ff0000;">*</span>选择厂商：</label>
                <div class="col-sm-4 text-left">
                    <select name="manufacture_id" class="form-control" id ="manufacture"></select>
                </div>
            </div>
            <div class="form-group col-sm-12">
                <label class="col-sm-4 control-label text-right"><span style="color: #ff0000;">*</span>选择项目：</label>
                <div class="col-sm-4 text-left">
                    <select name="project_id" class="form-control"  id ="project"></select>
                </div>
            </div>
            <div class="form-group col-sm-12">
                <label class="col-sm-4 control-label text-right"><span style="color: #ff0000;">*</span>选择型号：</label>
                <div class="col-sm-4 text-left">
                    <select name="model_id" class="form-control" id ="model"></select>
                </div>
            </div>
            <div class="form-group col-sm-12">
                <label class="col-sm-4 control-label text-right">描述：</label>
                <div class="col-sm-4 text-left">
                    <textarea name="desc" class="form-control" id ="desc"><?=$info['desc']?></textarea>
                </div>
            </div>
            <div class="form-group col-sm-12">
                <label for="package" class="col-sm-4 control-label text-right"><span style="color: #ff0000;">*</span>上传安装包：</label>
                <input type="hidden" id="type" name="type" value="<?= (isset($info["type"]) ? $info["type"] : UpgradeStatus::TYPE_APP) ?>"/>
                <input type="hidden" id="uid" name="uid" value="<?= (isset($info["id"]) ? $info["id"] : (isset($info["uid"]) ? $info["uid"] : "")) ?>"/>
                <input type="hidden" id="path" name="path" value="<?= (isset($info["path"]) ? $info["path"] : "") ?>"/>
                <input type="hidden" id="upload_path" name="upload_path" value="<?= (isset($info["upload_path"]) ? $info["upload_path"] : "") ?>"/>
                <input type="hidden" id="size" name="size" value="<?= (isset($info["size"]) ? $info["size"] : "") ?>"/>
                <input type="hidden" id="file_md5" name="file_md5" value="<?= (isset($info["file_md5"]) ? $info["file_md5"] : "") ?>"/>
                <input type="hidden" id="oldName" name="oldName" value="<?= (isset($info["oldName"]) ? $info["oldName"] : "") ?>"/>
                <div class="col-sm-4 text-left">
                    <!--<div class="form-control text-center" id="btn-upload">选择文件</div>-->
                    <div class="demo">
                        <div id="uploadfile">
                            <!--用来存放文件信息-->
                            <div id="the_2655" class="uploader-list">
                                <?php if(isset($info["oldName"]) && !empty($info["oldName"])) { ?>
                                    <div id="WU_FILE_1" class="item">
                                        <h4 class="info"><?= (isset($info["oldName"]) ? $info["oldName"] : "") ?></h4>
                                        <p class="state">已上传</p>
                                    </div>
                                <?php } ?>
                            </div>
                            <div class="form-group form-inline">
                                <div id="pick_2655" style="float:left">选择文件</div>
                                <span id="Btn_2655" class="btn btn-default" style="padding: 5px 10px;border-radius: 3px;">开始上传</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel-footer text-center">
            <button type="button" class="btn btn-primary ladda-button" data-style="slide-up" id="save">确认上传</button>
        </div>
    </div>

</form>
<script src="<?= Yii::$app->request->baseUrl . "/exts/combo-select/js/jquery.combo.select.js"?>"></script>
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="<?=Yii::$app->request->baseUrl ?>/exts/webuploader-0.1.5/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="<?=Yii::$app->request->baseUrl ?>/exts/webuploader-0.1.5/webuploader.js"></script>

<script>
    var searchItemUrl = "<?=Url::toRoute('/device/device/batch-item')?>";
    var checkUpgradeUrl = "<?=Url::toRoute('/upgrade/upgrade/check-upgrade')?>";
    // 表单提交验证
    seajs.use("base/1.0.0/unit/validate/custom-1.0.0",function  () {
        var validator = $("#myFrom").validate({
            //debug:true,
            rules: {
            }
        });
    });
    var manufacture_id = '<?=$info["manufacture_id"]?>';
    var project_id = '<?=$info["project_id"]?>';
    var model_id = '<?=$info["model_id"]?>';
    $("#save").bind("click", function () {
        var getUrl = '<?=Url::toRoute("/upgrade/upgrade/do-edit")?>';
        $('#myFrom').attr('action', getUrl);
        var a = $("input[name='version']").val();
        if (a == ""){
            alert("APP版本号不能为空");
            return false;
        }
        var manufacture_id = $("#manufacture").val();
        var project_id = $("#project").val();
        var model_id = $("#model").val();

        if (manufacture_id == ""){
            alert("请选择厂商");
            return false;
        }
        if (project_id == ""){
            alert("请选择项目");
            return false;
        }
        if (model_id == ""){
            alert("请选择型号");
            return false;
        }

        var cb = $("#myFrom").validate().form();
        if (!cb){
            return;
        }
        var submit = $('#myFrom').submit();
        var l = $.ladda(this);
        l.start();
        return false;
    });


    //上传文件函数
    //ids唯一ID
    //folder文件保存目录
    function uploadfiles(ids, folder) {
        $(function(){
            var $list = $("#the_"+ids);
            $btn = $("#Btn_"+ids);
            var uploader = WebUploader.create({
                resize: false, // 不压缩文件
                swf: '<?=Yii::$app->request->baseUrl ?>/exts/webuploader-0.1.5/Uploader.swf', // swf文件路径
                server: '<?=Url::toRoute("/upgrade/upgrade/upload-file")?>', // 文件接收服务端。
                pick: "#pick_"+ids, // 选择文件的按钮。可选
                chunked: true, //是否要分片处理大文件上传
                chunkSize: 2*1024*1024, //分片上传，每片2M，默认是5M
                fileSizeLimit: 6*1024* 1024 * 1024,    // 所有文件总大小限制 6G
                fileSingleSizeLimit: 5 * 1024 * 1024 * 1024,    // 单个文件大小限制 5 G
                formData: {
                    folder:folder  //自定义参数
                }
                //auto: false //选择文件后是否自动上传
                // chunkRetry : 2, //如果某个分片由于网络问题出错，允许自动重传次数
                //runtimeOrder: 'html5,flash',
                // accept: {
                //   title: 'Images',
                //   extensions: 'gif,jpg,jpeg,bmp,png',
                //   mimeTypes: 'image/*'
                // }
            });
            // 当有文件被添加进队列的时候
            uploader.on( 'fileQueued', function( file ) {
                /*$list.append( '<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>' );*/
                $list.html( '<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>' );
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                    $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo( $li ).find('.progress-bar');
                }

                $li.find('p.state').text('上传中');

                $percent.css( 'width', percentage * 100 + '%' );
            });
            // 文件上传成功
            uploader.on( 'uploadSuccess', function( file,response) {
                $( '#'+file.id ).find('p.state').text('已上传');
                //$list.append('<input type="hidden" name="'+ids+'" value="'+response.filePath+'" />');
                $("input[name='path']").val(response.filePath);
                $("input[name='upload_path']").val(response.uploadPath);
                $("input[name='size']").val(response.fileSize);
                $("input[name='file_md5']").val(response.file_md5);
                $("input[name='oldName']").val(response.oldName);
            });

            // 文件上传失败，显示上传出错
            uploader.on( 'uploadError', function( file ) {
                $("input[name='path']").val("");
                $("input[name='size']").val("");
                $("input[name='upload_path']").val("");
                $("input[name='file_md5']").val("");
                $("input[name='oldName']").val("");
                $( '#'+file.id ).find('p.state').text('上传出错');
            });
            // 完成上传完
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
            });

            $btn.on('click', function () {
                var that = $(this);
                var manufacture = $('#manufacture').val();
                var project = $('#project').val();
                var model = $('#model').val();
                var type = $('#type').val();
                $.post(checkUpgradeUrl, {manufacture:manufacture, project:project,model:model, id: $('#uid').val(), 'type':type}, function(res){
                    if (res.success) {
                        if (that.hasClass('disabled')) {
                            return false;
                        }
                        uploader.upload();
                    } else {
                        alert(res.message);
                        return false;
                    }
                }, 'json')

                return false;
                // if (state === 'ready') {
                //     uploader.upload();
                // } else if (state === 'paused') {
                //     uploader.upload();
                // } else if (state === 'uploading') {
                //     uploader.stop();
                // }
            });
        });
    }

    uploadfiles(2655,"files");

    $(function(){
        function selectAll(id, selectId) {
            $.post(searchItemUrl, {type:id}, function(res) {
                if(res.list.length > 0) {
                    var wrapper = '<option value="">请选择</option>';
                    $.each(res.list, function(i,n){
                        var selected = '';
                        if (selectId == n.id) {
                            selected = 'selected';
                        }
                        wrapper = wrapper + '<option value="'+ n.id+'" '+selected+'>'+ n.name+'</option>';
                    })
                    $('#'+id).html(wrapper);
                    $('#'+id).comboSelect();
                }

            }, 'json')

        }
        selectAll('manufacture', manufacture_id);
        selectAll('project', project_id);
        selectAll('model', model_id);
    })
</script>