import { WeaTools, WeaTab, WeaInput, WeaSelect } from 'ecCom';
import React, { Component } from 'react';
import loadjs from 'loadjs';
import { inject, observer } from 'mobx-react';
import "./style/board.less";
import Column from './Column';
import { Icon, message, Button, Select} from 'antd';
import { MouseWheelFun } from './util/compatible';
import { WeaLocaleProvider } from 'ecCom';
import { toJS } from 'mobx';
import { Condition } from "../list/listCondition"
const ButtonGroup = Button.Group;
const getLabel = WeaLocaleProvider.getLabel;
const Option = Select.Option;
@inject("projectBoardStore")
@observer
class BoardApp extends Component {

    constructor(props) {
        super(props);
        this.state = {

        }
        const { projectBoardStore } = props;
        window.onresize = () => {
            projectBoardStore.windowHeight = window.innerHeight;
            projectBoardStore.windowWidth = window.innerWidth;
        };
    }

    componentDidMount() {
        const { projectBoardStore } = this.props;
        let jsFiles = [];
        if (!WeaTools.isBelowIE9()) {
            jsFiles.push('/proj/e9resource/boardjs/web-animations.min.js');
        }
        jsFiles = [...jsFiles, '/proj/e9resource/boardjs/hammer.min.js', '/proj/e9resource/boardjs/muuri.js'];
        if (!loadjs.isDefined('boardjs')) {
            loadjs(jsFiles, 'boardjs', {
                success: () => {
                    projectBoardStore.getKanbanView();
                }
            });
        } else {
            projectBoardStore.getKanbanView();
        }
        MouseWheelFun('prj_board_container', 'prj_board');

    }

    componentWillReceiveProps (nextProps) {
        const { projectBoardStore } = nextProps;
        let jsFiles = [];
        if (!WeaTools.isBelowIE9()) {
            jsFiles.push('/proj/e9resource/boardjs/web-animations.min.js');
        }
        jsFiles = [...jsFiles, '/proj/e9resource/boardjs/hammer.min.js', '/proj/e9resource/boardjs/muuri.js'];
        if (!loadjs.isDefined('boardjs')) {
            loadjs(jsFiles, 'boardjs', {
                success: () => {
                    projectBoardStore.getKanbanView();
                }
            });
        } else {
            projectBoardStore.getKanbanView();
        }
        MouseWheelFun('prj_board_container', 'prj_board');
    }

    render() {


        const { projectBoardStore } = this.props;
        const { userid, usericons, username, delGrop, changeSearchType, searchType, columns, timestamp, canAddTask, canEditBoard, boardform, setShowSearchAd, showSearchAd, searchTypeOptions, searchKanBanView } = projectBoardStore;
       
        return (
            <div className={"prj_board"} >
                 <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@sd6q9c`}
                    searchType={['advanced']}
                    setShowSearchAd={bool => { setShowSearchAd(bool) }}
                    hideSearchAd={() => setShowSearchAd(false)}
                    searchsAd={
                        <div><Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@pg1a0a`} listStore={projectBoardStore} form={boardform} onEnterSearch={this.onEnterSearch} ></Condition></div>
                    }
                    showSearchAd={showSearchAd}
                    onChange={this.changeVision}
                    buttonsAd={this.getAdButtons()}
                    buttons={[<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@nydsx3`}
                        key={searchTypeOptions.length}
                        showSearch // 设置select可搜索
                        optionFilterProp="children" // 设置搜素option的内容，默认为value
                        style={{ width: 100,height: 28 }}
                        placeholder="维度"
                        options={searchTypeOptions}
                        value={searchType}
                        viewAttr={3}
                        onChange={v => {
                            changeSearchType(v);
                        }}
                    />]}
                />
                <section id='prj_board_container' className="prj_board_container">
                    <div id="prj_board" className="board muuri" style={{ 'height': (projectBoardStore.windowHeight - 250) + 'px' }}>
                        {columns.map(element => {
                            return <Column ecId={`${this && this.props && this.props.ecId || ''}_Column@6rvw4w`}   
                                key={timestamp+""+element.id} 
                                data={element}  
                                boardStore={projectBoardStore}
                                groupid={element.id}
                                saveGroupName={(name, id) => { projectBoardStore.saveGroupName(name, id) }}
                                checkRepeat={(name, id) => { projectBoardStore.checkGroupRepeat(name, id) }}
                                saveTask={(params) => { projectBoardStore.saveTask(params) }}
                                delGrop={(id) => delGrop(id)}
                                canAddTask={canAddTask}
                                userInfo={{
                                    userid: userid,
                                    username: username,
                                    usericons: usericons
                                }}
                              />
                        })}
                        
                        {searchType=="stageid"&&<div style={{ display: canEditBoard ? 'inline-block' : "none" ,width:"300px"}} >
                                    <div className="addNewStage" onClick={this.handleAdd} style={{ display: this.state.visible ? "none" : "" }} >
                                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@6t3qm6`} type="plus" />{getLabel('387718', "新建阶段")}
                                    </div>
                                    <div className="kanban-group" style={{ display: this.state.visible ? "" : "none" }}>
                                    <div className="kanban-group-head">
                                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@amuoos`}
                                        // helpfulTip="测试"
                                        ref="groupNameInput"
                                        autofocus="autofocus"
                                        style={{ top: '9px' }}
                                        id='test'
                                        placeholder={getLabel('387717', "填写阶段名称")}
                                        value={this.state.groupName}
                                        onChange={value => {
                                            this.setState({ groupName: value })
                                        }}
                                        onBlur={value => {
                                            this.handleAdd(value);
                                        }}
                                        />
                                    </div>

                                    </div>
                                </div>}
                        {/* {projectBoardStore.hasRight&&<ColumnAdd sureFun={projectBoardStore.addColumn}></ColumnAdd>} */}
                    </div>
                </section>
            </div>
        )

    }

    handleAdd = (value) => {
        const input = this.refs.groupNameInput.refs.inputNormal.refs.input.refs.input;
        if (value!=="" && this.state.visible) {
            if (this.checkGroupRepeat(value)) {
                this.props.projectBoardStore.saveGroup(value);
                this.setState({ visible: !this.state.visible, groupName: "" });
            } else {
                message.error(getLabel('387703', "阶段名称重复！"));
            }
        }else if(value == ""  && this.state.visible ){
            this.setState({ visible: !this.state.visible, groupName: "" });
        }else if (!this.state.visible) {
            input.focus();
            input.setSelectionRange(0, input.value.length);
            this.setState({ visible: !this.state.visible, groupName: "" });
        }
      }

      checkGroupRepeat = (name) => {
        const { projectBoardStore: { columns } } = this.props;
        let checked = true;
        const stages = toJS(columns);
        stages.map(item => {
          if (item.title == name) {
            checked = false;
          }
        });
        return checked;
      }

      getAdButtons = () => {
        const { projectBoardStore } = this.props;
        const { searchKanBanView, setShowSearchAd, clearFormFields } = projectBoardStore;
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8qbbx5@search`} type="primary" onClick={() => { searchKanBanView(false); setShowSearchAd(false); }}>{getLabel(197,"搜索")}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mo6x0h@reset`} type="ghost" onClick={() => { clearFormFields(); }}>{getLabel(2022,"重置")}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@s907um@cancel`} type="ghost" onClick={() => { setShowSearchAd(false) }}>{getLabel(201,"取消")}</Button>)
        ];
    }

    onEnterSearch=() =>{
        const { projectBoardStore } = this.props;
        projectBoardStore.searchKanBanView(false); 
        projectBoardStore.setShowSearchAd(false);
    }

}

export default BoardApp;