import React,{Component} from "react";
import {Button, DatePicker, message, Select, Spin, Table, Tabs} from "antd";
import moment from "moment";
import {ChooseList} from "../../../order/orderNew/chooseList";
import $ from "jquery/src/ajax";
import {
    ShowModal,
} from "@/tools.js";
import ShowModalDiv from "@/showModal.jsx";
import StatisticalDetails from './statisticalDetails';
import './channelStatistics.less';
const {TabPane} = Tabs;
const { RangePicker } = DatePicker;
class ChannelStatistics extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns: [
                {
                    title: "编号",
                    dataIndex: "key",
                    key: "key",
                },
                {
                    title: "外联专员",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "当前客户总数",
                    dataIndex: "counts",
                    key: "counts",
                    className:'content',
                    render: (text, record, index) => {
                        return (
                            
{
                                this.tableRowClick(1,record);
                            }}>
                                {text}
                            
                        )
                    }
                },
                {
                    title: "释放客数",
                    dataIndex: "common",
                    key: "common",
                    className:'content',
                    render: (text, record, index) => {
                        return (
                            {
                                this.tableRowClick(4,record);
                            }}>
                                {text}
                            
                        )
                    }
                },
                {
                    title: "未分配数",
                    dataIndex: "unallocated",
                    key: "unallocated",
                    className:'content',
                    render: (text, record, index) => {
                        return (
                            {
                                this.tableRowClick(5,record);
                            }}>
                                {text}
                            
                        )
                    }
                },
                {
                    title: "已分配数",
                    dataIndex: "allocated",
                    key: "allocated",
                    className:'content',
                    render: (text, record, index) => {
                        return (
                            {
                                this.tableRowClick(6,record);
                            }}>
                                {text}
                            
                        )
                    }
                },
                {
                    title: "已签单数",
                    dataIndex: "sign",
                    key: "sign",
                    className:'content',
                    render: (text, record, index) => {
                        return (
                            {
                                this.tableRowClick(7,record);
                            }}>
                                {text}
                            
                        )
                    }
                },
            ],
            changeList:[],
            dataSource:[],
            detailsType:'',// 0营销员 1外联专员 2营销总监 3营销经理 4释放 5未分配 6已分配 7已签单
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return "共" + total + "条数据";
                },
            },
            pageNo:1,
            listLoading:false,
            releaseDate:[],
            visible: false,
        }
        this.tableRowClick = this.tableRowClick.bind(this);
        this.loadData = this.loadData.bind(this);
        this.search = this.search.bind(this);
        this.reset = this.reset.bind(this);
        this.changeList = this.changeList.bind(this);
        this.onCancel = this.onCancel.bind(this);
    }
    componentDidMount() {
        this.loadData();
    }
    loadData(pageNo = 1) {
        this.setState({
            listLoading: true,
            selectedRows: [],
            selectedRowKeys: [],
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/customer/listChannelCounts',
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                startTime: this.state.releaseDate[0],
                endTime: this.state.releaseDate[1],
            },
            success: function (data) {
                ShowModal(this);
                let theArr = [];
                if (data.error.length > 0) {
                    message.warning(data.error[0].message);
                } else {
                    if(data.data.list.length === 0 && pageNo !== 1){
                        this.loadData(pageNo - 1)
                    }else{
                        for (let i = 0; i < data.data.list.length; i++) {
                            let thisdata = data.data.list[i];
                            thisdata.key = (pageNo - 1) * 10 + i + 1;
                            theArr.push(thisdata);
                        }
                        this.state.pagination.current = data.data.pageNo;
                        this.state.pagination.total = data.data.totalCount;
                        this.setState({
                            pageNo: data.data.pageNo,
                            dataSource: theArr,
                            pagination: this.state.pagination,
                        })
                    }
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    listLoading: false,
                });
            }.bind(this)
        );
    }
    search(){
        this.loadData();
    }
    reset(){
        this.setState({
            releaseDate:[],
        },()=>{
            this.loadData();
        })
    }
    onCancel(){
        this.setState({
            aid:'',
            visible: false,
            detailsType:'',
        })
    }
    changeList(arr) {
        const newArr = [];
        this.state.columns.forEach(item => {
            arr.forEach(val => {
                if (val === item.title) {
                    newArr.push(item);
                }
            });
        });
        this.setState({
            changeList: newArr
        });
    }
    tableRowClick(type,record) {
        this.setState({
            visible: true,
            aid:record.aid,
            detailsType:type,
            aName:record.name,
        })
    }
    render() {
        return (
            
                
                
                    外联客户统计
                
                
                    
                        
                             {
                                    this.setState({ releaseDate: dataString });
                                }}
                            />
                            
                            
                        
                        
                            
                                
                            
                        
                    
                 
                
                
             
        )
    }
}
export default ChannelStatistics;