import FileUpload from '../fileUpload';
import SourceManage from '../../component/sourceManage';
const btnInTpl = `<div class="cd-image-panel J_imagePanel {{if imageUrl}}cd-hasimg cd-show-mask{{/if}}" data-url="{{imageUrl}}" style="background-image: url('{{imageUrl}}')">
    <div class="cd-image-panel-mask"></div>
    <span class="cd-img-size J_imgSize"></span>
    <img src="{{imageUrl}}" class="cd-hide"/>
    <a href="javascript:void(0)" class="cd-file-upload-btn">{{if imageUrl}}从本地替换{{else}}从本地上传{{/if}}<input type="file" class="J_uploadImageBtn cd-file" enctype="multipart/form-data" multiple="" accept=".jpg,.jpeg,.gif,.png"></a>
    <a href="javascript:void(0)" class="J_selectImageBtn">{{if imageUrl}}从图库替换{{else}}从图库选择{{/if}}</a>
</div>`;
const btnOutTpl = `
    <div class="cd-image-wap J_imagePanel {{if imageUrl}}cd-hasimg{{/if}}">
        <div class="cd-preview">
            <span class="cd-img-size J_imgSize"></span>
            <img src="{{imageUrl}}" data-url="{{imageUrl}}"/>
            <div class="cd-imgholder"></div>
        </div>
        <div class="cd-operate">
            <a href="javascript:void(0)" class="cd-file-upload-btn">{{if imageUrl}}从本地替换{{else}}从本地上传{{/if}}<input type="file" class="J_uploadImageBtn cd-file" enctype="multipart/form-data" multiple="" accept=".jpg,.jpeg,.gif,.png"></a>
            <a href="javascript:void(0)" class="J_selectImageBtn">{{if imageUrl}}从图库替换{{else}}从图库选择{{/if}}</a>
        </div>
    </div>
`;
export default {
    renderImageDom() {
        let node, format, btnOutBox, chooseSizeLimit, typeLimit;
        
        node = arguments[0] ? arguments[0] : '';
        if (arguments[1]) {
            if (typeof arguments[1] == 'boolean') {
                btnOutBox = arguments[1];
            } else {
                format = arguments[1];
            }
        }
        btnOutBox = arguments[2] ? arguments[2] : btnOutBox;
        if (typeof format === 'object') {
            let temp = format;
            format = temp.format;
            chooseSizeLimit = temp.chooseSizeLimit;
            typeLimit = temp.typeLimit || '';
        }
        if (chooseSizeLimit == undefined) {
            chooseSizeLimit = window.page_config.chooseSizeLimit;
        }
        let formatParse = function (format) {
            let limitFormatData = {
                type: 0,
                minWidth: 0,                   
                maxWidth: 9999,                
                minHeight: 0,                  
                maxHeight: 9999,               
            };
            if (format) {
                let _limitData = format.split(",");
                if (/-/.test(format)) {
                    limitFormatData.type = 1;
                } else if (/\|/.test(format)) {
                    limitFormatData.type = 2;
                } else {
                    limitFormatData.type = 0;
                }
                _limitData.forEach((item, index) => {
                    switch (limitFormatData.type) {
                        case 0:
                            if (index == 0) {
                                limitFormatData['width'] = item;
                                limitFormatData['minWidth'] = item;
                                limitFormatData['maxWidth'] = item;
                            } else {
                                limitFormatData['height'] = item;
                                limitFormatData['minHeight'] = item;
                                limitFormatData['maxHeight'] = item;
                            }
                            break;
                        case 1:
                            let _rangeNum = item.split("-");
                            if (index == 0) {
                                limitFormatData['minWidth'] = _rangeNum[0];
                                limitFormatData['maxWidth'] = _rangeNum[1];
                            } else {
                                limitFormatData['minHeight'] = _rangeNum[0];
                                limitFormatData['maxHeight'] = _rangeNum[1];
                            }
                            break;
                        case 2:
                            let _someNum = item.split("|");
                            if (index == 0) {
                                limitFormatData['list'] = [];
                                _someNum.forEach((value, index, array) => {
                                    limitFormatData['list'].push({
                                        width: value,
                                        height: value
                                    })
                                });
                            } else {
                                _someNum.forEach((value, index, array) => {
                                    limitFormatData['list'][index].height = value;
                                });
                            }
                            break;
                    }
                });
            }
            return limitFormatData;
        };
        let renderImageSize = function (imgNode) {
            let img = imgNode.find('img')[0];
            img.onload = function () {
                let $imgSize = imgNode.find('.J_imgSize');
                $imgSize.html(img.naturalWidth+'*'+img.naturalHeight);
                $imgSize.attr('picWidth', img.naturalWidth);
                $imgSize.attr('picHeight', img.naturalHeight);
            };
        };
        $.each(node, function (index, item) {
            let currentNode = $(item);
            let imageTpl = btnOutBox ? btnOutTpl : btnInTpl;
            currentNode.html(template.render(imageTpl, {
                imageUrl: currentNode.attr('originData')
            }));
            renderImageSize(currentNode);
            let imageSizeObj = formatParse(format);
            new FileUpload({
                fileChooseNode: currentNode.find('.J_uploadImageBtn'),
                typeLimit: typeLimit || '.jpg,.png',
                minWidth: imageSizeObj.minWidth,                   
                maxWidth: imageSizeObj.maxWidth,                
                minHeight: imageSizeObj.minHeight,                  
                maxHeight: imageSizeObj.maxHeight,               
                onFileCheckFail: function () {
                },
                onSelectBefore: function (e) {
                },
                onSelect: function (files) {
                },
                onProgress: function (file, loaded, total) {
                },
                onSuccess: function (file, data) {
                    let imgNode = currentNode.attr('origindata', data.data.url).find('.J_imagePanel');
                    imgNode.find('img').attr('src', data.data.url);
                    imgNode.addClass('cd-hasimg').attr('data-url', data.data.url);
                    if (!btnOutBox) {
                        imgNode.addClass('cd-show-mask');
                        imgNode.css('background-image', "url('" + data.data.url + "')");
                    }
                    renderImageSize(imgNode);
                },
                onFailure: function (file, data) {
                }
            });
            currentNode.on('click', '.J_selectImageBtn', function () {
                SourceManage.open({
                    format: format,
                    chooseSizeLimit: chooseSizeLimit,
                    typeLimit,
                    afterEnsureClose: false, 
                    onEnsureBack: function (imgInfo) {
                        let imgNode = currentNode.attr('origindata', imgInfo.url).find('.J_imagePanel');
                        imgNode.addClass('cd-hasimg').attr('data-url', imgInfo.url);
                        imgNode.find('img').attr('src', imgInfo.url);
                        if (!btnOutBox) {
                            imgNode.addClass('cd-show-mask');
                            imgNode.css('background-image', "url('" + imgInfo.url + "')");
                        }
                        renderImageSize(imgNode);
                        this.dialogClose();
                    }
                });
            })
        });
    }
}