import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Button, Table, Row, Col, Select, Modal, DatePicker, Space, message } from 'antd';
import moment from "moment";
import "moment/locale/zh-cn"
import '@common/common.less';
import './index.less'
import apiObj from '@api/index';
import EditBlock from './editBlock';
import BlockContext from './block-context';
import { disabledDate } from '@utils/index'
const { post, api, xPost } = apiObj;
const { RangePicker } = DatePicker;
const { Option } = Select;
function BlockLossManage() {
    useEffect(() => {
        getBlockLossPage();
        blockLossTypeGather()
    }, []);
    const [blockList, setBlockList] = useState([]);
    const [total, setTotal] = useState(0);
    const [title, setTitle] = useState(0);
    const [visible, setVisible] = useState(false);
    const [size, setSize] = useState(15);
    const [current, setCurrent] = useState(1);
    const [type, setType] = useState(null);
    const [blockData, setBlockData] = useState({});
    const [blockDetail, setBlockDetail] = useState(null);//详情数据
    const [params, setParams] = useState({
        pages: 1,
        current: 1,
        size: 15
    });
    const [form] = Form.useForm();
    let data = {
        pages: 1,
        current: 1,
        size: size
    }
    //表格数据
    function getBlockLossPage(param) {
        post(api.getBlockLossPage, param || params).then((res) => {
            if (res.data.code === 200) {
                const data = res.data.data;
                setBlockList(data.records);
                setTotal(data.total)
            }
        })
    }
    //丢失量分类汇总
    function blockLossTypeGather(startDate, endDate) {
        post(api.blockLossTypeGather, { startDate: startDate || params.startDate, endDate: endDate || params.endDate }).then((res) => {
            if (res.data.code === 200) {
                const data = res.data.data;
                setBlockData(data)
            }
        })
    }
    //修改
    function showModal(title, row, type) {
        setVisible(true)
        setBlockDetail(row)
        setTitle(title)
        setType(type)
    }
    function onSizeChange(current, pageSize) {
        params.current = current
        params.size = pageSize
        setSize(pageSize)
        setCurrent(current)
        setParams(params)
        getBlockLossPage()
    }
    function changePage(page, pageSize) {
        params.current = page
        params.size = pageSize
        setParams(params)
        setCurrent(page)
        getBlockLossPage()
    }
    
    //返回
    function cancel() {
        setVisible(false)
        setBlockDetail(null)
    }
    function userChange() {
        setVisible(false)
        getBlockLossPage();
    }
    const onFinish = (value) => {
        if (value.time) {
            value.startDate = moment(value.time[0]).format('YYYY-MM-DD 00:00:00');
            value.endDate = moment(value.time[1]).format('YYYY-MM-DD 23:23:59');
        }
        delete value.time
        const param = {
            ...data,
            ...value,
        }
        setCurrent(1)
        setParams(param)
        getBlockLossPage(param);
        blockLossTypeGather(value.startDate, value.endDate)
    };
    const onReset = () => {
        setCurrent(1)
        setParams(data)
        form.resetFields();
        getBlockLossPage(data);
    };
    const columns = [
        { title: '序号', dataIndex: 'index', render: (text, record, index) => (current - 1) * params.size + index + 1 },
        { title: '住院序号', dataIndex: 'behospitalCode', key: 'behospitalCode' },
        { title: '文书编号', dataIndex: 'recId', key: 'recId' },
        { title: '文书标题', dataIndex: 'recTitle', key: 'recTitle' },
        { title: '丢失原因', dataIndex: 'lossCause', key: 'lossCause' },
        {
            title: '丢失类型', dataIndex: 'lossType', key: 'lossType', render: (text, record) => {
                return (<span>{record.lossType == 0 ? '文书丢失' : record.lossType == 1 ? '病案首页丢失' : record.lossType == 2 ? '患者信息丢失' : ''}</span>);
            }
        },
        {
            title: '丢失途径', dataIndex: 'lossWay', key: 'lossWay', render: (text, record) => {
                return (<span>{record.lossWay == 0 ? '外部丢失' : record.lossWay == 1 ? '内部丢失' : ''}</span>);
            }
        },
        { title: '更新时间', dataIndex: 'auditTime', key: 'auditTime' },
        {
            title: '状态', key: 'status', render: (text, record) => {
                return (<span className={(record.status === '已恢复') ? 'Adopt' : 'Delete'}>{record.status == 0 ? '已丢失' : record.status == 1 ? '已恢复' : ''}</span>);
            }
        },
        {
            title: '审核结果', key: 'isAudited', render: (text, record) => {
                return (<span className={(record.isAudited === '0') ? 'delete' : (record.isAudited === '1') ? 'adopt' : 'disable'}>{record.isAudited == 0 ? '审核未通过' : record.isAudited == 1 ? '审核通过' : record.isAudited == 2 ? '未核查' : ''}</span>);
            }
        },
        {
            title: '操作', dataIndex: 'key', render: (text, record) => (
                <Space size="middle">
                    <a onClick={e => showModal('修改病历数据块丢失明细', record, 3)}>修改</a>
                </Space>
            )
        }
    ];

    return (
        <div className="wrapper">
            <div className="filter-box">
                <Form
                    form={form}
                    name="normal_login"
                    onFinish={onFinish}
                    initialValues={{ lossType: '', lossWay: '', isAudited: '', status: '' }}
                >
                    <Row gutter={24}>
                        <Col span={6} key={0}>
                            <Form.Item label="日期" name="time">
                                <RangePicker
                                    disabledDate={disabledDate} // 限制日期不可选
                                    placeholder={['开始时间', '结束时间']}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={5} key={1}>
                            <Form.Item label="住院序号" name="behospitalCode">
                                <Input placeholder="请输入" autoComplete='off' />
                            </Form.Item>
                        </Col>
                        <Col span={5} key={2}>
                            <Form.Item label="文书编号" name="recId">
                                <Input placeholder="请输入" autoComplete='off' />
                            </Form.Item>
                        </Col>
                        <Col span={5} key={3}>
                            <Form.Item label="文书标题" name="recTitle">
                                <Input placeholder="请输入" autoComplete='off' />
                            </Form.Item>
                        </Col>
                        <Col span={5} key={4}>
                            <Form.Item label="丢失类型" name="lossType">
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                >
                                    <Option value="" key={3}>全部</Option>
                                    <Option value="0" key={0}>文书丢失</Option>
                                    <Option value="1" key={1}>病案首页丢失</Option>
                                    <Option value="2" key={2}>患者信息丢失</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={5} key={5}>
                            <Form.Item label="丢失途径" name="lossWay">
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                >
                                    <Option value="" key={2}>全部</Option>
                                    <Option value="0" key={0}>外部丢失</Option>
                                    <Option value="1" key={1}>内部丢失</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={5} key={6}>
                            <Form.Item label="核查结果" name="isAudited">
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                >
                                    <Option value="" key={3}>全部</Option>
                                    <Option value="0" key={0}>未通过</Option>
                                    <Option value="1" key={1}>已通过</Option>
                                    <Option value="2" key={2}>未核查</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={5} key={7}>
                            <Form.Item label="状态" name="status">
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                >
                                    <Option value="" key={3}>全部</Option>
                                    <Option value="0" key={0}>已丢失</Option>
                                    <Option value="1" key={1}>已恢复</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={4} key={8}>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    查询
                                </Button>
                                <Button onClick={onReset}>
                                    重置
                                </Button>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </div>

            <div className="table">
                <div className="table-header">
                    <h2 className="table-title">病历数据块丢失明细</h2>
                    <Space size="middle">
                        <Button type="primary" onClick={() => showModal('数据补录设置', { behospitalCode: '', time: '' }, 1)}>数据补录</Button>
                        <Button type="primary" onClick={() => showModal('数据对比设置', { behospitalCode: '', time: '' }, 2)}>数据对比</Button>
                    </Space>

                </div>
                <div className="table-data">
                    <Row className="data-box">
                        <Col span={6} order={1} className="data-item">
                            <p>{blockData.hisNum || '-'}</p>
                            <p>His</p>
                        </Col>
                        <Col span={6} order={2} className="data-item">
                            <p>{blockData.logNum || '-'}</p>
                            <p>接口日志</p>
                        </Col>
                        <Col span={6} order={3} className="data-item">
                            <p>{blockData.realNum || '-'}</p>
                            <p>实际</p>
                        </Col>
                        <Col span={6} order={4} className="data-item item" >
                            <p>{blockData.allLossNum || '-'}</p>
                            <p>合计丢失</p>
                        </Col>
                    </Row>
                    <Row className="data-box">
                        <Col span={6} order={1} className="box-item">
                            <p>{blockData.outRecNum || '-'}</p>
                            <p>文书丢失</p>
                        </Col>
                        <Col span={6} order={2} className="box-item">
                            <p>{blockData.outHomePageNum || '-'}</p>
                            <p>病案首页丢失</p>
                        </Col>
                        <Col span={6} order={3} className="box-item">
                            <p>{blockData.outCodeNum || '-'}</p>
                            <p>病历号丢失</p>
                        </Col>
                        <Col span={6} order={4} className="box-item box">
                            <p>{blockData.outLossNum || '-'}</p>
                            <p>外部丢失</p>
                        </Col>
                    </Row>
                    <Row className="data-box">
                        <Col span={6} order={1} className="box-item">
                            <p>{blockData.inRecNum || '-'}</p>
                            <p>文书丢失</p>
                        </Col>
                        <Col span={6} order={2} className="box-item">
                            <p>{blockData.inHomePageNum || '-'}</p>
                            <p>病案首页丢失</p>
                        </Col>
                        <Col span={6} order={3} className="box-item">
                            <p>{blockData.inCodeNum || '-'}</p>
                            <p>病历号丢失</p>
                        </Col>
                        <Col span={6} order={4} className="box-item box">
                            <p>{blockData.inLossNum || '-'}</p>
                            <p>内部丢失</p>
                        </Col>
                    </Row>
                </div>
                <Table
                    columns={columns}
                    scroll={{ y: 'calc(100vh - 470px)' }}
                    dataSource={blockList}
                    rowKey={record => record.id}
                    pagination={{
                        pageSize: size,
                        size: 'small',
                        current: current,
                        showSizeChanger: true,
                        pageSizeOptions: ['15', '30', '60', '120'],
                        showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
                        onShowSizeChange: (current, pageSize) => onSizeChange(current, pageSize), // 改变每页数量时更新显示
                        onChange: (page, pageSize) => changePage(page, pageSize),//点击页码事件
                        total: total
                    }} />
            </div>
            {visible && blockDetail ?
                <Modal
                    title={title}
                    okText='确定'
                    cancelText='取消'
                    width="500px"
                    visible={visible}
                    onCancel={cancel}
                    footer={null}
                    forceRender={true}
                >
                    <BlockContext.Provider value={{ blockDetail, type }}>
                        <EditBlock userChange={userChange} />
                    </BlockContext.Provider>

                </Modal>
                : ''}
        </div >
    )
}

export default BlockLossManage;