import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import './kanban/style/index.less'
import Kanban from './kanban';
import { toJS } from 'mobx';
import { Icon, message } from 'antd';
import { WeaInput, WeaAlertPage } from 'ecCom';
import QueueAnim from 'rc-queue-anim';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@observer
class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      columns: props.columns || [],
      visible: false,
      groupName: ""
    }
  }

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



  }


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


  componentWillUnmount() {
    const { boardStore, columns } = this.props;
    boardStore.clearStatus();
  }

  render() {
    const { boardStore } = this.props;
    const { userid, usericons, username, delGrop, isedit, columns, canEditBoard, canAddTask } = boardStore;
    if (!isedit && columns && columns.length == 0) {
      return (
        <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@z6ww05`} iconSize={100}>
          <div style={{ color: '#000' }}>
            {getLabel('387719', "对不起，该看板暂无数据 ！")}
          </div>
        </WeaAlertPage>
      )
    } else {
      return (
        <Kanban ecId={`${this && this.props && this.props.ecId || ''}_Kanban@0cp91w`} addAction={
          <div style={{ display: canEditBoard ? 'inline-block' : "none" }}>
            <div className="addNewStage" onClick={this.handleAdd} style={{ display: this.state.visible ? "none" : "" }} >
              <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@8p8ch0`} 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@emlqsb`}
                  // 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>
        } onChange={boardStore.doMovePrjBoard} >
          {boardStore.columns && boardStore.columns.map((column) => {

            return (
              <Kanban.Group ecId={`${this && this.props && this.props.ecId || ''}_Kanban.Group@zwg7nd@${column.id}`}
                value={column.id}
                title={column.title}
                columns={boardStore.columns}
                delGrop={(id) => delGrop(id)}
                userInfo={{
                  userid: userid,
                  username: username,
                  usericons: usericons
                }}
                isedit={isedit}
                canEditBoard={canEditBoard}
                canAddTask={canAddTask}
                groupid={column.id}
                // footer={ <Button onClick={()=>{this.setState({visible: !this.state.visible})}}>add</Button>}
                saveTask={(params) => { this.props.boardStore.saveTask(params) }}
                saveGroupName={(name, id) => { this.props.boardStore.saveGroupName(name, id) }}
                checkRepeat={(name, id) => { this.props.boardStore.checkGroupRepeat(name, id) }}
              // extra={}

              >
                {
                  this.getItems(column.items)
                }
              </Kanban.Group>
            )
          })
          }
        </Kanban>
      );
    }

  }

  getItems = (items) => {
    const { boardStore: { canAddTask, canEditBoard } } = this.props;
    let comItems = [];
    items && items.map((item) => {
      comItems.push(
        <Kanban.Item ecId={`${this && this.props && this.props.ecId || ''}_Kanban.Item@x125tp@${item.id}`}
          value={item.id}
          title={item.title}
          extra="more"
          managerid={toJS(item.hrmid)}
          managericon={toJS(item.hrmidicon)}
          managername={toJS(item.hrmidname)}
          islandmark={item.islandmark}
          description={item.overstr}
          colors={item.finishcolor}
          allnum={item.allnum}
          prefix={item.prefix}
          finishnum={item.finishnum}
          canAddTask={canAddTask}
          canEditBoard={canEditBoard}
          status ={item.status}
          setLandMark={(id, value) => { this.props.boardStore.setLandMark(id, value) }}
          onTaskClick={(value) => { this.props.boardStore.showSlideModal(true, value) }}
          finish={item.finish}
          key={item.id}
        />
      )
    })
    return comItems;
  }
}

export default App;