import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { Row, Col, Progress, Button, notification, Layout, Menu, Dropdown, Tooltip, Icon, Input, Badge, Tabs, Popover } from 'antd';
import cx from 'classnames';
import s from './main.les';
import { PermissionContent } from '../components/widget/PermissionLabel';
import SystemMenu from '../components/SystemMenu';
import { loadUserInfo, modifyTenant, getPermissionAction } from '../redux/actions/authed';
import { clearServiceContractsList, loadServiceContractsList, loadDepartmentNameAction } from '../redux/actions/custome'
import { loadOrganizations, loadPositions, loadTenants, getAppNameAction } from '../redux/actions/hr';
import { loadUnreadMessage, finishAllMessages, finishNotification } from '../redux/actions/notification'
import { loadSysperms, getBasicInfoAction, loadActionSysperms } from '../redux/actions/settingAction';
import { getIMToken } from '../redux/actions/workIMAction';
import { OSSURL } from '../redux/constants/Constants';
import { gotoPageByNotification } from '../utils/commonUtils';
import { menuLinkMap } from '../utils/sysMenuUtil';
import RongClundWrap from '../components/widget/RongClundWrap';
import moment from 'moment';
import CustomScrollbars from '../components/widget/CustomScrollbars';
import { loadTenantType } from './../redux/actions/contract'
const { Header, Sider, Content } = Layout;
const Search = Input.Search;
const SubMenu = Menu.SubMenu;
const TabPane = Tabs.TabPane;
moment.locale('zh-cn', {
  meridiem: function (hour, minute, isLowercase) {
    if (hour < 9) {
      return "早上";
    } else if (hour < 11 && minute < 30) {
      return "上午";
    } else if (hour < 13 && minute < 30) {
      return "中午";
    } else if (hour < 18) {
      return "下午";
    } else {
      return "晚上";
    }
  }
});


const backperms = (perms = [], key) => {
  let flag = true;
  if (key instanceof Array) {
    key.map((k, j) => {
      if (perms)
        perms.map((perm, i) => {
          perm.name == k ? flag = false : '';
        })
    })
  } else
    if (perms)
      perms.map((perm, i) => {
        perm.name == key ? flag = false : '';
      })
  return flag;
}


class AssistantContainer extends React.Component {
  constructor(props) {
    super(props);
    this.backMenu = this.backMenu.bind(this);
    this.changeOpenSubMenu = this.changeOpenSubMenu.bind(this);
    this.getUnreadMessage = this.getUnreadMessage.bind(this);
    this.state = {
      collapsed: false,
      mode: 'inline',
      active: '',
      defaultSelectedKeys: '1',
      defaultOpenKeys: '',
      imageUrl: '',
      userImage: '',
      logoImage: ''
    }
  }
  componentWillMount() {
  }
  componentDidMount() {
    const { dispatch, location: { pathname }, userInfo, time } = this.props;
    // dispatch(getIMToken());
    dispatch(loadOrganizations());
    dispatch(loadUserInfo());
    dispatch(loadUnreadMessage())
    dispatch(loadSysperms());
    dispatch(loadTenants());
    dispatch(loadActionSysperms());
    dispatch(loadTenantType());
    dispatch(getPermissionAction());
    dispatch(getAppNameAction());
    dispatch(loadDepartmentNameAction())
    const { tenant = {}, user = {} } = userInfo;
    if (tenant && tenant.id) {
      dispatch(getBasicInfoAction(tenant.id));
      this.setState({
        userImage: `https://${window.oss.public_bucket}.${window.oss.end_point}/user_image/users/${user.id}?t=${time}`,
        logoImage: `https://${window.oss.public_bucket}.${window.oss.end_point}/tenant_logo/tenants/${tenant.id}?t=${time}`
      })
    }
    this.backMenu(pathname);
  }
  componentWillReceiveProps(nextProps) {
    const { dispatch, time } = nextProps;
    const old_time = this.props.time;
    const old_userInfo = this.props.userInfo;
    const old_tenant = old_userInfo ? old_userInfo.tenant : undefined;
    const new_userInfo = nextProps.userInfo;
    const new_tenant = new_userInfo ? new_userInfo.tenant : undefined;
    if (old_tenant && new_tenant && old_tenant.id != new_tenant.id || old_time != time) {
      dispatch(getBasicInfoAction(new_tenant.id))
      this.setState({
        userImage: `https://${window.oss.public_bucket}.${window.oss.end_point}/user_image/users/${new_userInfo.user.id}?t=${time}`,
        logoImage: `https://${window.oss.public_bucket}.${window.oss.end_point}/tenant_logo/tenants/${new_userInfo.tenant.id}?t=${time}`
      })
    }
    if (new_tenant && new_tenant.id && new_userInfo && new_userInfo.user && new_userInfo.user) {
      document.title = new_tenant.name
      this.setState({
        userImage: `https://${window.oss.public_bucket}.${window.oss.end_point}/user_image/users/${new_userInfo.user.id}?t=${time}`,
        logoImage: `https://${window.oss.public_bucket}.${window.oss.end_point}/tenant_logo/tenants/${new_userInfo.tenant.id}?t=${time}`
      })
    }
  }
  componentWillUnmount() {
  }
  changeOpenSubMenu(openKeys) {
    console.log(openKeys);
    if (openKeys.length > 0) {
      this.setState({
        defaultOpenKeys: openKeys[1]
      })
    } else {
      this.setState({
        defaultOpenKeys: []
      })
    }

  }
  readAllMessages(values) {
    const { dispatch } = this.props;
    dispatch(finishAllMessages(values));
  }
  readNotification(id, item) {
    const { dispatch } = this.props;
    gotoPageByNotification(item);
    dispatch(finishNotification(id))
  }


