import React,{ Component } from 'react';
import {
    Button,
    Modal, Select, Tag,
    Tooltip,
} from "antd";
import './index.less';
import TabelContent from "../../../../common/tabelContent";
import {splitUrl,getClockState} from "@/tools";
import ImgList from "../../../../common/imgList";

class DetailedList extends Component{
    constructor(props) {
        super(props);
        this.state= {
            columns: [
                {
                    title: "编号",
                    dataIndex: "key",
                    key: "key",
                },
                {
                    title: "面谈部门",
                    dataIndex: "depName",
                    key: "depName",
                },
                {
                    title: "客户类型",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "面谈客户",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "面谈数",
                    dataIndex: "quantity",
                    key: "quantity",
                    className: 'projectTable',
                    width: 150,
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        this.setState({
                            visible1: true,
                            aid: record.aid
                        })
                    },
                },
                {
                    title: "签单数",
                    dataIndex: "total",
                    key: "total",
                    className: 'projectTable',
                    width: 150,
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        this.setState({
                            visible2: true,
                            aid: record.aid
                        })
                    },
                },
            ],
            columns1: [
                {
                    title: "编号",
                    dataIndex: "key",
                    key: "key",
                    width: 45
                },
                {
                    title: "客户名称",
                    dataIndex: "nickname",
                    key: "nickname",
                    width: 140,
                    render: (text) => {
                        return (
                            <div style={{
                                width:140,
                                wordBreak:'break-all',
                            }}>{text}</div>
                        )
                    },
                },
                {
                    title: "跟单人",
                    dataIndex: "sname",
                    key: "sname",
                    width: 100,
                    render: (text) => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    width:100,
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    },
                },
                {
                    title: "公出申请人",
                    dataIndex: "aname",
                    key: "aname",
                    width: 100,
                    render: (text) => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    width:100,
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    },
                },
                {
                    title: "申请时间",
                    dataIndex: "createTimes",
                    key: "createTimes",
                    width: 130
                },
                {
                    title: "公出时间",
                    dataIndex: "releaseStarts",
                    key: "releaseStarts",
                    width: 130,
                    render: (text, record) => (
                        <div>
                            <div>{text}</div>
                            <div style={{paddingLeft:'44px'}}>至</div>
                            <div>{record.releaseEnds}</div>
                        </div>
                    )
                },
                {
                    title: "公出地点",
                    dataIndex: "userName",
                    key: "userName",
                    width: 120,
                    render: (text) => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    width:120,
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    },
                },
                {
                    title: "公出时长(时)",
                    dataIndex: "duration",
                    key: "duration",
                    width: 50
                },
                {
                    title: "打卡时间",
                    dataIndex: "clockInTimes",
                    key: "clockInTimes",
                    width: 130
                },
                {
                    title: "审核状态",
                    dataIndex: "status",
                    key: "status",
                    width: 40,
                    render: (text) => (
                        <Tag color={getClockState(text).color}>{getClockState(text).title}</Tag>
                    )
                },
                {
                    title: "打卡状态",
                    dataIndex: "clockIn",
                    key: "clockIn",
                    width: 60,
                    render: (text) => (
                        text === 1 ? '已打卡' :
                            text === 0 ? '未打卡' : ''
                    )
                },
                {
                    title: "公出原因/计划",
                    dataIndex: "remarks",
                    key: "remarks",
                    width: 155,
                    render: (text) => {
                        return (<div style={{wordBreak:"break-all"}}>{text}</div>)
                    },
                },
                {
                    title: "补充",
                    dataIndex: "supplement",
                    key: "supplement",
                    width: 155,
                    render: (text) => {
                        return (<div style={{wordBreak:"break-all"}}>{text}</div>)
                    },
                },
                {
                    title: "审核/指导",
                    dataIndex: "auditInfo",
                    key: "auditInfo",
                    width: 155,
                    render: (text) => {
                        return (<div style={{wordBreak:"break-all"}}>{text}</div>)
                    },
                },
                {
                    title: "操作",
                    dataIndex: "annexUrl",
                    key: "annexUrl",
                    render: (text,record) => (
                        <div>
                            <Button
                                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>
                    )
                },
            ],
        }
    }

    searchList(){
        let arr = [
            {
                type:'departmentSelect',
                dataKey:'depId',
                placeholder:'请选择部门'
            },
            {
                type:'select',
                dataKey:'province',
                placeholder:'请选择省份',
                selectOptionList:()=>{
                    let Province = [];
                    provinceList.map(function(item) {
                        let id = String(item.id)
                        Province.push(
                            <Select.Option value={id} key={item.name}>{item.name}</Select.Option>
                        )
                    });
                    return Province
                },
            },
            //0 总数量 1总金额 2总面谈
            {
                type:'select',
                dataKey:'sort',
                placeholder:'请选择排序',
                selectList:[
                    {
                        value:'0',
                        label:'按总数量排序'
                    },
                    {
                        value:'1',
                        label:'按总金额排序'
                    },
                    {
                        value:'2',
                        label:'按总面谈排序'
                    },
                ]
            },
            {
                type:'times',
                title:'公出时间',
                dataKey:'date',
                format: 'YYYY/MM'
            },
        ]
        return arr;
    }

    searchList1(){
        let arr = [
            {
                type:'autoComplete',
                dataKey:'orderNo',
                api:'/api/admin/customer/listAdminByName',
                search:'adminName',
                placeholder:'请输入客户名称'
            },
            {
                type:'text',
                dataKey:'name',
                placeholder:'请输入客户名称'
            },
            {
                type:'departmentSelect',
                dataKey:'depId',
                placeholder:'请选择部门'
            },
            {
                type:'text',
                dataKey:'contractNo',
                placeholder:'请输入合同编号'
            },
            {
                type:'select',
                dataKey:'liquidationStatus',
                placeholder:'请选择结算状态',
                selectList:[
                    {
                        value:'0',
                        label:'首付待付请'
                    },
                    {
                        value:'1',
                        label:'尾款待付清'
                    },
                    {
                        value:'2',
                        label:'已付清'
                    }
                ]
            },
            {
                type:'select',
                dataKey:'approval',
                placeholder:'请选择特批状态',
                selectList:[
                    {
                        value:'0',
                        label:'非特批'
                    },
                    {
                        value:'1',
                        label:'特批'
                    }
                ]
            },
            {
                type:'select',
                dataKey:'amountStatus',
                placeholder:'请选择签单金额',
                selectList:[
                    {
                        value:'0',
                        label:'10万元以下'
                    },
                    {
                        value:'1',
                        label:'10~20万元'
                    },
                    {
                        value:'2',
                        label:'20~30万元'
                    },
                    {
                        value:'3',
                        label:'30~40万元'
                    },
                    {
                        value:'4',
                        label:'40万元以上'
                    },
                ]
            },
            {
                type:'times',
                title:'下单时间',
                dataKey:['starTime','endTime'],
            },
        ]
        return arr;
    }

    render() {
        return (
            <div>
                <Modal
                    maskClosable={false}
                    visible={this.props.visible}
                    onOk={this.props.onCancel}
                    onCancel={this.props.onCancel}
                    width='1200px'
                    title={this.props.recordInfor.province + '面谈表'}
                    footer=''
                    className="admin-desc-content">
                    <div className="user-content">
                        <TabelContent
                            searchList={this.searchList()}
                            columns={this.state.columns}
                            tabelApi={'/api/admin/provinceFollowStatisticsList'}
                            exportApi={'/api/admin/provinceFollowStatisticsListExprot'}
                            query={{
                                province:this.props.recordInfor.id,
                            }}
                            dataProcessing={(data)=>{
                                let theArr = [];
                                for (let i = 0; i < data.data.length; i++) {
                                    let thisdata = data.data[i];
                                    thisdata.key=i + 1;
                                    theArr.push(thisdata);
                                }
                                return theArr;
                            }}
                        />
                    </div>
                    {this.state.visible1 && <Modal
                        maskClosable={false}
                        visible={this.state.visible1}
                        onOk={()=>{
                            this.setState({
                                visible1:false
                            })
                        }}
                        onCancel={()=>{
                            this.setState({
                                visible1:false
                            })
                        }}
                        width='1600px'
                        title='公出详细列表'
                        footer=''
                        className="admin-desc-content">
                        <div className="user-content">
                            <TabelContent
                                searchList={this.searchList1()}
                                columns={this.state.columns1}
                                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>

                {this.state.imgListVisible ? <Modal
                    maskClosable={false}
                    visible={this.state.imgListVisible}
                    onOk={()=>{this.setState({
                        imgListVisible:false
                    })}}
                    onCancel={()=>{this.setState({
                        imgListVisible:false
                    })}}
                    width='500px'
                    title='图片'
                    footer=''>
                    <div>
                        <div>申请附件</div>
                        <ImgList fileList={this.state.annexUrlArr} domId='publicStatistics'/>
                        <div style={{paddingTop:'35px'}}>打卡照片</div>
                        <ImgList fileList={this.state.photoUrlArr} domId='publicStatistics1'/>
                    </div>
                </Modal> : null}
            </div>
        )
    }
}

export default DetailedList;
