import { Component, render, createElement } from 'rax';
import './index.less';
import App from '../App';
import config from '../../../config';

const dataFormat = [
    '2dtoolkit', 'agk', 'batterytech', 'bhive', 'black', 'caat', 'cegui', 'cocos2d', 'cocos2d-v2', 'cocos2d-x', 'corona-imagesheet', 'css',
    'css-simple', 'easeljs', 'egret', 'gideros', 'godot3-spritesheet', 'godot3-tileset', 'json-array', 'json', 'kwik', 'laya', 'less', 'libgdx',
    'libRocket', 'mapbox', 'melonjs', 'moai', 'molecule', 'monogame', 'orx', 'panda', 'phaser-json-array', 'phaser-json-hash', 'phaser', 'pixijs4',
    'popcornfx', 'sass-mixins', 'shiva3d-jpsprite', 'shiva3d', 'slick2d', 'spark', 'sparrow', 'spine', 'spritesheet-only', 'spritekit', 'spritekit-swift',
    'spriter', 'spritestudio', 'tresensa', 'uikit', 'unity', 'unity-texture2d', 'unreal-paper2d', 'vplay', 'wave-engine-1', 'x2d', 'xaml', 'xml', 'plain'
]

const textureFormat = [
    ['PNG-32', 'png'], ['PNG-8', 'png8'], ['PVR(版本3)', 'pvr3'], ['PVR GZip', 'pvr3gz'], ['PVR zlib', 'pvr3ccz'], ['JPG', 'jpg'], ['BMP', 'bmp'],
    ['TGA', 'tga'], ['TIFF', 'tiff'], ['PKM', 'pkm'], ['WebP', 'webp'], ['ATF', 'atf'], ['PVR(版本2，已弃用)', 'pvr2'], ['PVR GZip(版本2，已弃用)', 'pvr2gz'],
    ['PVR zlib(版本2，已弃用)', 'pvr2ccz']
]

const optFormat = [
    'RGBA8888', 'RGBA4444', 'RGBA5551', 'RGBA5555', 'BGRA8888', 'RGB888', 'RGB444', 'RGB565', 'ALPHA', 'ALPHA_INTENSITY'
]

const ditherType = [
    'NearestNeighbour', 'Linear', 'FloydSteinberg', 'FloydSteinbergAlpha', 'Atkinson', 'AtkinsonAlpha', 'PngQuantLow', 'PngQuantMedium', 'PngQuantHigh'
]

const alphaHandling = [
    ['KeepTransparentPixels', '保持透明像素'], ['ClearTransparentPixels', '清除透明像素'], ['ReduceBorderArtifacts', '减少边界伪影'], ['PremultiplyAlpha', '预乘alpha']
]

const sizeConstraints = [
    ['POT', 'POT(2的幂)'], ['WordAligned', '单词对齐'], ['AnySize', '任意尺寸']
]

const scaleMode = [
    ['Smooth', '平滑'], ['Fast', '快速'], ['Scale2x', '缩放 2x'], ['Scale3x', '缩放 3x'], ['Scale4x', '缩放 4x'], ['Eagle', 'Eagle2x'], ['Hq2x', 'Hq2x']
]

const algorithm = [
    'Basic', 'Grid', 'MaxRects', 'Polygon'
]

const maxrectsHeuristics = [
    ['Best', '最佳'], ['ShortSideFit', '短边适合'], ['LongSideFit', '长边适合'], ['AreaFit', '面积适合'], ['BottomLeft', '左下方'], ['ContactPoint', '接触点']
]

const basicSortBy = [
    ['Best', '最佳'], ['Name', '名称'], ['Width', '宽度'], ['Height', '高度'], ['Area', '面积'], ['Circumference', '周长']
]

const trimMode = [
    ['None', '没有'], ['Trim', '修剪'], ['CropKeepPos', '裁剪，保持位置'], ['Crop', '裁剪，丢弃位置'], ['Polygon', '多边形轮廓']
]


export default class Texp extends Component {
    inst;
    constructor(props) {
        super(props);
        Texp.inst = this;
        this.texpkParams = {
            data: {},
            texture: {},
            layout: {},
            sprite: {},
            assets: ''
        };
        this.texpkResult = true,
            this.state = {
                dataFormat: '',
                dataFile: undefined,
                trimSpriteName: false,
                prependFolderName: false,
                // texturePath: undefined,

                textureFormat: '',
                sheet: undefined,
                pngOptLevel: undefined,
                jpgQuality: undefined,
                webpQuality: undefined,
                opt: '',
                ditherType: undefined,
                alphaHandling: undefined,

                maxWidth: undefined,
                maxHeight: undefined,
                fixedWidth: undefined,
                fixedHeight: undefined,
                sizeConstraints: undefined,
                forceSquared: false,
                scale: undefined,
                scaleMode: undefined,
                algorithm: '',
                basicSortBy: undefined,
                basicOrder: undefined,
                maxrectsHeuristics: undefined,
                polygon: undefined,
                packMode: undefined,
                multipack: false,
                enableRotation: false,
                enableAutoAlias: false,

                trimMode: '',
                trimMargin: undefined,
                trimThreshold: undefined,
                tracerTolerance: undefined,
                extrude: undefined,
                borderPadding: undefined,
                shapePadding: undefined,
                commonDivisorX: undefined,
                commonDivisorY: undefined,

                assets: undefined,

                configFile: undefined
            }
    }



    // 数据格式
    dataFormat = () => {
        console.log(this.data_format.value);
        this.setState({
            dataFormat: this.data_format.value
        })
        this.texpkParams.data.dataFormat = this.data_format.value;
    }
    // 数据文件
    // dataFile = () => {
    //     console.log(this.datafile.value);
    //     this.setState({
    //         dataFile: this.datafile.value
    //     })
    //     this.texpkParams.data.dataFile = this.datafile.value;
    // }
    // 修剪精灵名称
    trimSpriteName = () => {
        console.log(this.trim_sprite_name.checked)
        this.setState({
            trimSpriteName: this.trim_sprite_name.checked
        })
        this.texpkParams.data.trimSpriteName = this.trim_sprite_name.checked;

    }
    // 前置文件夹名称
    prependFolderName = () => {
        console.log(this.prepend_folder_name.checked)
        this.setState({
            prependFolderName: this.prepend_folder_name.checked
        })
        this.texpkParams.data.prependFolderName = this.prepend_folder_name.checked;
    }
    // 纹理路径
    // texturePath = () => {
    //     console.log(this.texture_path.value)
    //     this.setState({
    //         texturePath: this.texture_path.value
    //     })
    //     this.texpkParams.data.texturePath = this.texture_path.value;
    // }

