<style>
    .picPreviewBoxM_new{
        overflow: visible;
    }
    .picPreviewBoxM_new .funMtext .input_r{
        margin:5px 3px 0;
    }
    .picPreviewBoxM_new .funMtext .delBtn{
        margin:5px 3px 0;
    }
    .picPreviewBoxM_new .inputBoxM{
        padding-top: 10px;
        position: relative;
    }
    .picPreviewBoxM_new .inputBoxM .cha_new{
        position: absolute;right: 6px;bottom: 10px;
        display: block;width: 8px;height: 7px;background: url("close_1.png");
        cursor: pointer;
    }

    .picPreviewBoxM_new .inputBoxM .input_text{
        color: #000;
    }

    .picPreviewBox_new
    {
        overflow: visible;
    }

    .listImitate_new .inner{
        width: 134px;
    }
    .listImitate_new .link{
        width: 126px;
    }

    .labelImitate_new{
        width: 110px;
    }
    .labelImitate_new .newred{
        color: #ff0000;
    }

    .imitateSelect_new .imitateIe {
        width: 121px;
        border-color: #e0e0e0;
    }
    .imitateSelect_new .inputHover{
        border-color: #d9d9d9;
    }

    .mt10{
        margin-top: 10px;
    }

    input::-ms-clear{display:none;}

</style>

<dd class="list_item clearfix">
    <div class="addPicBox radius3">
        <div class="addPicLeft">全景图</div>
        <div class="addPicRight pre">
            <div style="width: 89px;" id="spanButtonPlaceholder360" class="addBtn radius5">
                <span>从电脑选择图片</span>
            </div>

            <div class="addBtn radius5 ">
                <span class="yz-ewmp" id="panoramaImageWeiXinButton" lastTime=<?php //echo $wechatPanoramaData['last_time']; ?> wechatCacheKey=<?php //echo $wechatPanoramaData['wechat_cache_key']; ?> imageUploadType="panorama" imageLimitNum=15 wechatImageSrc="<?php //echo $wechatPanoramaData['wechat_image'];?>">微信传图</span>
            </div>

            <div id="panoramaImageWeiXinHtml" class="yz-ewm cf" style="display:none;">

                <!--二维码未过期-->
                <div id="panoramaImageWeiXinEwmValid" class="fl yz-ewmi">
                    <img id="panoramaWechatImage" src="" />
                </div>

                <!--二维码过期-->
                <div id="panoramaImageWeiXinEwmExpiration" class="fl yz-ewmw" style="display: none;">
                    <p>二维码已过期</p>
                    <p><a id="panoramaWeicodeRefresh" class="JsweicodeRefresh">点此刷新</a></p>
                </div>

                <div class="fr pre yz-ewmr">
                    <span class="yz-close" id="panoramaImageWeiXinClose">X</span>
                    <p class="yz-ewmt">微信扫描二维码</p>
                    <p>关注后直接上传手机中的<strong style="color:red; font-weight: 700;">全景图</strong></p>
                </div>

            </div>

            <p class="text">
                须为<font color=red>全景相机</font>拍摄，室内全景图（非重复）不低于<span class="number">3</span>张，否则按违规处理，最多上传<span class="number">15</span>张。
            </p>
        </div>
    </div>
</dd>

