/**
 * 患者年就诊趋势及日志

 */
import React from 'react';
import {
    Card, Table, Input, Form, Select, Row, Col, Checkbox, Tabs,
    DatePicker, Button, Popconfirm, Icon, Divider, message, Modal,
} from 'antd';
// import { Util, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import store from 'store';
import {
    G2,
    Chart,
    Geom,
    Axis,
    Coord,
    Tooltip,
    Label,
    Legend,
    View,
    Guide,
    Shape,
    Facet,
    Util
} from "bizcharts";
import moment from 'moment';
import './style/index.less';

const { RangePicker } = DatePicker;
const Option = Select.Option;

class AnnualTrendVisitPage extends React.Component {
    constructor(props) {
        super(props)
        var patientData = JSON.parse(sessionStorage.getItem('patientData'))
        var userData = JSON.parse(sessionStorage.getItem('userData'))
        this.state = {
            dataSource: [],
            total: 0,
            page: 1,
            pageSize: 10,
            patientData: patientData,
            userData: userData,
            plotX:0,
            plotY:0
        }
    }

    componentDidMount() {
        this.loadPatientMsg()
        this.initData()
    }

    initData() {
        this.columns = [
            {
                title: '项目名称',
                dataIndex: 'ordSheet',
                width: 200,
                align: 'center',
            }, {
                title: '数量',
                dataIndex: 'num',
                width: 50,
                align: 'center',
            }, {
                title: '单位',
                dataIndex: '50',
                width: 50,
                align: 'center',
            }, {
                title: '单价',
                dataIndex: '3',
                width: 70,
                align: 'center',
            }, {
                title: '总价格',
                dataIndex: '11',
                width: 70,
                align: 'center',
            }, {
                title: '状态',
                dataIndex: 'status',
                width: 80,
                align: 'center',
            }, {
                title: '开单科室',
                dataIndex: '2',
                width: 100,
                align: 'center',
            }, {
                title: '审核信息',
                dataIndex: '1',
                width: 180,
                align: 'center',
            },
        ]
    }