    // 纹理格式
    textureFormat = () => {
        console.log(this.texture_format.value);
        this.setState({
            textureFormat: this.texture_format.value
        })
        this.texpkParams.texture.textureFormat = this.texture_format.value;
    }
    // 纹理文件
    // textureFile = () => {
    //     console.log(this.sheet.value);
    //     this.setState({
    //         sheet: this.sheet.value
    //     })
    //     this.texpkParams.texture.sheet = this.sheet.value;
    // }
    // png opt level
    pngOptLevel = () => {
        console.log(this.png_opt_level.value);
        this.setState({
            pngOptLevel: this.png_opt_level.value
        })
        this.texpkParams.texture.pngOptLevel = this.png_opt_level.value;
    }
    // jpg质量
    jpgQuality = () => {
        numberConstraint(this.jpg_quality);
        if (this.jpg_quality.value < -1) { this.jpg_quality.value = -1 }
        else if (this.jpg_quality.value > 100) { this.jpg_quality.value = 100 }
        console.log(this.jpg_quality.value)
        this.setState({
            jpgQuality: this.jpg_quality.value
        })
        this.texpkParams.texture.jpgQuality = this.jpg_quality.value
    }
    // webp质量
    webpQuality = () => {
        numberConstraint(this.webp_quality);
        if (this.webp_quality.value < -1) { this.webp_quality.value = -1 }
        else if (this.webp_quality.value > 100) { this.webp_quality.value = 100 }
        console.log(this.webp_quality.value);
        this.setState({
            webpQuality: this.webp_quality.value
        })
        this.texpkParams.texture.webpQuality = this.webp_quality.value
    }
    // 像素格式
    optFormat = () => {
        console.log(this.texture_opt.value);
        this.setState({
            opt: this.texture_opt.value
        })
        this.texpkParams.texture.opt = this.texture_opt.value;
    }
    // 抖动
    ditherType = () => {
        console.log(this.dither_type.value);
        this.setState({
            ditherType: this.dither_type.value
        })
        this.texpkParams.texture.ditherType = this.dither_type.value;
    }
    // 透明处理
    alphaHandling = () => {
        console.log(this.alpha_handling.value);
        this.setState({
            alphaHandling: this.alpha_handling.value
        })
        this.texpkParams.texture.alphaHandling = this.alpha_handling.value;
    }

