import BaseFormControl from '../../baseFormControl';
import LinkTool from '../../../linkTool';
import JDImageWH from '../../formType/imageWH/imageWH';
import JDInput from '../../formType/input';
import shopCallTpl from './tpl';
import './style.scss';
import { getShopType } from '../../../../util/channelUtil';
import JDSwitch from "../../formType/switch";
import JDRadio from "../../formType/radio";
import JDColor from "../../formType/color";
class YiYaoShopCall extends BaseFormControl {
    constructor(config) {
        super(config);
        this.config = $.extend(true, {}, config);
        this.bgImageTilingSwitchValue = this.config.moduleData &&
        this.config.moduleData.bgImageSwitch==1 &&
        this.config.moduleData.bg &&
        this.config.moduleData.bg.bgImageTilingSwitch ?
        this.config.moduleData.bg.bgImageTilingSwitch : false;
        this.render();
        this.bindEvent();
    }
    
    render() {
        this.appendFormControl(shopCallTpl);
        this.shopLogo = new JDImageWH({
            domData: {
                node: this.element.find('.J_shopLogo'),
                name: 'shopLogoImg',
                title: '店铺Logo',
                dateType: 'J_NEW_IMAGE_WH',
                formType: {
                    type: 'imageWH',
                },
                tips: `店铺Logo图片尺寸要求宽度为180px，高度为60px；大小不超过${window.page_config.chooseSizeLimit}KB，格式为JPG、PNG`,
            },
            defaultImage: this.config.moduleData && this.config.moduleData.shopLogoImg ? this.config.moduleData.shopLogoImg : {},
            format: '180-180,60-60',
        });
        this.shopLink = new JDInput({
            domData: {
                node: this.element.find('.J_shopLink'),
                name: 'shopLink',
                title: '店铺Logo链接',
                dateType: 'J_NORMAL_TEXT',
            },
            placeholder: '请输入店铺Logo链接',
            defaultValue: this.config.moduleData && this.config.moduleData.shopLink ? this.config.moduleData.shopLink.link : '',
        });
        this.shopNameSwitch = new JDSwitch({
            domData: {
                name: 'shopNameSwitch',
                title: '店铺名称',
                node: this.element.find('.J_shopNameSwitch'),
            },
            moduleData: this.config.moduleData && this.config.moduleData.shopNameSwitch ? this.config.moduleData.shopNameSwitch : true,
        });
        this.bgImageSwitch = new JDSwitch({
            domData: {
                name: 'bgImageSwitch',
                title: '背景图片设置',
                node: this.element.find('.J_bgImg'),
            },
            moduleData: this.config.moduleData && this.config.moduleData.bgImageSwitch ? this.config.moduleData.bgImageSwitch : false,
            onStateChange: (state) => {
                state ?
                    this.bgImgWH.element.show():
                    this.bgImgWH.element.hide();
                state ?
                    this.bgImageTilingSwitch.element.show():
                    this.bgImageTilingSwitch.element.hide();
    
                if(state){
                    if(this.bgImageTilingSwitchValue){
                        this.bgImageTiling.element.show();
                        this.bgAlign.element.hide();
                    }else{
                        this.bgImageTiling.element.hide();
                        this.bgAlign.element.show();
                    }
                }else{
                    this.bgAlign.element.hide();
                    this.bgImageTiling.element.hide();
                }
                
            },
        })
        this.bgImgWH = new JDImageWH({
            domData: {
                node: this.element.find('.J_bgImgSelect'),
                name: 'bgImage',
                title: '',
                dateType: 'J_NEW_IMAGE_WH',
                formType: {
                    type: 'imageWH',
                },
            },
            defaultImage: this.config.moduleData && this.config.moduleData.bg ? this.config.moduleData.bg.bgImage : {},
        });
        this.bgColorSwitch = new JDSwitch({
            domData: {
                name: 'bgColorSwitch',
                title: '背景颜色设置',
                node: this.element.find('.J_bgColor'),
            },
            moduleData: this.config.moduleData && this.config.moduleData.bgColorSwitch ? this.config.moduleData.bgColorSwitch : false,
            onStateChange: (state) =>{
                state ?
                    this.bgcolor.element.show():
                    this.bgcolor.element.hide();
            }
        });
        this.bgImageTilingSwitch = new JDSwitch({
            domData: {
                name: 'bgImageTilingSwitch',
                title: '图片平铺',
                node: this.element.find('.J_ImgTiling'),
            },
            moduleData: this.bgImageTilingSwitchValue,
            onStateChange: (state) => {
                if(state){
                    this.bgImageTiling.element.show();
                    this.bgAlign.element.hide();
                }else{
                    this.bgImageTiling.element.hide();
                    this.bgAlign.element.show();
                }
        
            },
        });
        this.bgAlign = new JDRadio({
            domData: {
                name: 'aligin',
                node:this.element.find('.J_align'),
                title: '',
                validate: {
                    must: true
                },
                formType:{
                    option:[
                        {text:"居中对齐",value:1},
                        {text:"左对齐", value:2},
                        {text:"右对齐", value:3}
        
                    ]
                }
            },
            defaultChecked: this.config.moduleData && this.config.moduleData.bg ? this.config.moduleData.bg.aligin : 1,
        })
        this.bgImageTiling = new JDRadio({
            domData: {
                name: 'tiling',
                node:this.element.find('.J_ImgTilingType'),
                title: '',
                validate: {
                    must: true
                },
                formType:{
                    option:[
                        {text:"横向平铺",value:1},
                        {text:"纵向平铺", value:2},
                
                    ]
                }
            },
            defaultChecked: this.config.moduleData && this.config.moduleData.bg ? this.config.moduleData.bg.tiling : 1,
        })
        this.bgcolor = new JDColor({
            domData: {
                name: 'bgColorConfig',
                title: '',
                node: this.element.find('.J_bgColorSelect'),
            },
            value: this.config.moduleData && this.config.moduleData.bgColorConfig ? this.config.moduleData.bgColorConfig : '#ffffff',
        })
        
        let imgSwitch = this.config.moduleData && this.config.moduleData.bgImageSwitch ? this.config.moduleData.bgImageSwitch : false;
        imgSwitch ? this.bgImgWH.element.show(): this.bgImgWH.element.hide();
        imgSwitch ? this.bgImageTilingSwitch.element.show(): this.bgImageTilingSwitch.element.hide();
        if(imgSwitch){
            if(this.bgImageTilingSwitchValue){
                this.bgImageTiling.element.show();
                this.bgAlign.element.hide();
            }else{
                this.bgImageTiling.element.hide();
                this.bgAlign.element.show();
            }
        }else{
            this.bgAlign.element.hide();
            this.bgImageTiling.element.hide();
        }
        let colorSwitch = this.config.moduleData && this.config.moduleData.bgColorSwitch ? this.config.moduleData.bgColorSwitch : false;
        colorSwitch ? this.bgcolor.element.show(): this.bgcolor.element.hide();
        $(this.shopLink).data('linkObj', this.config.moduleData && this.config.moduleData.shopLink);
    };
    
    bindEvent() {
        this.element.on('click', '.J_shopLink', (event) => {
            this.linkTool = new LinkTool({
                node: $(event.currentTarget),
                env: {
                    platformId: page_data.clientType === 'PC' ? 0 : 1,
                    shopType: getShopType(),
                },
                onConfirm: (link, linkObj) => {
                    this.shopLink.setData(link);
                    $(this.shopLink).data('linkObj', linkObj);
                },
            });
        });
    }
    
    getData() {
        const { name } = this.config.domData;
        const data = {};
        data[name] = {
            ...this.shopNameSwitch.getData(),
            shopAttentionSwitch:0,
            ...this.shopLogo.getData(),
            ...this.bgcolor.getData(),
            shopLink: $(this.shopLink).data('linkObj'),
            ...this.bgColorSwitch.getData(),
           ...this.bgImageSwitch.getData(),
            bg: {
                ...this.bgImgWH.getData(),
                ...this.bgImageTilingSwitch.getData(),
                ...this.bgImageTiling.getData(),
                ...this.bgAlign.getData()
            }
        };
        
        return data;
    }
}
export default YiYaoShopCall;