import './style.scss';
import BaseFormControl from '../../baseFormControl';
import { JVipCouponTpl } from './tpl';
import JDRadio from "../../formType/radio";
import JDColor from "../../formType/color";
import JDImage from "../../formType/image/image";
class JDVipCoupon extends BaseFormControl{
    constructor(config) {
        super();
        this.config = $.extend(true, {}, {
            domData: {},
            moduleData: null,
        }, config);
        this.render();
    }
    
    render(){
        let node = template.render(JVipCouponTpl);
        this.appendFormControl(node);
        this.bgImgInstance = new JDImage({
            domData: {
                node: this.element.find('.J_bgImg'),
                name: "moduleBackground",
                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.moduleBackground && this.config.moduleData.moduleBackgroundType  === 2) ? this.config.moduleData.moduleBackground : '',
        });
        this.bgColorInstance = new JDColor({
            domData: {
                name: 'moduleBackground',
                title: '背景色值',
                node: this.element.find('.J_bgColorSelect'),
            },
            value: this.config.moduleData && this.config.moduleData.moduleBackgroundType  === 1 && this.config.moduleData.moduleBackground ? this.config.moduleData.moduleBackground : '#ffffff',
        })
        this.bgTypeInstance = new JDRadio({
            domData: {
                name: 'moduleBackgroundType',
                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.moduleBackgroundType === 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.couponBgImgInstance = new JDImage({
            domData: {
                node: this.element.find('.J_couponBgImg'),
                name: 'couponBackground',
                title: '',
                formType: {
                    type: 'image',
                },
                tips: `图片尺寸要求宽度为109px，高度为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: '109-109,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 moduleBackground = this.bgTypeInstance.getData().moduleBackgroundType === 1 ? this.bgColorInstance.getData().moduleBackground : this.bgImgInstance.getData().moduleBackground;
        let couponBackground = this.couponBgTypeInstance.getData().couponBackgroundType === 1 ? this.couponBgColorInstance.getData().couponBackground : this.couponBgImgInstance.getData().couponBackground;
        data[name] = {
            ...this.bgTypeInstance.getData(),
            ...this.couponBgTypeInstance.getData(),
            moduleBackground,
            couponBackground,
        };
        return data;
    }
}
export default JDVipCoupon;