<?php

namespace App\Presenters;


class ImageUploadPresenter
{
    public function render($name, $text, $value = null, $option = [])
    {
        $isRequired = array_get($option, 'required', false);
        $requiredHtml = $isRequired ? '<span style="color: red">*</span>' : "";
        $uploadUrl = config('website.UploadUrl');
        $value = !empty(trim($value)) ? $value : "[]";
        $Autograph = Autograph();
        return <<<EOF
                   <label class="layui-form-label">
                    $requiredHtml
                    $text
                   </label>
                    <div class="layui-input-inline" style="width: 700px">
                    <input type="hidden" id="$name" name="$name" value='$value'>
                    <input id="uploadContainer" type="file" multiple name="upload">
                   </div>
                   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                   <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.4/css/fileinput.min.css" rel="stylesheet">
                   <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.4/js/fileinput.min.js"></script>
                   <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.1.4/js/locales/zh.min.js"></script>
                   <script>
                       $Autograph
                       let element = $("#uploadContainer");
                       let arr = $("#$name").val()?JSON.parse($("#$name").val()):[];
                       element.fileinput({
                            uploadUrl : "$uploadUrl",//上传图片的url
                            allowedFileExtensions : [ 'jpg', 'png','jepg','jpeg' ],
                            overwriteInitial : false,
                            uploadAsync:true,
                            showRemove:false,
                            showUpload:false,
                            initialPreviewShowPreview:false,
                            language:'zh',
                            maxFileSize : 5000,
                            maxFileCount: 5,
                            initialCaption: "请上传$text",
                            initialPreview: $value,
                            initialPreviewAsData: true,
                            uploadExtraData:function(){
	                           let data = {
                                   k1:k1,
                                   k2:k2,
                                   source:1
		                  	   }
	                          	return data;
	                          }
                            }).on("filebatchselected", function(event, files) {
                                element.fileinput('upload');
                            }).on('fileuploaded', function(event, data, previewId, index) {
                              let response = data.response
                              arr.push(response.data.shift())
                              $("#$name").val(JSON.stringify(arr))
                            });
                      
                    </script>
EOF;
    }
}