/**
 * 徐立
 * 2019年12月19日
 * 公式表单
 */
import React, { Component } from 'react';
import styles from './style.less';
import { Icon,Alert,Select,Button } from 'antd';
import AceEditor from "react-ace";
import AllImg from '../assets/AllFuc.png';
import All2Img from '../assets/AllFuc2.png';
import ExcelBtn from '../excelInitFuc';
import RollTab from './rollTab';
const { Option } = Select;
export default class FormulaForm extends Component {
    constructor(props){
        super(props)
        this.state = {
            isPitchOn:false,// 是否点击所有函数
            pitchFunction: '', // 选中函数
            aceValue:'', // 编辑器输入内容
            pages:1, // 初始页面
            pagesTotal:0, // 总条数
            isPagesMax: false, // 是否为最大页
            isPagesMin: true, // 是否为最小页
        }
    }
    // 设置数据总条数
    setPagesTotal = (num) => {
        this.setState({
            pagesTotal:num
        })
    }
    // ta表单快捷选择函数
    setFunction = (fuc) => {
        this.setState({
            pitchFunction:fuc,
            
        })
        this.props.append(fuc)
    }
    // 点击修改选中状态
    setPitchOn = () => {
        this.setState({
            isPitchOn:true,
        })
    }
    // 取消显示并获取用户选择函数
    setPitchOff = (fuc) => {
        this.setState({
            isPitchOn:false,
            pitchFunction:fuc,
           
        })
        this.props.append(fuc)
    }
    // 单独用户点击取消控制函数
    setClosePitchOff = () => {
        this.setState({
            isPitchOn:false
        })
    }
    // 查找表选择事件
    onNameChange = (value) => {
        console.log(`selected ${value}`);
    }
    // 查找字段编码选择事件
    onCodeChange = (value) => {
        console.log(`selected ${value}`);
    }
    // 编辑起状态函数
    onAceChange = (newValue,all) => {
        this.setState({
            aceValue:newValue
        })
    }
    // 返回上一页
    goBackPages = () => {
        this.refs.rolltab.setCloseAll()
        const num = this.state.pages <=1?1:this.state.pages-1
        this.setState({
            pages: num,
            isPagesMin:num == 1?true:false,
            isPagesMax:false,
        })
    }
    /**
     * 前进下一页
     */
    goForwrod = () => {
        this.refs.rolltab.setCloseAll()
        const { pagesTotal } = this.state
        let pageMax = Math.ceil(pagesTotal/14)
        let num = this.state.pages==pageMax?pageMax:this.state.pages+1
        this.setState({
            pages: num,
            isPagesMax: num == pageMax? true:false,
            isPagesMin:false,
        })
    }

    render() {
        const { 
            isFormula, // 是否展示公式表单
            cutCloseFormula, // 关闭公式表单函数
            isOne, // 是否为用户点击,排除渲染时重复展示
        } = this.props
        const {
            isPitchOn,
            aceValue,
            isPagesMax,
            isPagesMin,
            pages,
        } = this.state
        return (
            <div
            className={ [`${styles.formula_div}`,`${isFormula?styles.show:isOne?styles.dis:''}`].join(' ') }
            >
                <div className={styles.left_div}>
                    <div className={styles.tab_top}>
                        <div
                            onClick={isPagesMin?()=>{}:this.goBackPages}
                            style={{cursor:isPagesMin?'not-allowed':'pointer'}}
                            className={styles.left_btn}>
                            <Icon style={{color:isPagesMin?'#cccccc':'#999999'}} type="left" />
                        </div>
                        <div className={styles.center_conter}>
                            <div onClick={this.setPitchOn} className={styles.all_card}>
                                <img src={isPitchOn?All2Img:AllImg} />
                                <div className={[`${styles.name}`,`${isPitchOn?styles.pitchOn:''}`].join(' ')}>所有函数</div>
                            </div>
                            <RollTab 
                                ref = 'rolltab'
                                // 所有函数调用相关
                                setPitchOn = {this.setPitchOn}
                                // 设置函数相关
                                setFunction = {this.setFunction}
                                // 设置数据总条数
                                setPagesTotal = {this.setPagesTotal}
                                // 页码相关
                                pages = {pages}
                            />
                        </div>
                        <div
                            onClick={isPagesMax?()=>{}:this.goForwrod}
                            style={{cursor:isPagesMax?'not-allowed':'pointer'}}
                            className={styles.left_btn}>
                                <Icon style={{color:isPagesMax?'#cccccc':'#999999'}} type="right" />
                        </div>
                    </div>
                    <div onClick = {()=>{this.refs.rolltab.setCloseAll()}}>
                        {this.props.editor}
                    {/* <AceEditor height={600} width={1200}
                        placeholder='"请输入js语句"'
                        mode={"javascript"}
                        theme={"textmate"}
                        fontSize={12}
                        value={aceValue}
                        onChange={this.onAceChange.bind(this)}
                        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 }}
                        /> */}
                    </div>
                </div>
               
                <div className={styles.absolute_div} onClick={()=>{cutCloseFormula();this.refs.rolltab.setCloseAll()}}>
                    {
                        isFormula?<Icon  type="right" />:<Icon  type="left" />
                    }
                </div>
                <ExcelBtn isShowBtn={true} setClosePitchOff={this.setClosePitchOff} setPitchOff={this.setPitchOff} isPicth={isPitchOn}/>
            </div>
        )
    }
}