/**
 * 互联网医院数据监测中心
 */
import React from 'react';
import { Modal, Row, Table, Radio ,Col} from 'antd';
import { Util, } from 'tools/index';
import { $http } from 'containers/config/https';
import $ from '../component/js/jquery-3.2.1.min.js';
import '../style/index.less';
import store from '../../../store';
import {
    G2,
    Chart,
    Geom,
    Axis,
    Tooltip,
    Coord,
    Label,
    Legend,
    View,
    Guide,
    Shape,
    Facet,

} from "bizcharts";
import '../style/index.less';
import DataSet from "@antv/data-set";
const { DataView } = DataSet;
var loadInterface;
class ShowUserStatisitcsBIPage extends React.Component {

    constructor(props) {
        super(props);
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        this.state = {
            userData: userData,
            locRecrption: [],
            tableOneData: [],
            locStatus: 'Y',
            orderStatus: 'Y',
            orderTread: []
        }
    }

    componentDidMount() {
        this.initData()
        this.loadLocReceptionRank()//科室接诊排行
        this.loadDoctorRank()
        this.loadOrderTread()//订单趋势
        loadInterface = setInterval(() => {
            this.loadLocReceptionRank()//科室接诊排行
            this.loadDoctorRank()
            this.loadOrderTread()//订单趋势
        }, 12*60*60*1000)

        // var scrollTimer = null;
        // var delay = 2000;
        // var that = this;
        // scrollTimer = setInterval(function () {
        //     that.scrollNews();
        // }, delay);
    }

    componentWillUnmount() {
        clearTimeout(loadInterface)
    }

    scrollNews() {
        var $news = $('.orderLisiBI-dom table');
        var $lineHeight = $news.find('tr:first').height();
        $news.animate({ 'marginTop': -$lineHeight + 'px' }, 1000, function () {
            $news.css({ margin: 0 }).find('tr:first').appendTo($news);
        });
    }

