import React, { useEffect, useState, useRef, useMemo } from 'react';
import { connect } from 'react-redux';
import { Table, Button, Pagination, Skeleton, Form, Tooltip, Banner } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';
import { SkeletonScreen } from "$components";
import '../style.less'
import { Setup } from "$components";
import moment from 'moment'
import { getServiceUrl } from '../actions/service';

const SaleLog = (props) => {
    const { dispatch, actions, history, user, loading, socket } = props;

    const form = useRef();//表单

    const [setup, setSetup] = useState(false);//表格设置是否显现
    const [setupp, setSetupp] = useState([]);//实际显示的表格列表
    const [lookup, setLookup] = useState({});//搜索
    const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
    const [order, setOrder] = useState({ orderBy: 'hiredate', orderDirection: 'DESC' }); //页码信息
    const [limits, setLimits] = useState(0)//每页实际条数
    const [downloadUrl, setDownloadUrl] = useState('')//下载pdf;
    const [warningBanner, setWarningBanner] = useState(null);
    const SALESLOG = "salesLog";
    const page = useRef(query.page);//哪一页

    let btnDisable = false;
    const tableList = [//表格属性
        {
            title: '基础信息',
            list: [
                { name: "姓名", value: "userName" },
                { name: "所属部门", value: "departmrnt" },
                { name: "职位", value: "roleName" },
                { name: "当前日期内需提交次数", value: "idNumber" },
                { name: "实际次数", value: "number" },
                { name: "异常次数", value: "ycNumber" },
                { name: "操作", value: "action" }
            ]
        }
    ];
    useEffect(() => {
        localStorage.getItem(SALESLOG) == null
            ? localStorage.setItem(
                SALESLOG,
                JSON.stringify(['userName', 'departmrnt', 'roleName', 'idNumber', 'number', 'ycNumber', 'action'])
            )
            : "";
        attribute();
    }, [])

    useEffect(() => {
        if (form && form.current && form.current.setValue) {
            form.current.setValue("weeklyRange", [moment().startOf('isoWeek').format('YYYY-MM-DD'), moment().endOf('isoWeek').format('YYYY-MM-DD')])
        }
    }, [])

    const columns = [
        {
            title: (
                <span>
                    <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 员工编号
                </span>
            ),
            width: 200,
            dataIndex: "userCode",
            key: "userCode",
            sorter: (a, b) => { },
            // sorter: (a, b) => a.name.length - b.name.length > 0 ? 1 : -1,
            render: (_, r, index) => {
                return (r.userCode ? r.userCode : '-');
            },
        },
    ];
    //获取表格属性设置
    function attribute() {
        const arr = localStorage.getItem(SALESLOG)
            ? JSON.parse(localStorage.getItem(SALESLOG))
            : [];

        const column = [
            {
                title: (
                    <div>
                        <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 姓名
                    </div>
                ),
                dataIndex: "userName",
                key: "userName",
                render: (_, r, index) => {
                    return (r.userName ? r.userName : '-');
                },
            }, {
                title: (
                    <div>
                        <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 所属部门
                    </div>
                ),
                dataIndex: "departmrnt",
                key: "departmrnt",
                render: (_, r, index) => {
                    return (
                        <div style={{ display: 'flex' }}>
                            {
                                r.departmrnt.map((ite, idx) => {
                                    let departmentsArr = []
                                    for (let i = 0; i < r.departmrnt.length; i++) {
                                        departmentsArr.push(r.departmrnt[i].name)
                                    }
                                    return (
                                        <div key={idx} style={{ display: 'flex' }}>
                                            {idx == 0 ?
                                                (<div style={{ padding: '0px 4px 1px 4px ', color: '#FFFFFF', fontSize: 12, background: 'rgba(0,90,189,0.8)', borderRadius: 2, marginRight: 4 }}>
                                                    {ite.name}
                                                </div>) : ('')

                                            }
                                            {
                                                r.departmrnt.length > 1 && idx == 1 ? (
                                                    <Tooltip content={departmentsArr.join(',')} trigger="click" style={{ lineHeight: 2 }}>
                                                        <div style={{ padding: '0px 4px 1px 4px ', color: 'rgba(0,90,189,0.8)', fontSize: 12, marginRight: 4, cursor: "pointer", }}>
                                                            +{r.departmrnt.length - 1}
                                                        </div>
                                                    </Tooltip>
                                                ) : ('')
                                            }
                                        </div>
                                    )
                                })
                            }
                        </div>
                    )
                },
            }, {
                title: (
                    <div>
                        <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 职位
                    </div>
                ),
                dataIndex: "roleName",
                key: "roleName",
                render: (_, r, index) => {
                    return (
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            {
                                r.role.map((ite, idx) => {
                                    let roleArr = []
                                    for (let i = 0; i < r.role.length; i++) {
                                        roleArr.push(r.role[i].name)
                                    }
                                    return (
                                        <div key={idx} style={{ display: 'flex', alignItems: 'center' }}>
                                            {idx == 0 ?
                                                (ite.name) : ('')
                                            }
                                            {
                                                r.role.length > 1 && idx == 1 ? (
                                                    <Tooltip content={roleArr.join(',')} trigger="click" style={{ lineHeight: 2 }}>
                                                        <div style={{ color: 'rgba(0,90,189,0.8)', fontSize: 12, marginRight: 4, cursor: "pointer", }}>
                                                            +{r.role.length - 1}
                                                        </div>
                                                    </Tooltip>
                                                ) : ('')
                                            }
                                        </div>
                                    )
                                })
                            }
                        </div>);
                },
            }, {
                title: '当前日期内需提交次数',
                dataIndex: "idNumber",
                key: "idNumber",
                render: (_, r, index) => {
                    return (r.idNumber ? r.idNumber : '-');
                },
            }, {
                title: '实际次数',
                dataIndex: "number",
                key: "number",
                render: (_, r, index) => {
                    return (r.number ? r.number : '-');
                },
            }, {
                title: '异常次数',
                dataIndex: "ycNumber",
                key: "ycNumber",
                render: (_, r, index) => {
                    return (r.ycNumber ? r.ycNumber : '-');
                },
            }, {
                title: '操作',
                dataIndex: "action",
                key: "action",
                render: (_, r, index) => {
                    return (r.vitae ? <a href={`/_file-server/${r.vitae}`} style={{ color: '#005ABD' }}>下载</a> : '-')
                },
            },
        ];
        for (let i = 0; i < arr.length; i++) {
            let colum = column.filter((item) => {
                return item.key === arr[i];
            });
            columns.splice(i + 2, 0, colum[0]);
        }
        setSetupp(columns);
    }
    function handleRow(record, index) {//斑马条纹
        // 给偶数行设置斑马纹
        if (index % 2 === 0) {
            return {
                style: {
                    background: '#FAFCFF',
                }
            };
        } else {
            return {};
        }
    }
    const scroll = useMemo(() => ({}), []);

    return (
        <>
            <div style={{ padding: '0px 12px' }}>
                <div style={{ display: 'flex' }}>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>人事管理</div>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14, margin: '0px 8px' }}>/</div>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>基本动作</div>
                    <div style={{ color: '#033C9A', fontSize: 14, margin: '0px 8px' }}>/</div>
                    <div style={{ color: '#033C9A', fontSize: 14 }}>销售日报</div>
                </div>
                <div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: '20px 0px 20px 19px ', marginTop: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div style={{ display: 'flex', alignItems: 'baseline' }}>
                            <div style={{ width: 0, height: 20, borderLeft: '3px solid #0F7EFB', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
                            <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>销售日报</div>
                            <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>SALES LOG</div>
                        </div>
                    </div>
                    <div style={{ marginRight: 20, marginTop: 18 }}>
                        <Form
                            labelPosition="left"
                            labelAlign="right"
                            labelWidth="80px"
                            getFormApi={(formApi) => (form.current = formApi)}
                        >
                            <div>
                                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        <Form.DatePicker
                                            label='查询时间:'
                                            field='weeklyRange' type="dateRange" density="compact" showClear style={{ width: 370, color: "#F9F9F9" }} />
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        <div style={{ width: 20, height: 20, cursor: "pointer", marginRight: 15 }}
                                        >

                                            {/* <img src="/assets/images/hrImg/export.png" alt="" style={{ width: '100%', height: '100%' }} /> */}
                                            {
                                                downloadUrl ? <iframe src={`/_api/${downloadUrl}`} style={{ display: 'none' }} /> : ''
                                            }
                                        </div>
                                        <img src="/assets/images/hrImg/newsetup.png" alt="" style={{ width: 20, height: 20, cursor: "pointer", marginRight: 15 }}
                                            onClick={() => setSetup(true)}
                                        />
                                        <Button theme='solid'
                                            type='primary'
                                            style={{ width: 80, borderRadius: 2, height: 32, background: '#DBECFF', color: '#005ABD' }}
                                            // disable={btnDisable}
                                            onClick={() => {
                                                const weeklyRange = form.current.getValue("weeklyRange");
                                                if (weeklyRange && weeklyRange.length == 2) {
                                                    dispatch(getServiceUrl()).then(res => {
                                                        const { payload } = res;
                                                        if (payload && payload.url) {

                                                            let url = `${payload.url}/week_report/week`;
                                                            if (weeklyRange && weeklyRange.length == 2) {
                                                                url += `?start=${moment(weeklyRange[0]).format('YYYY-MM-DD HH:mm:ss')}&end=${moment(weeklyRange[1]).format('YYYY-MM-DD HH:mm:ss')}&type=sale`
                                                            }
                                                            console.log(url);
                                                            setDownloadUrl(url);
                                                        } else {
                                                            setWarningBanner("导出地址有误,导出失败");
                                                        }
                                                    })
                                                } else {
                                                    setWarningBanner("请选择查询时间范围");
                                                }
                                            }}>导出</Button>
                                    </div>
                                </div>
                            </div>
                        </Form>
                        {
                            warningBanner &&
                            (<Banner
                                type="danger"
                                description={warningBanner}
                                onClose={() => setWarningBanner(null)}
                            />)}
                        <div style={{ border: '1px solid #C7E1FF', background: '#F4F8FF', borderRadius: 2, height: 32, width: 669, padding: '8px 0px 7px 12px', display: 'flex', alignItems: 'center', color: '#0F7EFB', fontSize: 12 }}>
                            <img src="/assets/images/hrImg/!.png" alt="" style={{ width: 14, height: 14, marginRight: 8 }} />
                            表格中带有认证标识"
                            <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} />
                            "信息的为系统基础数据，来源于项企PEP系统，不支持修改和导入变更
                        </div>
                        <div style={{ marginTop: 20 }}>
                            <Skeleton
                                // loading={loading}
                                loading={false}
                                active={true}
                                placeholder={SkeletonScreen()}
                            >
                                <Table
                                    columns={setupp.filter((s) => s)}
                                    dataSource={[]}
                                    bordered={false}
                                    empty="暂无数据"
                                    pagination={false}
                                    onRow={handleRow}
                                    scroll={scroll}
                                />
                            </Skeleton>
                            <div
                                style={{
                                    display: "flex",
                                    justifyContent: "space-between",
                                    padding: "20px 20px",
                                }}
                            >
                                <div>
                                </div>
                                <div style={{ display: 'flex', }}>
                                    <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
                                        共{limits}条信息
                                    </span>
                                    <Pagination
                                        className="22"
                                        total={limits}
                                        showSizeChanger
                                        currentPage={query.page + 1}
                                        pageSizeOpts={[10, 20, 30, 40]}
                                        onChange={(currentPage, pageSize) => {
                                            setQuery({ limit: pageSize, page: currentPage - 1 });
                                            page.current = currentPage - 1
                                        }}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {setup ? (
                <Setup
                    tableType={SALESLOG}
                    tableList={tableList}
                    length={7}
                    close={() => {
                        setSetup(false);
                        attribute();
                    }}
                />
            ) : (
                ""
            )}

        </>
    )
}

function mapStateToProps(state) {
    const { auth, global } = state;
    return {
        user: auth.user,
        actions: global.actions,
    };
}

export default connect(mapStateToProps)(SaleLog);