/**
 * 徐立
 * 2019年12月20日
 * 基础组件
 */
import React, { Component } from 'react';
import AllImg from '../assets/Add.png';
import styles from './style.less';
import { Icon,Tooltip } from 'antd';
import { isEmpty } from '../copy';
export default class Basics extends Component {
    constructor(props){
        super(props)
        this.state = {
            isUserClick: false, // 是否用户点击
        }
    }
    // 打开函数选择
    setShowList = () => {
        const { item } = this.props
        this.props.setCheckedList(item.name)
        this.setState({
            isUserClick: true,
        })
    }
    render() {
        const {
            isUserClick,
        } = this.state
        const {
            setPitchOn,
            setFunction,
            setCloseAll, // 选中函数后关闭全部
            item
        } = this.props
        return (
            <div onClick={this.setShowList } className={styles.basics_div}>
                <div className={styles.img_div}>
                    <img  src={item.isPitch?item.pitchImages:item.images} />
                </div>
                <div  className={[`${styles.name}`,`${item.isPitch?styles.pitchOn:''}`].join(' ')}>
                    {item.name}
                </div>
                <div className={[`${styles.pull_down}`,`${item.isShowList?styles.pull_show:isUserClick?styles.pull_dis:''}`].join(' ')}>
                    <div className={styles.top_fuc}>
                        {
                                !isEmpty(item.children)?item.children.map((arr,index)=> {
                            return <div key={index}><Tooltip
                                    placement="right" title={<div><div>函数名称:<br />{arr.name}</div><div>函数简介:<br />{arr.funcName}</div><div>注:<br />点击可快捷添加入输入栏</div></div>}><div 
                                    onClick={()=>{setCloseAll();setFunction(`$.${arr.callKey}()`)}}
                                    className={styles.top_list}>
                                <Icon style={{fontSize:12,marginRight:8}} type="edit"/>
                                {arr.name}
                            </div></Tooltip></div>
                            }):<div className={styles.top_list}>暂无相关函数</div>
                        }
                    </div>
                    <div className={styles.bottom_fuc} onClick={setPitchOn}>
                        <img src={AllImg} alt=""/>
                        所有函数
                    </div>
                </div>
            </div>
        )
    }
}