import './style.scss';
import BaseFormControl from '../../baseFormControl';
import { JDFloatTpl } from './tpl';
import JDImage from '../../formType/image/image';
import JDLink from '../../formType/link';
import JDRadio from '../../formType/radio';
import JDDateRangeLine from '../../formType/dateRangeLine';
import JDTabComponent from '../../formType/tab';
class JDFloat extends BaseFormControl {
    constructor(config) {
        super();
        this.floatModes = [
            { text: '弹出浮层', value: 'FLOAT_TYPE_POP' },
            { text: '浮层ICON', value: 'FLOAT_TYPE_ICON' },
            { text: '动态浮层', value: 'FLOAT_TYPE_DYNAMIC' },
        ];
        this.floatModesM = [
            { text: '弹出浮层', value: 'FLOAT_TYPE_POP' },
            { text: '浮层ICON', value: 'FLOAT_TYPE_ICON' },
        ];
        this.linkToolTabsM = ['custom', 'frequent', 'product', 'activity', 'userdefine', 'shopCategory', 'index', 'productList', 'member'];
        this.linkToolTabsP = ['custom', 'frequent', 'product', 'activity', 'userdefine', 'shopCategory', 'anchor'];
        
        this.currentMode = 'FLOAT_TYPE_POP';
        this.setConfig(config);
        this.render();
    }
    