  getUnreadMessage(data) {
    let obj = {};
    let temp = [];
    if (data && data.length) {
      data.map((item, i) => {
        temp.push(item.id)
      })
    }
    obj.message_ids = temp;
    return (
      <div className={cx(s.hover_message)}>
        <div className={cx(s.top_wrap)}>
          <h5 style={{ display: 'inline-block', float: 'left', marginLeft: 8, marginTop: 4 }}>消息</h5>
          {data && data.length > 0 ?
            <h5 style={{ cursor: 'pointer', display: 'inline-block', float: 'right', marginRight: 8 }} onClick={this.readAllMessages.bind(this, obj)}>全部标记为已读</h5>
            : null
          }
        </div>
        {data && data.length > 0 ?
          data.map((item, i) => {
            return (
              <div className={cx(s.content_wrap)} key={i} onClick={this.readNotification.bind(this, item.id, item)} >
                <Tooltip title={item.subject}>
                  <span style={{ display: 'inline-block', width: '396', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.subject}</span>
                  <span style={{ position: 'absolute', width: 8, height: 8, display: 'inline-block', borderRadius: 4, background: 'red', right: 8, top: 16 }}></span>
                </Tooltip>
              </div>
            )

          })
          :
          <div className={cx(s.empty_content_wrap)}>暂时没有新消息哦</div>
        }
        <div className={cx(s.bottom_wrap)}>
          <a href="#/main/notification"> 查看更多</a>
        </div>
      </div>
    )
  }
  backMenu(pathname) {
    let key = '1', subkey = '';
    const { dispatch } = this.props;
    if (pathname.indexOf('container/home') != -1) {
      key = '1';
      subkey = '';
    } else if (pathname.indexOf('container/customer') != -1) {
      key = '2';
      subkey = 'sub1';
    } else if (pathname.indexOf('container/customService') != -1) {
      key = '3';
      subkey = 'sub1';
    } else if (pathname.indexOf('container/provider') != -1) {
      key = '4';
      subkey = '';
    } else if (pathname.indexOf('container/employee') != -1) {
      key = '5';
      subkey = '';
    } else if (pathname.indexOf('container/newRecruit') != -1) {
      key = '6';
      subkey = 'sub2';
    } else if (pathname.indexOf('container/empServer') != -1) {
      key = '7';
      subkey = '';
    } else if (pathname.indexOf('container/report') != -1) {
      key = '8';
      subkey = '';
    } else if (pathname.indexOf('container/report') != -1) {
      key = '9';
      subkey = '';
    } else if (pathname.indexOf('container/setting/change-password') != -1) {
      key = '20';
      subkey = 'sub5';
    } else if (pathname.indexOf('container/setting/my-avatar') != -1) {
      key = '19';
      subkey = 'sub5';
    } else if (pathname.indexOf('container/setting') != -1) {
      key = '10';
      subkey = '';
    }
    this.setState({
      defaultSelectedKeys: key,
      defaultOpenKeys: subkey
    })
  }
  changeTenant(value) {
    const { dispatch, tenants } = this.props;
    const temp = {}
    tenants.map((item, i) => {
      temp[item.id] = item.name
    })
    const name = temp[value.key];
    dispatch(modifyTenant(value.key, name));
    this.setState({
      visible: false
    });
  }
  onError() {
    this.setState({
      imageUrl: "./img/WORKAI2.png"
    })
  }
  changeMenu(menu) {
    const { item, key, selectedKeys } = menu;
    document.location.href = menuLinkMap[key];
  }
  render() {
    const { collapsed, active, imageUrl, userImage, logoImage, visible, smode } = this.state;
    const { userInfo, tenants, time, logo, dispatch, perms, unreadList, height } = this.props;
    const { user = {}, tenant = {} } = userInfo;
    let imgPath = imageUrl;
    if (logo && logo.object_id && !imageUrl) { imgPath = "//" + logo.bucket + "." + window.oss.end_point + logo.object + '?t=' + time; }
    return (
      <Layout style={{ minHeight: '100vh', background: '#f3f6f8', position: 'absolute', width: '100%' }} id='main_left_menu'>
        <Header className={cx('main_header')} >
          {(tenant.biz_type == '0' || tenant.biz_type == '1') &&
            <div className="sider-menu-item" style={{ display: 'inline-block', height: '54px', minWidth: '70px', overflow: 'hidden' }}>
              <img onError={() => { this.setState({ logoImage: './img/menuicon/logoIcon.png' }) }} src={logoImage} style={{ width: 'auto', width: '60px' }} alt="" />
            </div>}
          <div style={{ display: 'inline-block', height: '54px', overflow: 'hidden' }}>
            <img src={'./img/内容.png'} style={{ width: 'auto', width: '20px' }} alt="" onClick={() => {
              this.setState({
                collapsed: !collapsed,
              })
            }} />
          </div>
          <div style={{ display: 'inline-block', float: 'right', height: '62px' }}>
            <a className={cx(s.infor_btn)} style={{ marginRight: 4, marginLeft: 4 }}>
              <Popover content={this.getUnreadMessage(unreadList)} trigger="click">
                <span>
                  {unreadList && unreadList.length > 0 ?
                    <span style={{ position: 'relative' }}>
                      <span style={{ position: 'absolute', width: 6, height: 6, display: 'inline-block', borderRadius: 4, background: 'red', right: 8, top: 0 }}></span>
                      <img src='./img/menuicon/bellIcon.png' style={{ marginRight: 8, width: 12 }}></img>
                    </span>
                    :
                    <img src='./img/menuicon/bellIcon.png' style={{ marginRight: 8, width: 12 }}></img>}
                  消息
                          </span>
              </Popover>
            </a>
            <span className={cx(s.divider, "ant-divider")} />
            <Popover placement="bottomRight" title={''} onVisibleChange={(visible) => {
              console.log(visible);
            }} content={
              <Menu mode="vertical" style={{ borderRight: '1px solid transparent' }} onClick={this.changeMenu.bind(this)}>
                <Menu.Item key="percenter_changeimg">更改头像</Menu.Item>
                <Menu.Divider />
                <Menu.Item key="percenter_pwdsetting">修改密码</Menu.Item>
                <Menu.Divider />
                <Menu.Item key="logout">退出登录</Menu.Item>
              </Menu>} trigger="hover">
              <span className={cx(s.out_btn)} href={"javascrpit:;"/*"/signOut"*/} style={{ marginLeft: 4, cursor: 'pointer' }}>
                <img onError={() => { this.setState({ userImage: './img/招聘头像.png' }) }} src={userImage}
                  alt="" style={{ width: '25px', height: '25px', margin: '0px 8px 0 0', position: 'relative', borderRadius: '50%' }} />
                <span style={{ marginRight: '8px' }}>{user.name}</span>
                <Icon type="down" />
              </span>
            </Popover>
          </div>
        </Header>
        <Layout style={{ height: '100%', background: '#fff' }}>
          <Sider trigger={null} collapsible collapsed={collapsed} style={{ background: '#FBFBFC', minHeight: '100%', zIndex: 1000 }} width={202}>
            <SystemMenu location={this.props.location} collapsed={collapsed} ></SystemMenu>
            <div className={cx(s.select_tenant_wrap)}>
              <div className={cx(s.infor_btn)} style={{ display: 'inline-block', height: '62px', verticalAlign: 'top', color: '#fff' }}>
                <Popover placement="rightBottom" title={''} content={
                  <Menu mode="vertical" style={{ borderRight: '1px solid transparent' }} onClick={this.changeTenant.bind(this)}>
                    {tenants.map((tenant, i) => {
                      return (
                        <Menu.Item key={tenant.id}>{tenant.name}</Menu.Item>
                      )
                    })}
                  </Menu>} trigger="click" visible={visible} onVisibleChange={(visible) => {
                    this.setState({
                      visible
                    })
                  }}>
                  <span style={{ cursor: 'pointer', color: "#6C7596" }}>{tenant.name}<span style={{ cursor: 'pointer', paddingLeft: '8px' }}><Icon type="right" /></span></span>
                </Popover>
              </div>
            </div>
          </Sider>
          <Content style={{ margin: '15px', minHeight: 280, maxHeight: height - 54 - 30, position: 'relative', overflow: 'auto' }}>
            <CustomScrollbars customName='main_scroll_bar' viewStyle={{ paddingRight: '10px', background: '#fff' }}>
              <PermissionContent>
                {this.props.children}
              </PermissionContent>
            </CustomScrollbars>
            {/* <RongClundWrap></RongClundWrap> */}
          </Content>
        </Layout>
      </Layout>
    )
  }
}

const mapState = (state) => {
  const {
    authed: { userInfo, userInfo: { perms = [] }, time, tenant },
    hr: { tenants = [] },
    setting: { height, width, basicInfo: { logo = {} } },
    notification: { unreadList, unreadListCount }
  } = state;
  return {
    userInfo,
    unreadList,
    tenants,
    time,
    logo,
    perms,
    tenant,
    height,
    width
  }
};
export default connect(mapState)(AssistantContainer);