import BaseFormControl from '../../baseFormControl'
import Tpl, { JBackgroundTpl } from './tpl'
import { RadioButton, RadioGroup } from '@hot/pc-es-cn-shop-ui'
import JDRadio from '../../formType/radio'
import JDColor from '../../formType/color'
import JDImage from '../../formType/image/image'
import get from 'lodash/get'
class TextColorInfo extends BaseFormControl {
    constructor(config) {
        super(config)
        this.config = $.extend(true, {}, config)
        console.log('ccc:', this.config)
        const extConfig = this.config.domData.extConfig
        if (extConfig && extConfig.type == 2) {
            this.renderCustom()
        } else {
            this.render()
        }
    }
    render() {
        this.appendFormControl(Tpl)
        this.imgTitleRadio = new RadioButton({
            node: this.element.find('.J_moduleWrap')[0],
            className: 'cd-radio-item',
            groupName: 'groupModule',
            value: 0,
            label: '底图1（默认）',
        })
        this.imgTitleModule = new RadioGroup({
            group: [this.imgTitleRadio],
            selectedValue: 0,
            onChange: () => {},
        })
    }
    renderCustom() {
        let node = template.render(JBackgroundTpl)
        this.appendFormControl(node)
        const extConfig = this.config.domData.extConfig
        let defaultData = {}
        if (extConfig && extConfig.defaultData) {
            try {
                defaultData = JSON.parse(extConfig.defaultData)
            } catch (err) {
                defaultData = {}
                console.log('defaultData error:', err)
            }
        }
        const moduleData = { ...defaultData, ...this.config.moduleData }
        const defaultImage = get(moduleData, 'image.value', '')
        const defaultColor = get(moduleData, 'color', '')
        const defaultType = defaultImage ? 2 : 1
        this.bgImgInstance = new JDImage({
            domData: {
                node: this.element.find('.J_bgImg'),
                name: 'bgImg',
                title: '',
                formType: {
                    type: 'image',
                },
                tips: `图片尺寸要求宽度为1065px，高度为138px；大小不超过${window.page_config.chooseSizeLimit}KB，格式为JPG、PNG`,
            },
            format: '1065,138',
            defaultImage: defaultImage,
        })
        this.bgColorInstance = new JDColor({
            domData: {
                name: 'bgColor',
                title: '背景色值',
                node: this.element.find('.J_bgColorSelect'),
            },
            value: defaultColor || '#ffffff',
        })
        this.bgTypeInstance = new JDRadio({
            domData: {
                name: 'bgType',
                node: this.element.find('.J_bgType'),
                validate: {
                    must: true,
                },
                formType: {
                    option: [
                        { text: '背景色', value: 1 },
                        { text: '背景图', value: 2 },
                    ],
                },
            },
            defaultChecked: defaultType,
            change: (state) => {
                state === 1
                    ? this.bgColorInstance.element.show()
                    : this.bgColorInstance.element.hide()
                state === 2
                    ? this.bgImgInstance.element.show()
                    : this.bgImgInstance.element.hide()
            },
        })
    }
    getData() {
        const { name } = this.config.domData
        let data = {}
        const extConfig = this.config.domData.extConfig
        if (extConfig && extConfig.type == 2) {
            const bgType = this.bgTypeInstance.getData().bgType
            const obj = {
                color:
                    bgType == 1 ? this.bgColorInstance.getData().bgColor : '',
                image: {
                    value:
                        bgType == 2 ? this.bgImgInstance.getData().bgImg : '',
                },
                selectChoice: 1, 
            }
            console.log('obj:', obj)
            data[name] = obj
        } else {
            data[name] = {
                color: '#E3DBFF',
                image: {
                    value:
                        '//m.360buyimg.com/imagetools/jfs/t1/146568/21/18545/4703/615fed9bE0ea17b99/679895ec2b1682cb.png', 
                },
            }
        }
        return data
    }
}
export default TextColorInfo