/**
 * 移动护理权限审核
 * creator:JYW
 * date:2020-11-27
 */
import React from 'react';
import { Select, Input, Row, Col, Button, Spin, message, Divider, Icon } from 'antd';
import { $http } from '../../../containers/config/https';
import PubilcTablePagination from '../../common/PubilcTablePagination.jsx';
import { DeviceUtil } from 'tools/index';
import store from 'store';
const { Option } = Select;
class AuthorityAudit extends React.Component {
    constructor({ history }) {
        super();
        this.history = history;
        this.state = {
            flag: '',
            title: '',
            userInfo: {},
            // 主菜单列表数据
            data: [],
            code: '',//工号 
            desc: '',//申请人
            mobile: '',//手机号
            auditStatus: "N",//审核状态
            total: 0,
            page: 1,
            pageSize: 20,
            // 是否显示loading
            showLoading: true,
            loading: false,
            tableType: 'C',
            columns: [],
            selectedRowKeys: [],
            hospArr: [],
            hospID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).hospID : ""
        }
    }
    componentDidMount() {
        //初始化列数据
        this.loadColumn();
        // 初始化列表数据
        this.handleQuery();
        this.getHospArr();
        // 数据异步请求，请求成功之后setState
        this.setState({
            showLoading: false
        });
    }

    componentWillUnmount() {
        // 组件销毁前将静止让setState修改state的状态
        this.setState = (state, callback) => { return; }
    }
    //查询列头数据
    loadColumn = () => {
        let data = {
            params: [{
                compontName: "MobileNurseAuditList",
                type: this.state.tableType,
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040073",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    let resData = res.result[this.state.tableType];
                    let oprations =
                    {
                        title: '操作',
                        key: 16,
                        align: "center",
                        width: 130,
                        render: (text, record) => {
                            return record.auditStatusCode == "Y" ? (
                                <span>
                                    <Icon type="CloseCircleOutlined" style={{ color: 'rgba(240,65,52,1)' }}></Icon>
                                    <span className='span' onClick={() => this.handleAuditSignle(record, "N")}>撤销审核</span>
                                </span>
                            ) : (
                                <span>
                                    <Icon type="CheckCircleOutlined" style={{ color: '#108EE9' }}></Icon>
                                    <span className='span' onClick={() => this.handleAuditSignle(record, "Y")}>审核</span>|{record.auditStatusCode != "T"?(
                                    <span className='span' onClick={() => this.handleAuditSignle(record, "T")}>拒绝</span>):''}
                                </span>
                                
                            )
                        }
                    }
                    resData.push(oprations);
                    res.totalWidth = (Number(res.totalWidth.replace("px", "")) + 130) + "px";
                    this.setState({
                        columns: resData,
                        tableWidth: res.totalWidth
                    }, () => {
                        this.handleQuery();
                    })
                }
            }
        })
    }
    //单独操作
    handleAuditSignle = (record, status, e) => {
        let applyID = [];
        applyID.push(record.id);
        this.setState({
            selectedRowKeys: applyID
        }, () => {
            this.handleAudit(status, e);
        })

    }
    //批量操作
    handleAudit = (status, e) => {
        let { selectedRowKeys } = this.state;
        let data = {
            params: [{
                applyID: selectedRowKeys,
                auditStatus: status,
            }],
        };
        $http.post('urlS', this, {
            code: '04220004',
            data: data,
            success: function (res) {
                if (+res.errorCode == 0) {
                    message.success("审核成功");
                    this.getTableData();
                } else {
                    message.error(res.errorMessage);
                }
            }
        })
    }

    //获取医院下拉框数据
    getHospArr = () => {
        let data = {
            params: [{
            }],
        }
        $http.post("urlS", this, {
            code: "01040250",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({
                        hospArr: res.result,
                    }, () => { console.log(this.state.hospArr, "hospArr") })
                } else {
                    message.error('失败：' + res.errorMessage);
                }
            },
            error: function (error) {
                message.error('失败：' + error);
            }
        })
    }
    // 调用子组件的连接事件 
    handleOnRef = (ref) => {
        this.commonChild = ref
    }

    // 提供修改page和pageSize的回调函数
    compilePage(page, pageSize) {
        // 修改page，或者pageSize
        this.setState({ page: page, pageSize: pageSize }, () => {
            this.getTableData();
        })
    }
    // 查询条件修改(输入框)
    onChangeInput = (name, e) => {
        this.setState({ [name]: e.target.value });
    }
    onChangeSelect = (e) => {
        this.setState({
            auditStatus: e,
        }, () => {
            this.handleQuery();
        })
    }

    onHospChangeSelect = (e) => {
        this.setState({
            hospID: e,
        }, () => {
            this.handleQuery();
        })
    }

    // 请求列表数据
    getTableData = () => {
        this.setState({ loading: true })
        let { page, pageSize, code, desc, mobile, auditStatus, hospID } = this.state;
        let data = {
            params: [{
                userName: desc,
                userCode: code,
                userMobile: mobile,
                auditStatus: auditStatus,
                hospID: hospID
            }],
            pagination: [{
                pageSize: pageSize,
                currentPage: page,
                sortColumn: "Code",
                sortOrder: "asc"
            }]
        };
        $http.post('urlS', this, {
            code: '04220003',
            data: data,
            success: function (res) {
                if (+res.errorCode == 0) {
                    /**
                     * @ByShizi: 每次切换状态多一条数据处理
                     * Create 2022-07-12
                     * */
                    this.setState({ data: res.result?.data || [], total: res.result.total, loading: false, selectedRowKeys: [] }, () => {
                        this.commonChild.handleLoading()
                    })
                } else {
                    this.setState({ data: [], total: 0, loading: false, selectedRowKeys: [] }, () => {
                        // 关闭loading
                        this.commonChild.handleLoading();
                    })
                }
            }
        })
    }

    // 查询
    handleQuery = () => {
        this.setState({ page: 1 }, () => {
            this.getTableData();
        })
    }
    rowSelectionOnChange = (selectedRowKeys, selectedRows) => {
        this.setState({
            selectedRowKeys: selectedRowKeys
        })
    }
    render() {
        let { selectedRowKeys, hospArr } = this.state
        // 组件所需参数
        const param = {
            // 表头配置
            columns: this.state.columns,
            // 表格数据
            data: this.state.data,
            // 数据总条数
            total: this.state.total,
            // 当前页数
            page: this.state.page,
            pageSize: "20",
            loading: this.state.loading,
            isRowSelection: true,
            componentName: 'MobileNurseAuditList',
            y: store.getState().tableHeight.y + 114 - 75,
            height: store.getState().tableHeight.y + 158 - 75 + 'px',
            // 表格的宽度
            x: this.state.tableWidth,
        }
        let rowSelection = {
            selectedRowKeys,
            onChange: this.rowSelectionOnChange,
        };
        const statusArr = [
            {
                status: 'N',
                descripts: '未审核',
                descriptsSPCode: 'N',
            }, {
                status: 'Y',
                descripts: '已审核',
                descriptsSPCode: 'Y',
            }, {
                status: 'T',
                descripts: '已拒绝',
                descriptsSPCode: 'Y',
            }];
        let statusoP = []
        statusArr && statusArr.map(item => {
            statusoP.push(<Option key={item.status} role={item.descripts + '^' + item.descriptsSPCode} title={item.descripts} value={String(item.status)}>{item.descripts}</Option>)
        });

        let hospOp = []
        hospArr && hospArr.map(item => {
            hospOp.push(<Option key={item.id} role={item.descripts + '^' + item.descriptsSPCode} title={item.descripts} value={String(item.id)}>{item.descripts}</Option>)
        });
        return (
            <Spin tip="加载中..." spinning={this.state.showLoading}>
                <div>
                    <div className="table-operations">
                        <Row style={{ height: '75px', lineHeight: '75px', padding: '0 24px' }}>
                            <Col span={18}>
                                姓名：<Input title="输入内容后可回车检索" placeholder="请输入( Enter )" value={this.state.desc} style={{ width: '150px', marginRight: '20px' }} onChange={this.onChangeInput.bind(this, "desc")} onPressEnter={this.handleQuery} />
                                工号：<Input title="输入内容后可回车检索" placeholder="请输入( Enter )" value={this.state.code} style={{ width: '150px', marginRight: '20px' }} onChange={this.onChangeInput.bind(this, "code")} onPressEnter={this.handleQuery} />
                                手机号：<Input title="输入内容后可回车检索" placeholder="请输入( Enter )" value={this.state.mobile} style={{ width: '150px', marginRight: '20px' }} onChange={this.onChangeInput.bind(this, "mobile")} onPressEnter={this.handleQuery} />
                                申请状态：
                                <Select
                                    defaultValue="N"
                                    style={{ width: '150px', marginRight: '20px' }}
                                    onChange={this.onChangeSelect}
                                >
                                    {statusoP}
                                </Select>
                                <Select
                                    defaultValue={sessionStorage.userData ? JSON.parse(sessionStorage.userData).hospID : ""}
                                    style={{ width: '150px', marginRight: '20px' }}
                                    onChange={this.onHospChangeSelect}
                                >
                                    {hospOp}
                                </Select>
                                <Button style={{ marginRight: '15px', background: 'rgba(255,255,255,1)' }} onClick={this.handleQuery}>查询</Button>
                            </Col>
                            <Col span={6} style={{ textAlign: 'right' }}>
                                {this.state.auditStatus == 'Y' ?
                                    <Button onClick={this.handleAudit.bind(this, "N")} style={{ background: 'rgba(247,128,93,1)', color: '#fff' }}>批量撤销审核</Button>
                                    : <Button onClick={this.handleAudit.bind(this, "Y")} style={{ background: 'rgba(247,128,93,1)', color: '#fff' }}>批量审核</Button>}

                            </Col>
                        </Row>
                    </div>
                    <div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
                    <div style={{ padding: "24px 24px 12px 24px" }} className="table-body-height">
                        {/* handelThis将夫组件的属性与方法给子组件访问 */}
                        <PubilcTablePagination
                            param={param}
                            setRowClassNamePublic={this.setRowClassNamePublic}
                            onClickRowPublic={this.onClickRowPublic}
                            handelThis={this}
                            onRef={this.handleOnRef}
                            rowSelectionPublic={rowSelection}
                            getColumns={this.loadColumn}
                        />
                    </div>
                </div>
            </Spin>
        )
    }
}
export default AuthorityAudit;