    setConfig(config) {
        this.config = $.extend(true, {}, {
            domData: {},
            moduleData: {},
        }, config);
    }
    floatTypeToMode(type) {
        switch (type) {
            case 1:
                this.currentMode = 'FLOAT_TYPE_POP';
                break;
            case 2:
                this.currentMode = 'FLOAT_TYPE_ICON';
                break;
            case 3:
                this.currentMode = 'FLOAT_TYPE_DYNAMIC';
                break;
            default:
                break;
        }
    }
    render() {
        if (this.config.moduleData && this.config.moduleData.floatType) {
            this.floatTypeToMode(~~this.config.moduleData.floatType);
        }
        let $FloatTplNode = template.render(JDFloatTpl);
        this.appendFormControl($FloatTplNode);
        if(this.config.platForm == 'PC'){
            this.renderFloatHeader();
        }else{
            let mode = this.config.domData.extConfig.category
            this.currentMode = mode;
            this.renderFloatContent();
            this.showCurrentModeContent();
        }
    }
    renderFloatHeader() {
        this.tabComponentInstance = new JDTabComponent({
            domData: {
                node: this.element.find('.J_float_mode'),
                name: 'mode',
                formType: {
                    option: this.config.platForm === 'PC' ? this.floatModes : this.floatModesM,
                },
                validate: {
                    must: true,
                },
            },
            defaultChecked: this.currentMode,
            disableInitChange: false,
            change: (mode) => {
                this.currentMode = mode;
                this.renderFloatContent();
                this.showCurrentModeContent();
            },
        });
    }
    renderFloatContent() {
        switch (this.currentMode) {
            case 'FLOAT_TYPE_ICON':
                this.renderForIcon();
                break;
            case 'FLOAT_TYPE_DYNAMIC':
                this.renderForDynamic();
                break;
            default:
                this.renderForPop();
                break;
        }
    }
    showCurrentModeContent() {
        this.element.find('.J_float_content').each((i, el) => {
            let $target = $(el);
            if ($target.attr('mode') === this.currentMode) {
                $target.removeClass('hide');
            } else {
                $target.addClass('hide');
            }
        });
    }
    renderForPop() {
        if (!(this.dateRangeInstance_pop instanceof JDDateRangeLine)) {
            let JDDateRangeLineConfig = {
                domData: {
                    node: this.element.find('.J_float_date_pop'),
                    title: '生效时间',
                    validate: {
                        must: true,
                    },
                },
            };
            let JDImageConfig = {
                domData: {
                    node: this.element.find('.J_float_upload_pop'),
                    name: 'imageUrl',
                    title: '上传图片',
                    dateType: 'JDT_IMAGE',
                    formType: {
                        type: 'image',
                    },
                    tips: this.config.platForm === 'PC' ? `建议图片宽度为600px-960px，高度为200px-600px；大小不超过${window.page_config.chooseSizeLimit}KB，格式为JPG、PNG` : `建议图片宽度为900px，高度为480px-1350px；大小不超过${window.page_config.chooseSizeLimit}KB，格式为JPG、PNG`,
                },
                format: this.config.platForm === 'PC' ? '600-960,200-600' : '900-900,480-1350',
            };
            let JDRadioConfig = {
                domData: {
                    node: this.element.find('.J_float_radio_pop'),
                    name: 'skipFlag',
                    title: '是否跳转',
                    dataType: 'JDT_radio',
                    formType: {
                        type: 'radio',
                        option: [
                            {
                                text: '是',
                                value: 1,
                            },
                            {
                                text: '否',
                                value: 0,
                            },
                        ],
                    },
                    validate: {
                        must: true,
                    },
                },
                change: (value) => {
                    this.setLinkShow(value);
                },
            };
            let JDLinkConfig = {
                domData: {
                    name: 'linkInfo',
                    node: this.element.find('.J_float_link_pop'),
                    title: '链接',
                },
                linkName: false,
                addLink: false,
                operation: false,
                tab: this.config.platForm === 'PC' ? this.linkToolTabsP : this.linkToolTabsM,
            };
            if (this.config.moduleData.popFloatLayer) {
                JDDateRangeLineConfig = { ...JDDateRangeLineConfig, ...this.config.moduleData.popFloatLayer.dateRange };
                JDImageConfig['defaultImage'] = this.config.moduleData.popFloatLayer.imageUrl || '';
                JDRadioConfig['defaultChecked'] = this.config.moduleData.popFloatLayer.skipFlag;
                JDLinkConfig['moduleData'] = this.config.moduleData.popFloatLayer.linkInfo;
            }
            this.dateRangeInstance_pop = new JDDateRangeLine(JDDateRangeLineConfig);
            this.uploadInstance_pop = new JDImage(JDImageConfig);
            this.radioInstance_pop = new JDRadio(JDRadioConfig);
            this.linkInstance_pop = new JDLink(JDLinkConfig);
            this.setLinkShow(JDRadioConfig.defaultChecked);
        }
    }
    renderForIcon() {
        if (!(this.dateRangeInstance_icon instanceof JDDateRangeLine)) {
            let JDDateRangeLineConfig = {
                domData: {
                    node: this.element.find('.J_float_date_icon'),
                    title: '生效时间',
                    validate: {
                        must: true,
                    },
                },
            };
            let JDImageConfig = {
                domData: {
                    node: this.element.find('.J_float_upload_icon'),
                    name: 'imageUrl',
                    title: '上传图片',
                    dateType: 'JDT_IMAGE',
                    formType: {
                        type: 'image',
                    },
                    tips: `建议图片宽度为210px，高度为210px；大小不超过${window.page_config.chooseSizeLimit}KB，格式为JPG、PNG或GIF`,
                },
                format: '210-210,210-210',
                typeLimit: 'jpg,png,gif',
                chooseSizeLimit: window.page_config.chooseSizeLimit,       
            };
            let JDLinkConfig = {
                domData: {
                    name: 'linkInfo',
                    node: this.element.find('.J_float_link_icon'),
                    title: '链接',
                    validate: {
                        must: true,
                    },
                },
                linkName: false,
                addLink: false,
                operation: false,
                tab: this.config.platForm === 'PC' ? this.linkToolTabsP : this.linkToolTabsM,
            };
            let JDRadioConfig = {
                domData: {
                    node: this.element.find('.J_float_radius_icon'),
                    name: 'radiusFlag',
                    title: '图片是否设置为圆角',
                    dataType: 'JDT_radio',
                    formType: {
                        type: 'radio',
                        option: [
                            {
                                text: '是',
                                value: 1,
                            },
                            {
                                text: '否',
                                value: 0,
                            },
                        ],
                    },
                    validate: {
                        must: true,
                    },
                },
                defaultChecked: 1,
            };
            if (this.config.moduleData.iconFloatLayer) {
                JDDateRangeLineConfig = { ...JDDateRangeLineConfig, ...this.config.moduleData.iconFloatLayer.dateRange };
                JDImageConfig['defaultImage'] = this.config.moduleData.iconFloatLayer.imageUrl || '';
                JDLinkConfig['moduleData'] = this.config.moduleData.iconFloatLayer.linkInfo;
                JDRadioConfig['defaultChecked'] = this.config.moduleData.iconFloatLayer.radiusFlag;
            }
            this.dateRangeInstance_icon = new JDDateRangeLine(JDDateRangeLineConfig);
            this.uploadInstance_icon = new JDImage(JDImageConfig);
            this.radioInstance_icon = new JDRadio(JDRadioConfig);
            this.linkInstance_icon = new JDLink(JDLinkConfig);
        }
    }
    renderForDynamic() {
        if (!(this.dateRangeInstance_dynamic instanceof JDDateRangeLine)) {
            let JDDateRangeLineConfig = {
                domData: {
                    node: this.element.find('.J_float_date_dynamic'),
                    title: '生效时间',
                    validate: {
                        must: true,
                    },
                },
            };
            let JDLinkConfig = {
                domData: {
                    name: 'linkInfo',
                    node: this.element.find('.J_float_link_dynamic'),
                    title: '链接',
                },
                linkName: false,
                addLink: false,
                operation: false,
                tab: this.config.platForm === 'PC' ? this.linkToolTabsP : this.linkToolTabsM,
            };
            if (this.config.moduleData.dynamicFloatLayer) {
                JDDateRangeLineConfig = { ...JDDateRangeLineConfig, ...this.config.moduleData.dynamicFloatLayer.dateRange };
                JDLinkConfig['moduleData'] = this.config.moduleData.dynamicFloatLayer.linkInfo;
            }
            this.dateRangeInstance_dynamic = new JDDateRangeLine(JDDateRangeLineConfig);
            this.linkInstance_dynamic = new JDLink(JDLinkConfig);
        }
    }
    