    // 最大大小
    maxWidth = () => {
        numberConstraint(this.max_width);
        console.log("max width=" + this.max_width.value);
        this.setState({
            maxWidth: this.max_width.value
        })
        this.texpkParams.layout.maxWidth = this.max_width.value;
    }
    maxHeight = () => {
        numberConstraint(this.max_height);
        console.log("max heigth=" + this.max_height.value)
        this.setState({
            maxHeight: this.max_height.value
        })
        this.texpkParams.layout.maxHeight = this.max_height.value;
    }
    // 固定大小
    fixedWidth = () => {
        numberConstraint(this.fixed_width);
        console.log("fixed width=" + this.fixed_width.value)
        this.setState({
            fixedWidth: this.fixed_width.value
        })
        this.texpkParams.layout.width = this.fixed_width.value;

    }
    fixedHeight = () => {
        numberConstraint(this.fixed_height);
        console.log("fixed heigth=" + this.fixed_height.value)
        this.setState({
            fixedHeight: this.fixed_height.value
        })
        this.texpkParams.layout.height = this.fixed_height.value;
    }
    // 大小限制
    sizeConstraints = () => {
        console.log(this.size_constraints.value);
        this.setState({
            sizeConstraints: this.size_constraints.value
        })
        this.texpkParams.layout.sizeConstraints = this.size_constraints.value;
    }
    //强制正方形
    forceSquared = () => {
        console.log(this.force_squared.checked);
        this.setState({
            forceSquared: this.force_squared.checked
        })
        this.texpkParams.layout.forceSquared = this.force_squared.checked;
    }
    // 缩放
    scale = () => {
        numberConstraint(this.layout_scale);
        if (this.layout_scale.value < 0) { this.layout_scale.value = 0 }
        else if (this.layout_scale.value > 1) { this.layout_scale.value = 1 }
        console.log("scale:" + this.layout_scale.value)
        this.setState({
            scale: this.layout_scale.value
        })
        this.texpkParams.layout.scale = this.layout_scale.value;
    }
    // 缩放模式
    scaleMode = () => {
        console.log("scale mode:" + this.scale_mode.value)
        this.setState({
            scaleMode: this.scale_mode.value
        })
        this.texpkParams.layout.scaleMode = this.scale_mode.value;
    }
    // 算法
    algorithm = () => {
        console.log("algorithm: " + this.layout_algorithm.value);
        this.setState({
            algorithm: this.layout_algorithm.value
        })
        this.texpkParams.layout.algorithm = this.layout_algorithm.value;
    }
    // basic 排序方式
    basicSortBy = () => {
        console.log("basic sort by:" + this.basic_sort_by.value);
        this.setState({
            basicSortBy: this.basic_sort_by.value
        })
        this.texpkParams.layout.basicSortBy = this.basic_sort_by.value;
    }
    // basic 排序顺序
    basicOrder = () => {
        console.log("basic order:" + this.basic_order.value);
        this.setState({
            basicOrder: this.basic_order.value
        })
        this.texpkParams.layout.basicOrder = this.basic_order.value;
    }
    // maxrects 启发式
    maxrectsHeuristics = () => {
        console.log("maxrects heuristics:" + this.maxrects_heuristics.value);
        this.setState({
            maxrectsHeuristics: this.maxrects_heuristics.value
        })
        this.texpkParams.layout.maxrectsHeuristics = this.maxrects_heuristics.value;
    }
    // polygon 对齐网格
    polygonCfg = () => {
        numberConstraint(this.polygon);
        if (this.polygon.value < 0) { this.polygon.value = 0 }
        else if (this.polygon.value > 32) { this.polygon.value = 32 }
        console.log("polygon 对齐网格:" + this.polygon.value)
        this.setState({
            polygon: this.polygon.value
        })
        this.texpkParams.layout.polygonCfg = this.polygon.value;
    }
    // 打包
    packMode = () => {
        console.log("pack mode:" + this.pack_mode.value);
        this.setState({
            packMode: this.pack_mode.value
        })
        this.texpkParams.layout.packMode = this.pack_mode.value;
    }
    // 多文件打包
    multipackCheck = () => {
        console.log("multipack:" + this.multipack.checked);
        this.setState({
            multipack: this.multipack.checked
        })
        this.texpkParams.layout.multipack = this.multipack.checked;
    }
    // 允许旋转
    enableRotation = () => {
        console.log("enable rotation:" + this.enable_rotation.checked);
        this.setState({
            enableRotation: this.enable_rotation.checked
        })
        this.texpkParams.layout.enableRotation = this.enable_rotation.checked;
    }
    // 检测相同精灵
    enableAutoAlias = () => {
        console.log("enable auto alias:" + this.enable_auto_alias.checked);
        this.setState({
            enableAutoAlias: this.enable_auto_alias.checked
        })
        this.texpkParams.layout.enableAutoAlias = this.enable_auto_alias.checked;
    }
    // 修剪模式
    trimMode = () => {
        console.log("trim mode: " + this.trim_mode.value);
        this.setState({
            trimMode: this.trim_mode.value
        })
        this.texpkParams.sprite.trimMode = this.trim_mode.value;
    }
    // 修剪边距
    trimMargin = () => {
        numberConstraint(this.trim_margin);
        if (this.trim_margin.value < 0) { this.trim_margin.value = 0 }
        else if (this.trim_margin.value > 255) { this.trim_margin.value = 255 }
        console.log("trim margin:" + this.trim_margin.value)
        this.setState({
            trimMargin: this.trim_margin.value
        })
        this.texpkParams.sprite.trimMargin = this.trim_margin.value;
    }
    // 透明度阈值
    trimThreshold = () => {
        numberConstraint(this.trim_threshold);
        if (this.trim_threshold.value < 0) { this.trim_threshold.value = 0 }
        else if (this.trim_threshold.value > 255) { this.trim_threshold.value = 255 }
        console.log("trim threshold:" + this.trim_threshold.value)
        this.setState({
            trimThreshold: this.trim_threshold.value
        })
        this.texpkParams.sprite.trimThreshold = this.trim_threshold.value;
    }
    // 跟踪器容差
    tracerTolerance = () => {
        numberConstraint(this.tracer_tolerance);
        if (this.tracer_tolerance.value < 10) { this.tracer_tolerance.value = 10 }
        else if (this.tracer_tolerance.value > 1000) { this.tracer_tolerance.value = 1000 }
        console.log("tracer tolerance:" + this.tracer_tolerance.value)
        this.setState({
            tracerTolerance: this.tracer_tolerance.value
        })
        this.texpkParams.sprite.tracerTolerance = this.tracer_tolerance.value;
    }
    // 拉伸
    extrudeCfg = () => {
        numberConstraint(this.extrude);
        if (this.extrude.value < 0) { this.extrude.value = 0 }
        else if (this.extrude.value > 1000) { this.extrude.value = 1000 }
        console.log("extrude:" + this.extrude.value)
        this.setState({
            extrude: this.extrude.value
        })
        this.texpkParams.sprite.extrude = this.extrude.value;
    }
    // 边框填充
    borderPadding = () => {
        numberConstraint(this.border_padding);
        if (this.border_padding.value < 0) { this.border_padding.value = 0 }
        else if (this.border_padding.value > 512) { this.border_padding.value = 512 }
        console.log("border padding:" + this.border_padding.value)
        this.setState({
            borderPadding: this.border_padding.value
        })
        this.texpkParams.sprite.borderPadding = this.border_padding.value;
    }
    // 形状填充
    shapePadding = () => {
        numberConstraint(this.shape_padding);
        if (this.shape_padding.value < 0) { this.shape_padding.value = 0 }
        else if (this.shape_padding.value > 512) { this.shape_padding.value = 512 }
        console.log("shape padding:" + this.shape_padding.value)
        this.setState({
            shapePadding: this.shape_padding.value
        })
        this.texpkParams.sprite.shapePadding = this.shape_padding.value;
    }
    // 公约数
    commonDivisorX = () => {
        numberConstraint(this.common_divisor_x);
        if (this.common_divisor_x.value < 0) { this.common_divisor_x.value = 0 }
        else if (this.common_divisor_x.value > 2048) { this.common_divisor_x.value = 2048 }
        console.log("shape padding:" + this.common_divisor_x.value)
        this.setState({
            commonDivisorX: this.common_divisor_x.value
        })
        this.texpkParams.sprite.commonDivisorX = this.common_divisor_x.value;
    }
    commonDivisorY = () => {
        numberConstraint(this.common_divisor_y);
        if (this.shape_padding.value < 0) { this.shape_padding.value = 0 }
        else if (this.shape_padding.value > 512) { this.shape_padding.value = 512 }
        console.log("shape padding:" + this.common_divisor_y.value)
        this.setState({
            commonDivisorY: this.common_divisor_y.value
        })
        this.texpkParams.sprite.commonDivisorY = this.common_divisor_y.value;

    }

    deleteConfig = () => {
        let folderName = App.inst.getCurFolderName() + "/.tp";
        let fileName = this.state.configFile;
        console.log(folderName + "/" + fileName)
        App.inst.deleteConfig({
            folderName: folderName,
            fileNames: [fileName]
        })
    }

