/*
* 待处理异常
* */

import React, { Component } from 'react';
import {
    Input, Form, Select, Modal, Button, Progress, Upload, message, Icon, Table,
    Card, Row, Col, DatePicker, Popconfirm, Checkbox, Radio, Badge
} from 'antd';
import {
    G2,
    Chart,
    Geom,
    Axis,
    Tooltip,
    Coord,
    Label,
    Legend,
    View,
    Guide,
    Shape,
    Facet,

} from "bizcharts";
import { Util, dayFormat } from 'tools/index';
import RangeDatePicker from 'components/rangePicker/index';
import { $http } from 'containers/config/https';
import '../style/index.less';
import moment from 'moment';

const Option = Select.Option;
const Search = Input.Search;
const FormItem = Form.Item;
const { TextArea } = Input;

class ShowCommonChartsModal extends Component {

    constructor(props) {
        super(props);
        var date = new Date();
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        var patID = JSON.parse(sessionStorage.getItem('patID'));
        this.state = {
            leftData: [],
            rightData: [],
            userData: userData,
            patID: patID,
            // regDateFrom: moment(date).format(dayFormat),
            // regDateTo: moment(date).format(dayFormat),
        }
    }
    componentWillReceiveProps(nextProp) {
        if (!Util.isEmpty(nextProp.patID) && nextProp.patID !== this.state.patID) {
            this.setState({
                patID: nextProp.patID
            }, () => {
                this.loadLifeList()
            })
        }

        if (nextProp.loadCharts == true) {
            this.loadLifeList()
        }
    }

    componentDidMount() {
        this.loadLifeList()//生命体征下拉
    }

