// 家庭医生签约统计
import React from 'react';
import {  Row, Col, Form, DatePicker, Select, Button, Table, message, Menu, Icon, Modal,Tree, Input, Card   } from 'antd';
import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend} from 'bizcharts';
import CommonPagination from 'components/pagination/index';
import DataSet from "@antv/data-set";
import { $http } from 'containers/config/https';
import store from 'store';
import Moment from 'moment';
import './style/index.less';
const { Option } = Select;
const {  RangePicker } = DatePicker;
const { DataView } = DataSet;
const FormItem = Form.Item;
const formItemLayout = {    // label 和input宽度
    labelCol: { span:7 },
    wrapperCol: { span: 14 },
};
const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
const { TreeNode } = Tree;
const { Search } = Input;
const dataList = [];

const FamilyDoctorSigningStatistical = Form.create()(
    class extends React.Component {
        constructor() {
            super();
            this.state = {
                userInfo: JSON.parse(window.sessionStorage.userData),
                collapsed: false,
                page: 1,
                total: 0,
                pageSize: 10,
                page2: 1,
                total2: 0,
                pageSize2: 10,
                province: [], //省
                city: [], //城市
                district: [],  //区
                originalProvince: [], //全部市和省
                areaID: '', //区id
                provID:'', //省id
                cityID: '', //市id
                leftNav: [],
                pullDown: [],
                openKeys: [],
                statisticalData: [], //查询统计后的数据
                hospID: '', //选中医院或机构id
                startDate: '', //开始时间
                endDate: '',  // 结束时间
                startDateRan: '', //自定义时间
                endDateRan: '', //自定义时间
                random: false,
                allTime: false,
                LastMonth: false,
                ThisMonth: false,
                tableDataList: [], //表格数据
                showTable: 1, //显示不同的表格
                leftNavDetail: {}, //选择医院的数据
                iconList: 'signRate', //默认图标数据
                expandedKeys: [],
                searchValue: '',
                autoExpandParent: true,
                iconData: [],  // 饼状图标的数据
                iconDataDetail: [], //饼状图的详情数据
                histogramData: [], //柱状图的详情数据
                valKey: '',
                finalData: [], //帅选后的柱状图数据
                visible: false,
                hrefData: '' , //下载链接
                clickDownload: false, //点击一次确认下载后的操作
                hospName: '', //
                CatDesc: '',//搜索医院机构
                point: '',
                detailWidthTotal:'',
                columns:[],
                columnsWidth:'',
                organizationColumns:[],
                ChineseEnglishSize:{}
            };
            // 库存单的数据表头
            this.columns = [
                {
                    key: 1,
                    title: '排名',
                    align: "center",
                    width: '4%',
                    render: (text, record, index)=> (<span className={'back-'+`${index+1}`}>{`${index+1}`}</span>),
                }
                ,
                {
                    key: 2,
                    title: '签约机构',
                    dataIndex: 'desc',
                    align: "left",
                    width: '10%'
                },
                {
                    key: 3,
                    title: '其中签约人数',
                    dataIndex: 'signPatNum',
                    align: "right",
                    width: '8%',
                    defaultSortOrder: 'descend',
                    sorter: (a, b) => a.signPatNum - b.signPatNum,
                },
                {
                    key: 4,
                    title: '已签约',
                    dataIndex: 'oldSignPatNum',
                    align: "right",
                    width: '6%',
                    sorter: (a, b) => a.oldSignPatNum - b.oldSignPatNum,
                },
                {
                    key: 5,
                    title: '新签约',
                    dataIndex: 'newSignPatNum',
                    align: "right",
                    width: '6%',
                    sorter: (a, b) => a.newSignPatNum - b.newSignPatNum,
                },
                {
                    key: 7,
                    title: '就诊人数',
                    dataIndex: 'patNum',
                    align: "right",
                    width: '7%',
                    sorter: (a, b) => a.patNum - b.patNum,
                },
                {
                    key: 8,
                    title: '就诊人次',
                    dataIndex: 'admTimes',
                    align: "right",
                    width: '7%',
                    sorter: (a, b) => a.admTimes - b.admTimes,
                },
                {
                    key: 11,
                    title: '签约率',
                    dataIndex: 'signRate',
                    align: "right",
                    width: '6%',
                    sorter: (a, b) => a.signRate - b.signRate,
                },
                {
                    key: 6,
                    title: '平均签约人数',
                    dataIndex: 'avgSignPatNum',
                    align: "right",
                    width: '8%',
                    sorter: (a, b) => a.avgSignPatNum - b.avgSignPatNum,
                },
                {
                    key: 9,
                    title: '平均接诊人数',
                    dataIndex: 'avgPatNum',
                    align: "right",
                    width: '9%',
                    sorter: (a, b) => a.avgPatNum - b.avgPatNum,
                },
                {
                    key: 10,
                    title: '平均接诊人次',
                    dataIndex: 'avgAdmTimes',
                    align: "right",
                    width: '9%',
                    sorter: (a, b) => a.avgAdmTimes - b.avgAdmTimes,
                },
                {
                    key: 12,
                    title: '平均签约率',
                    dataIndex: 'avgSignRate',
                    align: "right",
                    width: '7%',
                    sorter: (a, b) => a.avgSignRate - b.avgSignRate,
                },
                {
                    key: 13,
                    title: '解约人数',
                    dataIndex: 'signStopPatNum',
                    align: "right",
                    width: '7%',
                    sorter: (a, b) => a.signStopPatNum - b.signStopPatNum,
                },
                {
                    key: 14,
                    title: '解约率',
                    dataIndex: 'signStopRate',
                    align: "right",
                    width: '6%',
                    sorter: (a, b) => a.signStopRate - b.signStopRate,
                }
            ];
            this.organizationColumns = [
                {
                    key: 1,
                    title: '排名',
                    render: (text, record, index)=> (<span className={'back-'+`${index+1}`}>{`${index+1}`}</span>),
                    align: "center",
                    width: '10%',
                },
                {
                    key: 2,
                    title: '签约医生',
                    dataIndex: 'desc',
                    align: "left",
                    width: '10%'
                },
                {
                    key: 3,
                    title: '其中签约人数',
                    dataIndex: 'signPatNum',
                    align: "right",
                    width: '10%',
                    sorter: (a, b) => a.signPatNum - b.signPatNum,
                },
                {
                    key: 4,
                    title: '已签约',
                    dataIndex: 'oldSignPatNum',
                    align: "right",
                    width: '10%',
                    sorter: (a, b) => a.oldSignPatNum - b.oldSignPatNum,
                },
                {
                    key: 5,
                    title: '新签约',
                    dataIndex: 'newSignPatNum',
                    align: "right",
                    width: '10%',
                    sorter: (a, b) => a.newSignPatNum - b.newSignPatNum,
                },
                {
                    key: 6,
                    title: '就诊人数',
                    dataIndex: 'patNum',
                    align: "right",
                    width: '10%',
                    defaultSortOrder: 'descend',
                    sorter: (a, b) => a.patNum - b.patNum,
                },
                {
                    key: 7,
                    title: '就诊人次',
                    dataIndex: 'admTimes',
                    align: "right",
                    width: '10%',
                    sorter: (a, b) => a.admTimes - b.admTimes,
                },
                {
                    key: 8,
                    title: '签约率',
                    dataIndex: 'signRate',
                    align: "right",
                    width: '10%',
                    sorter: (a, b) => a.signRate - b.signRate,
                },
                {
                    key: 9,
                    title: '解约人数',
                    dataIndex: 'signStopPatNum',
                    align: "right",
                    width: '10%',
                    sorter: (a, b) => a.signStopPatNum - b.signStopPatNum,
                },
                {
                    key: 10,
                    title: '解约率',
                    dataIndex: 'signStopRate',
                    align: "right",
                    width: '10%',
                    sorter: (a, b) => a.signStopRate - b.signStopRate,
                }
            ];
        }

        componentDidMount() {
            // 初始化数据
            this.getArea();
            this.getleftNavList();
            this.getDetailTableColumns();
            this.getTableLeftColumns();
            let nowDate = new Date();
            let cloneNowDate = new Date();
            let fullYear = nowDate.getFullYear();
            let month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
            let endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
            function getFullDate(targetDate) {
                let D, y, m, d;
                if (targetDate) {
                    D = new Date(targetDate);
                    y = D.getFullYear();
                    m = D.getMonth() + 1;
                    d = D.getDate();
                } else {
                    y = fullYear;
                    m = month;
                    d = date;
                }
                m = m > 9 ? m : '0' + m;
                d = d > 9 ? d : '0' + d;
                return y + '-' + m + '-' + d;
            };
            let endDate = getFullDate(cloneNowDate.setDate(endOfMonth));//当月最后一天
            let startDate = getFullDate(cloneNowDate.setDate(1));//当月第一天

            this.setState({startDate, endDate},()=>{
                // this.getThisMonth();
                if(this.state.userInfo.hospID){
                    this.checkHospitalAllData();
                }else {
                    this.getDistrictList();
                }
            });
        }
        componentWillUnmount() {
            // 组件销毁前将静止让setState修改state的状态，防止内存泄漏
            this.setState = (state,callback)=>{ return; }
        }

    // 获取指标综合统计
        getDetailTableColumns = () => {
            let {userInfo} = this.state;
            let data = {
                params: [{
                    reactCode: ['FamilyDoctorSigningStatistics'],
                    compontName: 'FamilyDoctorSigningStatistics',
                    type: 'C',
                }]
            }
            $http.post('urlS', this, {
                code: '01040073',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        let arr = res.result.C&&res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map((item, index) => {
                            return  {
                                ...item,
                                key: index + 1,
                                title: <div>{userInfo.language== 'EN' ? item.enDescripts : item.title}</div>,
                            }
                        }) : '';
                        let filterArr = arr.filter(function(item){ return item.display === 'Y'});
                        this.setState({columns: filterArr, columnsWidth: res.totalWidth,ChineseEnglishSize:userInfo.language=='EN' ? res.result.language.EN : res.result.language.CN})
                    }
                }
            });
        };

        // 获取指标排名
        getTableLeftColumns = () => {
            let {userInfo} = this.state;
            let data = {
                params: [{
                    compontName: 'FamilyDoctorIndicatorRanking',
                    type: 'C',
                }]
            }
            $http.post('urlS', this, {
                code: '01040073',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        let arr = res.result.C&&res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map((item, index) => {
                            return  {
                                ...item,
                                key: index + 1,
                                title: <div>{userInfo.language== 'EN' ? item.enDescripts : item.title}</div>,
                            }
                        }) : '';
                        let filterArr = arr.filter(function(item){ return item.display === 'Y'});
                        this.setState({organizationColumns: filterArr, detailWidthTotal: res.totalWidth})
                    }
                }
            });
        };



        //获取左侧栏列表
        getleftNavList =()=>{
            let data = {
                params: [{
                    ID: '',
                    isHospital: 'N',
                    areaID: this.state.areaID ? this.state.areaID : '', //区id
                    provID:this.state.provID ? this.state.provID : '', //省id
                    cityID: this.state.cityID ? this.state.cityID : '', //市id
                }]
            };
            $http.post('urlS', this, {
                code: "03070008",
                data: data,
                success: function (res) {
                    if(+res.errorCode == '0'){
                        this.setState({leftNav: res.result},()=>{this.generateList( res.result)})
                    }
                }
            });
        };

        // 获取省市区
        getArea=()=>{
            let data = {
                params: []
            };
                $http.post('urlS', this, {
                    code: "03070006",
                    data: data,
                    success: function (res) {
                        if(+res.errorCode == '0'){
                            this.setState({
                                province: res.result,
                                city: res.result,
                                originalProvince: res.result
                            })
                        }
                    }
                });
        };
        //下载数据
        downloadData =()=>{
            let {ChineseEnglishSize} = this.state;
            this.setState({clickDownload: true})
            let EndTime = this.props.form.getFieldValue('EndTime');
            let StartTime = this.props.form.getFieldValue('StartTime');
            let ContractStatus = this.props.form.getFieldValue('ContractStatus');
            let data = {
                params:[{
                    hospID: this.state.leftNavDetail.key ? this.state.leftNavDetail.key : this.state.userInfo.hospID ? this.state.userInfo.hospID : undefined,
                    startDate: StartTime ? Moment(StartTime).format('YYYY-MM-DD') : undefined,
                    endDate: EndTime ? Moment(EndTime).format('YYYY-MM-DD') : undefined,
                    status: ContractStatus ? ContractStatus : ''
                }]
            };
            $http.post('urlS', this, {
                code: "03070005",
                data: data,
                success: function (res) {
                    if(+res.errorCode == '0'){
                        this.setState({hrefData: res.FileURL});
                        if(res.FileURL){
                            document.getElementById("ifile").src= res.FileURL;
                            message.success(ChineseEnglishSize.FamilyDoctorSigningStatisticsdownloading ? ChineseEnglishSize.FamilyDoctorSigningStatisticsdownloading.descripts:'正在下载...')
                            this.setState({visible: false, clickDownload: false});
                        }else {
                            this.setState({clickDownload: false});
                            message.error(ChineseEnglishSize.FamilyDoctorSigningStatisticsnoDownloadYet ? ChineseEnglishSize.FamilyDoctorSigningStatisticsnoDownloadYet.descripts:'暂无下载')
                        }
                    }
                }
            });
        };
        //显示隐藏左侧导航栏
        toggleCollapsed = () => {
            this.setState({
                collapsed: !this.state.collapsed,
            });
        };
        //选择省
        onChangeProvince=(value)=> {
           // let filtrateCity = this.state.originalProvince.filter((v)=> v.province == value.id);
            if(value){
                this.setState({city: value.child,provID: value.id},()=>{
                    this.getleftNavList();
                    this.getOrganization(value.id);
           })}
        };
        //选择市
        onChangeCity =(val)=>{
            this.setState({cityID: val.id, district: val.child},()=>{
                this.getleftNavList();
                this.getOrganization(val.id);
            });
        };
        //选择区
        onChangeDistrict =(val)=>{
            this.setState({areaID: val},()=>{
                this.getleftNavList();
                this.getOrganization(val);
            });
        };

        getOrganization=(id)=>{
            let data = {
                params: [{
                    bureauID: id
                }]
            };
            $http.post('urlS', this, {
                code: "03070007",
                data: data,
                success: function (res) {
                    if(+res.errorCode == '0'){
                        this.setState({pullDown: res.result})
                    }
                }
            });
        }

        //点击左侧栏选中社康
        newHospDesc=(v)=>{
            this.setState({hospID: v.key, showTable: 2},()=>{this.getDistrictList();});
        };

        //查询医院数据
        checkHospitalAllData=()=>{
            this.setState({loading: true})
                let data = {
                    params: [{
                        hospId: this.state.leftNavDetail.key ? this.state.leftNavDetail.key : this.state.userInfo.hospID,
                        startDate:this.state.startDate ? this.state.startDate : '',
                        endDate: this.state.endDate ? this.state.endDate : '' ,

                    }],
                    tablepagination: [{
                        pageSize: this.state.pageSize,
                        currentPage: this.state.page
                    }],
                    pipepagination: [{
                        pageSize: 10,
                        currentPage: 1
                    }],

                };
                $http.post('urlS', this, {
                    code: "03070002",
                    data: data,
                    success: function (res) {
                        if(+res.errorCode == '0'){
                            for(var k=0; k<res.pipe.length; k++){
                                res.pipe[k].key = k;
                            }
                            for(var j=0; j<res.table.length; j++){
                                res.table[j].key = j;
                            }
                            let v = res.pipe[0].Data.filter((item)=> item.num !== 0);
                            var  HdataList= [];
                            for(var i=0; i< res.bar.length; i++){
                                HdataList.push({
                                    signHospDesc:  res.bar[i].desc ? res.bar[i].desc: '',
                                    signRate:  res.bar[i].signRate ? +res.bar[i].signRate.split('%')[0]: 0,
                                    avgSignRate:  res.bar[i].avgSignRate ? +res.bar[i].avgSignRate.split('%')[0]: 0,
                                    signStopRate:  res.bar[i].signStopRate ? +res.bar[i].signStopRate.split('%')[0]: 0,
                                });
                                res.bar[i].key = i;
                            }
                            this.setState({
                                tableDataList: res.table,
                                total: res.tableCount,
                                hospID: '',
                                iconData: res.pipe,
                                iconDataDetail: v,
                                statisticalData: res.message ? res.message: [],
                                histogramData: HdataList,
                                loading: false,
                                hospName:res.hospName
                            },()=>{this.filterIcon()});
                        }
                    }
                });
        };
        //查询社康数据
        getDistrictList=()=>{
            this.setState({loading: true})
            let data = {
                params: [{
                    hospId: this.state.hospID ? this.state.hospID : this.state.userInfo.hospID,
                    startDate:this.state.startDate ? this.state.startDate : '',
                    endDate: this.state.endDate ? this.state.endDate : '' ,

                }],
                tablepagination: [{
                    pageSize: this.state.pageSize,
                    currentPage: this.state.page
                }],
                pipepagination: [{
                    pageSize: 10,
                    currentPage: 1
                }]
            };
            $http.post('urlS', this, {
                code: "03070004",
                data: data,
                success: function (res) {
                    if(+res.errorCode == '0'){
                        for(var k=0; k<res.pipe.length; k++){
                            res.pipe[k].key = k;
                        }
                        for(var j=0; j<res.table.length; j++){
                            res.table[j].key = j;
                        }
                        let v = res.pipe[0].Data.filter((item)=> item.num !== 0);
                        var  HdataList= [];
                        for(var i=0; i< res.bar.length; i++){
                            HdataList.push({
                                signHospDesc:  res.bar[i].desc ? res.bar[i].desc: '',
                                signRate:  res.bar[i].signRate ? +res.bar[i].signRate.split('%')[0]: 0,
                                avgSignRate:  res.bar[i].avgSignRate ? +res.bar[i].avgSignRate.split('%')[0]: 0,
                                signStopRate:  res.bar[i].signStopRate ? +res.bar[i].signStopRate.split('%')[0]: 0,
                            });
                            res.bar[i].key = i;
                        }

                        this.setState({
                            tableDataList: res.table,
                            total: res.tableCount,
                            iconData: res.pipe,
                            iconDataDetail: v,
                            statisticalData: res.message,
                            histogramData: HdataList,
                            loading: false,
                            hospName:res.hospName
                        },()=>{this.filterIcon()});
                    }
                }
            });
        };

        //柱状图过滤数据为0 的数据
        filterIcon =()=>{
            if(this.state.iconList == 'signRate'){
                var sign = JSON.parse(JSON.stringify(this.state.histogramData));
                let H = sign.filter(item=> item.signRate !== 0);
                this.setState({finalData: H})
            } else if(this.state.iconList == 'avgSignRate'){
                var avgSign = JSON.parse(JSON.stringify(this.state.histogramData));
                let G = avgSign.filter(item=> item.avgSignRate !== 0);
                this.setState({finalData: G})
            }else if(this.state.iconList == 'signStopRate'){
                var signStop = JSON.parse(JSON.stringify(this.state.histogramData));
                let T = signStop.filter(item=> item.signStopRate !== 0);
                this.setState({finalData: T})
            }
        };
        // 页码改变的回调，参数是改变后的页码及每页条数 入库单
        onChange = (page, pageSize) => {
            this.setState({page: page, pageSize: this.state.pageSize}, () => {
                // 重新调用查询方法
                // this.getWarehouseList();
                if(this.state.hospID){
                    this.getDistrictList();
                }else {
                    this.checkHospitalAllData();
                }
            });
        };

        onShowSizeChange = (current, size) => {
            this.setState({page: current, pageSize: size}, () => {
                // 重新调用查询方法
                this.onChange(current,size);
            })
        };
        onOpenChange = openKeys => {
            const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
            if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                this.setState({ openKeys });
            } else {
                this.setState({
                    openKeys: latestOpenKey ? [latestOpenKey] : [],
                });
            }
        };

        checkData=()=>{
            if(this.state.random){
                this.setState({
                    startDate: this.state.startDateRan,
                    endDate: this.state.endDateRan
                },()=>{
                    if(this.state.hospID){
                        this.getDistrictList()
                    }else {
                        this.checkHospitalAllData();
                    }
                })
            }else {
                if(this.state.hospID){
                    this.getDistrictList()
                }else {
                    this.checkHospitalAllData();
                }
            }

        }

        //获取本月时间
        getThisMonth=()=>{
            let nowDate = new Date();
            let cloneNowDate = new Date();
            let fullYear = nowDate.getFullYear();
            let month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
            let endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
            function getFullDate(targetDate) {
                let D, y, m, d;
                if (targetDate) {
                    D = new Date(targetDate);
                    y = D.getFullYear();
                    m = D.getMonth() + 1;
                    d = D.getDate();
                } else {
                    y = fullYear;
                    m = month;
                    d = date;
                }
                m = m > 9 ? m : '0' + m;
                d = d > 9 ? d : '0' + d;
                return y + '-' + m + '-' + d;
            };
            let endDate = getFullDate(cloneNowDate.setDate(endOfMonth));//当月最后一天
            let startDate = getFullDate(cloneNowDate.setDate(1));//当月第一天
            this.setState({ allTime: false,ThisMonth: true,LastMonth: false, random: false, startDate, endDate},()=>{
                this.checkData();
            });
        };

        //获取上个月的时间
        getLastMonth = () =>{
            let nowdays = new Date();
            let year = nowdays.getFullYear();
            let month = nowdays.getMonth();
            if(month==0){
                month = 12;
                year = year-1;
            }
            if(month<10){
                month = '0'+month;
            }
            let myDate = new Date(year,month,0);
            let startDate = year+'-'+month+'-01'; //上个月第一天
            let endDate = year+'-'+month+'-'+myDate.getDate();//上个月最后一天
            this.setState({startDate, endDate, allTime: false,ThisMonth: false,LastMonth: true, random: false},()=>{
                this.checkData();
            });
        };

        //时间
        onChangeTime=(val , dateString)=>{
            this.setState({startDateRan:dateString[0], endDateRan:dateString[1],llTime: false,ThisMonth: false,LastMonth: false, random: true});
        };

        // 查询机构
        onChangePhCat = (e) => {
            const CatDesc=e.target.value;
            const expandedKeys = this.dataList.map((item) => {
                if (CatDesc.length===0) return null;
                if (item.title.indexOf(CatDesc) > -1) {
                    return this.getParentKey(item.key, this.state.leftNav);
                }
                return null;
            }).filter((item, i, self) => item && self.indexOf(item) === i);
            this.setState({
                expandedKeys,
                CatDesc: e.target.value,
                autoExpandParent: true,
            });
        }

        //以下是Tree展开搜索
        dataList = [];
        generateList = (data) => {
            for (let i = 0; i < data.length; i++) {
                const node = data[i];
                const key = node.key;
                this.dataList.push({ key, title: node.title });
                if (node.children) {
                    this.generateList(node.children);
                }
            }
        };

        getParentKey = (key, tree) => {
            let parentKey;
            for (let i = 0; i < tree.length; i++) {
                const node = tree[i];
                if (node.children) {
                    if (node.children.some(item => item.key === key)) {
                        parentKey = node.key;
                    } else if (this.getParentKey(key, node.children)) {
                        parentKey = this.getParentKey(key, node.children);
                    }
                }
            }
            return parentKey;
        };

        onExpand = (expandedKeys) => {
            this.setState({
                expandedKeys,
                autoExpandParent: false,
            });
        }

        onClickTree=(treeKey)=>{
            if(treeKey.isSK == 'N'){
                this.setState({leftNavDetail:this.state.leftNav.length>0 ? this.state.leftNav : {}, hospID: '',showTable: 1 },()=>{{{this.checkHospitalAllData();}}})
            }else {
                this.newHospDesc(treeKey)
            }
        }

        renderTreeNodes = data => data.map((item) => {
            const index = item.title.indexOf(this.state.CatDesc);
            const beforeStr = item.title.substr(0, index);
            const afterStr = item.title.substr(index + this.state.CatDesc.length);
            const title = index > -1 ? (
                <span onClick={()=>{
                    if(item.isHospital== 'Y'){
                        this.onClickTree(item)
                    }
                }}>
            {beforeStr}
                    <span style={{ color: '#FF7F00' }}>{this.state.CatDesc}</span>
                    {afterStr}
            </span>
            ) : <span>{item.title}</span>;
            if (item.children) {
                return (
                    <TreeNode title={(<span>{title}</span>)} key={item.key} dataRef={item} >
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode title={(<span>{title}</span>)} key={item.key} dataRef={item} />;
        })

        //获取饼状图指定数据
        onClickIcon=(val)=>{
            let g = val.Data.filter(item=>  item.num !== 0);
            this.setState({iconDataDetail: g, valKey: val.key})
        };

        // 关闭
        handleCancel = () => {
            this.setState({
                visible: false,
                clickDownload: false
            });
        };

        pullDownCheck=(val)=>{
            let data = {
                params: [{
                    ID: val.id ? val.id: '',
                    isHospital: val.isHospital ? val.isHospital : 'Y',
                    areaID: this.state.areaID ? this.state.areaID : '', //区id
                    provID:this.state.provID ? this.state.provID : '', //省id
                    cityID: this.state.cityID ? this.state.cityID : '', //市id
                }]
            };
            $http.post('urlS', this, {
                code: "03070008",
                data: data,
                success: function (res) {
                    if(+res.errorCode == '0'){
                        this.setState({leftNav: res.result},()=>{this.generateList( res.result)})
                    }
                }
            });
        }

        render() {
            const { getFieldDecorator } = this.props.form;
            const dv = new DataView();
            dv.source(this.state.iconDataDetail).transform({
                type: "percent",
                field: "num",
                dimension: "desc",
                as: "percent"
            });
            const colsB = {
                percent: {
                    formatter: val => {
                        let vals = val.toFixed(4) * 100 ;
                        let data  = vals.toFixed(2)+ "%"
                            return data;
                    }
                }
            };
            const colsZ = {
                sales: {
                    tickInterval: 1
                }
            };
            const { searchValue, expandedKeys, autoExpandParent,columns,organizationColumns,ChineseEnglishSize } = this.state;
            const style={overflow: 'auto'}
            const style2={ marginLeft: '-180px'}
            const style3={ marginLeft: '-180px'}
            return (
                <div className="FamilyDoctorSigningStatistical" style={{height: '100%'}}>
                    <Row style={{height: '100%'}}>
                        <Col span={!this.state.collapsed ? 4 : 0} >
                                <div className="LeftNav" style={{height: store.getState().tableHeight.y + 240 + 'px'}}>
                                    <div  className="titleTop" style={{ marginBottom: 16, width: '100%', backgroundColor: '#1999db' }}>
                                        <span>
                                            <Icon type={this.state.collapsed ? 'double-right' : 'double-left'} onClick={this.toggleCollapsed} />
                                            {!this.state.collapsed && <span>
                                                <span>{ChineseEnglishSize.FamilyDoctorSigningStatisticsorgStructure ? ChineseEnglishSize.FamilyDoctorSigningStatisticsorgStructure.descripts:'组织结构'}</span>
                                                {/*<span><Icon type="search" /></span>*/}
                                            </span>}
                                        </span>
                                    </div>
                                    <Menu
                                        openKeys={this.state.openKeys}
                                        mode="inline"
                                        onOpenChange={this.onOpenChange}
                                    >
                                        {!this.state.collapsed && <div>
                                            <Select
                                                showSearch
                                                style={{ width: '125px',marginLeft : '5px'}}
                                                placeholder={ChineseEnglishSize.FamilyDoctorSigningStatisticsprovince ? ChineseEnglishSize.FamilyDoctorSigningStatisticsprovince.descripts:'省'}
                                                optionFilterProp="children"
                                                onChange={this.onChangeProvince}
                                                filterOption={(input, option) =>
                                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            >
                                                {this.state.province.length>0 && this.state.province.map((v ,k)=>{
                                                return <Option value={v} key={k} children={v.descripts + '^' + v.descriptsSPCode}>{v.descripts}</Option>
                                            })}
                                            </Select>
                                            <Select
                                                showSearch
                                                style={{ width: '125px',marginLeft : '5px', float: 'right' }}
                                                placeholder={ChineseEnglishSize.FamilyDoctorSigningStatisticscity ? ChineseEnglishSize.FamilyDoctorSigningStatisticscity.descripts:'市'}
                                                optionFilterProp="city"
                                                onChange={this.onChangeCity}
                                                filterOption={(input, option) =>
                                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            >
                                                {this.state.city.length>0 && this.state.city.map((v ,k)=>{
                                                    return <Option value={v} key={k} city={v.descripts + '^' + v.descriptsSPCode}>{v.descripts}</Option>
                                                })}
                                            </Select>
                                            <Select
                                                showSearch
                                                style={{width: '125px',marginLeft : '5px' }}
                                                placeholder={ChineseEnglishSize.FamilyDoctorSigningStatisticsdistrict ? ChineseEnglishSize.FamilyDoctorSigningStatisticsdistrict.descripts:'区'}
                                                optionFilterProp="district"
                                                onChange={this.onChangeDistrict}
                                                filterOption={(input, option) =>
                                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            >
                                                {this.state.district.length>0 && this.state.district.map((v ,k)=>{
                                                    return <Option value={+v.id} key={k} district={v.descripts + '^' + v.descriptsSPCode}>{v.descripts}</Option>
                                                })}
                                            </Select>
                                            <Select
                                                showSearch
                                                style={{width: '125px',marginLeft : '5px', float: 'right' }}
                                                placeholder={ChineseEnglishSize.FamilyDoctorSigningStatisticsorganization ? ChineseEnglishSize.FamilyDoctorSigningStatisticsorganization.descripts:'机构'}
                                                optionFilterProp="pullDown"
                                                onChange={this.pullDownCheck}
                                                filterOption={(input, option) =>
                                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            >
                                                {this.state.pullDown.length>0 && this.state.pullDown.map((v ,k)=>{
                                                    return <Option value={v} key={k} pullDown={v.descripts + '^' + v.descriptsSPCode}>{v.descripts}</Option>
                                                })}
                                            </Select>
                                        </div>}
                                        <div className="navTree">
                                            <Input placeholder={ChineseEnglishSize.FamilyDoctorSigningStatisticssearchFor ? ChineseEnglishSize.FamilyDoctorSigningStatisticssearchFor.descripts:'搜索'}   style={{ marginBottom: '8px',marginTop: '10px' }} onChange={this.onChangePhCat} />
                                            <Tree
                                                autoExpandParent={autoExpandParent}
                                                onExpand={this.onExpand}
                                                expandedKeys={expandedKeys}
                                            >
                                                {this.renderTreeNodes(this.state.leftNav)}
                                            </Tree>
                                        </div>

                                    </Menu>
                                    {}
                                </div>
                        </Col>
                        {this.state.collapsed &&
                            <Col span={1} onClick={this.toggleCollapsed}
                                 style={{
                                width: '25px',
                                height: '100%',
                                backgroundColor: '#4cc183',
                                cursor: 'pointer',
                                textAlign: 'center',
                                color:' #fff',
                                lineHeight: '55px',
                                paddingTop: '150px'}}>
                                {ChineseEnglishSize.FamilyDoctorSigningStatisticsexpandOrg ? ChineseEnglishSize.FamilyDoctorSigningStatisticsexpandOrg.descripts:'点击展开组织结构'}
                            </Col>
                        }
                        <Col span={!this.state.collapsed ? 20 : 23} >
                            <div className="rightContent">
                                <div className="contentTop">
                                    {/*{this.state.collapsed && <Icon type='double-right' onClick={this.toggleCollapsed} className="collapsed" />}*/}
                                    {/*<p>查询时间：{this.state.startDate}至{this.state.endDate}</p>*/}
                                    <span>{ChineseEnglishSize.FamilyDoctorSigningStatisticscurrentInfo ? ChineseEnglishSize.FamilyDoctorSigningStatisticscurrentInfo.descripts:'当前信息：'}{this.state.hospName} </span>
                                         <div className="check">
                                            <Row>
                                                <Col>
                                                    {/*<a className={this.state.allTime ? 'active' : ''} onClick={()=>this.setState({startDate: '',endDate: '',allTime: true,ThisMonth: false,LastMonth: false, random: false},()=>{this.checkHospitalAllData()})}>不限 </a>*/}
                                                    <a  className={this.state.ThisMonth ? 'active' : ''} onClick={this.getThisMonth}>{ChineseEnglishSize.FamilyDoctorSigningStatisticsthisMonth ? ChineseEnglishSize.FamilyDoctorSigningStatisticsthisMonth.descripts:'本月'} </a>
                                                    <a  className={this.state.LastMonth ? 'active' : ''} onClick={this.getLastMonth}>{ChineseEnglishSize.FamilyDoctorSigningStatisticslastMonth ? ChineseEnglishSize.FamilyDoctorSigningStatisticslastMonth.descripts:'上月'} </a>
                                                    <a  className={this.state.random ? 'active' : ''} onClick={()=>this.setState({allTime: false,ThisMonth: false,LastMonth: false, random: true})}>{ChineseEnglishSize.FamilyDoctorSigningStatisticscustomize ? ChineseEnglishSize.FamilyDoctorSigningStatisticscustomize.descripts:'自定义'} </a>
                                                    <RangePicker
                                                        format="YYYY-MM-DD"
                                                        style={{marginLeft: '10px'}}
                                                        onChange={this.onChangeTime}
                                                    />
                                                    <Button onClick={()=>{this.checkData();}} style={{backgroundColor: '#1999db', color: '#fff',marginLeft: '5px'}} >{ChineseEnglishSize.FamilyDoctorSigningStatisticssearch ? ChineseEnglishSize.FamilyDoctorSigningStatisticssearch.descripts:'查询'}</Button>
                                                    <Button onClick={()=>{this.setState({visible: true})}} style={{backgroundColor: '#1999db', color: '#fff',marginLeft: '5px'}}>{ChineseEnglishSize.FamilyDoctorSigningStatisticsdownloadInfo ? ChineseEnglishSize.FamilyDoctorSigningStatisticsdownloadInfo.descripts:'下载签约信息'}</Button>
                                                </Col>
                                            </Row>
                                        </div>
                                </div>
                                <div className="statistical">
                                    <Row>
                                        <Col className="tit">
                                            <span className="titLeft"></span>
                                            <span  className="titRight">{ChineseEnglishSize.FamilyDoctorSigningStatisticsindicatorCom ? ChineseEnglishSize.FamilyDoctorSigningStatisticsindicatorCom.descripts:'指标综合统计'}</span>
                                        </Col>

                                        {this.state.statisticalData.length>0 && this.state.statisticalData.map((v,i)=>{
                                            return    <Col className="detailNum" title={v.Desc}key={i} >
                                                <div className="img"><div className={"img"+(i+1)}></div></div>
                                                    {v.Code == '解约率' ?
                                                        <div style={{float: 'left',marginLeft: '10px', marginTop: '20px', fontWeight: '700', fontSize: '15px'}}>
                                                            <p className="T" style={{marginBottom: '4px',}}>{v.Data}</p>
                                                            <p style={{marginBottom: '4px',}}>{v.Code}</p>
                                                            <p style={{fontSize: '13px',fontWeight: 'normal'}}>解约: {v.otherData >0 ? v.otherData : 0}人</p>
                                                        </div>
                                                        :
                                                        <div className={v.Code == '平均签约人数' || v.Code == '平均就诊人数'|| v.Code == '平均就诊人次' ? 'fontSize': 'fontSize2'}>
                                                            <p className="T">{v.Data}</p>
                                                            <p >{v.Code}</p>
                                                        </div>
                                                    }

                                            </Col>
                                        })}
                                    </Row>
                                </div>
                                <Row className="rightBottom">
                                    <Col className="rightBottomLeft">
                                        <Col className="tit">
                                            <span className="titLeft"></span>
                                            <span  className="titRight">{ChineseEnglishSize.FamilyDoctorSigningStatisticsCHSignRank ? ChineseEnglishSize.FamilyDoctorSigningStatisticsCHSignRank.descripts:'社康签约指标排名'}</span>
                                        </Col>
                                        <Col >
                                            <Table
                                                columns={this.state.showTable == 1 ? columns : organizationColumns}
                                                dataSource={this.state.tableDataList}
                                                pagination={false}
                                                bordered
                                                scroll={{y:store.getState().tableHeight.y -437 + 'px' }}
                                                style={{height:  store.getState().tableHeight.y -400 + 'px', marginBottom: '5px'}}
                                                rowKey={record => record.key}
                                            />
                                        </Col>
                                        <Col>
                                            <span style={{color: "#157EDF",  position: 'absolute', top: '10px'}}>{ChineseEnglishSize.FamilyDoctorSigningStatisticsremarks ? ChineseEnglishSize.FamilyDoctorSigningStatisticsremarks.descripts:'备注：签约率=签约人数/就诊人数；平均签约率=平均签约人数/就诊人数；解约率=解约人数/签约人数'}</span>
                                            <span style={{width: '100%',display: 'inline-block',height: '35px', paddingTop: '3px'}}>
                                                 <CommonPagination size='small' current={this.state.page} total={this.state.total} search= 'search'
                                                                   onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={this.state.tableDataList}
                                                                   loading={this.state.loading} onChange={this.onChange.bind(this)} />
                                            </span>
                                        </Col>
                                    </Col>
                                    <Col className="rightBottomRight">
                                        <Col style={{  background: '#fff'}} span={12}>
                                            <Col className="tit">
                                                <span className="titLeft"></span>
                                                <span  className="titRight">{ChineseEnglishSize.FamilyDoctorSigningStatisticsproportionOfCH ? ChineseEnglishSize.FamilyDoctorSigningStatisticsproportionOfCH.descripts:'社康指标占比'}</span>
                                            </Col>
                                            <Col>
                                                <Col className="button" style={{textAlign: 'right'}}>
                                                    {this.state.iconData.length>0 && this.state.iconData.map((item, i)=>{
                                                        return <button className={this.state.valKey == i ? 'button-icon' : ''} key={i} onClick={()=> this.onClickIcon(item)}>{item.desc}</button>
                                                    })}
                                                </Col>
                                                <div>
                                                    <Chart
                                                        height={400}
                                                        data={dv}
                                                        scale={colsB}
                                                        padding={[8, 10, 8, 8]}
                                                        forceFit
                                                        style={style2}
                                                    >
                                                        <Coord type="theta" radius={0.75} />
                                                        <Axis name="percent" />
                                                        <Legend
                                                            position="right"
                                                            offsetY={-300 / 2 + 120}
                                                            offsetX={-120}
                                                            slidable={true}
                                                        />
                                                        <Tooltip
                                                            showTitle={false}
                                                            itemTpl="<li><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{num}{name}: {value}</li>"
                                                        />
                                                        <Geom
                                                            type="intervalStack"
                                                            position="percent"
                                                            color="desc"
                                                            tooltip={[
                                                                "desc*num",
                                                                (item, percent) => {
                                                                    return {
                                                                        name: item,
                                                                        value:  percent+'人'
                                                                    };
                                                                }
                                                            ]}
                                                            style={{
                                                                lineWidth: 1,
                                                                stroke: "#fff"
                                                            }}
                                                        >
                                                            <Label
                                                                content="percent"
                                                                formatter={(val, item) => {
                                                                    return item.point.desc + ": " + val;
                                                                }}
                                                            />
                                                        </Geom>
                                                    </Chart>
                                                </div>
                                            </Col>
                                        </Col>

                                        <Col style={{  background: '#fff'}} span={12}>
                                            <Col className="tit">
                                                <span className="titLeft"></span>
                                                <span  className="titRight">{ChineseEnglishSize.FamilyDoctorSigningStatisticssignRateRank ? ChineseEnglishSize.FamilyDoctorSigningStatisticssignRateRank.descripts:'签约率排名'}</span>
                                            </Col>
                                            <Col>
                                                <Col className="button" style={{textAlign: 'right'}}>
                                                    <span style={{float: 'left',marginLeft: '45px'}}>{ChineseEnglishSize.FamilyDoctorSigningStatisticsunits ? ChineseEnglishSize.FamilyDoctorSigningStatisticsunits.descripts:'下图单位为（ % ）'}</span>
                                                    
                                                    <button className={this.state.iconList == 'signRate' ? 'button-icon' : ''} onClick={()=>this.setState({iconList: 'signRate'},()=>{this.filterIcon()})}>{ChineseEnglishSize.FamilyDoctorSigningStatisticssignRate ? ChineseEnglishSize.FamilyDoctorSigningStatisticssignRate.descripts:'签约率'}</button>
                                                    
                                                    <button className={this.state.iconList == 'avgSignRate' ? 'button-icon' : ''} onClick={()=>this.setState({iconList: 'avgSignRate'},()=>{this.filterIcon()})}>{ChineseEnglishSize.FamilyDoctorSigningStatisticsavaOfSignRate ? ChineseEnglishSize.FamilyDoctorSigningStatisticsavaOfSignRate.descripts:'平均签约率'}</button>
                                                    
                                                    <button className={this.state.iconList == 'signStopRate' ? 'button-icon' : ''} onClick={()=>this.setState({iconList: 'signStopRate'},()=>{this.filterIcon()})}>{ChineseEnglishSize.FamilyDoctorSigningStatisticsproportionOfContract ? ChineseEnglishSize.FamilyDoctorSigningStatisticsproportionOfContract.descripts:'解约率'}</button>
                                                </Col>
                                                <div className="histogram">
                                                    {this.state.iconList == 'signRate' &&
                                                    <Chart height={220} data={this.state.finalData} scale={colsZ} forceFit={false} width={this.state.finalData.length>20?900: 680} style={style}>
                                                        <Axis name="signHospDesc" label={{rotate: this.state.finalData.length > 5 ? 50 : 20}} />
                                                        <Axis name= 'signRate' />
                                                        <Tooltip
                                                            crosshairs={{
                                                                type: "y"
                                                            }}
                                                        />
                                                        <Geom type="interval" position='signHospDesc*signRate' />
                                                    </Chart>
                                                    }
                                                    {this.state.iconList == 'avgSignRate' &&
                                                    <Chart height={220} data={this.state.finalData} scale={colsZ} forceFit={false} width={this.state.finalData.length>20?900: 680} style={style}>
                                                        <Axis name="signHospDesc" label={{rotate: this.state.finalData.length > 5 ? 50 : 20}} />
                                                        <Axis name= 'avgSignRate' />
                                                        <Tooltip
                                                            crosshairs={{
                                                                type: "y"
                                                            }}
                                                        />
                                                        <Geom type="interval" position='signHospDesc*avgSignRate' />
                                                    </Chart>}
                                                    {this.state.iconList == 'signStopRate' &&
                                                    <Chart height={220} data={this.state.finalData} scale={colsZ} forceFit={false} width={this.state.finalData.length>20?900: 680} style={style}>
                                                        <Axis name="signHospDesc" label={{rotate: this.state.finalData.length > 5 ? 50 : 20}} />
                                                        <Axis name= 'signStopRate' />
                                                        <Tooltip
                                                            crosshairs={{
                                                                type: "y"
                                                            }}
                                                        />
                                                        <Geom type="interval" position='signHospDesc*signStopRate' />
                                                    </Chart>}
                                                </div>
                                            </Col>
                                        </Col>
                                    </Col>
                                </Row>
                            </div>
                        </Col>
                    </Row>
                    <Modal
                        visible={this.state.visible}
                        onCancel={this.handleCancel}
                        width={400}
                        height = {400}
                        className="FamilyPO"
                        footer={null}
                    >
                        <div>
                            <Row>
                                <Card
                                    size="small"
                                    title={ChineseEnglishSize.FamilyDoctorSigningStatisticsdownloadPeopleInfo ? ChineseEnglishSize.FamilyDoctorSigningStatisticsdownloadPeopleInfo.descripts:'下载签约参保人信息'}
                                >
                                    <Row>
                                        <Col>
                                            <FormItem {...formItemLayout} label={ChineseEnglishSize.FamilyDoctorSigningStatisticsStartDate ? ChineseEnglishSize.FamilyDoctorSigningStatisticsStartDate.descripts:'起初日期'}>
                                                {getFieldDecorator('StartTime',{
                                                    initialValue: Moment(Moment().format('L'), 'YYYY-MM-DD'),
                                                    rules:[{required: false}]
                                                })(
                                                    <DatePicker style={{width: '100%'}}  />
                                                ) }
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col>
                                            <FormItem {...formItemLayout} label={ChineseEnglishSize.FamilyDoctorSigningStatisticsdeadline ? ChineseEnglishSize.FamilyDoctorSigningStatisticsdeadline.descripts:'截至日期'}>
                                                {getFieldDecorator('EndTime',{
                                                    initialValue: Moment(Moment().format('L'), 'YYYY-MM-DD'),
                                                    rules:[{required: false}]
                                                })(
                                                    <DatePicker style={{width: '100%'}}  />
                                                ) }
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col>
                                            <FormItem {...formItemLayout} label={ChineseEnglishSize.FamilyDoctorSigningStatisticsContractStatus ? ChineseEnglishSize.FamilyDoctorSigningStatisticsContractStatus.descripts:'签约状态'}>
                                                {getFieldDecorator('ContractStatus',{
                                                    initialValue: undefined,
                                                    rules:[{required: false,message: '签约状态不能为空'}]
                                                })(
                                                    <Select allowClear style={{width: '100%'}}>
                                                        <Option value='Y'>{ this.state.userInfo.language=='EN' ?'Signing' :'签约'}</Option>
                                                        <Option value='N'>{this.state.userInfo.language=='EN' ?'Release' :'解约'}</Option>
                                                    </Select>
                                                ) }
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row style={{textAlign: 'center'}}>
                                        <Col span={7} style={{ marginLeft: '27%'}}>
                                            {this.state.userInfo.language=='EN'?<Button onClick={()=>{this.downloadData();}} disabled={this.state.clickDownload ? true : false}>{this.state.clickDownload ? "downloading..." : "Confirm download"}</Button>:<Button onClick={()=>{this.downloadData();}} disabled={this.state.clickDownload ? true : false}>{this.state.clickDownload ? "下载中..." : "确定下载"}</Button>}
                                            <iframe id="ifile" style={{display:'none'}}></iframe>
                                        </Col>
                                        <Col span={7} >
                                            <a onClick={this.handleCancel}>{ChineseEnglishSize.FamilyDoctorSigningStatisticscancel ? ChineseEnglishSize.FamilyDoctorSigningStatisticscancel.descripts:'取消'}</a>
                                        </Col>
                                    </Row>

                                </Card>
                            </Row>

                        </div>
                    </Modal>
                </div>
            )
        }
    }
);
export default FamilyDoctorSigningStatistical;