/**
 * 徐立
 * 2019年12月11日
 */
import React, { Component } from 'react';
import { Button,Modal,Row,Col,Select  } from 'antd'; 
import funcList from './functionList';
import AceEditor from "react-ace";
import styles from './style.less';
import Throttle from 'lodash-decorators/throttle';
const { Option } = Select;
export default class index extends Component {
    state = { 
        visible: false, // 模态框状态
        selectOne: [], // 系列函数初始数组
        selectTwo: [], // 子函数初始数组
        checkedList: [], // 用户选中的函数数据
        checkedFuc: '', // 用户选择的函数
        aceValue:'', // 编辑器输入内容
        callKey: '', // 选择函数调用名
        resultValue: '', // 计算结果
    };
    /**
     * 展示模态框回调
     */
    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    /**
     * 模态框确定函数回调
     */
    handleOk = e => {
        const { checkedFuc,callKey } = this.state
        this.setState({
            visible: false,
        });
        this.props.setPitchOff(`$.${callKey}()`)
    };
    /**
     * 模态框取消函数回调
     */
    handleCancel = e => {
        this.setState({
            visible: false,
        });
        this.props.setClosePitchOff()
    };
    /**
     * 系列函数搜索框change
     * @param {*} value 
     */
    selectOneChange = (value) => {
        // 筛选出用户选择
        let arr = funcList.filter(item => item.name == value)
        let arrTwo = [] // 替换子函数搜索
        if(arr.length>0){
            arr[0].children.map(item => {
                arrTwo.push({
                    value:item.name,
                    key:item.name,
                    func:item.function,
                    funcName:item.funcName,
                    params:item.params,
                    demo:item.demo,
                    callKey:item.callKey,
                })
            })
            this.setState({
                selectTwo:arrTwo
            })
        } else {
            const arrTwo=[];
            // 默认用户可查看全部数据
            funcList.map(item => {
                item.children.map(item => {
                    arrTwo.push({
                            funcName:item.funcName,
                            value:item.name,
                            key:item.name,
                            func:item.function,
                            params:item.params,
                            demo:item.demo,
                            callKey:item.callKey,
                        })
                })
            })
            this.setState({
                selectTwo:arrTwo
            })
        }
    }
    /**
     * 子函数列表搜索框change
     * @param {*} value 
     */
    selectTwoChange = (value) => {
        const { selectTwo } = this.state
        let arr = selectTwo.filter(item => item.key == value)
        this.setState({
            checkedList: arr,
            checkedFuc: arr[0].func,
            aceValue: arr[0].func.toString(),
            callKey: arr[0].callKey
        },() => {
            this.getListData(this.state.checkedList[0].demo)
        })
        
    }
    /**
     * 数据格式化等操作
     */
    componentDidMount(){
        const arrOne=[],arrTwo=[];
        // 默认用户可查看全部数据
        funcList.map(item => {
            arrOne.push({
                value:item.name,
                key:item.name,
            })
            item.children.map(item => {
                arrTwo.push({
                        funcName:item.funcName,
                        value:item.name,
                        key:item.name,
                        func:item.function,
                        params:item.params,
                        demo:item.demo,
                        callKey:item.callKey,
                    })
            })
        })
        this.setState({
            selectOne:arrOne,
            selectTwo:arrTwo
        })
    }
    /**
     * 根据传入的数组长度返回对应的函数传入值
     */
    @Throttle(1)
    getListData = (List) => {
        const { checkedFuc } = this.state
        let ary = []
        List.map(item => {
            ary.push(item.value)
            return item
        })
        let data = checkedFuc(...ary)
        this.setState({
            resultValue: data
        })
    }
    componentWillReceiveProps(nextProps){
        const { isPicth } = nextProps
        const { visible } = this.state
        if(visible !== isPicth){
            this.setState({
                visible:isPicth
            })
        }

    }
    // 编辑起状态函数
    onAceChange = (newValue) => {
        this.setState({
            aceValue:newValue
        })
    }
    render() {
        const { selectOne,selectTwo,checkedList,checkedFuc,aceValue,resultValue } = this.state
        const { isShowBtn,isPicth } = this.props
        return (
            <>
                {
                    isShowBtn?''
                    :<Button type='primary' onClick={this.showModal}>选择公式</Button>
                }
                <Modal
                title="选择已有公式"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={1200}
                >
                    <Row>
                        <div className={styles.title}>快捷查询函数</div>
                        <Col style={{padding:12}} span={12}>
                        <span style={{marginRight:12}}>函数类别</span>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '80%' }}
                                placeholder="请选择函数类别"
                                optionFilterProp="children"
                                onChange={this.selectOneChange}
                                filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                {
                                    selectOne.map(item =>{
                                        return <Option value={item.key}>{item.value}</Option>
                                    })
                                }
                            </Select>
                        </Col>
                        <Col style={{padding:12}} span={12}>
                        <span style={{marginRight:12}}>函数列表</span>
                            <Select
                                showSearch
                                style={{ width: '80%' }}
                                placeholder="请选择函数列表"
                                optionFilterProp="children"
                                onChange={this.selectTwoChange}
                                filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                {
                                    selectTwo.map(item =>{
                                        return <Option value={item.key}>{item.value}</Option>
                                    })
                                }
                            </Select>
                        </Col>
                    </Row>
                    <Row>
                        <div className={styles.title}>{checkedList.length>0?checkedList[0].name:''}函数详细内容</div>
                        <Col span={24}>
                                {
                                    checkedList.length>0?(
                                        <div className={styles.yesList}>
                                            <Row gutter={16}>
                                                <Col span={5} className={styles.left_title}>函数名称:</Col>
                                                <Col span={16}  className={styles.right_content}> {checkedList[0].value}</Col>
                                            </Row>
                                            <Row gutter={16}>
                                                <Col span={5} className={styles.left_title}>函数介绍:</Col>
                                                <Col span={16} className={styles.right_content}> {checkedList[0].funcName}</Col>
                                            </Row>
                                            {
                                                checkedList.length>0?checkedList[0].params.map((item,index) => {
                                                    return <Row gutter={16}>
                                                    <Col span={5} className={styles.left_title}>函数传入参数介绍({index+1}):</Col>
                                                    <Col span={16} className={styles.right_content}> {item.text}</Col>
                                                </Row>
                                                }):''
                                            }
                                            <Row gutter={16}>
                                                <Col span={5} className={styles.left_title}>函数内容:</Col>
                                                <Col span={16} className={styles.right_content}>
                                                <AceEditor height={450} width={462}
                                                    placeholder="请输入json样式"
                                                    mode={"json"}
                                                    disabled
                                                    theme={"textmate"}
                                                    fontSize={12}
                                                    readOnly
                                                    value={aceValue}
                                                    onChange={this.onAceChange}
                                                    showPrintMargin={true}
                                                    showGutter={true}
                                                    highlightActiveLine={true}
                                                    name="UNIQUE_ID_OF_DIV"
                                                    // keyboardHandler="vim"
                                                    setOptions={{
                                                    enableBasicAutocompletion: true,
                                                    enableLiveAutocompletion: true,
                                                    enableSnippets: true,
                                                    showLineNumbers: true,
                                                    tabSize: 2,
                                                    }}
                                                    editorProps={{ $blockScrolling: true }}
                                                    />
                                                    {/* <pre>{checkedList[0].func.toString()}</pre> */}
                                                    </Col>
                                            </Row>
                                            <Row gutter={16}>
                                                <Col span={5} className={styles.left_title}>函数案例计算参数:</Col>
                                                <Col span={16} className={styles.right_content}>
                                                    {
                                                        checkedList[0].demo.map((item,index) => {
                                                        return <div><span>案例传入参数({index+1}):</span><span style={{marginLeft:12}}>类型: {item.text}</span></div>
                                                        })
                                                    }
                                                </Col>
                                            </Row>
                                            <Row gutter={16}>
                                                <Col 
                                                    span={5} 
                                                    className={styles.left_title}>
                                                        计算结果:
                                                    </Col>
                                                <Col 
                                                    span={16} 
                                                    className={styles.right_content}>
                                                        {
                                                            resultValue?
                                                                typeof resultValue === 'object'
                                                                || typeof resultValue === 'boolean'?
                                                                    JSON.stringify(resultValue)
                                                                    :resultValue
                                                                :typeof resultValue === 'boolean'?
                                                                    JSON.stringify(resultValue)
                                                                    :null
                                                        }
                                                        </Col>
                                            </Row>
                                        </div>
                                    ):<div className={styles.noList}>
                                        请选择您需要执行的函数
                                    </div>
                                }
                        </Col>
                    </Row>
                </Modal>
            </>
        )
    }
}