import React, { PureComponent, Fragment } from 'react';
import { connect } from 'react-redux';
import { Input, Cascader,message } from 'antd';
import { actionCreators } from './store';

import options from './districtOptions.json';

const error = (msg) => {
    message.error({
      content: msg,
    });
  };

class company extends PureComponent {

    render() {
        const { companyDetail,natureOptions,handleModifyCompany } = this.props;
        let companyDetail2 = companyDetail.toJS();
        let natureOptions2 = natureOptions.toJS();
      
        return (
            <Fragment>


                {/* <div className="save-tips">
                    <div className="alert bg-warning-700 text-white p-2 m-1" role="alert">
                        <div className="d-flex align-items-center">
                            <div className="alert-icon">
                                <i className="fal fa-info-circle"></i>
                            </div>
                            <div className="flex-1">
                                <span className="h5">内容已经修改</span>
                            </div>
                            <a href="#" className="btn btn-sm text-white width-8">取消</a>
                            <a href="#" className="btn btn-light btn-sm width-8">保存</a>
                        </div>
                    </div>
                </div> */}
                <div className="sheet-panel-header d-flex justify-content-between mx-4">
                    <div>
                        <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="新页面打开"><i className="fal fa-external-link"></i></a>
                    </div>
                    <div>
                    </div>
                </div>
                <div className="sheet-panel-content">
                    <div className="sheet-panel-form slimScroll1 mx-4">
                        <div className="form-header mt-3">
                            <div className="d-flex justify-content-between">
                                <span className="text-muted">公司</span>
                                <span className="text-muted">{companyDetail2.staffDetial.username} 创建于 {companyDetail2.create_time}</span>
                            </div>
                            <legend>{companyDetail2.companyname}</legend>
                        </div>
                        <div className="cldform clearfix">
                            <div className="cldform-line"></div>
                            <div className="cldform-item">
                                <div className="cldform-label">公司全称</div>
                                <div className="cldform-control">

                                {/* {false ?(<Input id="2"
                                        value={companyDetail2.companyname}
                                        onClick={() => console.log('false')}
                                        onChange={() => console.log('sdf')}
                                    />):(<div onClick={() => console.log('false')} className="cldform-contarl-box cldform-contarl-textareabox"><span>张三</span></div>)} */}

                                

                                    <Input id="2"
                                        value={companyDetail2.companyname}
                                        onChange={(e) => handleModifyCompany('companyname',e)}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item cldform-item-wauto">
                                <div className="cldform-label">公司地区</div>
                                <div className="cldform-control">
                                {/* {["19","292","3066"]} */}
                                    <Cascader options={options} value={companyDetail2.district} style={{ width: '100%' }} placeholder="公司地区" />

                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item cldform-item-wauto">
                                <div className="cldform-label">公司性质</div>
                                <div className="cldform-control">
                                    <Cascader options={natureOptions2} value={[companyDetail2.nature]} placeholder="公司性质" style={{ width: '100%' }} />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item">
                                <div className="cldform-label">公司地址</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.address}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item cldform-item-half pr-3">
                                <div className="cldform-label">公司传真</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.fax}
                                    />
                                </div>
                            </div>
                            <div className="cldform-item cldform-item-half pl-3">
                                <div className="cldform-label">网址</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.webservice}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item">
                                <div className="cldform-label">乘车路线</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.ride}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item">
                                <div className="cldform-label">地标建筑</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.landmarks}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item">
                                <div className="cldform-label">参考住宿</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.stay}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item">
                                <div className="cldform-label">备注</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.remarks}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Fragment>

        );
    }
}

let delaySwitch = null;//延迟检索开关

const mapStateToProps = (state) => {
    return {
        companyDetail: state.getIn(['popups', 'companyDetail']),
        natureOptions: state.getIn(['popups', 'natureOptions']),
    }
}

const mapDispathToProps = (dispatch) => {
    return {
        handleModifyCompany(name, e) {
            let value=e.target.value;
            if (delaySwitch != null) {
                clearTimeout(delaySwitch);
              }
              delaySwitch = setTimeout(() => {
                dispatch(actionCreators.modifyCompany(name, value,error));
              }, 350);
          },
    }
}

export default connect(mapStateToProps, mapDispathToProps)(company);