/*
 * Creator:     ML
 * CreatDate:   2020-04-07
 * descripts：  居民健康管理 图表 echarts  居民签约分析
 * */
import React from 'react';
import moment from 'moment';
import { dayFormat } from 'tools/index';
import { Form, Col, Select, Icon, Button, Card, Row, Table, Typography, Input, Popconfirm, message } from 'antd';
import { $http } from 'containers/config/https';
import { Chart, Geom, Axis, Coord, Label, Legend, Tooltip, } from 'bizcharts';
import { Util, } from 'tools/index';
import DataSet from "@antv/data-set";
const { DataView } = DataSet;
const { Text } = Typography;
//组件const
const Option = Select.Option;
const padding = {
    padding: "0px"
}
const formItemLayout = { // label 和input宽度
    labelCol: { span: 3 },
    wrapperCol: { span: 20 }
}
const formItemLayouts = {
    labelCol: { span: 7 },
    wrapperCol: { span: 17 }
}

const dataTableOne = [{
    condition: "人数",
    key: "1",
},]

const columnsOne = [
    {
        title: '责任医生',
        dataIndex: 'docDesc',
        align: "center",
        key: "0",
        width: 300
    },
    {
        title: "人数",
        dataIndex: 'patNum',
        align: "center",
        key: "1",
        width: 500
    },
];

