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 (
                            <div className='item' onClick={()=>{
                                this.tableRowClick(1,record);
                            }}>
                                {text}
                            </div>
                        )
                    }
                },
                {
                    title: "释放客数",
                    dataIndex: "common",
                    key: "common",
                    className:'content',
                    render: (text, record, index) => {
                        return (
                            <div className='item' onClick={()=>{
                                this.tableRowClick(4,record);
                            }}>
                                {text}
                            </div>
                        )
                    }
                },
                {
                    title: "未分配数",
                    dataIndex: "unallocated",
                    key: "unallocated",
                    className:'content',
                    render: (text, record, index) => {
                        return (
                            <div className='item' onClick={()=>{
                                this.tableRowClick(5,record);
                            }}>
                                {text}
                            </div>
                        )
                    }
                },
                {
                    title: "已分配数",
                    dataIndex: "allocated",
                    key: "allocated",
                    className:'content',
                    render: (text, record, index) => {
                        return (
                            <div className='item' onClick={()=>{
                                this.tableRowClick(6,record);
                            }}>
                                {text}
                            </div>
                        )
                    }
                },
                {
                    title: "已签单数",
                    dataIndex: "sign",
                    key: "sign",
                    className:'content',
                    render: (text, record, index) => {
                        return (
                            <div className='item' onClick={()=>{
                                this.tableRowClick(7,record);
                            }}>
                                {text}
                            </div>
                        )
                    }
                },
            ],
            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 (
            <div className="user-content">
                <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
                <div className="content-title" style={{ marginBottom: 10 }}>
                    <span style={{ fontWeight: 900, fontSize: 16 }}>外联客户统计</span>
                </div>
                <div className="user-search">
                    <Tabs
                        defaultActiveKey="1"
                        className="test"
                    >
                        <TabPane tab="搜索" key="1" style={{paddingTop:'10px'}}>
                            <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
                                type="primary"
                                style={{ marginLeft: "10px", marginRight: 10 }}
                                onClick={this.search}
                            >
                                搜索
                            </Button>
                            <Button onClick={this.reset}>重置</Button>
                        </TabPane>
                        <TabPane tab="更改表格显示数据" key="3">
                            <div style={{ marginLeft: 10 }}>
                                <ChooseList
                                    columns={this.state.columns}
                                    changeFn={this.changeList}
                                    changeList={this.state.changeList}
                                    top={55}
                                    margin={11}
                                />
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
                <div className="patent-table">
                    <Spin spinning={this.state.listLoading}>
                        <Table
                            size="middle"
                            className={'intentionCustomerTable'}
                            columns={
                                this.state.changeList.length !== 0
                                    ? this.state.changeList
                                    : this.state.columns
                            }
                            dataSource={this.state.dataSource}
                            pagination={this.state.pagination}
                        />
                    </Spin>
                </div>
                <StatisticalDetails
                    visible={this.state.visible}
                    onCancel={this.onCancel}
                    aid={this.state.aid}
                    type={this.state.detailsType}
                    aName={this.state.aName}
                />
            </div>
        )
    }
}

export default ChannelStatistics;