    setTexpkResult(result) {
        this.texpkResult = result
    }
    getTailForData(dataFormat){
        let exp = {
            agk:".json",
            pixijs4:".json",
            cocos2d:".plist",
            "2dtoolkit":".bytes",
            bhive:".json", 
            black:".json", 
            caat:".json", 
            cegui:".xml", 
            "cocos2d-v2":".plist", 
            'cocos2d-x':".plist", 
            'corona-imagesheet':".lua", 
            css:".css", 
            'css-simple':".css", 
            'easeljs':".json", 
            egret:".xml", 
            gideros:".txt", 
            'godot3-spritesheet':".tpsheet", 
            'godot3-tileset':".tpset", 
            'json-array':".json", 
            json:".json", 
            kwik:".lua", 
            laya:".json", 
            less:".less", 
            libgdx:".txt .atlas", 
            libRocket:".rcss", 
            mapbox:".json", 
            melonjs:".json", 
            moai:".lua", 
            molecule:".json", 
            monogame:".txt", 
            orx:".ini", 
            panda:".atlas", 
            'phaser-json-array':".json", 
            'phaser-json-hash':".json", 
            phaser:".json", 
            popcornfx:".pkat", 
            'sass-mixins':".sass", 
            'shiva3d-jpsprite':".xml", 
            shiva3d:".xml", 
            slick2d:".def", 
            spark:".json", 
            sparrow:".xml", 
            spine:".txt .atlas.txt", 
            'spritesheet-only':".tpsheet", 
            spritekit:".atlasc", 
            'spritekit-swift':".atlasc", 
            spriter:".json", 
            spritestudio:".ssce", 
            tresensa:".js", 
            uikit:".plist", 
            unity:".txt", 
            'unity-texture2d':".tpsheet", 
            'unreal-paper2d':".paper2dsprites", 
            vplay:".json", 
            'wave-engine-1':".xml", 
            x2d:".xml", 
            xml:".xml",
        };
        return exp[dataFormat] || ".plist";
    }
    exportObject = () => {
        this.texpkParams.assets = App.inst.getCurFolderName();
        let suffix;
        if (this.state.textureFormat === "tiff") {
            suffix = ".tiff"
        } else if (this.state.textureFormat === "pvr3gz" || this.state.textureFormat === "pvr2gz") {
            suffix = ".pvr.gz"
        } else if (this.state.textureFormat === "pvr3ccz" || this.state.textureFormat === "pvr2ccz") {
            suffix = ".pvr.ccz"
        } else if (this.state.textureFormat === "webp") {
            suffix = ".webp"
        } else {
            suffix = "." + this.state.textureFormat.slice(0, 3);
        }
        if (suffix) {
            suffix = suffix
        } else {
            suffix = ".png"
        }
        let time = getTimeStr();
        this.texpkParams.texture.sheet = time + "/" + this.outputFolder + suffix;
        this.texpkParams.data.dataFile = time + "/" + this.outputFolder + this.getTailForData(this.texpkParams.data.dataFormat);//(this.texpkParams.data.dataFormat==="pixijs4"?".json": ".plist");
        this.texpkParams.data.format = this.texpkParams.data.dataFormat;

        // App.inst.createCfgFile(this.state.configFile, this.texpkParams);
        App.inst.createTexpk(this.texpkParams, true);
        if (!this.texpkResult) {
            this.texpkParams.texture.sheet = "";
            this.texpkParams.data.dataFile = "";
        }
        App.inst.createCfgFile(this.state.configFile, this.texpkParams);
    }

