import './style.scss';
import BaseFormControl from '../../baseFormControl';
import { newPeopleTpl } from './tpl';
import JDRadio from "../../formType/radio";
import JDColor from "../../formType/color";
import JDImage from "../../formType/image/image";
class JDNewPeople extends BaseFormControl{
    constructor(config) {
        super();
        this.config = $.extend(true, {}, {
            domData: {},
            moduleData: null,
        }, config);
        this.render();
    }
    
    render(){
        let node = template.render(newPeopleTpl);
        this.appendFormControl(node);
        this.bgImgInstance = new JDImage({
            domData: {
                node: this.element.find('.J_infoBgImg'),
                name: 'userBackground',
                title: '',
                formType: {
                    type: 'image',
                },
                tips: `图片尺寸要求宽度为1125px，高度为120px；大小不超过${window.page_config.chooseSizeLimit}KB，格式为JPG、PNG`,
            },
            defaultImage: this.config.moduleData && this.config.moduleData.userBackgroundType === 2 && this.config.moduleData.userBackground ? this.config.moduleData.userBackground : '',
            format: '1125-1125,120-120',
        });
        this.bgColorInstance = new JDColor({
            domData: {
                name: 'userBackground',
                title: '背景色值',
                node: this.element.find('.J_infoBgColorSelect'),
            },
            value: this.config.moduleData && this.config.moduleData.userBackgroundType === 1 && this.config.moduleData.userBackground ? this.config.moduleData.userBackground : '#ffffff',
        })
        this.bgTypeInstance = new JDRadio({
            domData: {
                name: 'userBackgroundType',
                node:this.element.find('.J_infoBgType'),
                title: '用户信息区域背景设置',
                validate: {
                    must: true
                },
                formType:{
                    option:[
                        {text:"背景色", value:1},
                        {text:"背景图",value:2}
                    ]
                }
            },
            defaultChecked: this.config.moduleData && this.config.moduleData.userBackgroundType === 2 ? 2 : 1,
            change: (state) => {
                state ===1 ?
                    this.bgColorInstance.element.show():
                    this.bgColorInstance.element.hide();
                state ===2 ?
                    this.bgImgInstance.element.show():
                    this.bgImgInstance.element.hide();
            }
        })
        this.moduleBgImgInstance = new JDImage({
            domData: {
                node: this.element.find('.J_bgImg'),
                name: "couponAreaBackground",
                title: "",
                formType: {
                    type: "image"
                },
                tips: `图片尺寸要求宽度为1125px，高度为296px；大小不超过${window.page_config.chooseSizeLimit}KB，格式为JPG、PNG`
            },
            format: '1125-1125,296-296',
            defaultImage: this.config.moduleData && this.config.moduleData.couponAreaBackgroundType  === 2 && this.config.moduleData.couponAreaBackground ? this.config.moduleData.couponAreaBackground : '',
        });
        this.moduleBgColorInstance = new JDColor({
            domData: {
                name: 'couponAreaBackground',
                title: '背景色值',
                node: this.element.find('.J_bgColorSelect'),
            },
            value: this.config.moduleData && this.config.moduleData.couponAreaBackgroundType  === 1 && this.config.moduleData.couponAreaBackground ? this.config.moduleData.couponAreaBackground : '#ffffff',
        })
        this.moduleBgTypeInstance = new JDRadio({
            domData: {
                name: 'couponAreaBackgroundType',
                node:this.element.find('.J_bgType'),
                title: '优惠券区域背景设置',
                validate: {
                    must: true
                },
                formType:{
                    option:[
                        {text:"背景色", value:1},
                        {text:"背景图",value:2}
                    ]
                }
            },
            defaultChecked: this.config.moduleData && this.config.moduleData.couponAreaBackgroundType === 2 ? 2 : 1,
            change: (state) => {
                state ===1 ?
                    this.moduleBgColorInstance.element.show():
                    this.moduleBgColorInstance.element.hide();
                state ===2 ?
                    this.moduleBgImgInstance.element.show():
                    this.moduleBgImgInstance.element.hide();
            }
        })
        this.couponBgImgInstance = new JDImage({
            domData: {
                node: this.element.find('.J_couponBgImg'),
                name: 'couponBackground',
                title: '',
                formType: {
                    type: 'image',
                },
                tips: `图片尺寸要求宽度为175px，高度为75px；大小不超过${window.page_config.chooseSizeLimit}KB，格式为JPG、PNG`,
            },
            defaultImage: this.config.moduleData && this.config.moduleData.couponBackgroundType  === 2 && this.config.moduleData.couponBackground ? this.config.moduleData.couponBackground : '',
            format: '175-175,75-75',
        });
        this.couponBgColorInstance = new JDColor({
            domData: {
                name: 'couponBackground',
                title: '背景色值',
                node: this.element.find('.J_couponBgColorSelect'),
            },
            value: this.config.moduleData && this.config.moduleData.couponBackgroundType  === 1 && this.config.moduleData.couponBackground ? this.config.moduleData.couponBackground : '#ffffff',
        })
        this.couponBgTypeInstance = new JDRadio({
            domData: {
                name: 'couponBackgroundType',
                node:this.element.find('.J_couponBgType'),
                title: '优惠券券面背景设置',
                validate: {
                    must: true
                },
                formType:{
                    option:[
                        {text:"背景色", value:1},
                        {text:"背景图",value:2}
                    ]
                }
            },
            defaultChecked: this.config.moduleData && this.config.moduleData.couponBackgroundType === 2 ? 2 : 1,
            change: (state) => {
                state ===1 ?
                    this.couponBgColorInstance.element.show():
                    this.couponBgColorInstance.element.hide();
                state ===2 ?
                    this.couponBgImgInstance.element.show():
                    this.couponBgImgInstance.element.hide();
            }
        })
    }
    getData() {
        const { name } = this.config.domData;
        const data = {};
        let userBackground = this.bgTypeInstance.getData().userBackgroundType === 1 ? this.bgColorInstance.getData().userBackground : this.bgImgInstance.getData().userBackground;
        let couponAreaBackground = this.moduleBgTypeInstance.getData().couponAreaBackgroundType === 1 ? this.moduleBgColorInstance.getData().couponAreaBackground : this.moduleBgImgInstance.getData().couponAreaBackground;
        let couponBackground = this.couponBgTypeInstance.getData().couponBackgroundType === 1 ? this.couponBgColorInstance.getData().couponBackground : this.couponBgImgInstance.getData().couponBackground;
        data[name] = {
            ...this.bgTypeInstance.getData(),
            userBackground :userBackground,
            ...this.moduleBgTypeInstance.getData(),
            ...this.couponBgTypeInstance.getData(),
            couponAreaBackground:couponAreaBackground,
            couponBackground,
        };
        return data;
    }
}
export default JDNewPeople;