import React from 'react';
import styles from './index.css';
import EditTpl from "../edit/index";

class DropDownList extends React.Component {
    state = {
        config: {
            data: {
                list: []
            }
        },
        navIndex: 0,
        isShowDropdown: "none",
        type: 0,
    }
    componentWillReceiveProps(props) {
        const { data } = props;
        data && this.setState({ config: data });
    }
    showDropdown = (e) => {
        const { isShowDropdown } = this.state;
        if (isShowDropdown == "none") {
            this.setState({ isShowDropdown: "block" });
        } else {
            this.setState({ isShowDropdown: "none" });
        }
    }
    changeType = (type, value = {}) => {
        this.setState({ type: type, isShowDropdown: "none" });
        const { click } = this.props;
        typeof click === "function" && click(value);
    }
    render() {
        const { config, config: { data = {} }, type, isShowDropdown } = this.state,
            { list = [] } = data;
        return (
            <div style={this.props.style} className={styles.box}>
                <EditTpl style={{ left: "80px" }} data={config} upData={config => this.setState({ config })}></EditTpl>
                <div className={styles.list}>
                    <span className={isShowDropdown == "none" ? '' : styles.iconUp}
                        onClick={this.showDropdown}>{(list[type] || {})['name']}</span>
                    <ul style={{ display: isShowDropdown }}>
                        {!!list.length && list.map((value, index) => {
                            return (
                                <li key={index} onClick={() => this.changeType(index, value)}>{value.name}</li>
                            )
                        })
                        }
                    </ul>
                </div>
                <span className={styles.title}>{(list[type] || {})['title']}</span>
            </div>
        )
    }
}

export { DropDownList }
export default DropDownList