    setLinkShow(value) {
        if (value === 1) {
            this.element.find('.J_float_link_pop').show();
        } else {
            this.element.find('.J_float_link_pop').hide();
        }
    }
    getData() {
        let Obj = {
            'floatType': 1,
        };
        let imgData;
        switch (this.currentMode) {
            case 'FLOAT_TYPE_POP':
                Obj.floatType = 1;
                Obj['popFloatLayer'] = {};
                if (this.dateRangeInstance_pop.getData()) {
                    Obj['popFloatLayer']['dateRange'] = this.dateRangeInstance_pop.getData();
                } else {
                    return null;
                }
                imgData = this.uploadInstance_pop.getData();
                Obj['popFloatLayer']['imageUrl'] = imgData.imageUrl;
                Obj['popFloatLayer']['picWidth'] = imgData.picWidth;
                Obj['popFloatLayer']['picHeight'] = imgData.picHeight;
                Obj['popFloatLayer']['imageWidth'] = imgData.imageWidth;
                Obj['popFloatLayer']['imageHeight'] = imgData.imageHeight;
                if (this.linkInstance_pop.getData()) {
                    Obj['popFloatLayer']['linkInfo'] = this.linkInstance_pop.getData().linkInfo;
                }
                Obj['popFloatLayer']['skipFlag'] = this.radioInstance_pop.getData().skipFlag;
                break;
            case 'FLOAT_TYPE_ICON':
                Obj.floatType = 2;
                Obj['iconFloatLayer'] = {};
                
                if (this.dateRangeInstance_icon.getData()) {
                    Obj['iconFloatLayer']['dateRange'] = this.dateRangeInstance_icon.getData();
                } else {
                    return null;
                }
                imgData = this.uploadInstance_icon.getData();
                Obj['iconFloatLayer']['imageUrl'] = imgData.imageUrl;
                Obj['iconFloatLayer']['picWidth'] = imgData.picWidth;
                Obj['iconFloatLayer']['picHeight'] = imgData.picHeight;
                if (this.radioInstance_icon.getData()) {
                    Obj['iconFloatLayer']['radiusFlag'] = this.radioInstance_icon.getData().radiusFlag;
                } else {
                    return null;
                }
                if (this.linkInstance_icon.getData()) {
                    Obj['iconFloatLayer']['linkInfo'] = this.linkInstance_icon.getData().linkInfo;
                }
                break;
            case 'FLOAT_TYPE_DYNAMIC':
                Obj.floatType = 3;
                Obj['dynamicFloatLayer'] = {};
                if (this.dateRangeInstance_dynamic.getData()) {
                    Obj['dynamicFloatLayer']['dateRange'] = this.dateRangeInstance_dynamic.getData();
                } else {
                    return null;
                }
                Obj['dynamicFloatLayer']['confType'] = 1;
                if (this.linkInstance_dynamic.getData()) {
                    Obj['dynamicFloatLayer']['linkInfo'] = this.linkInstance_dynamic.getData().linkInfo;
                }
                break;
            default:
                break;
        }
        return {
            floatContent: Obj,
        };
    }
}
export default JDFloat;