<dd class="list_item clearfix" id="imageInfo" style="<?php echo !empty($houseRelation360PicData) ? '' : 'display:none';?>">
    <div class="picPreviewBox radius3 picPreviewBox_new" >
        <p class="title">您选择的图片</p>
        <div id="showImage" class="picPreviewBoxM clearfix ui-sortable picPreviewBoxM_new">
            <?php
            $imageNum = 0;
            if(!empty($houseRelation360PicData))
            {
                foreach($houseRelation360PicData as $key => $item)
                {
                    ?>
                    <div class="mItem" id="image_<?php echo $item['id'];?>" imageNum="<?php echo $item['id'];?>">
                        <div class="mItemInner">
                            <div class="mPic">
                                <img width="130" height="100" alt="" src="<?php echo $item['filename'];?>" style="opacity: 1;">
                                <input type="hidden" name="imageUrl[<?php echo $item['id'];?>]" value="<?php echo $item['filename'];?>">
                                <!--<input type="hidden" name="p_sort[]" value="0" class="psort">-->
                                <div class="funM" style="opacity: 0.6;">
                                    <div class="funMtext" style="opacity: 1;">
                                        <label>
                                            <a title="查看大图" imageNum="<?php echo $item['id'];?>" href="javascript:void(0);" target="_balnk" style="bottom:84px;" class="bigPicLin bigPicLinpanorama"></a>
                                            <input id='picPreview_<?php echo $item['id'];?>' type="radio" class="input_r Js_defaultPic" name="jsPicPreviewList" value="<?php echo $item['filename'];?>" <?php if(!empty($house_detail['pic1']) && $house_detail['pic1'] == $item['filename']){ echo "checked";} ?>>封面
                                        </label>
                                        <div class="delBtn delImage" imageNum="<?php echo $item['id'];?>" title="删除"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="imitateSelect imitateSelect_new imageSelect mt10">
                            <label class="labelImitate labelImitate_new" style="display:none;">
                                <i class="newred">*</i>选择全景图分类
                            </label>
                            <input type="text" class="imitate imitateIe" id="forward_<?php echo $item['id'];?>" readonly="" value="<?php echo isset($newImageType[$item['roomtype']]) ? $newImageType[$item['roomtype']] : '';?>">

                            <input type="hidden" id="imageType_<?php echo $item['id'];?>" name="imageType[<?php echo $item['id'];?>]" value="<?php echo $item['roomtype'];?>">

                            <div class="listImitate listImitate_new" style="display: none;">
                                <dl class="inner">
                                    <?php foreach($newImageType as $_key => $value){ ?>
                                        <dd>
                                            <a imageNum='<?php echo $item['id'];?>' class="link imageType" oid="<?php echo $_key;?>" href="#"><?php echo $value;?></a>
                                        </dd>
                                    <?php }?>
                                </dl>
                            </div>
                        </div>
                        <div class="inputBoxM jsNameInput nameInput ">
                            <input type="text" name="imageTitle[<?php echo $item['id'];?>]" value="<?php echo $item['title'];?>" placeholder="图片描述10字" class="newaddTxt jsInputCount input_text w126" onclick="this.className='newaddTxt jsInputCount input_text w126 input_text_on'" onblur="this.className='newaddTxt jsInputCount input_text w126'" >
                            <span class="cha_new" style="display: none"></span>
                        </div>
                    </div>
                    <?php $imageNum = $item['id'];}}?>
        </div>
    </div>
</dd>

