import {
    observer,
} from 'mobx-react';
import { i18n } from '../../../../public/i18n.js'

@observer
export default class Basic extends React.Component {
    constructor(props) {
        super(props);

        this.datas = [{
            key: "bg",
            icon: "icon-coms-background",
            name: i18n.label.background()
        }, {
            key: "img",
            icon: "icon-coms-pic",
            name: i18n.label.image()
        }, {
            key: "head",
            icon: "icon-coms-text",
            name: i18n.label.text()
        }, {
            key: "congratulation",
            icon: "icon-coms-biangengrizhi",
            name: i18n.label.congratulation()
        }, {
            key: "person",
            icon: "icon-coms-man",
            name: i18n.label.nameList()
        }, {
            key: "date",
            icon: "icon-coms02-Date",
            name: i18n.label.date()
        }]
    }

    handleClick = (type) => {
        const {
            store
        } = this.props, {
            setType,
            setVisible,
        } = store;

        setType(type);
        !store.isLock && setVisible(true);
    }

    render() {
        return (
            <ul className="anticons-list">
                {this.datas.map(data => {
                    const { key, name, icon } = data;
                    return (
                        <li key={key} onClick={() => this.handleClick(key) } title={name}>
                            <i className={icon} />
                            <p>{name}</p>
                        </li>
                    )}
                )}
            </ul>
        );
    }
}