import React from 'react';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import "./statistics.less";
import { Button, Table ,Spin, message,Tabs, DatePicker, } from 'antd';
const TabPane = Tabs.TabPane;
import moment from 'moment';

const VisitStatistics=React.createClass({
	loadData(pageNo, nub) {
        this.state.data = [];
        this.setState({
            loading: true
        });
        let urls='';
		switch(nub){
			case "1":urls="/api/admin/achievement/delete";break;//日
			case "2":urls="/api/admin/achievement/delete2";break;//周
			case "3":urls="/api/admin/achievement/delete3";break;//月
			case "4":urls="/api/admin/achievement/delete4";break;//季
			case "5":urls="/api/admin/achievement/delete5";break;//年
		}
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + urls?urls:"/api/admin/achievement/delete",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                releaseDateStartDate: this.state.releaseDate[0],
                releaseDateEndDate: this.state.releaseDate[1],   
            },
            success: function (data) {
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        theArr.push({
                            key: i,
                            id: thisdata.id,
                            serialNumber: thisdata.serialNumber,
                            
                        });
                    };
                    this.state.pagination.current = data.data.pageNo;
                    this.state.pagination.total = data.data.totalCount;
                };
                this.setState({
                    dataSource: theArr,
                    pagination: this.state.pagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
	getInitialState(){
		return{
			releaseDate:[],
			loading:false,
			pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page,this.satet.callnub);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            columns: [
                {
                    title: '营销员',
                    dataIndex: 'serialNumber',
                    key: 'serialNumber',
                }, {
                    title: '部门',
                    dataIndex: 'name',
                    key: 'name',
                }, {
                    title: '拜访次数',
                    dataIndex: 'keyword',
                    key: 'keyword',
                }, {
                    title: '拜访客户数',
                    dataIndex: 'category',
                    key: 'category',
                    render: text => { return getAchievementCategory(text); }
                }, {
                    title: '电话量',
                    dataIndex: 'theName',
                    key: 'theName',
                },{
                    title: '外拜量',
                    dataIndex: 'keyword1',
                    key: 'keyword1',
                }, {
                    title: 'QQ量',
                    dataIndex: 'category2',
                    key: 'category2',
                    render: text => { return getAchievementCategory(text); }
                }, {
                    title: '邮件量',
                    dataIndex: 'theName3',
                    key: 'theName3',
                }, {
                    title: '书信量',
                    dataIndex: 'theName4',
                    key: 'theName4',
                },  {
                    title: '微信量',
                    dataIndex: 'theName5',
                    key: 'theName5',
                },
            ]
		}
	},
	callback(e){
		this.setState({
			callnub:e
		})
		this.loadData(1,e)
	},
	search() {
        this.loadData(1,this.state.callnub)
    },
    reset() {
        this.state.releaseDate = [];
        this.loadData(1,this.state.callnub);
    },
    componentWillMount(){
    	this.loadData();
    },
	render(){
		const { RangePicker } = DatePicker;
		return <div className="visitContant">
					<div className="visitTitle">
						<span className="titleTime">起止时间</span>
						<RangePicker
                            value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
                            this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
                            onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
                            <Button  onClick={this.search} className="blue" style={{background:'red',color:'#ffffff',border:'none'}}>统计</Button>
                            <Button  onClick={this.reset} className="green" style={{background:'green',color:'#ffffff',border:'none'}}>重置</Button>   
						<div className="clearfix" style={{marginTop:'30px',marginLeft:'20px'}}>
						    <Tabs onChange={this.callback} type="card">
								 <TabPane tab="本日客户拜访统计" key="1"></TabPane>
							     <TabPane tab="本周客户拜访统计" key="2"></TabPane>
							     <TabPane tab="本月客户拜访统计" key="3"></TabPane>
							     <TabPane tab="本季客户拜访统计" key="4"></TabPane>
							     <TabPane tab="本年客户拜访统计" key="5"></TabPane>
						    </Tabs>
						</div>
						<div className="clearfix">
							<div className="maintitle">客户拜访情况统计表</div>
							<div className="patent-table">
			                    <Spin spinning={this.state.loading}>
			                        <Table columns={this.state.columns}
			                            dataSource={this.state.dataSource}
			                            pagination={this.state.pagination}
			                            onRowClick={this.tableRowClick} />
			                    </Spin>
			                </div>
						</div>
					
					</div>
		      </div>
	}
})

export default VisitStatistics;
