import * as React from 'react';
import Icon from '@ant-design/icons';
// import { ReactComponent as ExclamationMarkSvg } from './ExclamationMark.svg';
import { PageHeaderFoot, Button, AutoTableContainer, Table, Pagination, message, Radio, Modal,Prompt } from 'kts-xui';
import agent from '../Server';
import { AdvancedSearch, KtsForm,WrapperDrop } from 'kts-components';
import { Form, Space, Input, Menu, Dropdown, Tooltip } from 'kts-components-antd-x4';
import { FormInstance } from 'kts-components-antd-x4/lib/form';
import Add from './UI.Add';
import AddTime from './UI.AddTime';
import Update from './UI.Update';
import AddProduct from './UI.AddProduct';
import { InfoCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import moment from 'moment';
import InvoiceImport from '../SlaveInvoiceList/invoiceImport';
import HisoryModal from './UI.History';
import { DigitalAssetVerification } from '../..';
import BatchAction from './UI.BatchTimeAction'
/** Props接口 */
interface IProps {

}

class UIComponents extends React.Component<IProps, any> {
    formRef = React.createRef<FormInstance>();
    constructor(props) {
        super(props);
        this.state = {
            pageMeta: null,
            list: [],
            params: {},
            addModal: false,
            updateModal: false,
            record: null,
            selectedRowKeys: [],
            schema: {
                type: 'object',
                properties: {
                    heyan: {
                        type: 'daterange',
                        title: '有效时间',
                        'x-props': {
                            extendsFields: ['minEffectiveStart', 'maxEffectiveEnd'],
                        }
                    },
                }
            },
            columns: [],
            hasTemplate: false,
            excelModal: false,
            history: false,
            template: {},
            templateList: [],
            current: {},
            tabKey: 'rule',
            addTimeModal: false,
            timeList:[], 
            timeloading: false,
            productsList: [],
            productsPageMeta: null,
            addProductModal: false,
            product: {},
            productSelectedRowKeys: [],
        };
    }


    componentDidMount() {

        this.getAllTemplate();

    }
    onBatchDeleteProduct = () => {
        const ids = this.state.productSelectedRowKeys;
        if(ids.length === 0){
            message.error('请先选择需要删除的项');
            return;
        }
        this.onDeleteProduct(ids);
    }
    onDeleteProduct = async (ids) => {
        Modal.confirm({
            title: '删除确认',
            icon: null,
            okText:'删除',
            content: (
                <div>
                    <p>是否确认删除？</p>
                </div>
            ),
            onOk: async() => { 
                const res: any = await agent.post('/web/verifier/blacklist/deleteBlackList', ids, this);
                if (res.res) {
                    message.success('操作成功');
                    // this.clearSelectedKeys();
                    this.onRefreshProducts();
                }
            }

        })
    }
    onDelete = async id => {
        Modal.confirm({
            title: '删除确认',
            icon: null,
            okText:'删除',
            content: (
                <div>
                    <p>是否确认删除，删除后规则不可找回。</p>
                </div>
            ),
            onOk: async() => {
                const res: any = await agent.post('/web/verifier/rule/delete', { includeManyGroupUuid: id, templateUuid: this.state.current.templateUuid }, this);
                if (res.res) {
                    message.success('操作成功');
                    this.clearSelectedKeys();
                    this.onRefresh();
                }
            }

        })

    }
    // 将日期格式转换
    convertDateFormat(dateStr: string): string {
        // 使用正则表达式提取日期部分
        const pattern = /(\d{4})年(\d{2})月(\d{2})日/g;
        const convertedDates: string[] = [];
        let matches: RegExpExecArray | null;
        
        // 逐个匹配并转换日期
        while ((matches = pattern.exec(dateStr)) !== null) {
            convertedDates.push(matches[1] + matches[2] + matches[3]);
        }
        
        // 返回拼接后的结果
        return convertedDates.join('-');
    }

    onDeleteTime = (valueToRemove) => {
        Modal.confirm({
            title: '删除确认',
            icon: null,
            okText:'删除',
            content: (
                <div>
                    <p>是否确认删除？</p>
                </div>
            ),
            onOk: async() => {
                const updatedDateRanges = this.state.timeList.filter(range => range !== valueToRemove).map(this.convertDateFormat); 
                const res: any = await agent.post('/web/verifier/submitRange/saveOrUpdateSubmitRange', {submitRangeData: updatedDateRanges}, this);
                if (res.res) {
                    message.success('删除成功'); 
                    this.onSuccessTimeAdd();
                } 
            }

        })
    }
    getAllTemplate = async () => {
        const res: any = await agent.get('/web/verifier/rule/templatePage', {}, this);
        if (!res.err && res.res) {

            if (res.res.items && res.res.items.length > 0) {
                this.updateSchema(res.res.items[0]);

                this.setState({
                    templateList: res.res.items,
                    current: res.res.items[0],
                    hasTemplate: true
                }, () => {
                    const params = {
                        pageNum: 1,
                        pageSize: 10,
                        templateUuid: this.state.current.templateUuid
                    };
                    this.getData(params);
                })
            }

        }
    }
    getTemplate = async (uuid) => {
        const res: any = await agent.post('/web/verifier/rule/get-template', { templateUuid: uuid }, this);
        if (!res.err && res.res) {
            const { schema } = this.state;
            res.res = res.res.filter(item => item.active);
            const has = res.res.length > 0 ? true : false
            const header = res.res.map(item => {
                schema['properties'][item.field] = {
                    type: 'string',
                    title: item.fieldDesc
                }
                if (item.field === 'classify') {
                    const { config } = item;
                    const fieldDescs = config.filter(ele => ele.active);
                    const titles = fieldDescs.reduce((acc, obj) => {
                        acc.push(obj.fieldDesc);
                        return acc;
                    }, []);
                    const title = '校验内容为商品管理中分类所对应的' + titles.join('和')
                    return {
                        title: <span><Tooltip title={title}><QuestionCircleOutlined /></Tooltip> {item.fieldDesc}(精确匹配)</span>,
                        dataIndex: item.field,
                        width: 180,
                        ellipsis: true,
                        render: (text) => { return text && text.fieldExpectValue }
                    }
                } else {
                    return {
                        title: <span>{item.fieldDesc}({item.operatorDesc})</span>,
                        dataIndex: item.field,
                        width: 180,
                        ellipsis: true,
                        render: (text) => { return text && text.fieldExpectValue }
                    }
                }
            })
            const fixColumns = [
                {
                    title: '有效时间',
                    dataIndex: 'youxiao',
                    width: 220,
                    render: text => {
                        return <span>{moment(text.effectiveStart).format('YYYY-MM-DD')}~{moment(text.effectiveEnd).format('YYYY-MM-DD')}</span>
                    }
                },
                {
                    title: '更新时间',
                    dataIndex: 'updateTime',
                    width: 160,
                    render: text => moment(text).format('YYYY-MM-DD HH:mm')
                }, {
                    title: '操作',
                    dataIndex: 'groupUuid',
                    width: 130,
                    render: (text, record) => {
                        return <Space>
                            <a onClick={() => { this.onUpdate(record); }}>修改</a>
                            <a onClick={() => { this.onDelete([text]); }}>删除</a>
                        </Space>
                    }
                },
            ];
            let columns: any[] = [...header];
            columns = columns.concat(fixColumns);
            this.setState({
                // schema,
                columns,
                hasTemplate: has
            })
        } else {
            this.setState({
                hasTemplate: false
            })
        }
    };
    timeColumns = [{
        title: '提交时间',
        dataIndex: 'source', 
        render: (text: any, record: any, index) => {
            return this.state.timeList[index];
        }
    },{
        title: '操作',
        dataIndex: 'source',
        width: 150,
        render: (text: any, record: any) => { 
            return (
                <span>
                    {/* <a onClick={() => { this.onEdit(record); }} style={{ paddingRight: 15 }}>修改</a> */}
                    <a onClick={() => { this.onDeleteTime(record); }} style={{ paddingRight: 15 }}>删除</a>
                </span>
            )
        }
    }];
    productsColumns = [{
        title: '规格型号（包含）',
        dataIndex: 'expectValue',  
        render: (text) => {
            return <span style={{ whiteSpace: 'pre-wrap' }}>{text}</span>
        }
    },{
        title: '创建时间',
        dataIndex: 'createTime', 
        render: (text) => {
            return moment(text).format('YYYY-MM-DD HH:mm');
        }
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime', 
        render: (text) => {
            return moment(text).format('YYYY-MM-DD HH:mm');
        }
    },
    {
        title: '操作',
        dataIndex: 'id',
        width: 150,
        render: (text: any, record: any) => {
            return (
                <span>
                    <a onClick={() => { this.creatProduct(record)}} style={{ paddingRight: 15 }}>修改</a>
                    <a onClick={() => { this.onDeleteProduct([record.id]); }} style={{ paddingRight: 15 }}>删除</a>
                </span>
            )
        }
    }];
    /**
     * 更新schema和column数据
     * @param data 模板数据
     */
    updateSchema = (data) => {
        let schema = {
            type: 'object',
            properties: {
                heyan: {
                    type: 'daterange',
                    title: '有效时间',
                    'x-props': {
                        extendsFields: ['minEffectiveStart', 'maxEffectiveEnd'],
                    }
                },
            }
        }
        const rules = data.ruleContent.filter(item => item.active);
        const header = rules.map(item => {
            schema['properties'][item.field] = {
                type: 'string',
                title: item.fieldDesc
            }
            if (item.field === 'classify') {
                const { config } = item;
                const fieldDescs = config.filter(ele => ele.active);
                const titles = fieldDescs.reduce((acc, obj) => {
                    acc.push(obj.fieldDesc);
                    return acc;
                }, []);
                const title = '校验内容为商品管理中分类所对应的' + titles.join('和')
                return {
                    title: <span><Tooltip title={title}><QuestionCircleOutlined /></Tooltip> {item.fieldDesc}(精确匹配)</span>,
                    dataIndex: item.field,
                    width: 180,
                    ellipsis: true,
                    render: (text) => { return text && text.fieldExpectValue }
                }
            } else {
                return {
                    title: <span>{item.fieldDesc}({item.operatorDesc})</span>,
                    dataIndex: item.field,
                    width: 180,
                    ellipsis: true,
                    render: (text) => { return text && text.fieldExpectValue }
                }
            }
        })
        const fixColumns = [
            {
                title: '有效时间',
                dataIndex: 'youxiao',
                width: 220,
                render: text => {
                    return <span>{moment(text.effectiveStart).format('YYYY-MM-DD')}~{moment(text.effectiveEnd).format('YYYY-MM-DD')}</span>
                }
            },
            {
                title: '更新时间',
                dataIndex: 'updateTime',
                width: 160,
                render: text => moment(text).format('YYYY-MM-DD HH:mm')
            }, {
                title: '操作',
                dataIndex: 'groupUuid',
                width: 130,
                render: (text, record) => {
                    return <Space>
                        <a onClick={() => { this.onUpdate(record); }}>修改</a>
                        <a onClick={() => { this.onDelete([text]); }}>删除</a>
                    </Space>
                }
            },
        ];
        let columns: any[] = [...header];
        columns = columns.concat(fixColumns);
        this.setState({
            schema,
            columns,
            template: data.templateName,
            current: data
        })
        console.log(schema);
        this.getData({ templateUuid: data.templateUuid, ...this.state.pageMeta })
        // this.getTemplate(data.templateUuid);
    }
    clearSelectedKeys = () => {
        this.setState({
            selectedRowKeys: []
        })
    }
    onUpdate = (record) => {
        this.setState({
            updateModal: true,
            record
        })
    } 
    onPageChange = (pageNum, pageSize) => {
        this.setState({
            ...this.state.params,
            pageMeta: {
                ...this.state.pageMeta,
                pageNum,
                pageSize
            }
        }, () => {
            this.onRefresh();
        });
    }
    onProductPageChange = (pageNum, pageSize) => {
        this.setState({
            ...this.state.params,
            productsPageMeta: {
                ...this.state.productsPageMeta,
                pageNum,
                pageSize
            }
        }, () => {
            this.onRefreshProducts();
        });
    }
    onRefresh = () => {
        const params = {
            ...this.state.params,
            ...this.state.pageMeta,
            templateUuid: this.state.current.templateUuid
        };

        this.getData(params);
    }
    getData = async (params) => {
        const res: any = await agent.post('/web/verifier/rule/queryPage', params, this);
        if (res.err) {
            return;
        } else {
            if (res.res.items && res.res.items[0]) {
                res.res.items = res.res.items.map(item => {
                    let data = item.data.reduce((acc, obj) => {
                        const key = obj.field;
                        acc[key] = obj;
                        return acc;
                    }, {});
                    data.youxiao = {
                        effectiveStart: item.data[0].effectiveStart,
                        effectiveEnd: item.data[0].effectiveEnd
                    };
                    data.updateTime = item.data[0].updateTime;
                    data.groupUuid = item.data[0].groupUuid;
                    data.templateUuid = item.data[0].templateUuid;
                    return data
                })

            }
            this.setState({
                pageMeta: res.res.pageMeta,
                list: res.res.items
            });

        }
    }
    getProductsData = async (params?) => {
        this.setState({timeloading: true, productsList: [], productSelectedRowKeys: []});
        const prams = {
            ...this.state.productsPageMeta,
            ...params,
        }
        const res: any = await agent.post('/web/verifier/blacklist/pageRecord', prams, this);
        if (res.err) {
            return;
        } else {    
            this.setState({ 
                productsList: res.res.items, // .map(item=>moment(item[0]).format('YYYY-MM-DD'))
                productsPageMeta: res.res.pageMeta
            });  
        }
        this.setState({timeloading: false});
    }
    // 定义一个函数来格式化单个日期
    formatSingleDate = (dateString) => {
        const year = dateString.slice(0, 4);
        const month = dateString.slice(4, 6);
        const day = dateString.slice(6, 8);
        return `${year}年${month}月${day}日`;
    };
    // 定义一个函数来转换日期范围
    formatDateRange = (dateRange) => {
        const [startDate, endDate] = dateRange.split('-');
        return `${this.formatSingleDate(startDate)}-${this.formatSingleDate(endDate)}`;
    }; 
    getTimeData = async () => {
        this.setState({timeloading: true,timeList: []});
        const res: any = await agent.get('/web/verifier/submitRange/get', {}, this);
        if (res.err) {
            return;
        } else { 
            this.setState({  
                timeList: res.res.map(this.formatDateRange)
            }); 
        }
        this.setState({timeloading: false});
    }
    onAdd = () => {
        this.setState({
            addModal: true
        })
    }
    onCloseAdd = () => {
        this.setState({
            addModal: false
        })
    }

    onCloseTimeAdd = () => {
        this.setState({
            addTimeModal: false
        })
    }
    onRefreshTimes = () => {
        this.getTimeData();
    }
    onRefreshProducts = () => { 
        this.getProductsData();
    }
    onSuccessTimeAdd = () => {
        this.onCloseTimeAdd();
        this.onRefreshTimes();
    }
    onSuccessProductAdd = () => {
        this.onCloseProductAdd();
        this.onRefreshProducts();
    }
    onCloseProductAdd = () => {
        this.setState({
            addProductModal: false, 
            product: {}
        })
    }
    onSuccessAdd = () => {
        this.onCloseAdd();
        this.onRefresh();
    }
    onCloseUpdate = () => {
        this.setState({
            updateModal: false,
            record: null
        })
    }
    onSuccessUpdate = () => {
        this.onCloseUpdate();
        this.onRefresh();
    }
    onSearch = (data: any = {}) => {
        let copyData = JSON.parse(JSON.stringify(data));
        if (copyData.heyan) {
            delete copyData.heyan
        }
        const params = {
            queryMap: copyData,
            ...this.state.pageMeta,
            minEffectiveStart: copyData['minEffectiveStart'],
            maxEffectiveEnd: copyData['maxEffectiveEnd'],
            pageNum: 1,
            pageSize: 10,
            templateUuid: this.state.current.templateUuid
        };
        if (copyData.minEffectiveStart || copyData.maxEffectiveEnd) {
            delete copyData.minEffectiveStart
            delete copyData.maxEffectiveEnd
        }
        this.setState({
            params,
        });

        this.getData(params);
    }
    templateChange = (e) => {
        const name = e.target.value;
        const data = this.state.templateList.find(item => item.templateName === name);
        this.updateSchema(data);
    }
    topExpand = () => {
        const { schema, template, templateList } = this.state;
        const keys = schema.properties && Object.keys(schema.properties)?.filter(item => item !== 'heyan') || [];
        return (keys.length > 0 && <AdvancedSearch
            width={480}
            height={44}
            key={template}
            compact={true}
            defaultKey={`${keys[0]}`}
            placeholder={`请输入${schema.properties[keys[0]].title}`}
            searchFormSubmit={this.onSearch}
            extra={templateList.length > 0 &&
                <Radio.Group defaultValue={template} onChange={this.templateChange} style={{ display: 'flex', marginRight: 10 }}>
                    {templateList.map((item, key) => {
                        return <Radio.Button key={key} value={item.templateName}>{item.templateName}</Radio.Button>
                    })}
                </Radio.Group> || undefined
            }

        >
            <KtsForm
                labelCol={9}
                wrapperCol={15}
                labelAlign="left"
                compact={true}
                schema={schema}
            >
            </KtsForm>
        </AdvancedSearch>
        );

    }
    handleMenuClick = (e: any) => {
        if (e.key === 'delete') {
            if (this.state.selectedRowKeys.length > 0) {
                this.onDelete(this.state.selectedRowKeys);
            } else {
                message.warn('请先勾选要删除的数据')
            }
        } else if (e.key === 'export') {
            this.onExport();
        } else if (e.key === 'history') {
            this.setHistory(true);
        } else if (e.key === 'deleteall') {
            this.onDelete([]);
        }
    }
    onBand = () => {
        message.warn('请先勾选要修改的数据')
    }
    onExport = async () => {
        const params = {
            ...this.state.params,
            templateUuid: this.state.current.templateUuid
        }
        const res: any = await DigitalAssetVerification.server.post(`${DigitalAssetVerification.prefix_path}/web/verifier/rule/export-rules`, params).reqFs(DigitalAssetVerification.server.reqFs.filter(v => v !== DigitalAssetVerification.serviceTools.addContentType)).resFs([]).responseType('blob').end(null);;
        if (res.err) {
            return;
        } else {
            const blob = res.res.body;
            let url = URL.createObjectURL(blob);
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', `有效性规则-${moment(new Date()).format('YYYYMMDDHHmmss')}.xls`);
            link.click();
            // link = null;
        }


    }
    setHistory = value => {
        this.setState({
            history: value
        })
    }
    onImport = () => {
        this.setState({
            excelModal: true
        })
    }
    onCloseExcel = () => {
        this.setState({
            excelModal: false
        })
    }
    creatTime = () => {
        this.setState({
            addTimeModal: true
        })
    }
    creatProduct = (record?) => {
        this.setState({
            addProductModal: true, 
            product: record
        })
    }
    render() {
        // const users = this.state.users;
        const dataSource = this.state.list;
        const { pageMeta, productsPageMeta, productSelectedRowKeys, productsList, history, addModal, timeList,addTimeModal, addProductModal, selectedRowKeys, tabKey, updateModal, columns, hasTemplate, excelModal, current } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: (selectedRowKeys: string[]) => {
                this.setState({
                    selectedRowKeys
                })
            },
        }; 
        const productRowSelection = {
            productSelectedRowKeys,
            onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                this.setState({
                    productSelectedRowKeys: selectedRowKeys
                })
            }, 
        };
        const menu = (
            <Menu onClick={this.handleMenuClick}>
                <Menu.SubMenu title="批量删除">
                    <Menu.Item key='delete'>
                        已勾选规则
                    </Menu.Item>
                    <Menu.Item key='deleteall'>
                        当前模板所有规则
                    </Menu.Item>
                </Menu.SubMenu>
                <Menu.Item key='history'>
                    历史规则
                </Menu.Item>
                <Menu.Item key='export'>
                    导出
                </Menu.Item>
                <Menu.SubMenu title="批量修改有效时间">
                    <Menu.Item key='time'>
                        {selectedRowKeys.length > 0 ? <BatchAction onRefresh={this.onRefresh} templateUuid={current.templateUuid} list={selectedRowKeys}>已勾选规则</BatchAction> : <div style={{width:'100%'}} onClick={this.onBand}>已勾选规则</div>}
                    </Menu.Item>
                    <Menu.Item key='timeall'>
                        <BatchAction onRefresh={this.onRefresh} templateUuid={current.templateUuid} >当前模板所有规则</BatchAction>
                    </Menu.Item>
                </Menu.SubMenu>
            </Menu>
        );
        const ruleImport = async (values) => {
            const res: any = await DigitalAssetVerification.server
                .post(`${DigitalAssetVerification.prefix_path}/web/verifier/rule/import-rule`)
                .reqFs(DigitalAssetVerification.server.reqFs.filter(v => v !== DigitalAssetVerification.serviceTools.addContentType))
                .field('templateUuid', current.templateUuid)
                .field('fileName', values.name)
                .attach('file', values, values.name).end(this);

            return res;
        }
        const urlData = {
            rule: ruleImport,
            templateUuid: current.templateUuid
        }
       
        const onChange = (e) => {
            this.setState({tabKey: e.target.value}) 
            if(e.target.value === 'time'){
                this.getTimeData();
            } else if(e.target.value === 'product'){
                const params = {
                    pageNum: 1,
                    pageSize: 10, 
                };
                this.getProductsData(params); 
            }
        };
        return (
            <div style={{ height: 'calc(100vh - 97px)', display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
                <Radio.Group value={tabKey} onChange={onChange} style={{ margin: '12px 20px' }}>
                    <Radio.Button value="rule">有效性规则</Radio.Button>
                    <Radio.Button value="product">商品黑名单</Radio.Button>
                    <Radio.Button value="time">提交时间</Radio.Button>
                </Radio.Group>
                {tabKey === 'rule' && <>
                    <div style={{ flex: 'none', position: 'relative', zIndex: 3 }}>
                        <PageHeaderFoot
                            expandLeft={this.topExpand()}
                            expandRight={[
                                <Button disabled={!hasTemplate} key='1' type="primary" onClick={this.onImport}>批量导入</Button>,
                                <Button disabled={!hasTemplate} key='0' type="primary" onClick={this.onAdd}>创建</Button>,
                                <WrapperDrop overlay={menu} key='2' disabled={!hasTemplate}><Button>更多</Button></WrapperDrop>,
                                // <Button disabled={!hasTemplate} key='3' onClick={this.onRefresh} icon={}></Button>
                            ]}
                            onRefresh={this.onRefresh}
                        >
                        </PageHeaderFoot>
                    </div>
                    <AutoTableContainer style={{ flex: 1, padding: '0 20px', background: '#F4F4F4' }} >
                        {hasTemplate && <Table
                            className='fixheight'
                            bordered
                            dataSource={dataSource}
                            columns={columns as any}
                            // scroll={{ x: '1500', y: 'max-content' }}
                            pagination={false}
                            rowKey="groupUuid"
                            rowSelection={rowSelection as any}
                        />
                        }
                        {!hasTemplate && <div style={{ background: 'white', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><InfoCircleOutlined /><span style={{ paddingLeft: 5 }}>请联系运维人员配置有效性模板</span></div>}
                    </AutoTableContainer>
                    {pageMeta && <Pagination onChange={this.onPageChange} showTotal={(total, range) => `第 ${range[0]}-${range[1]} 条,  共有 ${total} 条`} style={{ padding: '16px 0', flex: 'none', background: 'white', textAlign: 'center' }} total={pageMeta.total} pageSize={pageMeta.pageSize} current={pageMeta.pageNum} showSizeChanger={true} />}
                    {addModal && <Add uuid={current.templateUuid} onClose={this.onCloseAdd} onSuccess={this.onSuccessAdd} />}
                    {updateModal && <Update onClose={this.onCloseUpdate} onSuccess={this.onSuccessUpdate} data={this.state.record} />}
                    {excelModal && <InvoiceImport currentActive={'rule'} onClose={this.onCloseExcel} refreshInvoice={this.onRefresh} urlData={urlData} />}

                    {history && <HisoryModal uuid={current.templateUuid} onClose={() => { this.setHistory(false) }} />}
                </>}
                {this.state.tabKey === 'product' && <>
                    <div style={{ flex: 'none', position: 'relative', zIndex: 3 }}>
                        <PageHeaderFoot
                            // expandLeft={this.topExpand()}
                            expandRight={[ // @ts-ignore
                                <Prompt><InfoCircleOutlined />黑名单中的商品会直接判定为无效，无效原因“商品黑名单”，禁止采集方申诉。</Prompt>,
                                <Button key='time1' type="primary" onClick={this.creatProduct}>添加</Button>, 
                                <Button disabled={!productSelectedRowKeys.length} key='2' type="default" onClick={this.onBatchDeleteProduct}>批量删除</Button>,
                            ]}
                            onRefresh={this.onRefreshProducts}
                        >
                        </PageHeaderFoot>
                    </div>
                    <AutoTableContainer style={{ flex: 1, padding: '0 20px', background: '#F4F4F4' }} >
                        <Table
                            className='fixheight'
                            bordered
                            dataSource={productsList}
                            columns={this.productsColumns as any}
                            loading={this.state.timeloading} 
                            rowKey={'id'}
                            // scroll={{ x: '1500', y: 'max-content' }}
                            pagination={false} 
                            rowSelection={productRowSelection as any}
                        /> 
                        {/* {!hasTemplate && <div style={{ background: 'white', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><InfoCircleOutlined /><span style={{ paddingLeft: 5 }}>请联系运维人员配置有效性模板</span></div>} */}
                    </AutoTableContainer> 
                    {productsPageMeta && <Pagination onChange={this.onProductPageChange} showTotal={(total, range) => `第 ${range[0]}-${range[1]} 条,  共有 ${total} 条`} style={{ padding: '16px 0', flex: 'none', background: 'white', textAlign: 'center' }} total={productsPageMeta.total} pageSize={productsPageMeta.pageSize} current={productsPageMeta.pageNum} showSizeChanger={true} />}
                    {addProductModal && <AddProduct product={this.state.product} onClose={this.onCloseProductAdd} onSuccess={this.onSuccessProductAdd} />}
                </>}
                {this.state.tabKey === 'time' && <>
                    <div style={{ flex: 'none', position: 'relative', zIndex: 3 }}>
                        <PageHeaderFoot
                            // expandLeft={this.topExpand()}
                            expandRight={[
                                <Button  key='time1' type="primary" onClick={this.creatTime}>添加</Button>, 
                            ]}
                            onRefresh={this.onRefreshTimes}
                        >
                        </PageHeaderFoot>
                    </div>
                    <AutoTableContainer style={{ flex: 1, padding: '0 20px', background: '#F4F4F4' }} >
                        <Table
                            className='fixheight'
                            bordered
                            dataSource={timeList}
                            columns={this.timeColumns as any}
                            loading={this.state.timeloading}
                            // scroll={{ x: '1500', y: 'max-content' }}
                            pagination={false} 
                        /> 
                        {/* {!hasTemplate && <div style={{ background: 'white', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><InfoCircleOutlined /><span style={{ paddingLeft: 5 }}>请联系运维人员配置有效性模板</span></div>} */}
                    </AutoTableContainer>
                    {addTimeModal && <AddTime timeList={timeList} onClose={this.onCloseTimeAdd} onSuccess={this.onSuccessTimeAdd} />}
                </>}
            </div>
        );
    }
}
export default UIComponents