import React,{ Component } from 'react';
import {
    AutoComplete,
    Button,
    DatePicker,
    Input,
    message,
    Modal,
    Select,
    Spin,
    Table,
    Tabs,
    Tag,
    Form,
    Upload, Tooltip
} from "antd";
import {ShowModal,splitUrl,getClockState} from "@/tools";
import {clockState} from "@/dataDic";
import {ChooseList} from "../../../order/orderNew/chooseList";
import $ from "jquery/src/ajax";
import './index.less';
import moment from "moment";
import ImgList from "../../../../common/imgList";
import TabelContent from "../../../../common/tabelContent";


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

class DetailedList extends Component{
    constructor(props) {
        super(props);
        this.state={
            pageNo:1,
            loading:false,
            changeList:[],
            annexUrlArr:[],
            photoUrlArr:[],
            imgListVisible:false,
            columns: [
                {
                    title: "编号",
                    dataIndex: "key",
                    key: "key",
                },
                {
                    title: "客户名称",
                    dataIndex: "nickname",
                    key: "nickname",
                    width: 150,
                    onCellClick :(record, event)=>{
                        event.stopPropagation();
                        this.setState({
                            status:2,
                            visible1:true,
                            aid:record.aid
                        })
                    },
                    render: (text) => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    maxWidth:'150px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    },
                },
                {
                    title: "公出申请人",
                    dataIndex: "aname",
                    key: "aname",
                },
                {
                    title: "申请时间",
                    dataIndex: "createTimes",
                    key: "createTimes",
                },
                {
                    title: "公出时间",
                    dataIndex: "releaseStarts",
                    key: "releaseStarts",
                    render: (text, record) => (
                        text+'至'+record.releaseEnds
                    )
                },
                {
                    title: "公出地点",
                    dataIndex: "userName",
                    key: "userName",
                    width: 120,
                    render: (text) => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    maxWidth:'120px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    },
                },
                {
                    title: "公出时长(时)",
                    dataIndex: "duration",
                    key: "duration",
                },
                {
                    title: "打卡时间",
                    dataIndex: "clockInTimes",
                    key: "clockInTimes",
                },
                {
                    title: "审核状态",
                    dataIndex: "status",
                    key: "status",
                    render: (text) => (
                        <Tag color={getClockState(text).color}>{getClockState(text).title}</Tag>
                    )
                },
                {
                    title: "打卡状态",
                    dataIndex: "clockIn",
                    key: "clockIn",
                    render: (text) => (
                        text === 1 ? '已打卡' :
                            text === 0 ? '未打卡' : ''
                    )
                },
                {
                    title: "操作",
                    dataIndex: "annexUrl",
                    key: "annexUrl",
                    render: (text,record) => (
                        <div>
                            <Button
                                style={{marginRight:'15px'}}
                                type={"primary"}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    let arr1 = text || [];
                                    let arr2 = record.photoUrl || [];
                                    this.setState({
                                        annexUrlArr:splitUrl(arr1, ",", globalConfig.avatarHost + "/upload"),
                                        photoUrlArr:splitUrl(arr2, ",", globalConfig.avatarHost + "/upload"),
                                    },()=>{
                                        this.setState({
                                            imgListVisible:true
                                        })
                                    })
                                }}
                            >
                                查看公出附件
                            </Button>
                        </div>
                    )
                },
            ],
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function(page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function(total) {
                    return "共" + total + "条数据";
                }
            },
            dataSource: [],