    loadPatientMsg() {
        var params = {
            params: [{
                patID: this.state.patientData ? this.state.patientData.patID : '',
                admID: this.state.patientData ? this.state.patientData.admID : '',
                locID: this.state.userData.locID,
                userID: this.state.userData.userID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050021",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        titleData: res.data
                    })
                }
            }
        });
    }

    onPlotClick(e) {
        if (e && e.data) {
            this.setState({
                canvasStatus: true
            })
        }
    }

    hideModule() {
        this.setState({
            canvasStatus: false
        })
    }

    onPlotClicks(){
        console.dir('AAAAAA')
    }

    onPlotEnter(ev){
        this.setState({
            plotX:ev.x,
            plotY:ev.y,
            floatStatus:true
        })
    }
    onPlotLeave(){
        // this.setState({
        //     floatStatus:false
        // })
    }

    render() {
        const data = [
            {
                year: "一月",
                sales: 27,
                data: 'heheh'
            },
            {
                year: "二月",
                sales: 20,
                data: 'heheh'
            },
            {
                year: "三月",
                sales: 20,
                data: 'heheh'
            },
            {
                year: "四月",
                sales: 28,
                data: 'heheh'
            },
            {
                year: "五月",
                sales: 27,
                data: `<span>${'hdklsfhsdklfjsdkljf'}</span>`
            },
            {
                year: "六月",
                sales: 27,
                data: 'heheh'
            },
            {
                year: "七月",
                sales: 26,
                data: 'heheh'
            },
            {
                year: "八月",
                sales: 9,
                data: 'heheh'
            },
            {
                year: "九月",
                sales: 13,
                data: 'heheh'
            }
            ,
            {
                year: "十月",
                sales: 11,
                data: 'heheh'
            },
            {
                year: "十一月",
                sales: 17,
                data: 'heheh'
            },
            {
                year: "十二月",
                sales: 13,
                data: 'heheh'
            }
        ];
        const scale = {
            'sales': {
                max: 1,
                ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
            }

        };
        const tickLine = {
            lineWidth: 1, // 刻度线宽
            stroke: '#ccc', // 刻度线的颜色
            length: 5, // 刻度线的长度, **原来的属性为 line**,可以通过将值设置为负数来改变其在轴上的方向
        }
        return <div className='annual-trend-body'>
            <Row style={{ background: '#1999db' }}>
                <Col className='outpatient-station-col' style={{ height: '36px', lineHeight: '36px' }}>
                    <div style={{ display: 'flex' }}>
                        {/* <div className='patient-title-splice'></div> */}
                        <div style={{ color: 'white',marginLeft:10 }}>
                            <span>{this.state.titleData ? this.state.titleData.wardDesc : ''}</span><Divider type="vertical" />
                            <span>{this.state.titleData ? this.state.titleData.bedNo : ''}</span><Divider type="vertical" />
                            <span>{this.state.titleData ? this.state.titleData.patNo : ''}</span><Divider type="vertical" />
                            <span>{this.state.titleData ? this.state.titleData.patName : ''}</span><Divider type="vertical" />
                            <span>{this.state.titleData ? this.state.titleData.patSexDesc : ''} </span><Divider type="vertical" />
                            <span>{this.state.titleData ? this.state.titleData.patAge : ''}</span><Divider type="vertical" />
                            <span>居民身份证&nbsp;&nbsp;{this.state.titleData ? this.state.titleData.patCredNo : ''}</span><Divider type="vertical" />
                            <span>{this.state.titleData ? this.state.titleData.patMobile : ''}</span><Divider type="vertical" />
                            <span>{this.state.titleData ? this.state.titleData.patSocialStatusDesc : ''} </span><Divider type="vertical" />
                            <span> {this.state.titleData ? this.state.titleData.patAdmReasonDesc : ''} </span>
                            {this.state.titleData && this.state.titleData.patAdmReasonDesc ? <Divider type="vertical" /> : null}
                            <span>账户余额：¥&nbsp;&nbsp;&nbsp;{this.state.titleData ? this.state.titleData.accountBalance : 0} </span>
                        </div>
                    </div>
                </Col>
            </Row>
            <div style={{ marginTop: 10 }}></div>
            <Card className={this.state.canvasStatus ? 'annual-trend-card-show' : 'annual-trend-card-hide'}
                title={<div className='annual-tread-title' style={{ display: 'flex' }}>
                    <div className='headerBuild' style={{ display: 'flex' }}>
                        <div className='rightBtn'></div><div style={{ marginLeft: '10px' }}>门诊</div>
                    </div>
                    <div className='headerUnBuild' style={{ display: 'flex' }}>
                        <div className='whiteBtn'></div><div style={{ marginLeft: '10px' }}>住院</div>
                    </div>
                    <div className='headerUpdate' style={{ display: 'flex' }}>
                        <div className='redBtn'></div><div style={{ marginLeft: '10px' }}>门诊/住院</div>
                    </div>
                </div>}
                extra={<div className='batch-add-temp'>本年度累计就诊：18次</div>}>
                <Chart height={700} data={data} scale={scale} forceFit onPlotMove={this.onPlotEnter.bind(this)}>
                    {/* <Axis name="month" /> */}
                    <Axis name='sales' />
                    {/* <Tooltip enterable={true} useHtml={true} onClick={this.onPlotClicks.bind(this)}
                        crosshairs={{
                            type: "y"
                        }}/> */}
                    <Geom type="line" position="year*sales" size={2} subTickCount={4} />
                    <Geom
                        type="point"
                        position="year*sales"
                        size={10}
                        shape={"circle"}
                        tooltip={['year*value*data', (year, value, data) => {
                            return {
                                name: 'AAAAA',
                                value: data,
                                title: 'CCCCC',
                            }
                        }]}
                        style={{
                            stroke: "#fff",
                            lineWidth: 1
                        }}
                    />
                    {this.state.floatStatus?<Card style={{position:'absolute',top:this.state.plotY,left:this.state.plotX,
                        zIndex:11111,width:'200px',height:'100px',opacity:'0.8'}} onClick={this.onPlotClick.bind(this)}>hahhaa</Card>:null}
                </Chart>
            </Card>
            {this.state.canvasStatus ? <Card style={{ height: '100%' }} className={'annual-trend-card-showRight'}
                title={<span style={{ marginLeft: 10 }}>查看就诊日志</span>}
                extra={<div className='batch-add-temp'><Icon type='close' onClick={this.hideModule.bind(this)} /></div>}>
                <Row gutter={40} className='out-patient-service-body' style={{ height: '45%', marginTop: 40 }}>
                    <ul className="time-horizontal">
                        <li><b>青龙</b>青龙</li>
                        <li><b>白虎</b>白虎</li>
                        <li><b>朱雀</b>朱雀</li>
                        <li><b>玄武</b>玄武</li>
                        <ul className="time-vertical" style={{ height: 80, marginLeft: '100%' }}>
                            <li></li>
                        </ul>
                        <ul className="time-horizontal">
                        </ul>
                        <ul className="time-vertical" style={{ height: 80 }}>
                            <li></li>
                        </ul>
                        <ul className="time-horizontal">
                        </ul>
                    </ul></Row>

                <Row gutter={40} style={{ height: '44.8%', marginTop: 5 }}>
                    <div>
                        <div style={{ float: 'left' }}>日志明细-药房审核处方</div>
                        <div style={{ float: 'right' }}><Input placeholder='输入项目名称回车查询' /></div>
                    </div>
                    <Table columns={this.columns} dataSource={this.state.dataSource}
                        bordered pagination={false}></Table>
                </Row>
            </Card> : null}
        </div>
    }

}

export default AnnualTrendVisitPage;