/*
 * Creator:     ML
 * CreatDate:   2019-11-18
 * descripts：  医嘱查询 视图bizcharts
 * */
import React from 'react';
import { Form, } from 'antd';
import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, Row, Col,Divider } from 'bizcharts';
import DataSet from "@antv/data-set";
const { DataView } = DataSet;
const FormItem = Form.Item;
const formItemLayout = {    // label 和input宽度
    labelCol: { span: 7 },
    wrapperCol: { span: 14 },
};
const DoctorAdviceGrap = Form.create()(
    class extends React.Component {
        constructor() {
            super();
            var userData = JSON.parse(sessionStorage.getItem('userData'));
            this.state = {
                chartsData: [], //饼、柱图的详情数据
                point: '',
                show:true,
                localeProvider:[]
            };

        }

        componentDidMount() {
            this.props.onRef(this)
        }
        componentWillUnmount() {
            // 组件销毁前将静止让setState修改state的状态，防止内存泄漏
            this.setState = (state, callback) => { return; }
        }
        //国际化
        setMessage(name, message) {
            return this.state.localeProvider ? this.state.localeProvider[name][message] : ''
        }
        getDec=(localeProvider)=>{
            this.setState({
                localeProvider,
            })
        }
        //获取查询数据
        getDate = (res,localeProvider) => {
            this.setState({
                chartsData: res,
                show:false,
            },()=>{
               this.state.chartsData.map((item,i)=>{
                item.totalPrice=Number(item.totalPrice)
                if(Number(item.totalPrice)>0){
                    this.setState({
                        show:true
                    })
                }
               }) 
            })
        }
        render() {
            const { DataView } = DataSet;
            const { chartsData,show } = this.state
            const dv = new DataView();
            dv.source(this.state.chartsData).transform({
                type: "percent",
                field: "totalPrice",
                dimension: "ordTypeDesc",
                as: "percent"
            });
            const cols = {
                percent: {
                    formatter: val => {
                        val = val * 100 + "%";
                        return val;
                    }
                }
            };
            const chartStyle = { paddingTop:"0" }
            return (
                <div style={{display:(chartsData&&chartsData.length>0?"flex":"none"),minHeight:"291px" }} >
                    {/* <Row>
            <Col span={12}> */}
                    <div style={{width:"600px",height:"226px"}}>
                        <h3 style={{paddingLeft:"18px"}}>{this.state.localeProvider&&this.state.localeProvider.OrderSearchVariousProportions?this.setMessage('OrderSearchVariousProportions', 'descripts'):"各类对比"}</h3>
                       <div style={{display:(!show?"inline-block":"none"),paddingLeft:"18px"}}>
                        {this.state.localeProvider&&this.state.localeProvider.OrderSearchNoData?this.setMessage('OrderSearchNoData', 'descripts'):"暂无数据"}
                        </div> 
                        <div style={{display:(show?"inline-block":"none")}}>
                          <Chart
                            height={226}
                            width={600}
                            data={dv}
                            scale={cols}
                            padding={[28, 10, 8, 8]}
                            forceFit
                            // style={{}}
                          style={chartStyle}
                        >
                            <Coord type="theta" radius={0.75} />
                            <Axis name="percent" />
                            <Legend
                                position="right"
                                offsetY={-80}
                                offsetX={-50}
                            />  
                            <Tooltip
                            
                                showTitle={false}
                                itemTpl="<li><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{name}: {value}</li>"
                            />
                            <Geom
                                type="intervalStack"
                                position="percent"
                                color="ordTypeDesc"
                                tooltip={[
                                    "ordTypeDesc*percent",
                                    (ordTypeDesc, percent) => {
                                        percent = (percent * 100).toFixed(2) + "%";
                                        return {
                                            name: ordTypeDesc,
                                            value: percent
                                        };
                                    }
                                ]}
                                style={{
                                    lineWidth: 1,
                                    stroke: "#fff"
                                }}
                            >
                                <Label
                                    content="percent"
                                    formatter={(val, item) => {
                                        return item.point.ordTypeDesc;
                                    }}
                                />
                            </Geom>
                        </Chart>   
                        </div>
                    </div>
                    <span style={{ width:"1px",background:"#bfbfbf",margin:"26px 12px",height:"226px"}}></span>
                    <div style={{width:"600px",height:"220px"}}>
                    <h3>{this.state.localeProvider&&this.state.localeProvider.OrderSearchCostRanking?this.setMessage('OrderSearchCostRanking', 'descripts'):"费用排行"}</h3>
                        <div>
                        <div style={{display:(!show?"inline-block":"none")}}>
                        {this.state.localeProvider&&this.state.localeProvider.OrderSearchNoData?this.setMessage('OrderSearchNoData', 'descripts'):"暂无数据"}
                        </div>
                        <div style={{display:(show?"inline-block":"none")}}>
                            <Chart 
                            width={600} 
                            height={226} 
                            data={dv} 
                            scale={cols} 
                            forceFit
                            style={chartStyle}
                            padding={[28, 18, 25, 50]}
                            >
                                <Axis name="ordTypeDesc" />
                                <Axis name="totalPrice" />
                                 <Legend 
                                 position="top"  
                                 offsetY={10}
                                 offsetX={-70}
                                />
                                <Tooltip
                                    crosshairs={{
                                        type: "y"
                                    }}
                                />
                                <Geom color="ordTypeDesc" type="interval" position="ordTypeDesc*totalPrice" />
                            </Chart>
                        </div>    
                        </div>
                    </div>
                    {/* </Row> */}
                </div>
            );
        }
    }
);
export default DoctorAdviceGrap