const columnsFour = [
    {
        title: '性别',
        dataIndex: 'sexDesc',
        align: "center",
        width: 300
    },
    {
        title: '人数',
        dataIndex: 'patNum',
        align: "center",
        width: 500
    },
];
const columnsBMI = [
    {
        title: 'BMI范围',
        dataIndex: 'descripts',
        align: "center",
        width: 300
    },
    {
        title: '人数',
        dataIndex: 'patNum',
        align: "center",
        width: 500
    },
];
const columnsAge = [
    {
        title: '年龄范围',
        dataIndex: 'descripts',
        align: "center",
        width: 300
    },
    {
        title: '人数',
        dataIndex: 'patNum',
        align: "center",
        width: 500
    },
];
class AnalysisCharts extends React.Component {
    constructor(props) {
        super(props);
        let userData = sessionStorage.getItem("userData") ? JSON.parse(sessionStorage.getItem("userData")) : {};
        this.state = {
            userData,
            chartsData: [], //饼、柱图的详情数据
            doctorData: [],
            originDoctor: [],
            MBIData: [],
            originTwo: [],
            ageData: [],
            originThree: [],
            doctorCs: [],
            doctorCsThree: [],
            doctorCsFour: [],

            doctorCsTwo: [],

            doctorCsOrigin: [],

            showOne: false,
            showTwo: false,

            tableOneData: [],
            tableTwoData: [],
            tableThreeData: [],

            dataTableOne: [],
            dataTableTwo: [],
            dataTableThree: [],
            dataTableFour: [],

            tableFourData: [],
            originFour: [],
            doctorFour: [],
            doctorstaFour: [],

            selectedRowKeys_right: [],
            selectedRowKeys_rightOne: [],
            columns: columnsOne,
            // columnsT: columnsTwo
            columnsF: columnsFour,
            oneCount: 0,
            twoCount: 0,
            threeCount: 0,
            fourCount: 0,
            oneOperator: "",
            twoOperator: "",
            oneValue: "",
            twoValue: "s",
        };
        this.columnsSeting = [
            {
                key: "0",
                title: "统计范围",
                dataIndex: 'descripts',
                align: 'left',
                minWidth: 120
            },
            {
                title: '操作',
                dataIndex: 'operstion',
                width: 120,
                align: 'center',
                render: (text, record) => {
                    return (
                        <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record)} >
                            <span style={{ color: "red", cursor: "pointer" }}>删除</span>
                        </Popconfirm>
                    )
                }
            }
        ]
    }

    componentWillReceiveProps(nextProps) {
    }
    componentDidMount = () => {
        this.getAllData()
        this.props.onRefPeople(this)
        console.log("handThis", this.props.handThis.state)
    }

    //获取数据
    getAllData = () => {
        const arr = [
            {
                title: "责任医生分布",
                key: 0,
                des: "zeren",
                type: "tabge",
                pie: [
                    {
                        descripts: "表格",
                        id: 1,
                        type: "tabge",
                        activeID: 1
                    },
                    {
                        descripts: "柱形",
                        id: 2,
                        type: "pi",
                        activeID: 1
                    },
                    {
                        descripts: "折线图",
                        id: 3,
                        type: "point",
                        activeID: 1
                    }, {
                        descripts: "饼状图",
                        id: 4,
                        type: "pie",
                        activeID: 1
                    }
                ]
            },
            {
                title: "BMI分布",
                key: 1,
                des: "BMI",
                type: "tabge",
                pie: [
                    {
                        descripts: "表格",
                        id: 1,
                        type: "tabge",
                        activeID: 1
                    },
                    {
                        descripts: "柱形",
                        id: 2,
                        type: "pi",
                        activeID: 1
                    },
                    {
                        descripts: "折线图",
                        id: 3,
                        type: "point",
                        activeID: 1
                    }, {
                        descripts: "饼状图",
                        id: 4,
                        type: "pie",
                        activeID: 1
                    },
                ]
            }, {
                title: "年龄分布",
                key: 2,
                des: "age",
                type: "tabge",
                pie: [
                    {
                        descripts: "表格",
                        id: 1,
                        type: "tabge",
                        activeID: 1
                    },
                    {
                        descripts: "柱形",
                        id: 2,
                        type: "pi",
                        activeID: 1
                    },
                    {
                        descripts: "折线图",
                        id: 3,
                        type: "point",
                        activeID: 1
                    }, {
                        descripts: "饼状图",
                        id: 4,
                        type: "pie",
                        activeID: 1
                    },
                ]
            },
            {
                title: "性别分布",
                key: 3,
                des: "sex",
                type: "tabge",
                pie: [
                    {
                        descripts: "表格",
                        id: 1,
                        type: "tabge",
                        activeID: 1
                    },
                    {
                        descripts: "柱形",
                        id: 2,
                        type: "pi",
                        activeID: 1
                    },
                    {
                        descripts: "折线图",
                        id: 3,
                        type: "point",
                        activeID: 1
                    }, {
                        descripts: "饼状图",
                        id: 4,
                        type: "pie",
                        activeID: 1
                    },
                ]
            },
        ]
        this.setState({
            arr,
        })
    }
    getData = (doctorData, doctorDataTotal, tableFourData, tableFourDataTotal, BMIData, BMIDataTotal, ageData, ageDataTotal) => {
        let arr = [...doctorData.data, { docDesc: "总计", patNum: doctorDataTotal, }]
        let arrOne = [...tableFourData.data, { sexDesc: "总计", patNum: tableFourDataTotal, }]
        // let arrTwo = [...BMIData.data, { descripts: "总计", patNum: BMIDataTotal, }]
        // let arrThree = [...ageData.data, { descripts: "总计", patNum: ageDataTotal, }]
        // console.log("totalCount", doctorData.totalCount)
        this.setState({
            doctorData: arr || [],
            originDoctor: doctorData.data,
            doctorCs: doctorData.staData,
            doctorCsOrigin: doctorData.staData,
            doctorDataTotal,
            oneCount: doctorData.totalCount,

            // ageData: arrThree,
            // originThree: ageData.data,
            // doctorCsFour: ageData.staData,
            // ageDataTotal,
            // twoCount: ageData.totalCount,


            // BMIData: arrTwo,
            // originTwo: BMIData.data,
            // doctorCsThree: BMIData.staData,
            // BMIDataTotal,
            // threeCount: BMIData.totalCount,

            tableFourData: arrOne,
            originFour: tableFourData.data,
            doctorFour: tableFourData.staData,
            doctorstaFour: tableFourData.staData,
            tableFourDataTotal,
            fourCount: tableFourData.totalCount,

        })
        this.handleGetBimMore()
    }

    //选择图形样式
    handleType = (subItem, name) => {
        const { arr } = this.state
        let newArr = arr
        newArr && newArr.map((item, index) => {
            if (name == item.des) {
                item.pie.map((i, s) => {
                    i.activeID = ''
                    // item.type=""
                    if (subItem.id == i.id) {
                        i.activeID = i.id
                        item.type = i.type
                    }
                })
            }
        })
        this.setState({
            arr: newArr
        }, () => {
            // console.log(this.state.arr)
            this.props.findData()
        })
    }

    //设置table最后一行
    setClassName = (record, index) => {
        return (record.docDesc === "总计" || record.descripts === "总计" || record.descripts === "总计" || record.sexDesc === "总计" ? "rowFont" : '')
    }
    //设置统计维度
    handleSetting = (e, show, columns, dataTable, selectedRowKeys) => {
        //设置初始选中
        this.setState({
            ["show" + show]: !this.state["show" + show]
        }, () => {
            this.handleClear()
        })
    }
    handleInput = (e, number) => {
        if (e.target) {
            this.setState({
                [number + "Value"]: e.target.value
            })
        }

    }
    //获取 bim 年龄
    getGetBimMore(statistTypeCode) {
        return new Promise((resolve, reject) => {
            const { userData, oneOperator, twoOperator, oneValue, twoValue } = this.state
            let data = {}
            data = {
                params: [{
                    docID: this.props.handThis.state.doctorOptionID && this.props.handThis.state.doctorOptionID || "",
                    hospID: userData && userData.hospID || "",
                    assessItemCode: this.props.handThis.state.diseaseCode && this.props.handThis.state.diseaseCode || "",
                    type: this.props.handThis.state.typeID && this.props.handThis.state.typeID || "",
                    dateFrom: this.props.handThis.state.typeID && this.props.handThis.state.typeID == "02" ? moment(this.props.handThis.state.StartDate && this.props.handThis.state.StartDate).format("YYYY-MM-DD") : undefined,
                    dateTo: this.props.handThis.state.typeID && this.props.handThis.state.typeID == "02" ? moment(this.props.handThis.state.EndDate && this.props.handThis.state.EndDate).format("YYYY-MM-DD") : undefined,
                    statistTypeCode: statistTypeCode
                }],
            }
            $http.post('urlS', this, {
                code: "03070124",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        resolve(res.result);
                    }
                },
            })
        })
    }
    //获取 bim 年龄 触发
    handleGetBimMore = () => {
        Promise.all([this.getGetBimMore("BMI"), this.getGetBimMore("Age")]).then(res => {
            // console.log("===获取 bim 年龄", res);
            let arrTwo = [...res[0].data, { descripts: "总计", patNum: res[0].patCount, }]
            let arrThree = [...res[1].data, { descripts: "总计", patNum: res[1].patCount, }]
            console.log(" res[0].staData, res[0].staData,", res[0].staData,)
            this.setState({

                BMIData: arrTwo,
                originTwo: res[0].data,
                doctorCsTwo: res[0].staData,
                twoCount: res[0].totalCount,

                ageData: arrThree,
                originThree: res[1].data,
                doctorCsThree: res[1].staData,
                threeCount: res[1].totalCount,


            })
        }).catch(res => {
            console.log("res", res)
        })
    }
    //清空 
    handleClear=()=>{
        this.setState({
            rowId: "",
            oneOperator: "",
            twoOperator: "",
            oneValue: "",
            twoValue: "",
        });
    }
    //新增 Bim 保存 Bim 修改
    handleAdd = (e, id, typeCode) => {
        const { userData, oneOperator, twoOperator, oneValue, twoValue } = this.state
        // console.log("-------", oneOperator, twoOperator, oneValue, twoValue)
        if ((oneOperator && oneValue) || (twoOperator && twoValue)) {
            let data = {}
            data = {
                params: [{
                    ID: id || "",
                    hospID: userData && userData.hospID || "",
                    fromCondCode: oneOperator || "",
                    toCondCode: twoOperator || "",
                    fromValue: oneValue || "",
                    toValue: twoValue || "",
                    userID: userData && userData.userID || "",
                    statistTypeCode: typeCode || ""
                }],
            }
            console.log("datadatadata", data)
            $http.post('urlS', this, {
                code: '03070122',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        if (id) {
                            message.success("修改成功")
                        } else {
                            message.success("新增成功")
                            //定位到最新一条
                            // this.setState({
                            //     rowId: res.result.ID
                            // })
                        }
                        this.handleClear()
                        this.handleGetBimMore()
                    }
                }
            })
        } else {
            message.warning("请录入符合规定的正常条件，如:<=10")
            return
        }
    }

    //删除 Bim
    handleDelete = (record) => {
        const { userData } = this.state
        let data = {}
        data = {
            params: [{
                ID: record.ID || "",
                userID: userData & userData.userID || ""
            }],
        }
        $http.post('urlS', this, {
            code: '03070123',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    message.success("删除成功")
                    this.handleClear()
                    this.handleGetBimMore()
                }
            }
        })
    }
    setDoctorRowClassName = (record) => {
        return record.ID === this.state.rowId ? 'clickRowStyle' : '';
    }
    handleOnRow = (record) => {
        return {
            onClick: () => {
                if (record.ID) {
                    if (this.state.rowId === "") {
                        this.setState({
                            rowId: record.ID,
                            oneOperator: record.fromCondCode || "",
                            twoOperator: record.toCondCode || "",
                            oneValue: record.fromValue || "",
                            twoValue: record.toValue || "",
                        });
                    } else {
                        if (this.state.rowId !== record.ID) {
                            this.setState({
                                rowId: record.ID,
                                oneOperator: record.fromCondCode || "",
                                twoOperator: record.toCondCode || "",
                                oneValue: record.fromValue || "",
                                twoValue: record.toValue || "",
                            });
                        } else {
                            this.handleClear()
                        }
                    }
                }
            },
            // onDoubleClick: () => {
            //     this.setState({
            //         rowId: "",
            //     });
            // }
        };
    }
    render() {
        const { zerentabgeID, zerenzhuID, zerencrealID, arr } = this.state;
        const OperatorData = [
            {
                descripts: "=",
                code: "01",
                descriptsSPCode: "DY",
                id: "1"
            },
            {
                descripts: "<=",
                code: "02",
                descriptsSPCode: "XYDY",
                id: "2"
            },
            {
                descripts: ">",
                code: "03",
                descriptsSPCode: "DY",
                id: "3"
            },
            {
                descripts: ">=",
                code: "04",
                descriptsSPCode: "DYDY",
                id: "4"
            }, {
                descripts: "<",
                code: "05",
                descriptsSPCode: "XY",
                id: "5"
            },
        ]
        //BMI 运算符号 
        let OperatorOp = []
        OperatorData && OperatorData.length > 0 && OperatorData.map(item => {
            OperatorOp.push(
                <Option
                    // onClick={this.changeDefalut}
                    key={item.id}
                    name={item.descriptsSPCode}
                    title={item.descripts}
                    role={item.descripts + '^' + item.descriptsSPCode}
                    value={String(item.code)}>
                    {item.descripts}
                </Option>)
        })

        //责任医生分布  饼 
        const dv = new DataView();
        dv.source(this.state.originDoctor).transform({
            type: "percent",
            field: "patNum",
            dimension: "docDesc",
            as: "percent"
        });
        //柱 折
        const ds = new DataSet();
        const dvOne = ds
            .createView()
            .source(this.state.doctorCs)
            .transform({
                type: "percent",
                field: "patNum",
                // 统计销量
                dimension: "doctor",
                // 每年的占比
                groupBy: ["docDesc"],
                // 以不同产品类别为分组
                as: "percent"
            });
      // 定义一个模板
        // name-value是相关柱子的key-value值
        const tooltipsDisplayTpl = `
            <p class="chart-tooptip">
                <span class="chart-tooptip-right">{name}</span>
                <span>{value}</span>
            </p>
        `;
        //BMI分布  饼 
        const dvTwoa = new DataView();
        dvTwoa.source(this.state.originTwo).transform({
            type: "percent",
            field: "patNum",
            dimension: "descripts",
            as: "percent"
        });
        //柱 折
        const dsTwo = new DataSet();
        const dvTwo = dsTwo
            .createView()
            .source(this.state.doctorCsTwo)
            .transform({
                type: "percent",
                field: "patNum",
                // 统计销量
                dimension: "bmi",
                // 每年的占比
                groupBy: ["descripts"],
                // 以不同产品类别为分组
                as: "percent"
            });

        //年龄分布  饼 
        const dvThreea = new DataView();
        dvThreea.source(this.state.originThree).transform({
            type: "percent",
            field: "patNum",
            dimension: "descripts",
            as: "percent"
        });
        //柱 折
        const dsThree = new DataSet();
        const dvThree = dsThree
            .createView()
            .source(this.state.doctorCsThree)
            .transform({
                type: "percent",
                field: "patNum",
                // 统计销量
                dimension: "age",
                // 每年的占比
                groupBy: ["descripts"],
                // 以不同产品类别为分组
                as: "percent"
            });
        //性别分布  饼 
        const dvFoura = new DataView();
        dvFoura.source(this.state.originFour).transform({
            type: "percent",
            field: "patNum",
            dimension: "sexDesc",
            as: "percent"
        });
        //柱 折
        const dsFour = new DataSet();
        const dvFour = dsFour
            .createView()
            .source(this.state.doctorFour)
            .transform({
                type: "percent",
                field: "patNum",
                // 统计销量
                dimension: "sex",
                // 每年的占比
                groupBy: ["sexDesc"],
                // 以不同产品类别为分组
                as: "percent"
            });
        const colsOne = {
            percent: {
                min: 0,
                formatter(val) {
                    return val;
                }
            }
        };
        const colsPointOne = {
            docDesc: {
                range: [0, 1]
            }
        };


        const cols = {
            percent: {
                formatter: val => {
                    val = val * 100 + "%";
                    return val;
                }
            }
        };

        const chartStyle = { paddingTop: "0" }

        const colss = {
            docDesc: {
                range: [0, 1]
            }
        };
        const colsPi = {
            sales: {
                tickInterval: 20
            }
        };
        const colsPoint = {
            value: {
                min: 0,
                range: [0, 0.93],
                alias: ''
            },
            year: {
                range: [0, 0.9],
                alias: ''
            }
        };
   
            //数据
        let chartsList = []
        arr && arr.map((item, i) => {
            if (item.key == "0") {
                chartsList.push(
                    <Col span={12}>
                        <Card span={12} key={item.id} title={item.title}>
                            <div className="button-dom" style={{ position: "relative" }}>
                                {
                                    item.pie && item.pie.map((i, s) => {
                                        return (
                                            <Button onClick={() => this.handleType(i, item.des)} style={{ background: (i.activeID == i.id ? "rgb(0, 153, 255)" : "#fff"), color: (i.activeID == i.id ? "#fff" : "#333") }} >{i.descripts}</Button>
                                        )
                                    })
                                }
                            </div>
                            <div className="charts-item" style={{ width: item.type == "pi" || item.type == "point" ? this.state.oneCount * 150 + "px" : "", height: "288px", position: "relative" }}>
                                {
                                    item.type == "pie" ? <Chart
                                        height={246}
                                        width={600}
                                        data={dv}
                                        scale={cols}
                                        padding={[30, 240, 12, 12]}
                                        forceFit
                                        style={chartStyle}
                                    >
                                        <Coord type="theta" radius={0.75} />
                                        <Axis name="patNum" />
                                        <Legend
                                            position="right"
                                            offsetY={-20}
                                            offsetX={-50}
                                        />
                                        <Tooltip
                                            showTitle={false}
                                        //    itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
                                        />
                                        <Geom
                                            type="intervalStack"
                                            position="patNum"
                                            color="docDesc"
                                            tooltip={[
                                                "docDesc*patNum", (docDesc, patNum) => {
                                                    patNum = patNum.toFixed(2) + "%";
                                                    return {
                                                        name: docDesc,
                                                        value: patNum
                                                    };
                                                }
                                            ]}
                                            style={{
                                                lineWidth: 1,
                                                stroke: "#fff"
                                            }}
                                        >
                                            <Label
                                                content="percent"
                                                formatter={(val, item) => {
                                                    var str = val;
                                                    var a = str.split("%").join("");
                                                    // let b = a.toFixed(2)
                                                    // let b = a&&a.map((i,s)=>{
                                                    //    i = i.toFixed(2)
                                                    // })

                                                    // console.log("b------------", b)
                                                    return item.point.docDesc;
                                                }}
                                            />
                                        </Geom>
                                    </Chart>
                                        : item.type == "pi" ?
                                            <Chart height={286} data={dvOne} scale={colsOne} forceFit
                                                padding={[20, 20, 20, 30]}
                                            >
                                                <Legend />
                                                <Axis name="docDesc" />
                                                <Axis name="patNum" />
                                                <Tooltip />
                                                <Geom
                                                    type="intervalStack"
                                                    position="docDesc*patNum"
                                                    color={"doctor"}
                                                />
                                            </Chart>
                                            : item.type == "point" ?
                                                <Chart height={286} data={dvOne} scale={colsPointOne} forceFit
                                                    padding={[20, 20, 20, 30]}
                                                >
                                                    <Legend />
                                                    <Axis name="docDesc" />
                                                    <Axis
                                                        name="patNum"
                                                        label={{
                                                            formatter: val => `${val}`
                                                        }}
                                                    />
                                                    <Tooltip
                                                        crosshairs={{
                                                            type: "y"
                                                        }}
                                                    />
                                                    <Geom
                                                        type="line"
                                                        position="docDesc*patNum"
                                                        size={2}
                                                        color={"doctor"}
                                                        shape={"patNum"}
                                                    />
                                                    <Geom
                                                        type="point"
                                                        position="docDesc*patNum"
                                                        size={4}
                                                        shape={"circle"}
                                                        color={"doctor"}
                                                        style={{
                                                            stroke: "#fff",
                                                            lineWidth: 1
                                                        }}
                                                    />
                                                </Chart>
                                                :
                                                <div>
                                                    <Table
                                                        columns={this.state.columns}
                                                        dataSource={this.state.doctorData}
                                                        pagination={false}
                                                        bordered
                                                        rowClassName={this.setClassName}

                                                    />
                                                </div>
                                }
                            </div>
                        </Card>
                    </Col>
                )
            }
            if (item.key == "1") {
                chartsList.push(
                    <Col span={12}>
                        <Card span={12} key={item.id} title={item.title}>
                            <div className="button-dom" style={{ position: "relative" }}>
                                {
                                    item.pie && item.pie.map((i, s) => {
                                        return (
                                            <Button onClick={() => this.handleType(i, item.des)} style={{ background: (i.activeID == i.id ? "rgb(0, 153, 255)" : "#fff"), color: (i.activeID == i.id ? "#fff" : "#333") }} >{i.descripts}</Button>
                                        )
                                    })
                                }
                                <Button style={{ float: "right" }} onClick={(e) => this.handleSetting(e, "One")}>设置统计维度</Button>
                                <div className={this.state.showOne ? "setting-table-dom" : ""}
                                    style={{ display: (this.state.showOne ? "inline-block" : "none"), }}>
                                    <Row className="operator-dom">
                                        <Col span={2}>
                                            BMI
                                           </Col>
                                        <Col span={3}>
                                            <Select style={{ width: '100%' }}
                                                dropdownMatchSelectWidth={false}
                                                value={this.state.oneOperator}
                                                allowClear
                                                onChange={Util.handleSelectChange.bind(this, "oneOperator")}
                                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                            >
                                                {OperatorOp}
                                            </Select>
                                        </Col>
                                        <Col span={3}>
                                            <Input allowClear type="Number" onChange={(e) => this.handleInput(e, "one")} value={this.state.oneValue}>
                                            </Input>
                                        </Col>
                                        <Col span={3}>
                                            <Select style={{ width: '100%' }}
                                                dropdownMatchSelectWidth={false}
                                                value={this.state.twoOperator}
                                                allowClear
                                                onChange={Util.handleSelectChange.bind(this, "twoOperator")}
                                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                            >
                                                {OperatorOp}
                                            </Select>
                                        </Col>
                                        <Col span={3}>
                                            <Input allowClear type="Number" onChange={(e) => this.handleInput(e, "two")} value={this.state.twoValue}>
                                            </Input>
                                        </Col>
                                        <Col span={3}>
                                            <Button className="save" onClick={(e) => this.handleAdd(e, this.state.rowId, "BMI")} >保存</Button>
                                        </Col>
                                        <Col span={3}>
                                            <Button className="add" onClick={(e) => this.handleClear()} disabled={!this.state.rowId}>新增</Button>
                                        </Col>
                                    </Row>
                                    <Table
                                        columns={this.columnsSeting}
                                        dataSource={this.state.originTwo}
                                        pagination={false}
                                        bordered
                                        rowKey={record => record.ID}
                                        rowClassName={this.setDoctorRowClassName}
                                        onRow={this.handleOnRow}
                                        style={{
                                            minHeight: "200px",
                                            minWidth: "260px",
                                            maxHeight: "290px",
                                            overflow: "auto"
                                        }}
                                    />
                                </div>
                            </div>

                            <div className="charts-item" style={{ width: item.type == "pi" || item.type == "point" ? this.state.twoCount * 150 + "px" : "", height: "288px", position: "relative" }}>
                                {
                                    item.type == "pie" ? <Chart
                                        height={246}
                                        width={600}
                                        data={dvTwoa}
                                        scale={cols}
                                        padding={[30, 240, 12, 12]}
                                        forceFit
                                        style={chartStyle}
                                    >
                                        <Coord type="theta" radius={0.75} />
                                        <Axis name="patNum" />
                                        <Legend
                                            position="right"
                                            offsetY={-20}
                                            offsetX={-50}
                                        />
                                        <Tooltip
                                            showTitle={false}
                                        // itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
                                        />
                                        <Geom
                                            type="intervalStack"
                                            position="percent"
                                            color="descripts"
                                            tooltip={[
                                                "descripts*patNum",
                                                (descripts, patNum) => {
                                                    patNum = patNum.toFixed(2) + "%";
                                                    return {
                                                        name: descripts,
                                                        value: patNum
                                                    };
                                                }
                                            ]}
                                            style={{
                                                lineWidth: 1,
                                                stroke: "#fff"
                                            }}
                                        >
                                            <Label
                                                content="patNum"
                                                formatter={(val, item) => {
                                                    var str = val;
                                                    var a = str.split("%").join("");
                                                    // let b = a.toFixed(2)
                                                    // let b = a&&a.map((i,s)=>{
                                                    //    i = i.toFixed(2)
                                                    // })

                                                    // console.log("b------------", b)
                                                    return item.point.descripts;
                                                }}
                                            />
                                        </Geom>
                                    </Chart> : item.type == "pi" ?
                                            <Chart height={286} data={dvTwo} scale={colss} forceFit
                                                padding={[20, 20, 20, 30]}>
                                                   
                                                <Legend
                                                    visible={false}
                                                />
                                                <Axis name="descripts" />
                                                <Axis name="patNum" />
                                                <Tooltip 
                                                //  crosshairs={ false }//hoverhover背景
                                                />
                                                <Geom
                                                    type="intervalStack"
                                                    position="descripts*patNum"
                                                    color={"bmi"}
                                                />
                                            </Chart>
                                            : item.type == "point" ?
                                                <Chart height={286} data={dvTwo} scale={colsPointOne} forceFit
                                                    padding={[20, 20, 20, 30]}
                                                >
                                                    <Legend visible={false} />
                                                    <Axis name="descripts" />
                                                    <Axis
                                                        name="patNum"
                                                        label={{
                                                            formatter: val => `${val}`
                                                        }}
                                                    />
                                                    <Tooltip
                                                        // title={false}
                                                        // crosshairs={{
                                                        //     type: "y"
                                                        // }}
                                                    />
                                                    <Geom type="line" color="bmi" position="descripts*patNum" size={2}
                                                        tooltip={['descripts*patNum', (descripts, patNum) => {
                                                            console.log("descripts",descripts)
                                                            return {
                                                                name: '人数', // 要显示的名字
                                                                value: patNum,
                                                                title: descripts
                                                            }
                                                        }]} />
                                                    {/* <Geom
                                                        type="point"
                                                        position="descripts*patNum"
                                                        color={"bmi"}
                                                        size={4}
                                                        shape={"circle"}
                                                        style={{
                                                            stroke: "#fff",
                                                            lineWidth: 2
                                                        }}
                                                        tooltip={['descripts*patNum', (descripts, patNum) => {
                                                            console.log("descripts-------",descripts)
                                                            return {
                                                                name: '人数', // 要显示的名字
                                                                value: patNum,
                                                                title: descripts
                                                            }
                                                        }]}
                                                    /> */}
                                                </Chart> :
                                                <div>
                                                    <Table
                                                        columns={columnsBMI}
                                                        dataSource={this.state.BMIData}
                                                        pagination={false}
                                                        bordered
                                                        rowClassName={this.setClassName}
                                                    />
                                                </div>
                                }
                            </div>
                        </Card>
                    </Col>
                )
            }
            if (item.key == "2") {
                chartsList.push(
                    <Col span={12}>
                        <Card span={12} key={item.id} title={item.title}>
                            <div className="button-dom" style={{ position: "relative" }}>
                                {
                                    item.pie && item.pie.map((i, s) => {
                                        return (
                                            <Button onClick={() => this.handleType(i, item.des)} style={{ background: (i.activeID == i.id ? "rgb(0, 153, 255)" : "#fff"), color: (i.activeID == i.id ? "#fff" : "#333") }} >{i.descripts}</Button>
                                        )
                                    })
                                }
                                <Button style={{ float: "right" }} onClick={(e) => this.handleSetting(e, "Two")}>设置统计维度</Button>
                                <div className={this.state.showTwo ? "setting-table-dom" : ""}
                                    style={{ display: (this.state.showTwo ? "inline-block" : "none"), }}>
                                    <Row className="operator-dom">
                                        <Col span={2}>
                                            年龄
                                           </Col>
                                        <Col span={3}>
                                            <Select style={{ width: '100%' }}
                                                dropdownMatchSelectWidth={false}
                                                value={this.state.oneOperator}
                                                allowClear
                                                onChange={Util.handleSelectChange.bind(this, "oneOperator")}
                                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                            >
                                                {OperatorOp}
                                            </Select>
                                        </Col>
                                        <Col span={3}>
                                            <Input type="number" onChange={(e) => this.handleInput(e, "one")} value={this.state.oneValue}>
                                            </Input>
                                        </Col>
                                        <Col span={3}>
                                            <Select style={{ width: '100%' }}
                                                dropdownMatchSelectWidth={false}
                                                value={this.state.twoOperator}
                                                onChange={Util.handleSelectChange.bind(this, "twoOperator")}
                                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                                allowClear
                                            >
                                                {OperatorOp}
                                            </Select>
                                        </Col>
                                        <Col span={3}>
                                            <Input type="number" onChange={(e) => this.handleInput(e, "two")} value={this.state.twoValue}>
                                            </Input>
                                        </Col>
                                        <Col span={3}>
                                            <Button className="save" onClick={(e) => this.handleAdd(e, this.state.rowId, "Age")} >保存</Button>
                                        </Col>
                                        <Col span={3}>
                                            <Button className="add" onClick={(e) => this.handleClear()} disabled={!this.state.rowId}>新增</Button>
                                        </Col>
                                        
                                    </Row>
                                    <Table
                                        columns={this.columnsSeting}
                                        dataSource={this.state.originThree}
                                        pagination={false}
                                        bordered
                                        rowKey={record => record.ID}
                                        rowClassName={this.setDoctorRowClassName}
                                        onRow={this.handleOnRow}
                                        style={{
                                            minHeight: "200px",
                                            minWidth: "260px",
                                            maxHeight: "290px",
                                            overflow: "auto"
                                        }}
                                    />
                                </div>
                            </div>
                            <div className="charts-item" style={{ width: item.type == "pi" || item.type == "point" ? this.state.threeCount * 150 + "px" : "", height: "288px", position: "relative" }}>
                                {
                                    item.type == "pie" ? <Chart
                                        height={246}
                                        width={600}
                                        data={dvThreea}
                                        scale={cols}
                                        padding={[30, 240, 12, 12]}
                                        forceFit
                                        style={chartStyle}
                                    >
                                        <Coord type="theta" radius={0.75} />
                                        <Axis name="patNum" />
                                        <Legend
                                            position="right"
                                            offsetY={-20}
                                            offsetX={-50}
                                        />
                                        <Tooltip
                                            showTitle={false}
                                        // itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
                                        />
                                        <Geom
                                            type="intervalStack"
                                            position="patNum"
                                            color="descripts"
                                            tooltip={[
                                                "descripts*patNum",
                                                (descripts, patNum) => {
                                                    patNum = patNum.toFixed(2) + "%";
                                                    return {
                                                        name: descripts,
                                                        value: patNum
                                                    };
                                                }
                                            ]}
                                            style={{
                                                lineWidth: 1,
                                                stroke: "#fff"
                                            }}
                                        >
                                            <Label
                                                content="patNum"
                                                formatter={(val, item) => {
                                                    var str = val;
                                                    var a = str.split("%").join("");
                                                    // let b = a.toFixed(2)
                                                    // let b = a&&a.map((i,s)=>{
                                                    //    i = i.toFixed(2)
                                                    // })

                                                    // console.log("b------------", b)
                                                    return item.point.descripts;
                                                }}
                                            />
                                        </Geom>
                                    </Chart> : item.type == "pi" ? <Chart
                                        width={600}
                                        height={286}
                                        data={dvThree}
                                        scale={colss}
                                        forceFit
                                        // style={chartStyle}
                                        padding={[20, 20, 20, 30]}
                                    >
                                        <Axis name="descripts" />
                                        <Axis name="patNum" />
                                        <Legend
                                            position="top"
                                            visible={false}
                                        />
                                        <Tooltip
                                            title={false}
                                        // crosshairs={{
                                        //     type: "y"
                                        // }}
                                        />
                                        <Geom color="age" type="interval" position="descripts*patNum" />
                                    </Chart> : item.type == "point" ?
                                                <Chart height={286} data={dvThree} scale={colsPointOne} forceFit
                                                    padding={[20, 20, 20, 30]}
                                                >
                                                    <Legend visible={false} />
                                                    <Axis name="descripts" />
                                                    <Axis
                                                        name="patNum"
                                                        label={{
                                                            formatter: val => `${val}`
                                                        }}
                                                    />
                                                    <Tooltip
                                                        // title={false}
                                                        crosshairs={{
                                                            type: "y"
                                                        }}
                                                    />
                                                    <Geom type="line" color="age" position="descripts*patNum" size={2}
                                                        tooltip={['descripts*patNum', (descripts, patNum) => {
                                                            return {
                                                                name: '人数', // 要显示的名字
                                                                value: patNum,
                                                                title: descripts
                                                            }
                                                        }]} />
                                                    <Geom
                                                        type="point"
                                                        position="descripts*patNum"
                                                        color={"age"}
                                                        size={4}
                                                        shape={"circle"}
                                                        style={{
                                                            stroke: "#fff",
                                                            lineWidth: 1
                                                        }}
                                                        tooltip={['descripts*patNum', (descripts, patNum) => {
                                                            return {
                                                                name: '人数', // 要显示的名字
                                                                value: patNum,
                                                                title: descripts
                                                            }
                                                        }]}
                                                    />
                                                </Chart> :
                                                <div>
                                                    <Table
                                                        columns={columnsAge}
                                                        dataSource={this.state.ageData}
                                                        pagination={false}
                                                        bordered
                                                        rowClassName={this.setClassName}
                                                    />
                                                </div>
                                }
                            </div>
                        </Card>
                    </Col>
                )
            }
            if (item.key == "3") {
                chartsList.push(
                    <Col span={12}>
                        <Card span={12} key={item.id} title={item.title}>
                            <div className="button-dom" style={{ position: "relative" }}>
                                {
                                    item.pie && item.pie.map((i, s) => {
                                        return (
                                            <Button onClick={() => this.handleType(i, item.des)} style={{ background: (i.activeID == i.id ? "rgb(0, 153, 255)" : "#fff"), color: (i.activeID == i.id ? "#fff" : "#333") }} >{i.descripts}</Button>
                                        )
                                    })
                                }

                            </div>
                            <div className="charts-item" style={{ width: item.type == "pi" || item.type == "point" ? this.state.fourCount * 150 + "px" : "", height: "288px", position: "relative" }}>
                                {
                                    item.type == "pie" ?
                                        <Chart
                                            height={246}
                                            width={600}
                                            data={dvFoura}
                                            scale={cols}
                                            padding={[30, 240, 12, 12]}
                                            forceFit
                                            style={chartStyle}
                                        >
                                            <Coord type="theta" radius={0.75} />
                                            <Axis name="patNum" />
                                            <Legend
                                                position="right"
                                                offsetY={-20}
                                                offsetX={-50}
                                            />
                                            <Tooltip
                                                showTitle={false}
                                            //    itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
                                            />
                                            <Geom
                                                type="intervalStack"
                                                position="patNum"
                                                color="sexDesc"
                                                tooltip={[
                                                    "sexDesc*patNum",
                                                    (sexDesc, patNum) => {
                                                        patNum = patNum.toFixed(2) + "%";
                                                        return {
                                                            name: sexDesc,
                                                            value: patNum
                                                        };
                                                    }
                                                ]}
                                                style={{
                                                    lineWidth: 1,
                                                    stroke: "#fff"
                                                }}
                                            >
                                                <Label
                                                    content="patNum"
                                                    formatter={(val, item) => {
                                                        var str = val;
                                                        var a = str.split("%").join("");
                                                        // let b = a.toFixed(2)
                                                        // let b = a&&a.map((i,s)=>{
                                                        //    i = i.toFixed(2)
                                                        // })

                                                        // console.log("b------------", b)
                                                        return item.point.sexDesc;
                                                    }}
                                                />
                                            </Geom>
                                        </Chart>
                                        : item.type == "pi" ?
                                            <Chart height={286} data={dvFour} scale={colsOne} forceFit
                                                padding={[20, 20, 20, 30]}>
                                                <Legend
                                                    visible={false}
                                                />
                                                <Axis name="sexDesc" />
                                                <Axis name="patNum" />
                                                <Tooltip />
                                                <Geom
                                                    type="intervalStack"
                                                    position="sexDesc*patNum"
                                                    color={"sex"}
                                                />
                                            </Chart>
                                            : item.type == "point" ?
                                                <Chart height={286} data={dvFour} scale={colsPointOne} forceFit
                                                    padding={[20, 20, 20, 30]}
                                                >
                                                    <Legend visible={false} />
                                                    <Axis name="sexDesc" />
                                                    <Axis
                                                        name="patNum"
                                                        label={{
                                                            formatter: val => `${val}`
                                                        }}
                                                    />
                                                    <Tooltip
                                                        crosshairs={{
                                                            type: "y"
                                                        }}
                                                    />
                                                    <Geom
                                                        type="line"
                                                        position="sexDesc*patNum"
                                                        size={2}
                                                        color={"sex"}
                                                        shape={"patNum"}
                                                    />
                                                    <Geom
                                                        type="point"
                                                        position="sexDesc*patNum"
                                                        size={4}
                                                        shape={"circle"}
                                                        color={"sex"}
                                                        style={{
                                                            stroke: "#fff",
                                                            lineWidth: 1
                                                        }}
                                                    />
                                                </Chart>
                                                :
                                                <div>
                                                    <Table
                                                        columns={this.state.columnsF}
                                                        dataSource={this.state.tableFourData}
                                                        pagination={false}
                                                        bordered
                                                        rowClassName={this.setClassName}

                                                    />
                                                </div>
                                }
                            </div>
                        </Card>
                    </Col>
                )
            }
        })
        return (
            <div className="charts-dom people-dom">
                <Row>
                    {
                        chartsList
                    }
                </Row>
            </div>
        );
    }
}
export default AnalysisCharts 
