/*
 * Creator:     ML
 * CreatDate:   2019-08-20
 * descripts：  个人信息  查看个人信息
*/
import React from 'react';
import { Form, Row, Col, Input, Button, message, Divider, Spin, Tooltip, Icon } from 'antd';
import { $http } from '../../../containers/config/https';
import UploadImg from '../../userInformation/common/UploadImg';
import UploadPage from '../../userInformation/common/UploadPage';
import { Util } from 'tools/index';
const { TextArea } = Input;
const FormItem = Form.Item;
const ViewInformation = Form.create()(
    class ViewInformation extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                userInfo: {},//基本信息
                userTypeArr: [],//人员类型arr
                logonLocDesc: '',//登录科室
                logonGroupDesc: '',//登录角色
                logonHospDesc: '',//登录医院
                imageUrl: '',
                url: '',
                signUrl: '', // 签名URL
                loading: false
            }
        }

        componentDidMount() {
            this.getInfo();
            this.loginMetods();
            this.props.onView(this);
        }

        ImgValue = (faceValue, imageUrl, code) => {
            this.setState({
                faceValue,
                imageUrl
            }, () => {
                if (Util.isEmpty(code)) {
                    this.saveImg(imageUrl, faceValue)
                }
            })
        }

        //保存图片
        saveImg = (imageUrl, faceValue) => {
            if (imageUrl) {
                let data = {}
                var str = imageUrl;
                str = str.match(/base64,(\S*)/)[1];
                data = {
                    params: [{
                        userID: JSON.parse(sessionStorage.userData).userID,
                        imageBase64: str,
                        faceValue: faceValue,
                    }]
                };
                $http.post('urlDeault', this, {
                    code: '01040118',
                    data: data,
                    success: function (res) {
                        if (+res.errorCode === 0) {
                            message.success(
                                this.props.localeProvider && this.props.localeProvider.PersonalInformationAddedSuccessfully ? this.setMessage('PersonalInformationAddedSuccessfully', 'descripts') : '添加成功'
                            );
                            this.setState({
                                loading: false
                            }, () => {
                                this.getInfo()
                            })
                        }
                    }
                });
            }
        }

        ImgValue2 = (filePath) => {
            //图片符合之后 保存图片 人物特征值
            let data = {}
            data = {
                params: [{
                    userID: JSON.parse(sessionStorage.userData).userID,
                    updateUserID: JSON.parse(sessionStorage.userData).userID,
                    power: 'userImage',
                    userImage: filePath,

                }]
            };
            $http.post('urlDeault', this, {
                code: '01040090',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.getInfo()
                    }
                }
            });
        }

        ImgValue3 = (filePath, power) => { // 宣传照片 - 电子签名
            let data = {
                params: [{
                    userID: JSON.parse(sessionStorage.userData).userID,
                    updateUserID: JSON.parse(sessionStorage.userData).userID,
                    power: power || 'publicImage',
                    publicImage: filePath,
                }]
            };
            $http.post('urlDeault', this, {
                code: '01040090',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setState({
                            loading: false
                        }, () => {
                            this.getInfo();
                        })
                    }
                }
            });
        }

        //人员类型 颜色随机
        colorRandom() {//十六进制颜色随机
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
            return color;
        }

        //获取登录方式
        loginMetods = () => {
            let data = {}
            data = {
                params: [{
                    userCode: JSON.parse(sessionStorage.userData).userCode,
                    currentLocFlag: 'Y'
                }],
                session: [{
                    'loginIp': window.location && window.location.protocol && window.location.host ? (window.location.host.split(':')[0]) : (window.location && window.location.origin ?
                        (window.location.origin.split(':')[0] + window.location.origin.split(':')[1]).split('//')[1] : '')
                }]
            };
            $http.post('urlDeault', this, {
                code: '01040043',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0 && res.result) {
                        res.result.logonLocAry.map((item, index) => {
                            if (item.logLocIsDefault == 'Y') {
                                this.setState({
                                    logonLocDesc: item.logonLocDesc,
                                    logonGroupDesc: item.logonGroupDesc,
                                    logonHospDesc: item.logonHospDesc,
                                })
                            }
                        })
                    }
                }
            });
        }

        //获取用户基本信息
        getInfo = () => {
            let data = {
                params: [{
                    userID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : '',
                    locID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).locID : '',
                    power: 'userImage'
                }],
                // pagination: [{
                //     pageSize: 10,
                //     currentPage: 1,
                //     sortColumn: 'code',
                //     sortOrder: 'asc'
                // }]
            };
            $http.post('urlS', this, {
                code: '01040051',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setState({
                            userInfo: res.result,
                            url: res.result.userImage,
                            personUrl: res.result.personImage,
                            signUrl: res.result.signUrl, // 电子签名URL
                            userTypeArr: res.result.userTypeAry,
                            userIntroduce: res.result.userIntroduce,
                        })
                    }
                }
            })
        }

        handleSave = () => {
            let data = {}
            data = {
                params: [{
                    userID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : '',
                    updateUserID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : '',
                    power: 'userIntroduce',
                    userIntroduce: this.state.userIntroduce || '',
                }],
            };
            $http.post('urlS', this, {
                code: '01040090',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        message.success('保存成功');
                    }
                }
            });
        }

        //国际化
        setMessage(name, message) {
            return this.props.localeProvider ? this.props.localeProvider[name][message] : ''
        }

        //个人简介
        handleFieldChange = (e, name) => {
            if (e.target) {
                this.setState({
                    [name]: e.target.value
                })
                if (e.target.value.length == 2000) {
                    message.warning('最多输入2000字')
                }
            }
        }

        loadMessage(data) {
            this.setState({
                loading: true
            })
        }

        handleLoading = () => {
            this.setState({ loading: false });
        }

        render() {
            const { userInfo, userTypeArr, signUrl, url, logonLocDesc, logonGroupDesc, logonHospDesc, userIntroduce, personUrl } = this.state
            let localeData = this.props.localeProvider
            const {
                form: { validateFields },
            } = this.props;
            const { getFieldDecorator } = this.props.form;
            let userType = []
            userTypeArr && userTypeArr.map(item => {
                if (item.userTypeValue == 'Y') {
                    userType.push(
                        <span
                            style={{
                                padding: '2px 14px',
                                border: '1px solid #cb43e4',
                                // borderColor: (item.userTypeDesc=='医师'?rgb(234, 130, 202):(item.userTypeDesc=='外科医生'?rgb(228, 94, 94):item.userTypeDesc=='麻药医生'?rgb(236, 135, 48):item.userTypeDesc=='护士'?rgb(236, 210, 18):'#cb43e4')),
                                // background:(item.userTypeDesc=='医师'?rgb(234, 130, 202,0.1):(item.userTypeDesc=='外科医生'?rgb(228, 94, 94,0.1):item.userTypeDesc=='麻药医生'?rgb(236, 135, 48,0.1):item.userTypeDesc=='护士'?rgb(236, 210, 18,0.1):'#cb43e4')),
                                // color: (item.userTypeDesc=='医师'?rgb(245, 13, 173):(item.userTypeDesc=='外科医生'?rgb(233, 41, 85):item.userTypeDesc=='麻药医生'?rgb(236, 135, 48):item.userTypeDesc=='护士'?rgb(236, 210, 18,):'#cb43e4')),
                                borderRadius: '6px',
                                marginRight: '8px',
                                fontSize: '12px'
                            }}
                            key={item.id}>
                            {item.userTypeDesc}
                        </span>)
                }
            })
            return (
                <Spin spinning={this.state.loading} tip="图片上传中...">
                    <div style={{ position: "relative" }} className="infoTitle">
                        <div className="userInfo-dom">
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationJobNumber ? this.setMessage('PersonalInformationJobNumber', 'descripts') : '工号：'} </Col>
                                <Col span={16}>{userInfo.userCode && userInfo.userCode ? userInfo.userCode : '--'}</Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationUserName ? this.setMessage('PersonalInformationUserName', 'descripts') : '用户名：'}</Col>
                                <Col span={16}>{userInfo.userName && userInfo.userName ? userInfo.userName : '--'}</Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationName ? this.setMessage('PersonalInformationName', 'descripts') : '姓名：'}</Col>
                                <Col span={16}>{userInfo.userDesc && userInfo.userDesc ? userInfo.userDesc : '--'}</Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationGender ? this.setMessage('PersonalInformationGender', 'descripts') : '性别：'}</Col>
                                <Col span={16}>{userInfo.userSexDesc && userInfo.userSexDesc ? userInfo.userSexDesc : '--'}</Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationTypeOfCertificate ? this.setMessage('PersonalInformationTypeOfCertificate', 'descripts') : '证件类型：'}</Col>
                                <Col span={16}>{userInfo.userCredTypeDesc && userInfo.userCredTypeDesc ? userInfo.userCredTypeDesc : '--'}</Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationIDNumber ? this.setMessage('PersonalInformationIDNumber', 'descripts') : '证件号码：'}</Col>
                                <Col span={16}>{userInfo.userCredNo && userInfo.userCredNo ? userInfo.userCredNo : '--'}</Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationDateOfBirth ? this.setMessage('PersonalInformationDateOfBirth', 'descripts') : '出生日期：'}</Col>
                                <Col span={16}>{userInfo.userDOB && userInfo.userDOB ? userInfo.userDOB : '--'}</Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationLanguage ? this.setMessage('PersonalInformationLanguage', 'descripts') : '语言：'}</Col>
                                <Col span={16}>{userInfo.userLanguageDesc && userInfo.userLanguageDesc ? userInfo.userLanguageDesc : '--'}</Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationJobTitle ? this.setMessage('PersonalInformationJobTitle', 'descripts') : '职称：'}</Col>
                                <Col span={16}>{userInfo.userTitleDesc && userInfo.userTitleDesc ? userInfo.userTitleDesc : '--'}</Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationMobilePhoneNumber ? this.setMessage('PersonalInformationMobilePhoneNumber', 'descripts') : '手机号码：'}</Col>
                                <Col span={16}>{userInfo.userMobile && userInfo.userMobile ? userInfo.userMobile : '--'}</Col>
                            </Row>

                            <Row gutter={8} style={{ height: "218px", position: "relative" }}>
                                <Col span={24} style={{ padding: "0", }}>
                                    <FormItem label={localeData && localeData.PersonalInformationIntroduction ? this.setMessage('PersonalInformationIntroduction', 'descripts') : "简介："} wrapperCol={{ span: 19 }} labelCol={{ span: 3 }}>
                                        {getFieldDecorator('k', {
                                            initialValue: userInfo.userIntroduce && userInfo.userIntroduce ? userInfo.userIntroduce : undefined,
                                            rules: [{ required: false, message: '' }],
                                        })(
                                            // <TextArea disabled style={{ height: "90px", width: "67%", resize: "none", overflow: "auto", background: "#e8e8e8" }} />
                                            <TextArea
                                                maxLength="2000"
                                                placeholder="请输入个人简介，不能超过2000个字"
                                                autoFocus
                                                style={{
                                                    height: "218px",
                                                    overflow: "auto",
                                                    resize: "none",
                                                    width: "67%",
                                                    border: "1px solid #1999db",
                                                    cursor: "auto",
                                                    paddingBottom: "40px"
                                                }} value={userIntroduce} onChange={(e) => this.handleFieldChange(e, 'userIntroduce')} />
                                        )}
                                    </FormItem>
                                    <Button style={{ position: "absolute", bottom: "-308%", right: "36%" }} key="submits" type="primary" onClick={this.handleSave} >保存</Button>
                                </Col >
                            </Row>
                            {/* <Row gutter={8}>
                            <Col span={20} className="defaultRoleDom">
                                <FormItem label={localeData && localeData.PersonalInformationPersonType ? this.setMessage('PersonalInformationPersonType', 'descripts') : "人员类型："} wrapperCol={{ span: 27 }} labelCol={{ span: 4 }}>
                                    {getFieldDecorator('l', {
                                        initialValue: undefined,
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <div>
                                            <p style={{ margin: "8px 0 0 0" }}>{userType}</p>
                                        </div>
                                    )}
                                </FormItem>
                            </Col >
                        </Row> */}
                            <Row style={{ marginTop: "10px" }}>
                                <Col span={3}>{localeData && localeData.PersonalInformationPersonType ? this.setMessage('PersonalInformationPersonType', 'descripts') : "人员类型："}</Col>
                                <Col span={16}>
                                    {userType}
                                </Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationLoginMethod ? this.setMessage('PersonalInformationLoginMethod', 'descripts') : "登录方式："}</Col>
                                <Col span={16}>{userInfo.userLogonType && userInfo.userLogonType ? userInfo.userLogonType[0].descripts : "--"}</Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationDefaultRole ? this.setMessage('PersonalInformationDefaultRole', 'descripts') : "默认角色："}</Col>
                                <Col span={16}>
                                    <div>
                                        <p>{logonLocDesc || "--"}<Divider type="vertical" />{logonGroupDesc || "--"}<Divider type="vertical" />{logonHospDesc || "--"}</p>
                                    </div>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationEffectiveDate ? this.setMessage('PersonalInformationEffectiveDate', 'descripts') : "生效日期："}</Col>
                                <Col span={16}>{userInfo.userDateFrom && userInfo.userDateFrom ? userInfo.userDateFrom : "--"}</Col>
                            </Row>
                            <Row>
                                <Col span={3}>{localeData && localeData.PersonalInformationExpirationDate ? this.setMessage('PersonalInformationExpirationDate', 'descripts') : "失效日期："}</Col>
                                <Col span={16}>{userInfo.userDateTo && userInfo.userDateTo ? userInfo.userDateTo : "--"}</Col>
                            </Row>
                            <div
                                style={{
                                    width: '104px',
                                    height: '104px', position: 'absolute', top: '0', right: '234px'
                                }}
                            >
                                {/* 
                                    @ByShizi: 个人设置新增上传电子签名
                                    需求：1118
                                    Create 2023-02-07
                                */}
                                <div style={{ textAlign: 'center' }}>
                                    <span className="mB10" style={{ display: 'inline-block' }}>
                                        电子签名
                                        <Tooltip title={(
                                            <div>
                                                <div>没有电子签名？<a href="http://electronicsignature.wiicha.com/" target="_blank" >点击去获取</a></div>
                                                <div>也可通过浏览器搜索【电子签名,免费生成电子签名】</div>
                                            </div>
                                        )}>
                                            <Icon style={{ marginLeft: '4px', color: '#999' }} type="question-circle" />
                                        </Tooltip>
                                    </span>
                                    <UploadPage
                                        code="1"
                                        power="signImage"
                                        handThis={this}
                                        key={signUrl ? signUrl : ""}
                                        imageUrl={signUrl && signUrl ? signUrl : ""}
                                        loadMessage={this.loadMessage.bind(this)}
                                    />
                                </div>
                            </div>
                            <div
                                style={{
                                    width: '104px',
                                    height: '104px', position: 'absolute', top: '0', right: '118px'
                                }}
                            >
                                <div style={{ textAlign: 'center' }}>
                                    <span className="mB10" style={{ display: 'inline-block' }}>宣传照片</span>
                                    <UploadPage
                                        code='1'
                                        handThis={this}
                                        key={url ? url : ""}
                                        imageUrl={url && url ? url : ""}
                                        loadMessage={this.loadMessage.bind(this)}
                                    />
                                </div>
                            </div>
                            <div
                                style={{
                                    width: '104px',
                                    height: '104px', position: 'absolute', top: '0', right: '0'
                                }}
                            >
                                <div style={{ textAlign: 'center' }}>
                                    <span className="mB10" style={{ display: 'inline-block' }}>登录照片</span>
                                    <UploadImg
                                        handThis={this} key={personUrl ? personUrl : ""} imageUrl={personUrl && personUrl ? personUrl : ""} loadMessage={this.loadMessage.bind(this)}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </Spin>
            )
        }
    });

export default ViewInformation
