content: import React from 'react';
  import {browserHistory} from 'react-router';
  import ColorThief from '/lib/color-thief.js';
  import Loading from '/imports/ui/loading';
  
  import Modal from 'react-modal';
  
  class UserInfo extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        dominantColor: 'rgba(90,90,90,0.65)',
        modal: false,
      }
    }
    handleAvatarLoaded() {
      const img = document.getElementById("avatar")
      let colorThief = new ColorThief();
      const c = colorThief.getColor(img)
      const rgbStr = `rgba(${c[0]},${c[1]},${c[2]}, 0.2)`
      this.setState({dominantColor: rgbStr})
    }
    modalShow(id) {
      this.setState({modal: true, id});
    }
    handleDelete() {
      this.setState({modal: false});
      Meteor.call('user.deleteWatching', Meteor.userId(), this.state.id);
    }
    gotoUrl() {
      this.setState({modal: false});
      browserHistory.push(`/conference/${this.state.id}`);
    }
  
  
  
    render() {
      DocHead.setTitle("个人中心")
      const blurStyle = {
        backgroundImage: "url('/imgs/bg.jpg')",
        filter: "blur(15px)",
        backgroundSize: "cover",
        opacity: 0.6,
        position: 'absolute',
        width: '100%',
        height: 215
      }
      const user = this.props.user;
      const style = {
        overlay : {
          position          : 'fixed',
          top               : 160,
          left              : 0,
          right             : 0,
          bottom            : 160,
          backgroundColor   : 'rgba(255, 255, 255, 0.75)'
        },
        content : {
          position                   : 'absolute',
          top                        : '10px',
          left                       : '10px',
          right                      : '10px',
          bottom                     : '10px',
          border                     : '1px solid #ccc',
          background                 : '#fff',
          overflow                   : 'auto',
          WebkitOverflowScrolling    : 'touch',
          borderRadius               : '4px',
          outline                    : 'none',
          padding                    : '20px'
  
        }
      }
      return (
        !!this.props.ready ?
        <div>
  
        <Modal
          isOpen={this.state.modal}
          style={style}
        >
          <div className="invitation-title">会议收藏管理</div>
          <button type="submit" onClick={this.handleDelete.bind(this)} className="weui-btn weui-btn_primary" style={{width: '70%', marginTop: 30, marginBottom: 10}}>删除收藏</button>
          <button type="submit" onClick={this.gotoUrl.bind(this)} className="weui-btn weui-btn_primary" style={{width: '70%', marginTop: 30, marginBottom: 10}}>前往会议页面</button>
        </Modal>
          <div>
            <div style={blurStyle}/>
            <div style={{padding: 15, position: 'relative', backgroundColor: this.state.dominantColor}}>
              <img
                id="avatar"
                className="ui small circular image"
                src={user.wechat ?
                    !!user.wechat.avatar ?
                     user.wechat.avatar
                     :
                     '/imgs/fyh.jpg'
                    :
                    '/imgs/fyh.jpg'
                }
                style={{display: 'block', margin: '0 auto'}}
                onLoad={this.handleAvatarLoaded.bind(this)}/>
              <p style={{textAlign: 'center', marginTop: 15, color: 'white'}}>{user.wechat ? user.wechat.username : ''}</p>
            </div>
          </div>
          <div className="weui-cells">
            <div className="weui-panel weui-panel_access" >
              <h4 className="ui horizontal divider magenta header" style={{paddingTop: 25, paddingBottom: 25}}>
                <i className="blue star icon"></i>
                会议关注
              </h4>
              {this.props.watchings.map((v, k) =>
                <div key={k} id={v._id} style={{paddingLeft: 10, paddingRight: 10, paddingBottom: 20}}>
                  <h4 onClick={()=> this.modalShow(v._id)} className="weui-media-box__title">{v.title}</h4>
                  <div className="ui divider"/>
                </div>
              )}
            </div>
          </div>
        </div>
        :
        <Loading/>
      )
    }
  }
  
  export default UserInfo;
  