    textureFormatConfig(str) {
        let pngoptlevel = <div style={{ 'height': '30px', 'width': '100%', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
            <div style={{ 'margin-left': '10px', 'font-size': '12px' }}>Png Opt级别</div>
            <select ref={ref => this.png_opt_level = ref} onInput={this.pngOptLevel} type="text" placeholder="png opt level" style={{ 'margin-right': '165px', 'width': '50px', 'height': '25px', 'text-align': 'center', 'text-align-last': 'center' }}>
                <option selected={this.state.pngOptLevel === '1' ? 'selected' : ''} value='1'>1</option><option selected={this.state.pngOptLevel === '2' ? 'selected' : ''} value='2'>2</option>
                <option selected={this.state.pngOptLevel === '3' ? 'selected' : ''} value='3'>3</option><option selected={this.state.pngOptLevel === '4' ? 'selected' : ''} value='4'>4</option>
                <option selected={this.state.pngOptLevel === '5' ? 'selected' : ''} value='5'>5</option><option selected={this.state.pngOptLevel === '6' ? 'selected' : ''} value='6'>6</option>
                <option selected={this.state.pngOptLevel === '7' ? 'selected' : ''} value='7'>7</option>
            </select>
        </div>
        switch (str) {
            case "png":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                return pngoptlevel;
            case "png8":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                return pngoptlevel;
            case "pvr3":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return;
            case "pvr3gz":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return;
            case "pvr3ccz":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return;
            case "jpg":
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return <div style={{ 'height': '30px', 'width': '100%', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
                    <div style={{ 'margin-left': '10px', 'font-size': '12px' }}>JPG质量</div>
                    <input ref={ref => this.jpg_quality = ref} onInput={this.jpgQuality} value={this.state.jpgQuality ? this.state.jpgQuality : '-1'} type="text" placeholder="-1 for default, 0(low)..100" style={{ 'margin-right': '10px', 'width': '200px', 'height': '20px' }}></input>
                </div>;
            case "bmp":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return;
            case "tga":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return;
            case "tiff":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return;
            case "pkm":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return;
            case "webp":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return <div style={{ 'height': '30px', 'width': '100%', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
                    <div style={{ 'margin-left': '10px', 'font-size': '12px' }}>WebP质量</div>
                    <input ref={ref => this.webp_quality = ref} value={this.state.webpQuality ? this.state.webpQuality : '-1'} onInput={this.webpQuality} type="text" placeholder="0=low, 100=high, >100=lossles" style={{ 'margin-right': '10px', 'width': '200px', 'height': '20px' }}></input>
                </div>;
            case "atf":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return;
            case "pvr2":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return;
            case "pvr2gz":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return;
            case "pvr2ccz":
                if (this.texpkParams.texture.jpgQuality) { delete this.texpkParams.texture.jpgQuality };
                if (this.texpkParams.texture.webpQuality) { delete this.texpkParams.texture.webpQuality };
                if (this.texpkParams.texture.pngOptLevel) { delete this.texpkParams.texture.pngOptLevel };
                return;
            default:
                return pngoptlevel;
        }
    }
    showDitherType(texture, opt) {
        if (((texture === "png" || texture === "webp") && (opt === "RGBA4444" || opt === "RGBA5551" || opt === "RGBA5555" || opt === "RGB565")) || texture === "png8" || (texture === "jpg" && opt === "RGB565")) {
            return <div className={"texture_ditherType"} style={{ 'height': '30px', 'width': '100%', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
                <div className={"data_format_txt"}>抖动</div>
                <select ref={ref => this.dither_type = ref} className={"data_format_input"} onInput={this.ditherType}>
                    {
                        ditherType.map((v, index) => {
                            if (this.state.ditherType && v === this.state.ditherType) {
                                return <option key={index} value={v} selected='selected'>{v}</option>;
                            } else {
                                return <option key={index} value={v}>{v}</option>;
                            }
                        })
                    }
                </select>
            </div>
        } else {
            if (this.texpkParams.texture.ditherType) {
                delete this.texpkParams.texture.ditherType
            }
            return;
        }
    }
    algorithmConfig(algorithm) {
        switch (algorithm) {
            case "Basic":
                if (this.texpkParams.layout.maxrectsHeuristics) { delete this.texpkParams.layout.maxrectsHeuristics };
                if (this.texpkParams.layout.polygonCfg) { delete this.texpkParams.layout.polygonCfg };
                return <div style={{ 'width': "100%" }}>
                    <div className={"basic_sort_by"} style={{ 'height': '30px', 'width': '100%', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
                        <div style={{ 'margin-left': '10px', 'font-size': '12px' }}>排序方式</div>
                        <select ref={ref => this.basic_sort_by = ref} onInput={this.basicSortBy} type="text" style={{ 'margin-right': '10px', 'width': '205px', 'height': '25px', 'text-align': 'center', 'text-align-last': 'center' }}>
                            {
                                basicSortBy.map((v, index) => {
                                    if (this.state.basicSortBy && v[0] === this.state.basicSortBy) {
                                        return <option key={index} selected="selected" value={v[0]}>{v[1]}</option>;
                                    } else {
                                        return <option key={index} value={v[0]}>{v[1]}</option>;
                                    }
                                })
                            }
                        </select>
                    </div>
                    <div className={"basic_order"} style={{ 'height': '30px', 'width': '100%', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
                        <div style={{ 'margin-left': '10px', 'font-size': '12px' }}>排序顺序</div>
                        <select ref={ref => this.basic_order = ref} onInput={this.basicOrder} type="text" value={this.state.basicOrder ? this.state.basicOrder : "Ascending"} style={{ 'margin-right': '10px', 'width': '205px', 'height': '25px', 'text-align': 'center', 'text-align-last': 'center' }}>
                            <option selected={this.basicOrder === 'Ascending' ? 'selected' : ''} value="Ascending">升序</option>
                            <option selected={this.basicOrder === 'Descending' ? 'selected' : ''} value="Descending">降序</option>
                        </select>
                    </div>
                </div>
            case "Grid":
                if (this.texpkParams.layout.basicSortBy) { delete this.texpkParams.layout.basicSortBy };
                if (this.texpkParams.layout.basicOrder) { delete this.texpkParams.layout.basicOrder };
                if (this.texpkParams.layout.maxrectsHeuristics) { delete this.texpkParams.layout.maxrectsHeuristics };
                if (this.texpkParams.layout.polygonCfg) { delete this.texpkParams.layout.polygonCfg };
                return;
            case "MaxRects":
                if (this.texpkParams.layout.basicSortBy) { delete this.texpkParams.layout.basicSortBy };
                if (this.texpkParams.layout.basicOrder) { delete this.texpkParams.layout.basicOrder };
                if (this.texpkParams.layout.polygonCfg) { delete this.texpkParams.layout.polygonCfg };
                return <div className={"maxrects_heuristics"} style={{ 'height': '30px', 'width': '100%', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
                    <div style={{ 'margin-left': '10px', 'font-size': '12px' }}>启发式</div>
                    <select ref={ref => this.maxrects_heuristics = ref} onInput={this.maxrectsHeuristics} type="text" style={{ 'margin-right': '10px', 'width': '205px', 'height': '25px', 'text-align': 'center', 'text-align-last': 'center' }}>
                        {
                            maxrectsHeuristics.map((v, index) => {
                                if (this.state.maxrectsHeuristics && v[0] === this.state.maxrectsHeuristics) {
                                    return <option key={index} value={v[0]} selected='selected'>{v[1]}</option>;
                                } else {
                                    return <option key={index} value={v[0]}>{v[1]}</option>;
                                }
                            })
                        }
                    </select>
                </div>
            case "Polygon":
                if (this.texpkParams.layout.basicSortBy) { delete this.texpkParams.layout.basicSortBy };
                if (this.texpkParams.layout.basicOrder) { delete this.texpkParams.layout.basicOrder };
                if (this.texpkParams.layout.maxrectsHeuristics) { delete this.texpkParams.layout.maxrectsHeuristics };
                return <div style={{ 'height': '30px', 'width': '100%', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
                    <div style={{ 'margin-left': '10px', 'font-size': '12px' }}>对齐网格</div>
                    <input ref={ref => this.polygon = ref} type="text" value={this.state.polygon ? this.state.polygon : '1'} style={{ 'margin-right': '10px', 'width': '200px', 'height': '20px', 'text-align': 'center' }} onInput={this.polygonCfg} value='1'></input>
                </div>;
        }
    }
    showPackMode(algorithm) {
        if (algorithm === "Basic" || algorithm === "MaxRects") {
            return <div style={{ 'height': '30px', 'width': '100%', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
                <div style={{ 'margin-left': '10px', 'font-size': '12px' }}>打包</div>
                <select ref={ref => this.pack_mode = ref} onInput={this.packMode} value={this.state.packMode ? this.state.packMode : 'Best'} style={{ 'margin-right': '10px', 'width': '205px', 'height': '25px', 'text-align': 'center', 'text-align-last': 'center' }}>
                    <option value="Best">最佳</option>
                    <option value="Good">好</option>
                    <option value="Fast">快速</option>
                </select>
            </div>
        } else {
            if (this.texpkParams.layout.packMode) { delete this.texpkParams.layout.packMode }
            return
        }
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    updateCfgData(data, dir, folder) {
        let def = config.texpkDefault;
        this.texpkParams = data;
        this.outputFolder = folder;
        this.setState({
            dataFormat: data.data.dataFormat ? data.data.dataFormat : def.data.dataFormat,
            // dataFile: data.data.dataFile.slice(data.data.dataFile.lastIndexOf("/") + 1, data.data.dataFile.length)/*  ? data.data.dataFile : '' */,
            trimSpriteName: data.data.trimSpriteName,
            prependFolderName: data.data.prependFolderName,
            // texturePath: data.data.texturePath ? data.data.texturePath : '',

            textureFormat: data.texture.textureFormat ? data.texture.textureFormat : def.data.dataFormat,
            // sheet: data.texture.sheet.slice(data.texture.sheet.lastIndexOf("/") + 1, data.texture.sheet.length)/*  ? data.texture.sheet : '' */,
            pngOptLevel: data.texture.pngOptLevel ? data.texture.pngOptLevel : '1',
            jpgQuality: data.texture.jpgQuality ? data.texture.jpgQuality : '1',
            webpQuality: data.texture.webpQuality ? data.texture.webpQuality : '1',
            opt: data.texture.opt ? data.texture.opt : def.texture.opt,
            ditherType: data.texture.ditherType ? data.texture.ditherType : 'NearestNeighbour',
            alphaHandling: data.texture.alphaHandling ? data.texture.alphaHandling : def.texture.alphaHandling,

            maxWidth: data.layout.maxWidth ? data.layout.maxWidth : def.layout.maxWidth,
            maxHeight: data.layout.maxHeight ? data.layout.maxHeight : def.layout.maxHeight,
            fixedWidth: data.layout.fixedWidth ? data.layout.fixedWidth : '',
            fixedHeight: data.layout.fixedHeight ? data.layout.fixedHeight : '',
            sizeConstraints: data.layout.sizeConstraints ? data.layout.sizeConstraints : def.layout.sizeConstraints,
            forceSquared: data.layout.forceSquared,
            scale: data.layout.scale ? data.layout.scale : def.layout.scale,
            scaleMode: data.layout.scaleMode ? data.layout.scaleMode : def.layout.scaleMode,
            algorithm: data.layout.algorithm ? data.layout.algorithm : def.layout.algorithm,
            basicSortBy: data.layout.basicSortBy ? data.layout.basicSortBy : def.layout.basicSortBy,
            basicOrder: data.layout.basicOrder ? data.layout.basicOrder : def.layout.basicOrder,
            maxrectsHeuristics: data.layout.maxrectsHeuristics ? data.layout.maxrectsHeuristics : 'Best',
            polygon: data.layout.polygon ? data.layout.polygon : '1',
            multipack: data.layout.multipack,
            enableRotation: data.layout.enableRotation,
            enableAutoAlias: data.layout.enableAutoAlias,

            trimMode: data.sprite.trimMode ? data.sprite.trimMode : def.sprite.trimMode,
            trimMargin: data.sprite.trimMargin ? data.sprite.trimMargin : def.sprite.trimMargin,
            trimThreshold: data.sprite.trimThreshold ? data.sprite.trimThreshold : def.sprite.trimThreshold,
            tracerTolerance: data.sprite.tracerTolerance ? data.sprite.tracerTolerance : '10',
            extrude: data.sprite.extrude ? data.sprite.extrude : def.sprite.extrude,
            borderPadding: data.sprite.borderPadding ? data.sprite.borderPadding : def.sprite.borderPadding,
            shapePadding: data.sprite.shapePadding ? data.sprite.shapePadding : def.sprite.shapePadding,
            commonDivisorX: data.sprite.commonDivisorX ? data.sprite.commonDivisorX : def.sprite.commonDivisorX,
            commonDivisorY: data.sprite.commonDivisorY ? data.sprite.commonDivisorY : def.sprite.commonDivisorY,

            configFile: dir/* data.configFile ? data.configFile : def.configFile */
        })
    }

    render() {
        return (
            <div className={"texp_box"}>
                <div className={"title"}><b>TexturePacker</b></div>
                <div className={"data_box"}>
                    <p>数据</p>
                    <div className={"data_format"}>
                        <div className={"data_format_txt"}>数据格式</div>
                        <select ref={ref => this.data_format = ref} value={this.state.dataFormat} className={"data_format_input"} onInput={this.dataFormat}>
                            {
                                dataFormat.map((v, index) => {
                                    if (this.state.dataFormat && v === this.state.dataFormat) {
                                        return <option key={index} selected="selected" value={v}>{v}</option>;
                                    } else {
                                        return <option key={index} value={v}>{v}</option>;
                                    }

                                })
                            }
                        </select>
                    </div>
                    {/* <div className={"data_dataFile"}>
                        <div className={"data_dataFile_txt"}>数据文件</div>
                        <input ref={ref => this.datafile = ref} className={"data_dataFile_input"} type="text" placeholder="输出数据文件" onInput={this.dataFile} value={this.state.dataFile ? this.state.dataFile : ''}></input>
                    </div> */}
                    <div className={"data_trimSpriteName"}>
                        <div className={"data_trimSpriteName_txt"}>修剪精灵名称</div>
                        <input ref={ref => this.trim_sprite_name = ref} className={"data_trimSpriteName_input"} type="checkbox" onClick={this.trimSpriteName} checked={this.state.trimSpriteName}></input>
                    </div>
                    <div className={"data_prependFolderName"}>
                        <div className={"data_prependFolderName_txt"}>前置文件夹名称</div>
                        <input ref={ref => this.prepend_folder_name = ref} className={"data_prependFolderName_input"} type="checkbox" onClick={this.prependFolderName} checked={this.state.prependFolderName}></input>
                    </div>
                    {/* <div className={"data_texturePath"}>
                        <div className={"data_texturePath_txt"}>纹理路径</div>
                        <input ref={ref => this.texture_path = ref} className={"data_texturePath_input"} type="text" placeholder="纹理路径" onInput={this.texturePath} value={this.state.texturePath ? this.state.texturePath : ''}></input>
                    </div> */}
                </div>

                <div className={"texture_box"}>
                    <p>纹理</p>
                    <div className={"texture_format"}>
                        <div className={"texture_format_txt"}>纹理格式</div>
                        <select ref={ref => this.texture_format = ref} className={"texture_format_input"} onInput={this.textureFormat}>
                            {
                                textureFormat.map((v, index) => {
                                    if (this.state.textureFormat && v[1] === this.state.textureFormat) {
                                        return <option key={index} value={v[1]} selected="selected">{v[0]}</option>;
                                    } else {
                                        return <option key={index} value={v[1]}>{v[0]}</option>;
                                    }
                                })
                            }
                        </select>
                    </div>
                    {/* <div className={"texture_sheet"}>
                        <div className={"texture_sheet_txt"}>纹理文件</div>
                        <input ref={ref => this.sheet = ref} onInput={this.textureFile} className={"texture_sheet_input"} type="text" placeholder="输出纹理文件" value={this.state.sheet ? this.state.sheet : ''}></input>
                    </div> */}
                    <div ref={ref => this.texture_config = ref} className={"texture_formatConfig"} style={{ 'width': '100%' }}>
                        {
                            this.textureFormatConfig(this.state.textureFormat)
                        }
                    </div>
                    <div className={"texture_opt"}>
                        <div className={"texture_opt_txt"}>像素格式</div>
                        <select ref={ref => this.texture_opt = ref} className={"texture_opt_input"} onInput={this.optFormat}>
                            {
                                optFormat.map((v, index) => {
                                    if (this.state.opt && v === this.state.opt) {
                                        return <option key={index} value={v} selected="selected">{v}</option>;
                                    }
                                    return <option key={index} value={v}>{v}</option>;
                                })
                            }
                        </select>
                    </div>
                    {
                        this.showDitherType(this.state.textureFormat, this.state.opt)
                    }
                    <div ref={ref => this.alpha_handling = ref} className={"texture_alphaHandling"}>
                        <div className={"texture_alphaHandling_txt"}>透明处理</div>
                        <select ref={ref => this.alpha_handling = ref} className={"texture_alphaHandling_input"} onInput={this.alphaHandling}>
                            {
                                alphaHandling.map((v, index) => {
                                    if (this.state.alphaHandling && v[0] === this.state.alphaHandling) {
                                        return <option key={index} value={v[0]} selected='selected'>{v[1]}</option>;
                                    } else {
                                        return <option key={index} value={v[0]}>{v[1]}</option>;
                                    }
                                })
                            }
                        </select>
                    </div>
                </div>

                <div className={"layout_box"}>
                    <p>布局</p>
                    <div className={"layout_maxsize"}>
                        <div className={"layout_maxsize_txt"}>最大大小</div>
                        <div style={{ 'width': '205px', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center', 'margin-right': '10px' }}>
                            <input ref={ref => this.max_width = ref} className={"layout_maxwidth"} type="text" value={this.state.maxWidth ? this.state.maxWidth : ""} onInput={this.maxWidth}></input>
                            <div>✖</div>
                            <input ref={ref => this.max_height = ref} className={"layout_maxheight"} type="text" value={this.state.maxHeight ? this.state.maxHeight : ""} onInput={this.maxHeight}></input>
                        </div>
                    </div>
                    <div className={"layout_fixedsize"}>
                        <div className={"layout_fixedsize_txt"}>固定大小</div>
                        <div style={{ 'width': '205px', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center', 'margin-right': '10px' }}>
                            <input ref={ref => this.fixed_width = ref} className={"layout_fixedwidth"} type="text" onInput={this.fixedWidth} value={this.state.fixedWidth ? this.state.fixedWidth : ''}></input>
                            <div>✖</div>
                            <input ref={ref => this.fixed_height = ref} className={"layout_fixedheight"} type="text" onInput={this.fixedHeight} value={this.state.fixedHeight ? this.state.fixedHeight : ''}></input>
                        </div>
                    </div>
                    <div className={"layout_size_constraints"}>
                        <div className={"layout_size_constraints_txt"}>大小限制</div>
                        <select ref={ref => this.size_constraints = ref} className={"layout_size_constraints_input"} onInput={this.sizeConstraints}>
                            {
                                sizeConstraints.map((v, index) => {
                                    if (this.state.sizeConstraints && v[0] === this.state.sizeConstraints) {
                                        return <option key={index} value={v[0]} selected='selected'>{v[1]}</option>;
                                    } else {
                                        return <option key={index} value={v[0]}>{v[1]}</option>;
                                    }
                                })
                            }
                        </select>
                    </div>
                    <div className={"layout_force_squared"}>
                        <div className={"layout_force_squared_txt"}>强制正方形</div>
                        <input ref={ref => this.force_squared = ref} onClick={this.forceSquared} className={"layout_force_squared_input"} type="checkbox" checked={this.state.forceSquared}></input>
                    </div>
                    <div style={{ "width": "95%", "border-bottom": "1px solid #cccccc", "margin": "10px auto" }}></div>
                    <div className={"layout_scale"}>
                        <div className={"layout_scale_txt"}>缩放</div>
                        <input ref={ref => this.layout_scale = ref} className={"layout_scale_input"} type="text" value="1" onInput={this.scale} value={this.state.scale ? this.state.scale : ''}></input>
                    </div>
                    <div className={"layout_scale_mode"}>
                        <div className={"layout_scale_mode_txt"}>缩放模式</div>
                        <select ref={ref => this.scale_mode = ref} className={"layout_scale_mode_input"} onInput={this.scaleMode}>
                            {
                                scaleMode.map((v, index) => {
                                    if (this.state.scaleMode && v[0] === this.state.scaleMode) {
                                        return <option key={index} value={v[0]} selected='selected'>{v[1]}</option>;
                                    } else {
                                        return <option key={index} value={v[0]}>{v[1]}</option>;
                                    }
                                })
                            }
                        </select>
                    </div>
                    <div style={{ "width": "95%", "border-bottom": "1px solid #cccccc", "margin": "10px auto" }}></div>
                    <div className={"layout_algorithm"}>
                        <div className={"layout_algorithm_txt"}>算法</div>
                        <select ref={ref => this.layout_algorithm = ref} className={"layout_algorithm_input"} onInput={this.algorithm}>
                            {
                                algorithm.map((v, index) => {
                                    if (this.state.algorithm && v === this.state.algorithm) {
                                        return <option key={index} value={v} selected='selected'>{v}</option>;
                                    } else {
                                        return <option key={index} value={v}>{v}</option>;
                                    }
                                })
                            }
                        </select>
                    </div>
                    {
                        this.algorithmConfig(this.state.algorithm)
                    }
                    {
                        this.showPackMode(this.state.algorithm)
                    }
                    <div style={{ "width": "95%", "border-bottom": "1px solid #cccccc", "margin": "10px auto" }}></div>
                    <div className={"layout_multipack"}>
                        <div className={"layout_multipack_txt"}>多文件打包</div>
                        <input ref={ref => this.multipack = ref} onClick={this.multipackCheck} className={"layout_multipack_input"} type="checkbox" checked={this.state.multipack}></input>
                    </div>
                    <div className={"layout_enable_rotation"}>
                        <div className={"layout_enable_rotation_txt"}>允许旋转</div>
                        <input ref={ref => this.enable_rotation = ref} onClick={this.enableRotation} className={"layout_enable_rotation_input"} type="checkbox" checked={this.state.enableRotation}></input>
                    </div>
                    <div className={"layout_enable_auto_alias"}>
                        <div className={"layout_enable_auto_alias_txt"}>检测相同精灵</div>
                        <input ref={ref => this.enable_auto_alias = ref} onClick={this.enableAutoAlias} className={"layout_enable_auto_alias_input"} type="checkbox" checked={this.state.enableAutoAlias}></input>
                    </div>
                </div>

                <div className={"sprite_box"}>
                    <p>精灵</p>
                    <div className={"sprite_trim_mode"}>
                        <div className={"sprite_trim_mode_txt"}>修剪模式</div>
                        <select ref={ref => this.trim_mode = ref} className={"sprite_trim_mode_input"} onInput={this.trimMode}>
                            {
                                trimMode.map((v, index) => {
                                    if (this.state.trimMode && v[0] === this.state.trimMode) {
                                        return <option key={index} value={v[0]} selected='selected'>{v[1]}</option>;
                                    } else {
                                        return <option key={index} value={v[0]}>{v[1]}</option>;
                                    }
                                })
                            }
                        </select>
                    </div>
                    <div className={"sprite_trim_margin"}>
                        <div className={"sprite_trim_margin_txt"}>修剪边距</div>
                        <input ref={ref => this.trim_margin = ref} className={"sprite_trim_margin_input"} type="text" onInput={this.trimMargin} value={this.state.trimMargin ? this.state.trimMargin : '1'}></input>
                    </div>
                    {
                        this.state.trimMode === "Polygon" ? <div style={{ 'width': '100%', 'height': '30px', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
                            <div style={{ 'margin-left': '10px', 'font-size': '12px' }}>跟踪器容差</div>
                            <input ref={ref => this.tracer_tolerance = ref} className={"sprite_tracer_tolerance_input"} type="text" value={this.state.tracerTolerance ? this.state.tracerTolerance : "10"} onInput={this.tracerTolerance} style={{ 'margin-right': '130px', 'width': '80px', 'height': '20px', 'text-align': 'center' }}></input>
                        </div> : <div style={{ 'width': '100%', 'height': '30px', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
                                <div style={{ 'margin-left': '10px', 'font-size': '12px' }}>透明度阈值</div>
                                <input ref={ref => this.trim_threshold = ref} className={"sprite_trim_threshold_input"} type="text" value={this.state.trimThreshold ? this.state.trimThreshold : "1"} onInput={this.trimThreshold} style={{ 'margin-right': '130px', 'width': '80px', 'height': '20px', 'text-align': 'center' }}></input>
                            </div>
                    }
                    <div style={{ "width": "95%", "border-bottom": "1px solid #cccccc", "margin": "10px auto" }}></div>
                    <div className={"sprite_extrude"}>
                        <div className={"sprite_extrude_txt"}>拉伸</div>
                        <input ref={ref => this.extrude = ref} className={"sprite_extrude_input"} value={this.state.extrude ? this.state.extrude : "0"} onInput={this.extrudeCfg}></input>
                    </div>
                    <div className={"sprite_border_padding"}>
                        <div className={"sprite_border_padding_txt"}>边框填充</div>
                        <input ref={ref => this.border_padding = ref} className={"sprite_border_padding_input"} value={this.state.borderPadding ? this.state.borderPadding : "0"} onInput={this.borderPadding}></input>
                    </div>
                    <div className={"sprite_shape_padding"}>
                        <div className={"sprite_shape_padding_txt"}>形状填充</div>
                        <input ref={ref => this.shape_padding = ref} className={"sprite_shape_padding_input"} value={this.state.shapePadding ? this.state.shapePadding : "0"} onInput={this.shapePadding}></input>
                    </div>
                    <div className={"sprite_common_divisor"}>
                        <div className={"sprite_common_divisor_txt"}>公约数</div>
                        <div style={{ 'width': '205px', 'display': 'flex', 'justify-content': 'space-between', 'align-items': 'center', 'margin-right': '10px' }}>
                            <div style={{ 'margin-right': '5px', 'font-size': '12px' }}>X:</div>
                            <input ref={ref => this.common_divisor_x = ref} className={"common_divisor_x"} type="text" value={this.state.commonDivisorX ? this.state.commonDivisorX : "1"} onInput={this.commonDivisorX}></input>
                            <div style={{ 'margin-right': '5px', 'font-size': '12px' }}>Y:</div>
                            <input ref={ref => this.common_divisor_y = ref} className={"common_divisor_y"} type="text" value={this.state.commonDivisorY ? this.state.commonDivisorY : "1"} onInput={this.commonDivisorY}></input>
                        </div>
                    </div>
                </div>
                <div className={"texp_bottom"}>
                    <button className={"delete_btn"} onClick={this.deleteConfig}>删除配置</button>
                    <button className={"export_btn"} onClick={this.exportObject}>生成配置</button>
                </div>
            </div>
        )
    }
}


// 限制输入数字
export function numberConstraint(obj) {
    obj.value = obj.value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
    obj.value = obj.value.replace(/^\./g, "");  //验证第一个字符是数字而不是.
    // obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的.
    // obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
}

function getTimeStr() {
    let date = new Date().toLocaleDateString().replace(/[^\d]/g, "");
    let hour = new Date().getHours();
    let min = new Date().getMinutes();
    let sec = new Date().getSeconds();
    let time = date + hour + min + sec;
    return time;
}