import React,{Component} from 'react';
import {
    AutoComplete,
    Button,
    Cascader,
    DatePicker, Form,
    Icon,
    Input,
    message,
    Modal,
    Select,
    Spin,
    Table,
    Tabs,
    Tag
} from "antd";
import { citySelect, provinceList } from '@/NewDicProvinceList';
import {getSocialAttribute, beforeUploadFile, getLevel, ShowModal} from "@/tools.js";
import moment from "moment";
import $ from "jquery/src/ajax";
import IntentionDetail from "../../NEW/intentionCustomer/intentionDetail/intentionDetail";

const {TabPane} = Tabs;
const { RangePicker } = DatePicker;

class DepartmentStatistics extends Component{
    constructor(props) {
        super(props);
        this.state={
            releaseDate: [],
            superId:'',
            nameSearch: '',

            columns: [
                {
                    title: "部门",
                    dataIndex: "name",
                    key: "name",
                    width: '40%',
                },
                {
                    title: "客户总数",
                    dataIndex: "userCount",
                    key: "userCount",
                    render: (text, record) => {
                        return (
                            <div style={{cursor:"pointer"}} onClick={(e)=>{
                                e.stopPropagation();
                            }}>
                                {text}
                            </div>
                        );
                    },
                },
                {
                    title: "成交客户总数",
                    dataIndex: "completeCount",
                    key: "completeCount",
                    render: (text, record) => {
                        return (
                            <div style={{cursor:"pointer"}} onClick={(e)=>{
                                e.stopPropagation();
                            }}>
                                {text}
                            </div>
                        );
                    },
                },
                {
                    title: "新增客户数",
                    dataIndex: "inputCount",
                    key: "inputCount",
                    render: (text, record) => {
                        return (
                            <div style={{cursor:"pointer"}} onClick={(e)=>{
                                e.stopPropagation();
                            }}>
                                {text}
                            </div>
                        );
                    },
                },
                {
                    title: "新增面谈数",
                    dataIndex: "interviewCount",
                    key: "interviewCount",
                    render: (text, record) => {
                        return (
                            <div style={{cursor:"pointer"}} onClick={(e)=>{
                                e.stopPropagation();
                            }}>
                                {text}
                            </div>
                        );
                    },
                },
                {
                    title: "新增领取客户数",
                    dataIndex: "receiveCount",
                    key: "receiveCount",
                    render: (text, record) => {
                        return (
                            <div
                                className={'receiveCount'}
                                style={{cursor:record.aid ? "pointer" : "default"}}
                                onClick={(e)=>{
                                    if(record.aid){
                                        e.stopPropagation();
                                    }
                                }}>
                                {text}
                            </div>
                        );
                    },
                },
            ],
            contactsOption:null,
            loading: false,
            ispage: 1,
        };
        this.loadData = this.loadData.bind(this);
        this.reset = this.reset.bind(this);
        this.selectSuperId = this.selectSuperId.bind(this);
    }

    componentDidMount() {
        this.loadData();
        this.selectSuperId();
    }

    loadData(pageNo) {
        this.setState({
            loading: true,
        });
        let api = '/api/admin/customer/selectAllUser';
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + api,
            data: {},
            success: function (data) {
                let theArr = [];
                if (data.error.length !== 0) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    data.data.children = data.data.list;
                    theArr.push(data.data);
                    theArr = this.handleTabsInfor(theArr.concat(data.data.aList));
                    console.log(theArr,'表格数据')
                    this.setState({
                        ispage: data.data.pageNo,
                        dataSource: theArr,
                    });
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    };

    //表格数据处理
    handleTabsInfor(infor){
        for(let i=0;i<infor.length;i++){
            if(!infor[i].key){
                infor[i].key = infor[i].id ? infor[i].id : (infor[i].aid ? infor[i].aid : i)
            }
            if(infor[i].children){
                for(let c=0;c<infor[i].children.length;c++){
                    infor[i].children[c].key = infor[i].children[c].id;
                    infor[i].children[c].children = infor[i].children[c].list;
                    if(infor[i].children[c].aList && Array.isArray(infor[i].children[c].aList) && infor[i].children[c].aList.length){
                        if(infor[i].children[c].children && Array.isArray(infor[i].children[c].children)){
                            for(let t of infor[i].children[c].aList){
                                t.key = t.aid;
                                t.name = t.aName;
                            }
                            infor[i].children[c].children = infor[i].children[c].children.concat(infor[i].children[c].aList);
                        }
                    }
                    this.handleTabsInfor(infor[i].children);
                }
            }
        }
        return infor;
    }

    reset(){
        this.setState({
            releaseDate: [],
            superId:'',
            nameSearch: '',
        },()=>{
            this.loadData();
        });
    };

    //获取上级组织
    selectSuperId() {
        this.state.data = []
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/organization/selectSuperId",
            data:{},
            success: function (data) {
                let theArr = [];
                let theId=[];//用于保存上级组织的ID和名称
                let thedata=data.data;
                if (!thedata) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                    thedata = {};
                };
                for(var i=0;i<data.data.length;i++){
                    let theData = data.data[i];
                    theArr.push(
                        <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
                    );
                    theId.push(
                        [theData.id,theData.name]
                    );
                };
                this.setState({
                    SuperArr:thedata,
                    contactsOption: theArr,
                    theId: theId,
                    orderStatusOptions:data.data,
                });

            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    render() {
        return(
            <div className="user-content">
                <div className="content-title">
                    <span>指导意见</span>
                </div>
                <div className="user-search" style={{display:'flex',alignItems:'center'}}>
                    <RangePicker
                        style={{
                            marginTop: '10px',
                        }}
                        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 });
                        }}
                    />
                    <div>
                        <Select placeholder="请选择部门"
                                style={{ width:200,marginLeft:10}}
                                value={this.state.superId}
                                onChange={(e) => { this.setState({ superId: e }) }} notFoundContent="未获取到上级组织列表">
                            {this.state.contactsOption}
                        </Select>
                    </div>
                    <Input
                        placeholder="客户名称"
                        value={this.state.nameSearch}
                        style={{ width: 150, marginRight: 10, marginLeft: 10 }}
                        onChange={(e) => {
                            this.setState({ nameSearch: e.target.value });
                        }}
                    />
                    <Button
                        type="primary"
                        style={{ marginLeft: "10px", marginRight: 10 }}
                        onClick={()=>{
                            this.loadData();
                        }}
                    >
                        搜索
                    </Button>
                    <Button onClick={this.reset}>重置</Button>
                </div>
                <div className="patent-table">
                    <Spin spinning={this.state.loading}>
                        <Table
                            columns={this.state.columns}
                            dataSource={this.state.dataSource}
                            pagination={false}
                        />
                    </Spin>
                </div>
            </div>
        )
    }
}

export default DepartmentStatistics;