import * as React from 'react';
import { Radio, PageHeaderFoot, Button, AutoTableContainer, Pagination, Table, } from 'kts-xui';
import { AdvancedSearch, KtsForm } from 'kts-components';
import { Dropdown, Menu } from 'kts-components-antd-x4';
import UIDrawer from './DrawerContainer';
import GoodsEdit from './SingleGoodsEdit';
import ImportGoodsSource from './ImportGoodsSource';
import agent from '../../Server';
import moment from 'moment';
interface IProps {
    changeView: (value: string) => void
}
export default class Component extends React.Component<IProps, any> {
    columns = [
        {
            title: '商品名称',
            dataIndex: 'productName',
            width: 180,
            ellipsis: true,
        }, {
            title: '规格型号',
            dataIndex: 'specification',
            key: 'specification',
            width: 180,
            ellipsis: true,
            render: (text) => {
                return <span style={{ whiteSpace: 'pre-wrap' }}>{text}</span>
            }
        }, {
            title: '授权时间',
            dataIndex: 'shouquanshijian',
            width: 160,
            render: (text, record) => {
                return <span>{record.authStartTime}~{record.authEndTime}</span>
            }
        }, {
            title: '更新时间',
            width: 130,
            dataIndex: 'updateTime',
            render: text => {
                return moment(text).format('YYYY-MM-DD HH:mm')
            }
        }, {
            title: '操作',
            dataIndex: 'id',
            width: 100,
            render: (text: any, record: any) => {
                return (
                    <span>
                        <a onClick={() => { this.onEdit(record); }} style={{ paddingRight: 15 }}>修改</a>
                        <a onClick={() => { this.onDelete([text]); }} style={{ paddingRight: 15 }}>删除</a>
                    </span>
                )
            }
        },
    ];
    constructor(props: any) {
        super(props);
        this.state = {
            pageMeta: {
                pageNum: 1,
                pageSize: 10,
                pages: 1,
                total: 1,
            },
            list: [
            ],
            params: {},
            selectedRowKeys: [],
            visible: false,
            editVisible: false,
            editTableVisible: false,
            good: {},
            type: 2
        };
    }
    componentDidMount() {
        const params = {
            pageNum: 1,
            pageSize: 10
        };
        this.getData(params);
    }
    onDelete = async (list: string[]) => {
        const res: any = await agent.post('/verifierparty/config/default/scope/batch/delete', list, this);
        if (res.er) {
            return;
        } else {
            this.onRefresh();
        }
    }
    onEdit = (record: any) => {
        this.setState({
            editVisible: true,
            good: record
        })
    }
    onSearch = (data) => {
        this.setState({
            params: data
        });
        const params = {
            ...data,
            ...this.state.pageMeta,
            pageNum: 1
        };
        this.getData(params);
    }
    getData = async (params: any) => {
        params = {
            ...params,
            type: this.state.type
        }
        const res: any = await agent.post('/verifierparty/config/default/scope/queryScopePage', params, this);
        if (res.er) {
            return;
        } else if (res.res) {
            this.setState({
                pageMeta: res.res.pageMeta,
                list: res.res.items
            });
        }
    }
    onButtonChange = (e: any) => {
        this.props.changeView(e.target.value);
    }
    topExpand = () => {
        return (
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <Radio.Group onChange={this.onButtonChange} defaultValue="black" style={{ flex: 'none', display: 'flex', marginRight: 15 }}>
                    <Radio.Button value="white" >有效名单设置</Radio.Button>
                    <Radio.Button value="black" >无效名单设置</Radio.Button>
                    <Radio.Button value="filter">切换过滤方式</Radio.Button>
                </Radio.Group>
                <AdvancedSearch
                    width={400}
                    height={44}
                    compact={true}
                    defaultKey="productName"
                    placeholder="请输入"
                    searchFormSubmit={this.onSearch}
                >
                    <KtsForm
                        labelCol={9}
                        wrapperCol={15}
                        labelAlign="left"
                        compact={true}
                        schema={{
                            type: 'object',
                            properties: {
                                productName: {
                                    type: 'string',
                                    title: '商品名称',
                                },
                                specification: {
                                    type: 'string',
                                    title: '规格型号',
                                },
                                checker: {
                                    type: "daterange",
                                    title: "授权时间",
                                    'x-props': {
                                        extendsFields: ['authStartTime', 'authEndTime'],
                                    }
                                },
                            },
                        }}
                    >
                    </KtsForm>
                </AdvancedSearch>
            </div>);
    }
    onCreate = () => {
        this.setState({ visible: true })
    }
    onPageChange = (pageNum: any, pageSize: any) => {
        this.setState({
            pageMeta: {
                ...this.state.pageMeta,
                pageNum,
                pageSize
            }
        }, () => {
            this.onRefresh();
        });
    }
    onRefresh = () => {
        const params = {
            ...this.state.params,
            ...this.state.pageMeta,
        };
        this.getData(params);
        this.onCloseAll();
    }
    handleMenuClick = (e: any) => {
        if (e.key === 'delete') {
            this.onDelete(this.state.selectedRowKeys);
        } else if (e.key === 'goods') {
            this.showEditTable();
        }
    };
    showEditTable = () => {
        this.setState({
            editTableVisible: true
        })
    };
    onCloseAll = () => {
        this.setState({
            visible: false,
            editVisible: false,
            editTableVisible: false
        })
    }
    render() {
        const dataSource = this.state.list;
        const { pageMeta, selectedRowKeys, visible, editVisible, good, editTableVisible } = this.state;
        const rowSelection = {
            onChange: (selectedRowKeys: any[]) => {
                this.setState({
                    selectedRowKeys
                });
            },
        }

        const menu = (
            <Menu onClick={this.handleMenuClick}>
                <Menu.Item key='delete' disabled={selectedRowKeys.length > 0 ? false : true}>
                    批量删除
                </Menu.Item>
                <Menu.Item key='goods'>
                    从商品管理导入
                </Menu.Item>
            </Menu>
        );
        return (
            <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
                <div style={{ flex: 1, position: 'relative', zIndex: 1, display:'flex',flexDirection:'column'}}>
                    <PageHeaderFoot
                        expandLeft={this.topExpand()}
                        expandRight={[
                            <Button key='1' type="primary" onClick={this.onCreate}>创建</Button>,
                            <Button key='2' type="primary" onClick={this.onCreate}>Excel导入</Button>,
                            <Dropdown overlay={menu} key='3'><Button>更多</Button></Dropdown>,
                        ]}

                    >
                    </PageHeaderFoot>
                    <AutoTableContainer style={{ flex: 1, padding: '0 20px', background: '#F4F4F4' }} >
                        <Table
                            bordered
                            rowSelection={rowSelection}
                            dataSource={dataSource}
                            columns={this.columns as any}
                            pagination={false}
                            rowKey='id'
                        />
                    </AutoTableContainer>
                    <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} />
                </div>
                {visible === true && <UIDrawer onClose={this.onCloseAll} onSuccess={this.onRefresh} type={2} />}
                {editVisible === true && <GoodsEdit data={good} onSuccess={this.onRefresh} onClose={this.onCloseAll} type={2} />}
                {editTableVisible === true && <ImportGoodsSource onClose={this.onCloseAll} onSuccess={this.onRefresh} type={2} />}
            </div>
        );
    }
}