// 人员审核
import React from 'react';
import { Select, Input, Row, Col, Button, Spin, Modal, message, Icon, DatePicker } from 'antd';
import { $http } from '../../containers/config/https';
import PubilcTablePagination from '../common/PubilcTablePagination.jsx'; // 公共table组件
import PersAuditModalFrom from './component/PersAuditModal'   //审核
import moment from 'moment';
import RangeDatePicker from 'components/rangePicker/index';

// 组件const
const { Option } = Select;
const { RangePicker } = DatePicker;

export default class PersAudit extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            // 表格数据
            tableData: [],
            // 表格数据总条数
            total: 0,
            showLoading: true,
            page: 1,
            pageSize: 10,
            hospDrList: [], // 医院列表数据
            deptDrData: [], // 科室集合
            PostData: [], // 岗位集合
            hosp: JSON.parse(window.sessionStorage.userData).hospID,   // 医院 //所属医院
            deptDr: '', //科室名称
            persAuditTitle: '申请审核', //弹框title
            visibleGroup: false,
            descripts: '', //姓名
            startTime: undefined,//开始时间
            endTime: undefined,  //结束时间
            post: '', //岗位
            aduitDr: '', //审核状态
            persAuditDateId: '', //审核弹框主键
            userAuditFlag: '', //审核还是查看

        };
        this.columns = [
            {
                key: 1,
                title: '申请日期',
                dataIndex: 'userApplyDate',
                align: "center",
                width: 200,
            },
            {
                key: 2,
                title: '姓名',
                dataIndex: 'userDesc',
                align: "center",
                width: 200,
            },
            {
                key: 3,
                title: '性别',
                dataIndex: 'userSexDesc',
                align: "center",
                width: 200,
            },
            {
                key: 4,
                title: '手机号',
                dataIndex: 'userMobile',
                align: "center",
                width: 200,
            },
            {
                key: 5,
                title: '科室',
                dataIndex: 'userApplyLocDesc',
                align: "center",
                width: 200,
            },
            {
                key: 6,
                title: '申请岗位',
                dataIndex: 'CBPostDesc',
                align: "center",
                width: 200,
            },
            // {
            //     key: 7,
            //     title: '角色',
            //     dataIndex: 'groupDescripts',
            //     align: "center",
            //     width: '9%'
            // },
            {
                key: 8,
                title: '审核状态',
                dataIndex: 'userAuditResult',
                align: "center",
                width: 200,
            },
            {
                title: '操作',
                key: 9,
                align: "center",
                width: 200,
                fixed: 'right',
                render: (text, record) => (
                    <div>
                        {record.userAuditFlag === '1' ? <span className='span' style={{ color: 'rgba(247,128,93,1)' }} onClick={() => this.handleEdit(record, '申请审核')}>审核</span> : <span className='span' onClick={() => this.handleEdit(record, '查看日志')}>查看</span>}
                    </div>
                ),
            }
        ]
    }

    componentDidMount() {
        // 初始化列表数据
        this.handleQuery()
        // 组件加载完毕关闭loading
        this.setState({ showLoading: false })
        // 医院列表加载
        this.searachHospDr()

        // 科室加载
        this.hospDrChange(this.state.hosp)
    }


    // 回车查询
    handleKeydown = (e) => {
        if (e.keyCode === 13) {
            this.search() // 查询
        }
    }

    // 查询
    search = (e) => {
        this.setState({ page: 1, pageSize: 10 }, () => {
            // 初始化列表数据
            this.handleQuery()
        })
    }


    // 医院列表加载
    searachHospDr = () => {
        let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        var data = {
            params: [{
                hospID: '', // 医院id
                logonGroupID: user.groupID, //登录角色id
                logonHospID: user.hospID, // 登录医院id
            }]
        }
        $http.post('urlS', this, {
            code: "01040001",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        hospDrList: res.depDoctor, //  医院列表
                    })
                }
            }
        });
    }

    // 医院切换
    hospDrChange = (value) => {

        this.setState({ hosp: value, deptDr: '' });

        this.setState({
            deptDrData: [], //清空下拉框
        })

        if (!value) {
            return false
        }

        let data = {
            "params": [{
                hospID: value,
            }]
        };
        $http.post('urlDeault', this, {
            code: "04020008",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        deptDrData: res.result.Data, // 科室集合
                    })
                }
            }
        });
    }



    // 调用公共组件的连接事件
    onRef = (ref) => {
        this.child = ref
    }

    // 提供修改page和pageSize的回调函数
    compilePage(page, pageSize) {
        // 修改page，或者pageSize
        this.setState({ page: page, pageSize: pageSize }, () => {
            // 重新调用查询方法
            this.handleQuery();
        })
    }


    // 查询
    handleQuery = () => {

        let { page, pageSize } = this.state;
        let data = {
            params: [{
                "hospID": this.state.hosp || '',
                "locID": this.state.deptDr || '',
                "userDesc": this.state.descripts || '',
                "userApplyStartDate": this.state.startTime || '',
                "userApplyEndDate": this.state.endTime || '',
                "userPostID": this.state.post || '',
                "userAuditState": this.state.aduitDr || '',
            }],
            pagination: [{
                pageSize: pageSize,
                currentPage: page,
                sortColumn: 'code',
                sortOrder: 'asc'
            }]
        };


        $http.post('urlS', this, {
            code: "01040027",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    for (var i = 0; i < res.result.Data.length; i++) {
                        res.result.Data[i].key = i;
                    }
                    this.setState({
                        tableData: res.result.Data,
                        PostData: res.result.CBPostAry,
                        total: res.result.TotalCount,
                    })
                } else {
                    this.setState({
                        tableData: [],
                        total: 0
                    })
                }
            }
        });

        this.child.handleLoading()
    }

    // Modal确认
    handleOk = (e) => {
        this.setState({
            visibleGroup: false,
        });
        // 重新调用查询方法
        this.handleQuery();
    }

    // Modal取消
    handleCancel = (e) => {

        this.setState({
            visibleGroup: false,
        });
        this.handleQuery() //查询
    }

    // 审核
    handleEdit = (record, str) => {
        this.setState({
            visibleGroup: true,
            persAuditTitle: str,
            persAuditDateId: record.userID,
            userAuditFlag: record.userAuditFlag,
        });

    }

    // 科室切换
    hospLocChange = (value) => {
        this.setState({ deptDr: value });
    }

    // 查询条件 --- 姓名
    descriptsChange = (e) => {
        this.setState({ descripts: e.target.value });
    }

    // 查询条件 --- 日期
    timeChange = (date, dateString) => {

        //这两个参数值antd自带的参数

        this.setState({
            startTime: dateString[0],
            endTime: dateString[1],
        })
    }

    startChange(date) {
        this.setState({
            startTime: date,
        })
    }

    endChange(date) {
        this.setState({
            endTime: date,
        })
    }

    // 查询条件 --- 岗位
    postChange = (e) => {
        this.setState({ post: e });
    }

    // 查询条件 --- 状态
    aduitDrChange = (e) => {
        this.setState({ aduitDr: e });
    }






    render() {
        // 组件所需参数
        const param = {
            // 表头配置
            columns: this.columns,
            // 表格数据
            data: this.state.tableData,
            // 数据总条数
            total: this.state.total,
            // 数据页数
            page: this.state.page,
            x: 1600
        }
        return (
            <Spin tip="加载中..." spinning={this.state.showLoading}>
                <div style={{ width: '100%', height: '100%' }}>
                    <div className="table-operations">
                        <Row style={{ minHeight: '80px', padding: '0 24px 24px 24px' }}>
                            <Col span={24}>
                                所属医院： <Select value={this.state.hosp} allowClear showSearch optionFilterProp="title1" style={{ width: '150px', margin: '23px 15px 0 0' }} onChange={(event) => { this.hospDrChange(event) }} placeholder="所属医院">
                                    {this.state.hospDrList.map(item => <Option title={item.descripts} title1={item.descripts + '^' + item.descriptsSPCode} value={item.id} key={item.id} >{item.descripts}</Option>)}
                                </Select>
                                科室名称：<Select allowClear showSearch value={this.state.deptDr} onChange={(event) => { this.hospLocChange(event) }} optionFilterProp="title1" style={{ width: '150px', margin: '23px 15px 0 0' }} placeholder="科室名称">
                                    {this.state.deptDrData.map(item => <Option title={item.descripts} title1={item.descripts + '^' + item.descriptsSPCode} value={item.id} key={item.id}  >{item.descripts}</Option>)}
                                </Select>
                                姓名： <Input onKeyUp={(e) => { this.handleKeydown(e); }} value={this.state.descripts} onChange={(event) => { this.descriptsChange(event) }} allowClear={true} placeholder="请输入" style={{ width: '150px', margin: '23px 15px 0 0' }} />
                                {/* 申请时间： <RangePicker
                                    format="YYYY-MM-DD"
                                    style={{ width: '250px', margin: '23px 15px 0 0' }}
                                    value={this.state.startTime === undefined || this.state.endTime === undefined || this.state.startTime === "" || this.state.endTime === "" ? null : [moment(this.state.startTime, 'YYYY-MM-DD'), moment(this.state.endTime, 'YYYY-MM-DD')]}
                                    onChange={this.timeChange} */}

                                <span style={{ display: 'inline-block', margin: '23px 15px 0 0' }}><RangeDatePicker label='申请时间：' format='YYYY-MM-DD' width={260}
                                    startChange={this.startChange.bind(this)} endChange={this.endChange.bind(this)} /></span>
                                申请岗位：<Select allowClear showSearch style={{ width: '150px', margin: '23px 15px 0 0' }} placeholder="申请岗位" value={this.state.post} optionFilterProp="title1" onChange={(event) => { this.postChange(event) }} >
                                    {this.state.PostData.map(item => <Option title={item.descripts} title1={item.descripts + '^' + item.descriptsSPCode} value={item.id} key={item.id}  >{item.descripts}</Option>)}

                                </Select>
                                审核状态：<Select allowClear value={this.state.aduitDr} onChange={(event) => { this.aduitDrChange(event) }} style={{ width: '150px', margin: '23px 15px 0 0' }} placeholder="审核状态">
                                    <Option value="">全部</Option>
                                    <Option value="1">待审核</Option>
                                    <Option value="2">审核通过</Option>
                                    <Option value="3">审核不通过</Option>
                                </Select>
                                <Button onClick={this.search} style={{ margin: '23px 15px 0 0', background: 'rgba(255,255,255,1)' }}>查询</Button>
                            </Col>
                        </Row>
                    </div>
                    <div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
                    <div style={{ padding: 24 }}>
                        {/* handelThis将夫组件的属性与方法给子组件访问 */}
                        <PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} />
                    </div>
                    <div>
                        {/* 审核 */}
                        <Modal
                            title={this.state.persAuditTitle}
                            visible={this.state.visibleGroup}
                            onOk={this.handleOk}
                            footer={false}
                            onCancel={this.handleCancel}
                            width='900px'
                        >
                            <PersAuditModalFrom handleOk={this.handleOk} persAuditDateId={this.state.persAuditDateId} userAuditFlag={this.state.userAuditFlag} />
                        </Modal>
                    </div>
                </div>
            </Spin>
        )
    }
}