/*
 * Creator:     PYH
 * CreatDate:   2020-05-12
 * descripts：  互联网坐诊审核
*/
import React from 'react';
import { Form, Row, Col, Select, Button, Table, Modal, message, Input, Radio, Icon  } from 'antd';
import { $http } from '../../../containers/config/https';
import RangeDatePicker from 'components/rangePicker/index';
import CommonPagination from 'components/pagination';
import moment from 'moment';
import store from 'store';
import '../css/index.less';

const { Option } = Select;
const {TextArea} = Input;
const formLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 14 },
}
const formLayoutDoc = {
    labelCol: { span: 7 },
    wrapperCol: { span: 17 },
}

const searchColConfig = {
    xs: { span: 24 },
    sm: { span: 12 },
    md: { span: 10 },
    lg: { span: 6}
  }
const SittingExamination = Form.create()(
    class SittingExamination extends React.Component {
        constructor(props) {
            super(props);
            let userData = JSON.parse(sessionStorage.getItem('userData'))
            this.state={
                userData:userData,
                statusArr: [],
                doctorArr: [],
                tableData: [],
                modalData: [],
                total: 0,
                page: 1,
                pageSize: 20,
                size: "small",
                modalVisible: false,
                doctorID: '',
                auditRadio: '03',
                startDate: undefined,
                endDate:undefined,
                reason: '',
                imgVisible: false,
                txtAreaDisable: true,
            }
        }

        componentDidMount() {
            document.querySelector('.sittingExamDom .ant-table-body').style.height = store.getState().tableHeight.y + 126 + 'px';
            if (this.state.size == "small") {
                this.setState({
                    pageSize: 20
                })
            } else {
                this.setState({
                    pageSize: 50
                })
            }
            this.getDoctorSelect()
            this.getTableColumns()
            this.getStatusSelect()
        }

        getDoctorSelect(){
            let data = {
                params: [{
                    hospID: this.state.userData.hospID
                }]
            }
            $http.post('urlS', this, {
                code: '03070033',
                data: data,
                success: function(res){
                    if (+res.errorCode === 0){
                        this.setState({
                            doctorArr: res.result.data
                        })
                    }
                }
            })
        }

        getStatusSelect(){
            let data = {
                params: [{

                }]
            }
            $http.post('urlS', this, {
                code: '03100077',
                data: data,
                success: function(res){
                    if (+res.errorCode === 0){
                        this.setState({
                            statusArr: res.result
                        },()=>{  
                            res.result&&res.result.map((item) => {
                                if (item.code == "01"){
                                    this.props.form.setFieldsValue({
                                        statusID:item.id
                                    },()=>{
                                        this.handleQuery();
                                    })
                                }
                            })
                        })
                    }
                }
            })
        }

        setModalVisible(modalVisible){
            this.setState({ 
                modalVisible: modalVisible,
                txtAreaDisable: true,
            },()=>{
                this.getFindModalData()
            })
           
        }

        setModalData(modalID, doctorID,statusCode,refuseReason,statusDesc, modalVisible) {
            console.log(doctorID)
            this.setState({ 
                modalID: modalID,
                modalVisible: modalVisible,
                statusCode: statusCode,
                statusDesc: statusDesc,
                doctorID: doctorID,
                refuseReason:refuseReason,
                reason:""
            },()=>{
                this.getFindModalData()
            });
          }

         // 获取列表columns
        // 获取主列表columns
        getTableColumns = () => {
            let { language } = this.state;
            let data = {
                params: [{
                    compontName: "SittingExamination", // 
                    type: 'C', // 
                }]
            }
            $http.post('urlS', this, {
                code: '01040073',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        let arr = res.result && res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map(item => {
                            return {
                                align: item.align,
                                widthNum: parseInt(item.width),
                                width: item.width,
                                dataIndex: item.dataIndex,
                                title: <div onDoubleClick={() => this.columnRef.onOpenModel()}>{item.title}</div>,
                                display: item.display,
                                key: item.seqNo,
                                render: (text, record) => {
                                    if (item.code == "statusDesc") {
                                        if ((record.statusCode == "01")||(record.statusCode == "04")){
                                            return (
                                                <span style={{ color: "Red"}}>{text}</span>
                                            )
                                        } 
                                    }
                                    return text?text:"/"
                                }
                            }
                        }) : '';
                        let filterArr = arr.filter(function (item) { return item.display === 'Y' });
                        let seqArr = {
                            align: "center",
                            widthNum: 180,
                            width: "150px",
                            code: "edit",
                            dataIndex: "edit",
                            title: "操作",
                            display: "Y",
                            render: (value, row, index) => {
                                let text=""
                                if ((row.statusCode == "01")||(row.statusCode == "04")){
                                    text = <span style={{ color: "blue", cursor: "pointer" }} onClick={() => this.setModalData(row.ID, row.docID,row.statusCode, row.refuseReason, row.statusDesc, true)}>审核</span>
                                }else{
                                    text = <span style={{ color: "black", cursor: "pointer" }} onClick={() => this.setModalData(row.ID, row.docID,row.statusCode, row.refuseReason, row.statusDesc, true)}>查看详情</span>
                                }
                                return (
                                    <span>
                                        {text}
                                    </span>
                                )
                            },
                        }
                        filterArr.push(seqArr)
                        this.setState({ columns: filterArr, widthTotal: res.totalWidth })
                    }
                }
            })
        }

        startChange(date) {
            this.setState({
                startDate: date,
            })
        }
        endChange(date) {
            this.setState({
                endDate: date,
            })
        }
        onChange = (e) => {
            this.setState({ page: e, pageSize: this.state.pageSize, }, () => {
                // 重新调用查询方法
                let { values } = this.state;
                this.getFindData(values);
            })
        }
        onShowSizeChange = (page, pageSize) => {
            this.setState({ page: 1, pageSize: pageSize }, () => {
                // 重新调用查询方法
                let { values } = this.state;
                this.getFindData(values, "search");
            })
        }

        onRadioChange = e => {
            if (e.target.value == '03'){
                this.setState({
                    reason: '',
                    txtAreaDisable: true,
                    auditRadio: e.target.value,
                }) 
            }else{
                this.setState({
                    txtAreaDisable: false,
                    auditRadio: e.target.value,
                });
            }
          };
          onTextChange = e => {
            //   console.log(" e.target.value")
            this.setState({ 
                reason: e.target.value,
             });
          };

        showTotal(total) {
            return `共 ${total} 条`;
        }
        // 点击查询
        handleQuery = () => {
            this.props.form.validateFields((err, values) => {
                if (!err) {
                    this.setState({
                        values,
                    }, () => {
                        this.onShowSizeChange("1", this.state.pageSize)
                    })
                }
            })
        }
        //获取查询数据
        getFindData = (values, e) => {
            if (this.state.total == 0) {
                this.setState({
                    searchLoading: true
                })
            }
            let { page, pageSize, } = this.state;
            let data = {}
            data = {
                params: [{
                    hospID: this.state.userData.hospID,
                    statusID: values && values.statusID || "",
                    docDesc: values && values.docDesc || "",
                    dateFrom: this.state.startDate,
                    dateTo: this.state.endDate
                }],
                pagination: [{
                    pageSize: pageSize,
                    currentPage: page,
                }]
            }
            $http.post('urlS', this, {
                code: '03100007',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setState({
                            searchLoading: false,
                            rowId: "",
                            search: e
                        })
                        this.setState({
                            tableData: res.result.data, 
                            total: res.result.totalCount,
                        }, () => {
                        })
                    }
                },
            })
        }
        imgModalVisible(imgPath){
            if (imgPath != ""){
                this.setState({
                    imgVisible: true,
                    imgPath:imgPath
                })
            }
        }

        handleClose(){
            this.setState({
                imgVisible: false,
                imgPath: ''
            })
        }
        audit(){
            let data = {
                params: [{
                    reason: this.state.reason,
                    statusCode: this.state.auditRadio,
                    userID: this.state.userData.userID,
					ID: this.state.modalID,
                }]
            }
            $http.post('urlS', this, {
                code: '03100008',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        message.success("审核成功")
                        this.setModalVisible(false)
                        this.getFindData()
                    } 
                }
            })
        }


        getFindModalData = () => {
            let data = {
                params: [{
                    userID: this.state.doctorID
                }]
            }
            $http.post('urlS', this, {
                code: '03100006',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setState({
                            modalData: res.result.data, 
                            auditRadio: '03',
                            reason: ''
                        }, () => {
                        })
                    }else{
                        this.setState ({
                            modalData: [],
                            auditRadio: '03',
                            reason: ''
                        }) 
                    }    
                }
            })
        }
        render() {
            let doctorOp=[]
            this.state.doctorArr && this.state.doctorArr.map((item, index) => {
                doctorOp.push(<Option key={index} value={String(item.id)} name={item.descripts}
                code={item.descriptsSPCode}>{item.descripts}</Option>)
             })

            let statusOp=[]
            this.state.statusArr && this.state.statusArr.map((item) => {
                statusOp.push(<Option key={item.id} value={String(item.id)}>{item.descripts}</Option>)
             })
            let columns=this.state.columns
            let tableData=this.state.tableData
            let modalInfo=this.state.modalData.length > 0 ? this.state.modalData[0] :""
            const { getFieldDecorator } = this.props.form;
            let rbRefuseDisplay="block"
            let rbAuditDisplay="block"
            if (this.state.statusCode && ((this.state.statusCode == "01")||(this.state.statusCode == "04"))){
                rbRefuseDisplay="none"
            }else{
                rbAuditDisplay="none"
            }
            return(
                <div className="sittingExamDom">
                <Form>
                    <Row  style={{ margin: "0", padding: "14px 0 0 1px" }}>
                        <Col {...searchColConfig} style={{ padding: "4px 14px" }}>  
                            <RangeDatePicker isChange={true} label={ this.state.userData.language == 'EN' ? 'Apply Date：' : '申请日期：' } format='YYYY-MM-DD' width={'300px'}
                                locale={this.state.userData.language}
                                startDate={this.state.startDate} endDate={this.state.endDate}
                                startChange={this.startChange.bind(this)} endChange={this.endChange.bind(this)}  />
                        </Col>
                        <Col span={4}>
                            <Form.Item  {...formLayoutDoc} label={this.state.userData.language == 'EN' ? 'Doctor：' : '申请医生：'}>
                                {getFieldDecorator('docDesc', {
                                    initialValue:  undefined,
                                    rules: [{ required: false, message: "" }],
                                })(
                                //    <Select style={{ width: '180px'}} 
                                //             allowClear 
                                //             showSearch
                                //             filterOption={(input, option) =>
                                //                 option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                //                 || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                //             }>
                                //             {doctorOp}
                                //         </Select>
                                <Input placeholder="输入后回车查询" onPressEnter={this.handleQuery}/>
                                    )}
                            </Form.Item>
                        </Col>
                        <Col span={5}>
                            <Form.Item  {...formLayout} label={this.state.userData.language == 'EN' ? 'Status：' : '审核状态：'}>
                                {getFieldDecorator('statusID', {
                                    initialValue:  undefined,
                                    rules: [{ required: false, message: "" }],
                                })(
                                    <Select allowClear>
                                            {statusOp}
                                    </Select>
                                    )}
                            </Form.Item>
                        </Col>
                        <Col span={4}>
                            <Button style={{ margin: '3px 0 0 10px' }} type="primary" onClick={this.handleQuery}>{this.state.userData.language == 'EN' ? 'Search' : '查询'}</Button>
                        </Col>
                    </Row>
                    <div style={{ widht: '100%', height: '1px', background: '#f0f2f5' }}></div>
                    <div className='sittingExam-table'>
                        <Table
                                columns={columns}
                                dataSource={tableData}
                                pagination={false}
                                bordered
                                style={{ height: store.getState().tableHeight.y + 128+ 'px'}}
                                scroll={{ x: 400}}
                            />
                            <CommonPagination size={this.state.size} pageSize={this.state.pageSize} current={this.state.page} total={this.state.total} search={this.state.search}
                                onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={this.state.tableData}
                                    onChange={this.onChange.bind(this)} />
                    </div>
                </Form>
                <div>
                    <Modal
                        title="资质审核"
                        style={{ top: 20 }}
                        visible={this.state.modalVisible}
                        onCancel={() => this.setModalVisible(false)}
                        centered={true}
                        footer={null}
                        width={'960px'}
                        className="sittingExamModal"
                    >
                        <Row gutter={[13, 13]}> 
                            <Col span={3} onClick={() => this.imgModalVisible(modalInfo&&modalInfo.personPhoto?modalInfo.personPhoto:'')} style={{ padding:'0px', marginRight: '20px',marginTop: '-10px',height:'109px',width: '92px', border: '1px dashed #D3D3D3', backgroundColor: '#F7F7F7'}}>
                                    <img src={modalInfo&&modalInfo.personPhoto?modalInfo.personPhoto:''} alt="" style={{width:'100%', height: '100%'}}></img>
                            </Col>
                            <Col span={21}>
                                <Row gutter={[13, 13]}> 
                                    <Col span={14}>所属医院：<strong>{modalInfo&&modalInfo.hospDesc?modalInfo.hospDesc:"--"}</strong></Col>
                                    <Col span={9}>所属科室：<strong>{modalInfo&&modalInfo.locDesc?modalInfo.locDesc:"--"}</strong></Col>
                                </Row>
                                <Row gutter={[13, 13]}>
                                        <Col span={6}>姓名：<strong>{modalInfo&&modalInfo.name?modalInfo.name:"--"}</strong></Col>
                                        <Col span={8}>证件号码：<strong>{modalInfo&&modalInfo.credNo?modalInfo.credNo:"--"}</strong></Col>
                                        <Col span={8}>出生日期：<strong>{modalInfo&&modalInfo.birthDate?modalInfo.birthDate:"--"}</strong></Col>
                                </Row>
                                <Row gutter={[16, 16]}>
                                    <Col span={6}>性别：<strong>{modalInfo&&modalInfo.docSex?modalInfo.docSex:"--"}</strong></Col>
                                    <Col span={8}>手机号码：<strong>{modalInfo&&modalInfo.mobile?modalInfo.mobile:"--"}</strong></Col>
                                    <Col span={8}>专业技术职称：<strong>{modalInfo&&modalInfo.title?modalInfo.title:"--"}</strong></Col>
                                </Row>    
                            </Col>
                        </Row>
                        <div style={{ width: '960px', height: '3px', marginLeft: '-24px', background: '#f0f2f5' }}></div>
                        <Row gutter={[16, 16]}>
                            <Col span={3} style={{ padding:'0px',width: '92px',marginRight: '20px'}}></Col>
                            <Col span={21}>
                                <Row gutter={[13, 13]}>
                                    <Col span={14}>资格证书编号：<strong>{modalInfo&&modalInfo.qualificationNo?modalInfo.qualificationNo:"--"}</strong></Col> 
                                    <Col span={9} >参加工作日期：<strong>{modalInfo&&modalInfo.workDate?modalInfo.workDate:"--"}</strong></Col>
                                </Row>
                            </Col>
                        </Row>
                        <Row gutter={[16, 16]}>
                             <Col span={3} style={{ padding:'0px',width: '92px',marginRight: '20px'}}></Col>
                            <Col span={21}>
                                <Row gutter={[13, 13]}>
                                    <Col span={14}>执业证书编号：<strong>{modalInfo&&modalInfo.certificateNo?modalInfo.certificateNo:"--"}</strong></Col> 
                                    <Col span={9}>资格证获得时间：<strong>{modalInfo&&modalInfo.qualificationDate?modalInfo.qualificationDate:"--"}</strong></Col>    
                                </Row>
                            </Col>
                        </Row>
                        <Row gutter={[16, 16]}> 
                        <Col span={3} style={{ padding:'0px',width: '92px',marginRight: '20px'}}></Col>
                            <Col span={21}>
                                <Row gutter={[13, 13]}>    
                                    <Col span={14}>执业范围：<strong>{modalInfo&&modalInfo.occupationRangeDesc?modalInfo.occupationRangeDesc:"--"}</strong></Col>       
                                    <Col span={9}>执业证发证日期：<strong>{modalInfo&&modalInfo.certificateDate?modalInfo.certificateDate:"--"}</strong></Col>   
                                </Row>
                            </Col> 
                        </Row>
                        <Row gutter={[13, 13]}>
                        <Col span={3} style={{ padding:'0px',width: '92px',marginRight: '20px'}}></Col>
                            <Col span={21}>
                                <Row gutter={[13, 13]}>    
                                    {/* <Col span={14}>全科医生：<strong>{modalInfo&&modalInfo.generalDoc?modalInfo.generalDoc:"--"}</strong></Col>  */}
                                    {<Col span={9}>资质类别：<strong>{modalInfo&&modalInfo.qualificationCat?modalInfo.qualificationCat:"--"}</strong></Col>}
                                </Row>
                            </Col>  
                        </Row>   
                        <div style={{ width: '960px', height: '3px', marginLeft: '-24px', background: '#f0f2f5', marginTop:'2px' }}></div>
                        <Row gutter={[16, 16]} style={{marginTop: '0px'}}>
                            <Col span={14}>
                                <Row>
                                    <Col span={11}>
                                        <div className="qualificationPhotoLab" style={{height:'43px',border: '1px dashed #D3D3D3',  backgroundColor: '#F7F7F7', lineHeight: '3'}}>
                                            <label style={{fontSize: 14,marginLeft: '5px', fontWeight: 'bold'}}>资格证书</label>
                                        </div>
                                    </Col>
                                    <Col span={2}></Col>
                                    <Col span={11} style={{height:'43px' ,border: '1px dashed #D3D3D3', backgroundColor: '#F7F7F7', lineHeight: '3'}}>
                                            <label style={{fontSize: 14,marginLeft: '5px', fontWeight: 'bold'}}>执业证书</label>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span={11} onClick={() => this.imgModalVisible(modalInfo&&modalInfo.qualificationPhoto?modalInfo.qualificationPhoto:"")} style={{ height:'173px',  backgroundColor: '#F7F7F7', border: '1px dashed #D3D3D3'}}>
                                            <img alt="" src={modalInfo&&modalInfo.qualificationPhoto?modalInfo.qualificationPhoto:""} style={{width:'100%', height: '100%'}}></img>
                                    </Col>
                                    <Col span={2}></Col>
                                    <Col span={11} onClick={() => this.imgModalVisible(modalInfo&&modalInfo.certificatePhoto?modalInfo.certificatePhoto:"")} style={{height:'173px',  backgroundColor: '#F7F7F7' , border: '1px dashed #D3D3D3'}}>
                                            <img alt="" src={modalInfo&&modalInfo.certificatePhoto?modalInfo.certificatePhoto:""} style={{width:'100%', height: '100%'}}></img>
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={1}></Col>
                            <Col span={8}>
                                <div className='rightBottomDom' style={{marginTop: '-8px', height: '230px', display:(rbAuditDisplay),borderLeft: '3px solid #f0f2f5'}}>
                                    <Row  gutter={[4, 4]}>
                                            <Col style={{textAlign: 'center', lineHeight: '3'}}>
                                                <label>审核结果</label>
                                            </Col>
                                        </Row>
                                        <Row  gutter={[8, 8]}></Row>
                                        <div style={{ widht: '100%', height: '2px', background: '#f0f2f5' ,width: '350px' }}></div>     
                                        <Row gutter={[16, 16]}>
                                            <Col span={7}>
                                                <label>审核结果</label>
                                            </Col>  
                                            <Col span={17}>
                                                <Row>
                                                    <Radio.Group onChange={this.onRadioChange.bind(this)} value={this.state.auditRadio}>
                                                        <Col span={14}>
                                                            <Radio value={'03'}><span>审核通过<span style={{ color: 'green'}}>√</span></span></Radio>
                                                        </Col>
                                                        <Col span={10}>
                                                            <Radio value={'02'}><span>审核不通过<span style={{ color: 'red'}}>X</span></span></Radio>
                                                        </Col>
                                                    </Radio.Group> 
                                                </Row>
                                            </Col>
                                        </Row>
                                        <Row gutter={[16, 16]}>
                                            <Col span={8}>
                                                <label>不通过原因</label>
                                            </Col>
                                            <Col span={16}>
                                                <TextArea disabled={this.state.txtAreaDisable} autoSize={{ minRows:4, maxRows :4 }} allowClear={true} value={this.state.reason} onChange={this.onTextChange.bind(this)}></TextArea>
                                            </Col>
                                        </Row>
                                        <Row gutter={[26, 26]}>
                                        <Col span={2}></Col>
                                        <Col span={10}>
                                                {(modalInfo == "")?<Button onClick={() => this.setModalVisible(false)} disabled>取消</Button>:<Button onClick={() => this.setModalVisible(false)}>取消</Button>}
                                            </Col>
                                            <Col span={12}>
                                                {(modalInfo == "")?<Button type="primary" onClick={() => this.audit()} disabled>确定</Button>: <Button  style={{backgroundColor: 'rgb(66, 185, 131)'}} onClick={() => this.audit()}><label style={{color: '#fff'}}>确定</label></Button>} 
                                            </Col>
                                        </Row>
                                </div> 
                                <div className='rightBottomDom' style={{marginTop: '-8px', height: '230px', display: (rbRefuseDisplay), borderLeft: '3px solid #f0f2f5'}}>
                                <Row  gutter={[16, 16]}>
                                    <Col style={{textAlign: 'center', lineHeight: '3'}}>
                                        <label>审核结果</label>
                                    </Col>
                                    </Row>
                                    <div style={{ widht: '100%', height: '1px', background: '#f0f2f5',width: '350px' }}></div>  
                                    <Row gutter={[16, 16]} style={{marginTop: '8px'}}>
                                        <Col span={8}>
                                            <label>审核结果</label>
                                        </Col>  
                                        <Col span={16}>
                                            {
                                               this.state.statusCode=='02' ? <div><span>{this.state.statusDesc}</span><span style={{ color: 'red'}}>X</span></div> : <div><span>{this.state.statusDesc}</span><span style={{ color: 'green'}}>√</span></div>
                                            }
                                        </Col>
                                    </Row>
                                    <Row gutter={[26, 26]}>
                                        <Col span={8}>
                                            <label>不通过原因</label>
                                        </Col>
                                        <Col span={16}>
                                            <span>{this.state.refuseReason}</span>
                                        </Col>
                                    </Row>
                                </div> 
                            </Col>
                        </Row> 
                            <Modal
                                visible={this.state.imgVisible}
                                title='图片预览' maskClosable={true}
                                onCancel={this.handleClose.bind(this)}
                                bodyStyle={{ padding: 5, overflow: 'auto' }}
                                footer={null}
                                className="crc-modal"
                            >
                                <div className="crc-m-content" onClick={this.handleClose.bind(this)}>
                                    <img src={this.state.imgPath} alt="" style={{ width: '100%' }} />
                                </div>
                            </Modal>              
                    </Modal>
                </div>
            </div>
            )
        }
    }
)

export default SittingExamination    