    loadOrderTread() {
        var params = {
            params: [{
                hospID: this.state.userData.hospID,
                ordertype: this.state.orderStatus
            }]
        }
        $http.post('urlDeault', this, {
            code: "05100347",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        orderTread: res.Date
                    })
                }
            }
        });
    }

    //医生接诊排行
    loadDoctorRank() {
        var params = {
            params: [{
                hospID: this.state.userData.hospID,
            }]
        }
        $http.post('urlDeault', this, {
            code: "03100121",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        tableOneData: res.result
                    })
                }
            }
        });
    }

    loadLocReceptionRank() {
        var params = {
            params: [{
                hospID: this.state.userData.hospID,
                ordertype: this.state.locStatus
            }]
        }
        $http.post('urlDeault', this, {
            code: "03100120",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        locRecrption: res.result
                    })
                }
            }
        });
    }

    initData() {
        this.columnsOne = [
            {
                key: "0",
                title: '排名',
                dataIndex: 'seqNo',
                align: "center",
                width: 100
            },
            {
                key: "1",
                title: '医生',
                dataIndex: 'docDesc',
                align: "center",
                width: 100
            },
            {
                key: "2",
                title: '接诊人次',
                dataIndex: 'docNum',
                align: "center",
                width: 100
            }
        ];
    }

    //切换科室接诊人数和科室收入
    changeLocTemp(name, e) {
        this.setState({
            [name]: e.target.value
        }, () => {
            this.loadLocReceptionRank()
        })
    }

    handleChangeOrderList(name, e) {
        this.setState({
            [name]: e.target.value
        }, () => {
            this.loadOrderTread()
        })
    }

    render() {
        const {tableOneData}=this.state
        let liOp = []
        tableOneData&&tableOneData.map((item,i)=>{
            liOp.push(
                <li>

                </li>
            )
        })
        const ds = new DataSet();
        const dv = ds.createView().source(this.state.locRecrption);
        dv.source(this.state.locRecrption).transform({
            type: "fold",
            fields: ['视频问诊','图文咨询'],
            // 展开字段集
            key: "code",
            // // key字段
            value: "订单数",
            // value字段
            retains: ["locDesc"], // 保留字段集，默认为除fields以外的所有字段
            dimension: "totalNum", groupBy: ["totalNum"],
            // callback(a, b) {
            //     // 排序依据，和原生js的排序callback一致
            //     return a.totalNum - b.totalNum > 0;
            // }
        });

        /***面积图 */
        const firstCols = {
            // value: {
            //     type: 'linear',
            //     tickInterval: 50,
            // },
        };
        const colsPointOne = {
            docDesc: {
              range: [0, 1]
            }
          };
        return <div className="orderLisiBI-dom">

            <Row style={{ backgroundColor: "rgb(0, 31, 95)",padding: "10px 6px" }}>
                <div style={{ height: 20, marginTop: 5 }}>
                    <div style={{ color: "#fff", float: 'left', }}>
                        订单趋势图
                </div>
                    <div style={{ float: 'right', marginRight: 5 }}>
                        <Radio.Group value={this.state.orderStatus} buttonStyle="solid" size='small'
                            onChange={this.handleChangeOrderList.bind(this, 'orderStatus')}>
                            <Radio.Button value='Y'>近6个月</Radio.Button>
                            <Radio.Button value='R'>近7日</Radio.Button>
                        </Radio.Group>
                    </div>
                </div>
                <Chart height={240} data={this.state.orderTread} scale={colsPointOne} forceFit className="order-charts"
              padding={[30, 30, 30, 60]}
            >
              <Legend
                position="top"
                // marker={(x, y, r) => {
                //   return [
                //     ['M', x - r, y],
                //     ['L', x + r, y]
                //   ];
                // }}
                marker="square"
                textStyle={{
                  fill: "#fff"
                }}
              />
              <Axis name="value"
                label={{
                  textStyle: {
                    fill: '#fff', // 文本的颜色
                  }
                }}
                grid={null}
              />
              <Axis
                name="payDate"
                label={{
                  formatter: val => `${val}`,
                  textStyle: {
                    fill: '#fff', // 文本的颜色
                  }
                }}
                grid={null}
              />
              <Tooltip
                crosshairs={{
                  type: "y"
                }}
              />
              <Geom
                type="line"
                position="payDate*value"
                size={2}
                color={"country"}
                shape={"smooth"}
              />
              <Geom
                type="point"
                position="payDate*value"
                size={4}
                shape={"circle"}
                color={"country"}
                style={{
                  stroke: "#fff",
                  lineWidth: 1
                }}
              />
            </Chart> 
                {/* <Chart height={260} data={this.state.orderTread} forceFit padding={{ top: 30, right: 30, bottom: 30, left: 100 }}>
                    <Axis name="value" grid={null}
                        label={{
                            offset: 12,
                            textStyle: {
                                fill: '#fff', // 文本的颜色
                            }
                        }} />
                    <Axis name="payDate" grid={null}
                        label={{
                            offset: 12,
                            textStyle: {
                                fill: '#fff', // 文本的颜色
                            }
                        }} />
                    <Legend
                    position="top"
                    marker="square"
                        // marker={(x, y, r) => {
                        //     return [
                        //         ['M', x - r, y],
                        //         ['L', x + r, y]
                        //     ];
                        // }}
                        textStyle={{
                            fill: "#fff"
                        }}
                    />
                    <Tooltip />
                    <Geom type="areaStack" position="payDate*value"
                        tooltip={null}
                        color={['country', ['l (90) 0:rgba(0, 146, 255, 1) 1:rgba(0, 146, 255, 0.1)', 'l (90) 0:rgba(0, 268, 0, 1) 1:rgba(0, 268, 0, 0.1)']]} />
                    <Geom type="lineStack" position="payDate*value" size={2} color={['country', ['rgba(0, 146, 255, 1)', '#00ff00']]} />
                </Chart> */}
            </Row>

            <Row style={{ backgroundColor: "rgb(0, 31, 95)", marginTop: 10,padding:"12px 6px" }}>
                <div style={{ height: 20, }}>
                    <div style={{ color: "#fff", float: 'left', }}>
                        科室接诊量排行（TOP 5）
                </div>
                    <div style={{ float: 'right', marginRight: 5 }}>
                        <Radio.Group value={this.state.locStatus} buttonStyle="solid" size='small' onChange={this.changeLocTemp.bind(this, 'locStatus')}>
                            <Radio.Button value='Y'>近6个月</Radio.Button>
                            <Radio.Button value='R'>近7日</Radio.Button>
                        </Radio.Group>
                    </div>
                </div>
                <Chart  height={(this.props.allHeight == true ? 350 : 240)} data={dv} forceFit padding={{ top: 30, right: 30, bottom: 20, left: 120 }}>
                    <Legend
                       position="top"
                       marker="square"
                        textStyle={{
                            fill: "#fff"
                        }}
                    />
                    <Coord transpose />
                    <Axis
                        name="locDesc"
                        grid={null}
                        label={{
                            offset: 12,
                            textStyle: {
                                fill: '#fff', // 文本的颜色
                            }
                        }}
                    />
                    <Axis name="订单数"
                        grid={null}
                        label={{
                            textStyle: {
                                fill: '#fff', // 文本的颜色
                            }
                        }} />
                    <Tooltip enterable={true}/>
                    <Geom type="intervalStack"
                        position="locDesc*订单数"
                        color={"code"}
                        // tooltip={['locDesc*code', (time, sold) => {
                        //     return {
                        //         //自定义 tooltip 上显示的 title 显示内容等。
                        //         name: time + '：',
                        //         title: time,
                        //         value: sold
                        //     };
                        // }]}
                    />
                </Chart>
            </Row>

            {/* <div class="container">
            <div class="li-box">
                <div className="ul-dom">
                    <Row className="li-dom">
                        <Col span={8}>飞鲨勇士张超：曾</Col>
                        <Col span={8}>驾歼-8战机逼退外</Col>
                        <Col span={8}>军侦察机</Col>
                    </Row>
                    <Row className="li-dom">
                        <Col span={8}>台军方：：曾</Col>
                        <Col span={8}>全程监控</Col>
                        <Col span={8}>军侦察机</Col>
                    </Row>
                    <Row className="li-dom">
                        <Col span={8}>菲总统对华为何晴转阴：</Col>
                        <Col span={8}>驾歼-8战机逼退外</Col>
                        <Col span={8}>军侦察机</Col>
                    </Row>
                    <Row className="li-dom">
                        <Col span={8}>朗官方回应日本驻伊大：</Col>
                        <Col span={8}>在关涉中国逼退外</Col>
                        <Col span={8}>军在关涉中国</Col>
                    </Row>
                </div>
            </div>
        </div> */}
            <Row style={{ backgroundColor: "rgb(0, 31, 95)", marginTop: 10,padding:"12px 6px 6px" }}>
                <p style={{ color: "#fff", textAlign: "left",marginBottom: "12px" }}>
                    医生接诊量排行（TOP 20）</p>
                <Table
                    columns={this.columnsOne}
                    dataSource={this.state.tableOneData}
                    pagination={false}
                    bordered scrollToFirstRowOnChange={true}
                    style={{ height: (this.props.allHeight == true?'269px': '200px'), overflow: "auto" }}
                />
            </Row>
        </div>
    }
}

export default ShowUserStatisitcsBIPage;