import React,{PropTypes} from 'react';
import {connect} from 'react-redux';
import { Tabs, Icon, Button, Modal, Form, Row, Col, Popconfirm, DatePicker, Card, notification } from 'antd'; 
const { MonthPicker} = DatePicker;
const FormItem = Form.Item;
import { reduxForm, formValueSelector, change, destroy} from 'redux-form';
import cx from 'classnames';   
import s from './home.les';
const TabPane = Tabs.TabPane;
import moment from 'moment';
import { createTodo, loadTodo, loadDone, finishTodo, deleteTodo, getOneMonths} from '../../redux/actions/home'
import Calendar from '../../components/widget/Calendar';
import {required,maxLength} from '../../components/widget/reduxForm/validate';
import InputField from '../../components/widget/reduxForm/InputField';
import calendarUtil from '../../utils/calendarUtil';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

const formItemLayout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 18
    }
};

const checkPerms = (perms=[],key)=>{
  let flag = false;
  perms&&perms.map((perm,i)=>{
    if(perm.module==key){
      flag = true; 
    }
  });
  return flag;
}

const range= (start, end)=>{
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

const minutes = [1,2,3,4,5,6,7,8];

const formatTodoList = (todoList=[]) =>{
  const temp={};
  todoList.map((todo,i)=>{ 
    if(todo.state=="0"){
      temp[moment(todo.begin_time*1000).format('YYYYMD')]={
        color:'Warning'
      }
    }else if(todo.state=="1"&&!temp[moment(todo.begin_time*1000).format('YYYYMD')]){
      temp[moment(todo.begin_time*1000).format('YYYYMD')]={
        color:'Default'
      }
      return ;
    } 
  });
  return temp;
}

const orderTodayList = (todayList=[]) =>{
  const temp1=[],temp2=[];
  todayList.map((todo,i)=>{
    if(todo.state=='0'){
      temp1.push(todo);
    }else if(todo.state=='1'){
      temp2.push(todo);
    }
  })
  return temp1.concat(temp2);
}

class HomeContainer extends React.Component {
	constructor(props) {
		super(props); 
    this.disabledStartHours = this.disabledStartHours.bind(this);
    this.disabledEndHours = this.disabledEndHours.bind(this);
    this.disabledStartMinutes = this.disabledStartMinutes.bind(this);
    this.disabledEndMinutes = this.disabledEndMinutes.bind(this);
    this.changeMonth        = this.changeMonth.bind(this);
    this.markDoneTodo       = this.markDoneTodo.bind(this);
    this.goDelete           = this.goDelete.bind(this);
    this.showModal          = this.showModal.bind(this);
		this.state={
      visible:false,
      currentDay:moment(new Date()),
      todo:{} 
		}
	}
	componentDidMount() {
    let array=[] , hintData = [];
    const { dispatch } = this.props;
    dispatch(loadTodo(moment(new Date())));
    dispatch(loadDone(0,15));
    dispatch(getOneMonths()).then((data) => {//获得社保待办内容
      if(data.code && data.code >=300){
      }else{
        console.warn(data)
        if(data&&data.items){
          data.items.map((item)=>{
            item.subject == '后道退回' && item.position == '企业社保接单-办理详情' ? array.push(item.subject) : 
              item.subject == '办理失败' && item.position == '企业社保接单-办理详情' ? array.push(item.subject) : 
                item.subject == '待办理' && item.position == '企业社保办理' ? array.push(item.subject) : null
          })
        }
        let arr = [... new Set(array)] 
        arr.length > 0 ? arr.map((i , index)=>{
          if (i == '后道退回'){
            hintData.push({ name: i, href: '#/container/cpy_server_in/returned' })
          } else if (i == '办理失败'){
            hintData.push({ name: i, href: '#/container/cpy_server_in/failed' })
          }else{
            hintData.push({ name: i, href: '#/container/cpy_server_out_index' })
          }
        }) : null
        //添加右侧全局提示（关于社保办理提示信息）
        hintData.map((item, index) => {
          return (
            notification.warning({
              message: '提示信息',
              description: <div>您有{item.name}的信息需要处理！请<a href={item.href}>前往处理</a></div>,
              key: item.name,
              duration: 0,
            })
          )
        })
      }
    })
    dispatch(change("home" , "hintData", hintData))
	}
	componentWillReceiveProps(nextProps){
    const {submitSucceeded} = nextProps;
    if(submitSucceeded){
      this.setState({
        visible:false
      })
    }
  }
	componentWillUnmount(){
    const { hintData , dispatch } = this.props;
    console.log(hintData)
    hintData && hintData.length > 0 ? 
      hintData.map((data , index)=>{
        console.warn(notification.close(data.name))
        return (
          notification.close(data.name)
        )
      }) : null
    dispatch(destroy("home"))
  }
  disabledStartHours(){
    const {end} = this.props;
    if(end){
      let temp = end.split(':');
      let hour = parseInt(temp[0])+1;
      return range(hour,24);
    }
    return [];
  } 
  disabledEndHours(){
     const {start} = this.props; 
     if(start){ 
       let temp = start.split(':');
       let hour = parseInt(temp[0]);
       return range(0,hour+1);
     }
     return [];
  } 
  disabledStartMinutes(h){
     const {end} = this.props;
     if (end){ 
       let temp = end.split(':');
       let hour = parseInt(temp[0]);
       let minute = parseInt(temp[1]);
       if (h===hour){
         return range(minute,60);
       }else{
         return []
       }
     }
     return [];
  } 
  disabledEndMinutes(h){ 
    const {start} = this.props;
    if (start){
      let temp = start.split(':');
      let hour = parseInt(temp[0]);
      let minute = parseInt(temp[1])+1;  
      if (h===hour){
        return range(0,minute);
      }else{
        return []
      }
    }
    return [];
  } 
  showModal(){
    const {dispatch,initialize} = this.props;
    const {currentDay} = this.state;
    dispatch(initialize({
      subject:'',
      position:'',
      data:'',
      start:'',
      end:'',
      currentDay
    })) 
    this.setState({
      visible:true
    })
  }   
  changeMonth(value){
    const {dispatch} = this.props; 
    this.setState({
      currentDay:value
    })
    dispatch(loadTodo(value));
  }
  markDoneTodo(){
    const {dispatch} = this.props,self=this; 
    const {todo} = this.state; 
    dispatch(finishTodo(todo)).then((value)=>{ 
        if(value&&value.state=='1'){
          self.setState({
            todo:{}
          })
        }
    });
  }
  goDelete(){
    const {dispatch} = this.props,self=this; 
    const {todo} = this.state; 
    dispatch(deleteTodo(todo)).then((value)=>{  
      self.setState({
        todo:{}
      }) 
    });
  } 
  changeTodo(todo){
    this.setState({
      todo
    })
  } 
  render() { 
    const {currentDay,todo} = this.state;
    const {todoList,todayList,handleSubmit,perms=[]} = this.props;
    const today=calendarUtil.getSolarToLunar(currentDay);
    return (
      <div style={{width:'100%',height:'100%',background:'rgb(243, 246, 248)'}}>
        <Modal title="新建待办" visible={this.state.visible} onCancel={() => {
             this.setState({visible: false})
         }} onOk={handleSubmit(submitForm)}> 
            <InputField name="subject" label="主题" validate={[required,maxLength(15)]}></InputField>
            <InputField name="position" label="地点" validate={[required,maxLength(15)]}></InputField>
            <FormItem {...formItemLayout} label="时间">
              <Col span={7}>
                <InputField name='date' type='date' inputStyle={{width:92}} validate={[required]}></InputField>
              </Col> 
              <Col span={6}>{/* disabledHours={this.disabledStartHours} disabledMinutes={this.disabledStartMinutes}*/}
                <InputField name='start' type='time' inputStyle={{width:72}} validate={[required]}></InputField>
              </Col>
              <Col span={2}>
                <span>到</span>
              </Col>
              <Col span={6}>{/*disabledHours={this.disabledEndHours}  disabledMinutes={this.disabledEndMinutes} */}
                <InputField name='end' type='time' inputStyle={{width:72}} validate={[required]}></InputField>
              </Col>
            </FormItem>
        </Modal>  
        <Row type="flex" justify="left" align="top" style={{border:'1px solid #DBE5F0',background:'rgb(255, 255, 255)'}}>
          <Col span={5}>
            <div className={s.message_list_head}>
               <div className={s.year_month}>{currentDay.format('YYYY年M月')}</div>
               <div className={s.day}>{currentDay.format('D')}</div>
               <div className={s.week}><span>星期{currentDay.format('dd')}</span>&emsp;&emsp;<span>{today.lunarMonthName+today.lunarDayName}</span></div>
            </div>
            {todayList.length>0&&
              <div className={s.todo_list}>
                {orderTodayList(todayList).map((td,i)=>{
                if (td.subject == '后道退回' && td.position == '企业社保接单-办理详情'){
                  return (
                    <div key={i} className={cx(s.todo_list_item, todo.id == td.id ? s.selected : null)} onClick={this.changeTodo.bind(this, td)}>
                      <span className={cx(s.todo_list_item_title, td.state == "1" ? s.line_through : null)}>您有{td.subject}的信息需要处理！</span>
                      <Icon className={s.icon_right} type="right" />
                    </div>
                  )
                } else if (td.subject == '办理失败' && td.position == '企业社保接单-办理详情'){
                  return (
                    <div key={i} className={cx(s.todo_list_item, todo.id == td.id ? s.selected : null)} onClick={this.changeTodo.bind(this, td)}>
                      <span className={cx(s.todo_list_item_title, td.state == "1" ? s.line_through : null)}>您有{td.subject}的信息需要处理！</span>
                      <Icon className={s.icon_right} type="right" />
                    </div>
                  )
                } else if (td.subject == '待办理' && td.position == '企业社保办理'&&td.other){
                  return (
                    <div key={i} className={cx(s.todo_list_item, todo.id == td.id ? s.selected : null)} onClick={this.changeTodo.bind(this, td)}>
                      <span className={cx(s.todo_list_item_title, td.state == "1" ? s.line_through : null)}>{td.other.split("&")[0]}{td.other.split("&")[1]}账户有待办消息！</span>
                      <Icon className={s.icon_right} type="right" />
                    </div>
                  )
                }else{
                  return (
                    <div key={i} className={cx(s.todo_list_item, todo.id == td.id ? s.selected : null)} onClick={this.changeTodo.bind(this, td)}>
                      <span className={cx(s.todo_list_item_title, td.state == "1" ? s.line_through : null)}>{td.subject}</span>
                      <Icon className={s.icon_right} type="right" />
                    </div>
                  )
                }
                })}
              </div>
            }
            {
              todayList.length==0&&
              <div className={s.empty_list}>
                今日无待办事项
              </div>
            }
          </Col>
          <Col span={6} style={{borderLeft:'1px solid #DBE5F0',borderRight:'1px solid #DBE5F0'}}>
            {!todo.id&&
              <div className={s.message_detail_wrap}>
                <div className={s.empty_detail}>
                  <img src="img/首页插画.png" alt=""/>
                  <div>现在不努力学系统，以后被壁咚的墙都是你搬的砖。</div>
                </div>
              </div>}
            {todo.id&&
              <div className={cx(s.message_detail_wrap,s.message_have_detail)}>
                <div className={s.todo_detail_wrap}> 
                   <ul className={s.todo_detail}>
                     {/* <li className={s.todo_detail_item}><span className={s.todo_detail_item_title}>标题：</span>{todo.subject}</li>
                     <li className={s.todo_detail_item}><span className={s.todo_detail_item_title}>位置：</span>{todo.position}</li>
                     <li className={s.todo_detail_item}><span className={s.todo_detail_item_title}>开始时间：</span>{moment(todo.beginTime*1000).format('YYYY年M月D日 HH:mm')}</li>
                     <li className={s.todo_detail_item}><span className={s.todo_detail_item_title}>结束时间：</span>{todo.endTime<0?"":moment(todo.endTime*1000).format('YYYY年M月D日 HH:mm')}</li> */}
                  <li className={s.todo_detail_item}><span className={s.todo_detail_item_title}>标题：</span>{
                    todo.subject == '办理失败' && todo.position == "企业社保接单-办理详情" ? <a href='#/container/cpy_server_in/failed'>您有办理失败的信息需要处理</a> :
                      todo.subject == '后道退回' && todo.position == "企业社保接单-办理详情" ? <a href='#/container/cpy_server_in/returned'>您有后道退回的信息需要处理</a> :
                        // todo.subject == '待办理' && todo.position == "企业社保办理" && todo.other ? <a href='#/container/cpy_server_in/failed'>{todo.other.split("&")[0]}{todo.other.split("&")[1]}账户有待办理的信息需要处理</a> :null
                        todo.subject == '待办理' && todo.position == "企业社保办理" && todo.other ? <a href={todo.other.split("&").length >= 4 ? '#/container/cpy_server_out' + '/' + todo.other.split("&")[0] + '/' + (Number(todo.other.split("&")[2]) * 1000) + '/' + todo.other.split("&")[3] : '#/container/cpy_server_out_index' }>{todo.other.split("&")[0]}{todo.other.split("&")[1]}账户有待办理的信息需要处理</a> :
                        <span>{todo.subject}</span>
                  }</li>
                     <li className={s.todo_detail_item}><span className={s.todo_detail_item_title}>位置：</span>{todo.position}</li>
                     <li className={s.todo_detail_item}><span className={s.todo_detail_item_title}>开始时间：</span>{moment(todo.begin_time*1000).format('YYYY年M月D日 HH:mm')}</li>
                     <li className={s.todo_detail_item}><span className={s.todo_detail_item_title}>结束时间：</span>{todo.end_time<0?"":moment(todo.end_time*1000).format('YYYY年M月D日 HH:mm')}</li>
                   </ul>
                </div>
              </div>}
              {todo.id&&todo.state=='0'&&<div className={s.message_detail_bottom_wrap}>
                  <Row  style={{height:'50px'}}>
                    <Col span={12} style={{height:'100%',cursor:'pointer',borderRight:'1px solid #e5e5e5'}} className={s.bottom_btn} onClick={this.goDelete}>
                      <img src="./img/删除待办.png" alt="" style={{paddingTop:'15px'}}/>
                      <div>删除待办</div>
                    </Col>
                    <Col span={12} style={{height:'100%',cursor:'pointer'}} className={s.bottom_btn} onClick={this.markDoneTodo}>
                      <img src="./img/对勾.png" alt=""  style={{paddingTop:'15px'}}/>
                      <div>完成</div>
                    </Col>
                  </Row>
              </div>}
              {
                todo.id&&todo.state=='1'&&<div className={s.message_detail_bottom_wrap}>
                  <Row  style={{height:'50px'}}>
                    <Col span={24} style={{height:'100%',cursor:'pointer'}} className={s.bottom_btn} onClick={this.goDelete}>
                      <img src="./img/删除待办.png" alt="" style={{paddingTop:'15px'}}/> 
                    </Col> 
                  </Row>
              </div>
              }
          </Col>
          <Col span={13}>
            <div className={s.calendar_top_toolbar}>
               <MonthPicker placeholder=""  allowClear={false} value={currentDay} onChange={this.changeMonth}/>
               <Button type="primary" ghost style={{float:'right'}} onClick={this.showModal}>新建待办</Button>
            </div>
            <Calendar onChange={
              (value)=>{
                const {dispatch} = this.props;
                this.setState({
                  currentDay:value,
                  todo:{} 
                });
                dispatch(loadTodo(value));
              }
            }  current={currentDay} todoList={formatTodoList(todoList)}></Calendar>
          </Col>
        </Row> 
        {
        <Card title={<span className={s.card_title_wrap}>常用功能</span>} className={'card_wrap'}  > 
            <div className={s.link_wrap}>
                {checkPerms(perms,'recruit')&&<div className={s.link_item} onClick={()=>{
                  document.location.href='#/container/position/add';
                }}>
                  <img src="./img/发布职位.png" alt=""/>
                  <div>发布职位</div>
                </div>} 
                {checkPerms(perms,'crm_cuslist')&&<div className={s.link_item} onClick={()=>{
                  document.location.href='#/main/customer/add';
                }}>
                  <img src="./img/新增客户.png" alt=""/>
                  <div>新增客户</div>
                </div>} 
                {checkPerms(perms,'provider_providerlist')&&<div className={s.link_item} onClick={()=>{
                  document.location.href='#/main/provider/add';
                }}>
                  <img src="./img/新增供应商.png" alt=""/>
                  <div>新增供应商</div>
                </div>} 
                {checkPerms(perms,'provider_sercontractlist')&&<div className={s.link_item} onClick={()=>{
                  document.location.href='#/container/add-contract';
                }}>
                  <img src="./img/新增服务合同.png" alt=""/>
                  <div>新增服务合同</div>
                </div>} 
                {checkPerms(perms,'socialwork_assignment')&&<div className={s.link_item} onClick={()=>{
                  document.location.href='#/container/batch_match';
                }}>
                  <img src="./img/开票管理.png" alt="" style={{width:'45px',height:'45px'}}/>
                  <div>新增任务指派</div>
                </div>} 
            </div>
        </Card> 
        }
      </div>
    )
  }  
}

const selector = formValueSelector('home');

const submitForm = (values,dispatch,props) =>{
  values.begin_time = moment(values.date+' '+values.start).unix();
  values.end_time   = moment(values.date+' '+values.end).unix();
  return(dispatch(createTodo(values)));
}

HomeContainer = reduxForm ({
  form:'home',
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true,
  initialValues:{
    subject :'',
    position:'',
    data    :'',
    start   :'',
    end     :''
  }
})(HomeContainer)

const mapState = (state) => { 
    const {
      home:{
        todoList,
        todoListCount,
        doneList,
        doneListCount,
        todayList
      },
      authed:{
        userInfo:{
          perms=[]
        } 
      }
    } = state; 
    return {
      todoList,
      todoListCount,
      doneList,
      doneListCount,
      todayList,
      perms,
      start:selector(state,'start'),
      end  : selector(state,'end'),
      hintData: selector(state,'hintData'),
    }
};
 

export default connect(mapState)(HomeContainer);