            releaseDate:[],
            status:props.status,
            clockIn:props.clockIn,
            theTypes:props.aid,
            theCustomerTypes:undefined,
        }
        this.loadData = this.loadData.bind(this);
        this.resetAll = this.resetAll.bind(this);
        this.changeList = this.changeList.bind(this);
        this.selectSuperId = this.selectSuperId.bind(this);
        this.supervisor = this.supervisor.bind(this);
        this.httpChange = this.httpChange.bind(this);
        this.blurChange = this.blurChange.bind(this);
        this.selectAuto = this.selectAuto.bind(this);
        this.getCustomer = this.getCustomer.bind(this);
        this.selectCustomerAuto = this.selectCustomerAuto.bind(this);
        this.httpCustomerChange = this.httpCustomerChange.bind(this);
        this.blurCustomerChange = this.blurCustomerChange.bind(this);
        this.exportExec = this.exportExec.bind(this);
    }

    //获取上级组织
    selectSuperId() {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/organization/selectSuperId",
            data:{},
            success: function (data) {
                let theArr = [];
                if (data.error && data.error.length === 0) {
                    for(let 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>
                        );
                    };
                    this.setState({
                        contactsOption: theArr,
                    });
                }else{
                    message.warning(data.error[0].message);
                }
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    changeList(arr) {
        const newArr = [];
        this.state.columns.forEach(item => {
            arr.forEach(val => {
                if (val === item.title) {
                    newArr.push(item);
                }
            });
        });
        this.setState({
            changeList: newArr
        });
    }

    loadData(pageNo) {
        this.setState({
            loading:true
        })
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/release/publicReleaseDtails",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                releaseStart:this.state.releaseDate[0] || undefined,
                releaseEnd:this.state.releaseDate[1] || undefined,
                aid:this.state.theTypes,
                uid:this.state.theCustomerTypes,
                status:this.state.status,
                clockIn:this.state.clockIn,
            },
            success: function(data) {
                ShowModal(this);
                let theArr = [];
                this.setState({
                    loading:false
                })
                if (data.error && data.error.length === 0) {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
                        theArr.push(thisdata);
                    }
                    this.state.pagination.current = data.data.pageNo;
                    this.state.pagination.total = data.data.totalCount;
                    if (data.data && data.data.list && !data.data.list.length) {
                        this.state.pagination.current = 0;
                        this.state.pagination.total = 0;
                    }
                    this.setState({
                        dataSource: theArr,
                        pagination: this.state.pagination,
                        pageNo:data.data.pageNo
                    });
                }else{
                    message.warning(data.error[0].message);
                }
            }.bind(this)
        }).always(
            function() {
                this.setState({
                    loading: false
                });
            }.bind(this)
        );
    }

    resetAll() {
        this.setState({
            releaseDate:[],
            theCustomerTypes:undefined,
            status:this.props.status,
            clockIn:this.props.clockIn,
            auto:'',
            customer:''
        },()=>{
            this.loadData();
        })
    }

    supervisor(e) {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/customer/listAdminByName",
            data: {
                adminName: e,
            },
            success: function (data) {
                if (data.error && data.error.length === 0) {
                    this.setState({
                        customerArr: data.data,
                    });
                }else{
                    message.warning(data.error[0].message);
                }
            }.bind(this),
        }).always(
            function () {

            }.bind(this)
        );
    }

    httpChange(e) {
        if (e.length >= 1) {
            this.supervisor(e);
        }
        this.setState({
            auto: e,
        });
    }

    selectAuto(value, options) {
        this.setState({
            auto: value,
        });
    }

    httpCustomerChange(e) {
        if (e.length >= 1) {
            this.getCustomer(e);
        }
        this.setState({
            customer: e,
        });
    }

    selectCustomerAuto(value, options) {
        this.setState({
            customer: value,
        });
    }

    getCustomer(e) {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/customer/getUserByName",
            data: {
                name: e,
            },
            success: function (data) {
                if (data.error && data.error.length === 0) {
                    this.setState({
                        customerList: data.data,
                    });
                }else{
                    message.warning(data.error[0].message);
                }
            }.bind(this),
        }).always(
            function () {

            }.bind(this)
        );
    }

    blurCustomerChange(e) {
        let theType = "";
        let contactLists = this.state.customerList || [];
        if (e) {
            contactLists.map(function (item) {
                if (item.name == e.toString()) {
                    theType = item.id;
                }
            });
        }
        this.setState({
            theCustomerTypes: theType,
        });
    }

    blurChange(e) {
        let theType = "";
        let contactLists = this.state.customerArr || [];
        if (e) {
            contactLists.map(function (item) {
                if (item.name == e.toString()) {
                    theType = item.id;
                }
            });
        }
        this.setState({
            theTypes: theType,
        });
    }

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

    exportExec(){
        let data = {
            releaseStart:this.state.releaseDate[0],
            releaseEnd:this.state.releaseDate[1],
            aid:this.state.theTypes,
            uid:this.state.theCustomerTypes,
            status:this.state.status,
            clockIn:this.state.clockIn,
        };
        for(let i of Object.keys(data)){
            if(i === 'status' || i === 'clockIn'){
                if(isNaN(parseInt(data[i]))){
                    delete data[i]
                }
            }else if(!data[i]){
                delete data[i]
            }

        }
        window.location.href =
            globalConfig.context +
            "/api/admin/release/publicReleaseDtails/export?" +
            $.param(data);
    }

    render() {
        const dataSources = this.state.customerArr || [];
        const options = dataSources.map((group) => (
            <Select.Option key={group.id} value={group.name}>
                {group.name}
            </Select.Option>
        ));
        const customerList = this.state.customerList || [];
        const customerOptions = customerList.map((group) => (
            <Select.Option key={group.id} value={group.name}>
                {group.name}
            </Select.Option>
        ));
        return (
            <div>
                <Modal
                    maskClosable={false}
                    visible={this.props.visible}
                    onOk={this.props.onCancel}
                    onCancel={this.props.onCancel}
                    width='1200px'
                    title='内蒙签单统计表'
                    footer=''
                    className="admin-desc-content">
                    <div className="user-content">
                        <TabelContent
                            searchList={this.props.searchList}
                            columns={this.state.columns}
                            tabelApi={'/api/admin/release/publicReleaseDtails'}
                            exportApi={'/api/admin/release/publicReleaseDtails/export'}
                            dataProcessing={(data)=>{
                                let theArr = [];
                                for (let i = 0; i < data.data.list.length; i++) {
                                    let thisdata = data.data.list[i];
                                    thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
                                    theArr.push(thisdata);
                                }
                                return theArr;
                            }}
                        />
                    </div>
                    <Modal
                        maskClosable={false}
                        visible={this.state.visible1}
                        onOk={()=>{
                            this.setState({
                                visible1:false
                            })
                        }}
                        onCancel={()=>{
                            this.setState({
                                visible1:false
                            })
                        }}
                        width='1200px'
                        title='部门订单'
                        footer=''
                        className="admin-desc-content">
                        <div className="user-content">
                            <TabelContent
                                columns={this.state.columns}
                                tabelApi={'/api/admin/release/publicReleaseDtails'}
                                exportApi={'/api/admin/release/publicReleaseDtails/export'}
                                dataProcessing={(data)=>{
                                    let theArr = [];
                                    for (let i = 0; i < data.data.list.length; i++) {
                                        let thisdata = data.data.list[i];
                                        thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
                                        theArr.push(thisdata);
                                    }
                                    return theArr;
                                }}
                            />
                        </div>
                    </Modal>
                </Modal>
            </div>
        )
    }
}

export default DetailedList;