    loadLifeList() {
        var params = {
            params: [{
                patID: this.state.patID ? this.state.patID : this.props.patID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070021",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        lifeList: res.result,
                        code: res.result ? res.result[0].id : ''
                    }, () => {
                        this.loadData()
                    })
                }
            }
        });
    }

    loadData() {
        var date = new Date()
        var params = {
            params: [{
                patID: this.state.patID,
                signTypeID: this.state.code,
                startDate: this.state.regDateFrom ? moment(this.state.regDateFrom).format(dayFormat) : moment(date).format(dayFormat),
                endDate: this.state.regDateTo ? moment(this.state.regDateTo).format(dayFormat) : moment(date).format(dayFormat),
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070023",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        dataSource: res.result.data,
                        normalQty: res.result.normalQty,//正常
                        exceptionQty: res.result.exceptionQty,//异常
                        unhandledExceptionQty: res.result.unhandledExceptionQty,//待处理异常
                        qty: res.result.qty,//总数
                        unit:!Util.isEmpty(res.result.data)?res.result.data[0].unit:''
                    })
                }
            }
        });
    }

    closeModal(name) {
        let { onHide } = this.props;
        onHide && onHide();
        this.cleanInput();
    }

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

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

    //清空输入框
    cleanInput() {
        this.props.form.resetFields();
        this.setState({
            detailData: {}
        })
    }

    //提交
    onSubmit() {
        let { onSubmit } = this.props;
        onSubmit && onSubmit(this.state.data, this.state.newCode);
    }

    loadLifeListModal() {
        var { lifeList } = this.state;
        var lifeListOption = []
        lifeList && lifeList.map((item, index) => {
            lifeListOption.push(<Badge count={item.num}><Button key={index} value={item.id} style={{ marginLeft: 10 }}
                type={item.id == this.state.code ? 'primary' : ''}
                onClick={this.handleLifeList.bind(this, item.id)}>{item.vitalSignDesc}</Button></Badge>)
        })
        return lifeListOption
    }

    handleLifeList(id) {
        this.setState({
            code: id
        }, () => {
            this.loadData()
        })
    }

    loadDate(name) {
        if (name == 'week') {
            this.setState({
                regDateFrom: moment().week(moment().week()).startOf('week').format(dayFormat),
                regDateTo: moment(moment().week(moment().week()).endOf('week').valueOf()).format(dayFormat),
            }, () => {
                this.loadData()
            })
        } else if (name == 'month') {
            this.setState({
                regDateFrom: moment(moment().month(moment().month()).startOf('month').valueOf()).format(dayFormat),
                regDateTo: moment(moment().month(moment().month()).endOf('month').valueOf()).format(dayFormat),
            }, () => {
                this.loadData()
            })
        } else if (name == 'year') {
            this.setState({
                regDateFrom: moment(moment().year(moment().year()).startOf('year').valueOf()).format(dayFormat),
                regDateTo: moment(moment().year(moment().year()).endOf('year').valueOf()).format(dayFormat),
            }, () => {
                this.loadData()
            })
        }
    }


    render() {
        const cols = {
            signValueNumBer: {
                min: 0,
                range:[0,1],
                alias:this.state.unit
            },
            colDateTime: {
                range: [0, 1]
            },
        };
        const style = {
            width: '80vh',
            padding:'10px'
        };
        return <div style={{ height: '100%', width: '100%' }}>
            <div style={{ borderBottom: '1px solid #e8e8e8', paddingBottom: '5px' }}>
                {this.loadLifeListModal()}
            </div>
            <div style={{ padding: '5px 0', height: '30px', lineHeight: '20px', borderBottom: '1px solid #e8e8e8' }}>
                <span><span>累计测量次数：</span><span style={{ fontWeight: 'bold', fontSize: '18px' }}>{this.state.qty || 0}</span></span>
                <span style={{ marginLeft: 20 }}><span>正常次数：
    </span><span style={{ fontWeight: 'bold', fontSize: '18px' }}>{this.state.normalQty || 0}</span></span>
                <span style={{ marginLeft: 20 }}><span>异常次数：
    </span><span style={{ fontWeight: 'bold', fontSize: '18px', color: 'red' }}>{this.state.exceptionQty || 0}</span></span>
                <span style={{ marginLeft: 20 }}><span>待处理异常：
    </span><span style={{ fontWeight: 'bold', fontSize: '18px', color: 'red' }}>{this.state.unhandledExceptionQty || 0}</span></span>
            </div>
            <div style={{ padding: '5px 0', height: '45px', lineHeight: '20px', borderBottom: '1px solid #e8e8e8' }}>
                <Row>
                    <Col span={8}>
                        <Radio.Group defaultValue="a">
                            <Radio.Button value="a" onClick={this.loadData.bind(this)}>今日</Radio.Button>
                            <Radio.Button value="b" onClick={this.loadDate.bind(this, 'week')}>本周</Radio.Button>
                            <Radio.Button value="c" onClick={this.loadDate.bind(this, 'month')}>本月</Radio.Button>
                            <Radio.Button value="d" onClick={this.loadDate.bind(this, 'year')}>全年</Radio.Button>
                        </Radio.Group>
                    </Col>
                    <Col span={12}>
                        <RangeDatePicker label={'指定日期：'} format='YYYY-MM-DD' width={'70%'}
                            startDate={this.state.regDateFrom} endDate={this.state.regDateTo}
                            startChange={this.startChange.bind(this)} endChange={this.endChange.bind(this)} />
                    </Col>

                    <Col span={2}>
                        <Button type='primary' onClick={this.loadData.bind(this)}>查询</Button></Col>
                </Row>
            </div>
            {!Util.isEmpty(this.state.dataSource) ? <Chart height={360} style={style} data={this.state.dataSource} scale={cols} forceFit>
                <Legend />
                <Axis name="colDateTime" />
                <Axis
                    name="signValueNumBer"
                    label={{
                        formatter: val => `${val}${this.state.unit}`
                    }}
                />
                <Tooltip
                    crosshairs={{
                        type: "y"
                    }}
                    custom={true}
                    containerTpl={`
                                        <div class="g2-tooltip"><div class="g2-tooltip-title" style="margin-bottom: 4px;"></div>
                                        <table>
                                          <thead>
                                            <tr>
                                              <th>&nbsp;</th>
                                              <th>名称</td>
                                              <th>值</td>
                                            </tr>
                                          <thead>
                                          <tbody
                                            class="g2-tooltip-list"
                                          >
                                          </tbody>
                                        <table>
                                        `}

                    itemTpl={`
                                          <tr data-index={index}>'
                                            <td><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span></td>
                                            <td>{name}</td>
                                            <td>{value}</td>
                                          </tr>
                                       `}

                />
                <Geom
                    type="line"
                    position="colDateTime*signValueNumBer"
                    size={2}
                    color={"signType"}
                    shape={"smooth"}
                />
                <Geom
                    type="point"
                    position="colDateTime*signValueNumBer"
                    size={4}
                    shape={"circle"}
                    color={"signType"}
                    style={{
                        stroke: "#fff",
                        lineWidth: 1
                    }}
                />
            </Chart> : <div style={{ textAlign: 'center', height: 350, color: '#666666', fontSize: '16px', lineHeight: '350px' }}>图表暂无数据~</div>}
        </div>
    }
}

export default Form.create()(ShowCommonChartsModal);
