import React from 'react';
import { Button, Icon } from 'antd';
import { WeaTools, WeaLocaleProvider, WeaDialog } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

import './style/';

class WeaThemeLayout extends React.Component {
    state = { visible: false, loading: false, layouts: [], curLayout: {} };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    render() {
        const { visible, loading, layouts = [], curLayout = {} } = this.state;

        return (
            <WeaDialog
              visible={visible}
              loading={loading}
              title={getLabel(0, '布局选择')}
              icon="icon-coms-plate"
              iconBgcolor="#a7adb5"
              style={{ width: 730, height: 400 }}
              parentClassName="wea-theme-layout"
              zIndex={100}
              hasScroll={true}
              buttons={this.getButtons()}
              onCancel={this.onCancel}
            >
                <div className="wea-theme-layout-body">
                    {
                        layouts.map((layout) => {
                            const { key, type, name } = layout;
                            const isSelected = type == curLayout.type;
                            const selectedClassName = isSelected ? 'wea-theme-layout-selected' : '';

                            return (
                                <div key={key} className={`wea-theme-layout-item ${selectedClassName}`} title={name}>
                                    <div className="wea-theme-layout-img" onClick={() => this.onChange(layout)}>
                                        <img src={`/wui/theme/ecology9/image/layout/layout${key}.png`} alt="" />
                                    </div>
                                    <div className="wea-theme-layout-name">{name}</div>
                                    {isSelected ? <Icon type="check-circle" className="wea-theme-layout-icon" /> : ''}
                                </div>
                            );
                        })
                    }
                </div>
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button type="primary" onClick={this.onCancel}>{getLabel(0, '关闭')}</Button>);
        return buttons;
    }

    onOk() {
        this.setState({ visible: false });
    }

    onCancel() {
        this.setState({ visible: false });
    }

    onShow() {
        this.setState({ visible: true, loading: true });
        WeaTools.callApi('/api/portal/themeCenter/getAllLayouts', 'GET', {}).then((result) => {
            const { data = {} } = result;
            this.setState({ loading: false, ...data });
        });
    }

    onChange(layout) {
        this.setState({ curLayout: layout });
        doThemeAction('onLayoutChange', layout);
    }
}

export default WeaThemeLayout;