<script>

    //360全景传图方法
    var get_panorama_wechat_info;

    //
    var imageNum = <?php echo $imageNum;?>;

    //360全景上传图片数据集
    var imageArr = [];

    //
    var imageType = <?php echo json_encode($imageType);?>;
    var pic_from_sell = 0;
    const uploadImgLimit = 15; //最大上传数量

    function uploads_zsb_360(id,key) {
        console.log(id);
        var uploader = new plupload.Uploader({
            browse_button: id, //触发文件选择对话框的按钮，为那个元素id
            //url: '/pic/house?pic_from_sell='+pic_from_sell, //服务器端的上传页面地址
            url:'http://newrent.house365.com/ajax-action/upload-file',
            flash_swf_url: '/source/common/js/plupload-2.3.6/js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
            silverlight_xap_url: '/source/common/js/plupload-2.3.6/js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
            multi_selection: true,
            filters: {
                mime_types: [ //只允许上传图片和zip文件
                    {title: "images", extensions: "jpg,jpeg,png"},
                ],
                max_file_size:'5M'
            },
            file_data_name:'file_name',
            resize:{
                quality:70
            }
        });

        //在实例对象上调用init()方法进行初始化
        uploader.init();

        uploader.bind('BeforeUpload',function (uploader,file) {
            let uploadImgLength = $("#showImage").find('img').length; //已经存在的全景图数量
            if(uploadImgLength >= uploadImgLimit){
                alert('全景图上传最多'+uploadImgLimit+'张');
                uploader.stop();
                uploader.removeFile(file)
                return;
            }

        });

        //绑定各种事件，并在事件监听函数中做你想做的事
        uploader.bind('FilesAdded', function (uploader, files) {
            //每个事件监听函数都会传入一些很有用的参数，
            //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
            uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
        });
        uploader.bind('UploadProgress', function (uploader, file) {
            //每个事件监听函数都会传入一些很有用的参数，
            //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
        });

        uploader.bind('FileUploaded', function (uploader, files, result) {
            var response = JSON.parse(result.response);
            var status = response.status;
            if(status != 'success'){
                alert('图片上传失败:'+ response.msg);
                return false;
            }

            var imgurl = response.pic_url;
            if(imgurl == '1'){
                if(pic_from_sell==1){
                    alert('图片的宽不可小于700像素，高不可小于500像素');
                }else{
                    alert('图片的宽不可小于322像素，高不可小于200像素');
                }
                return false;
            }
            uploadSuccessEvent(imgurl)
        });

        uploader.bind('Error',function (uploader,errObject) {
            if(errObject.code == '-600'){
                alert('图片过大，不能超过5M');
                return false;
            }else if(errObject.code == plupload.FILE_EXTENSION_ERROR){
                alert("文件格式不是图片，上传失败");
                return false;
            }else{
                alert('上传失败');
                return false;
            }
        })

    }
    //上传成功处理事件
    function uploadSuccessEvent(src) {
        imageNum++;

        imageArr['image_'+imageNum] = src;

        //租售宝360全景图片HTML结构
        var html = '';
        html += '<div class="mItem" id="image_'+imageNum+'" imageNum="'+imageNum+'">';
        html += 	'<div class="mItemInner">';
        html +=			'<div class="mPic">';
        html +=				'<img width="130" height="100" alt="" src="'+src+'" style="opacity: 1;">';

        html +=				'<input type="hidden" name="imageUrl['+imageNum+']" value="'+src+'">';

        //html +=             '<input type="hidden" name="p_sort[]" value="0" class="psort">';
        html +=				'<div class="funM" style="opacity: 0.6;"></div>';
        html +=				'<div class="funMtext" style="opacity: 1;">';
        html +=					'<label>';
        html +=					    '<a imageNum='+imageNum+' title="查看大图" href="javascript:void(0);" target="_balnk" style="bottom:84px;" class="bigPicLin bigPicLinpanorama"></a>';

        html +=						'<input type="radio" class="input_r Js_defaultPic" name="jsPicPreviewList" id="picPreview_'+imageNum+'" value="'+src+'">封面';

        html +=					'</label>';
        html +=					'<div class="delBtn delImage" imageNum="'+imageNum+'" title="删除"></div>';
        html +=				'</div>';
        html +=			'</div>';
        html +=		'</div>';
        html +=		'<div class="imitateSelect imitateSelect_new imageSelect mt10">';
        html +=			'<label class="labelImitate labelImitate_new" style="display: inline;">';
        html +=				'<i class="newred">*</i>选择全景图分类';
        html +=			'</label>';
        html +=			'<input type="text" class="imitate imitateIe" id="forward_'+imageNum+'" readonly="" value="" name="forwards">';
        html +=			'<input type="hidden" id="imageType_'+imageNum+'" name="imageType['+imageNum+']" value="">';
        html +=			'<div class="listImitate listImitate_new" style="display: none;">';
        html +=				'<dl class="inner">';
        for(var key in imageType)
        {
            html +=						'<dd>';
            html +=							'<a imageNum='+imageNum+' class="link imageType" oid="'+key+'" href="#">'+imageType[key]+'</a>';
            html +=						'</dd>';
        }
        html +=				'</dl>';
        html +=			'</div>';
        html +=		'</div>';
        html +=		'<div class="inputBoxM jsNameInput nameInput ">';

        html +=			'<input type="text" name="imageTitle['+imageNum+']" placeholder="图片描述10字" class="newaddTxt jsInputCount input_text w126" onclick="this.className=\'newaddTxt jsInputCount input_text w126 input_text_on\'" onblur="this.className=\'newaddTxt jsInputCount input_text w126\'" >';

        html +=			'<span class="cha_new" style="display: none"></span>';
        html +=		'</div>';
        html +=	  '</div>';

        $('#showImage').append(html);
        $('#imageInfo').show();
    }
    $(function(){
        <?php if(!empty($houseRelation360PicData)){ foreach($houseRelation360PicData as $key => $item){ ?>
        imageArr["image_"+<?php echo $item['id'];?>] = "<?php echo $item['filename'];?>";
        <?php }}?>

        var ids<?=$key?>;
        uploads_zsb_360("spanButtonPlaceholder360","<?=$key?>");



        $('.imageSelect').live('click',function(){
            $(this).find(".imitate").focus().addClass("inputHover");
            $(this).find(".listImitate").show();
        }).hover(function(){
            $(this).addClass("imitateSelect2");
            $(this).find(".imitate").addClass("inputHover");
        },function(){
            $(this).removeClass("imitateSelect2");
            $(this).find(".imitate").removeClass("inputHover").end().find(".listImitate").hide();
        });

        //删除全景图片
        $('.delImage').live('click',function(){
            var imageNum = $(this).attr('imageNum');

            //当前封面图片
            var picPreview = $('#pic1').val();

            //当前选中的图片
            var currentPicPreview = $('#picPreview_'+imageNum).val();

            //清空当前封面图
            if(picPreview == currentPicPreview)
            {
                $('#pic1').val('');
            }

            //删除选择的图片
            $('#image_'+imageNum).remove();

            if(typeof imageArr['image_'+imageNum] != 'undefined')
            {
                //从360全景上传图片数据集中删除
                delete imageArr['image_'+imageNum];
            }
        });

        //选择图片类型
        $('.imageType').live('click',function(event){
            $(this).addClass("linkOn").parent("dd").siblings("dd").find(".link").removeClass("linkOn");

            var imageNum = $(this).attr('imageNum');
            var type = $(this).attr('oid');
            var text = $(this).html();

            $('#forward_'+imageNum).val(text);
            $('#imageType_'+imageNum).val(type);
        });



        //图片选择拖动
        function picPreviewLives(obj){
            $("#"+obj).sortable();
            $("#"+obj).find(".mItemInner").find("img").live("mousemove",function(event){
                if($("#coordinates").length <=0)
                {
                    $("<div id='coordinates' class='radius5' >点击拖动</div>").appendTo("body");
                }
                if($("#coordinates").length >=0)
                {
                    var oDiv=$("#coordinates");
                    oDiv.css({left:event.pageX+4+'px',top:event.pageY+4+'px'})
                }
            }).live("mouseout",function(){
                $("#coordinates").remove()
            })

            $("#"+obj).find(".mItem").live("mousedown",function(){//
                $("#coordinates").hide();
                $(this).addClass("mItemHover");
                $(this).siblings(".mItem").find("img").css({opacity:0.4});
                $(this).siblings(".mItem").find(".funM").css({opacity:0.2});
                $(this).siblings(".mItem").find(".funMtext").css({opacity:0.4});

            }).live("mouseup",function(){
                $("#coordinates").hide();
                $(this).removeClass("mItemHover");
                $(this).siblings(".mItem").find("img").css({opacity:1});
                $(this).siblings(".mItem").find(".funM").css({opacity:.6});
                $(this).siblings(".mItem").find(".funMtext").css({opacity:1});
            });

            $("#"+obj).find("label").live("mousedown",function(event){
                event.stopPropagation();
            });

            $("#"+obj).find(".delBtn").live("mousedown",function(event){
                event.stopPropagation();
            });

            $("#"+obj).find(".jsInputCount ").live("mousedown",function(event){
                event.stopPropagation();
            });
        }

        picPreviewLives('showImage');

        //设置默认图片
        $('.Js_defaultPic').live('click',function(){
            var picVal = $(this).val();

            if(/^(http.+)_([0-9]+)x([0-9]+)\.([a-z]+)(\?pid=([0-9]+))?$/.test(picVal))
            {
                var imageValArr = /^(http.+)_([0-9]+)x([0-9]+)\.([a-z]+)(\?pid=([0-9]+))?$/.exec(picVal);

                picVal = imageValArr[1]+'_'+imageValArr[2]+'x'+imageValArr[3]+'.'+imageValArr[4];
            }

            $('#pic1').val(picVal);
        });

        //检查图片描述文字个数
        $('.newaddTxt').live('keyup',function(){
            var str = $(this).val();
            var obj_value_arr = str.split("");

            var num = 0;
            for (var i = 0; i < obj_value_arr.length; i++)
            {
                num += returnStrLen(obj_value_arr[i]);
            }

            var str = $(this).val().substr(0, 10);
            $(this).val(str);
        });

        //查看360全景图片
        $('.bigPicLinpanorama').live('click',function(){
            var imageNum = $(this).attr('imageNum');
            var url = '';
            var num = 0;
            var chooseNum = 0;
            for(var key in imageArr)
            {
                var _image = key.split('_');
                var imageType = $('#imageType_'+_image[1]).val();

                if(imageNum == _image[1])
                {
                    chooseNum = num;
                }

                var imageUrl = imageArr[key];


                if(/^(http.+)_([0-9]+)x([0-9]+)\.([a-z]+)(\?pid=([0-9]+))?$/.test(imageArr[key]))
                {
                    var imageValArr = /^(http.+)_([0-9]+)x([0-9]+)\.([a-z]+)(\?pid=([0-9]+))?$/.exec(imageArr[key]);

                    imageUrl = imageValArr[1]+'.'+imageValArr[4];
                }


                if(url)
                {
                    url += ','+imageUrl+'|'+imageType;
                }
                else
                {//http://nj.sell.house365.com/360show/sphere_show.php
                    url += 'http://nj.sell.house365.com/sphere_show.php?pic='+imageUrl+'|'+imageType;
                }

                num++;
            }

            if(url)
            {
                url += '&show='+chooseNum;
                $(this).attr('href',url);
            }
        });
    });
</script>	