import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {Table, Icon, Popconfirm, Row, Col, Button, Form, Input, Cascader, Select} from 'antd';
import {
    serialize,
    formatDateTime,
    productStatusToString,
    productEnableCreateTrade,
    UUID,
    formItemLayout,
    smallFormItemLayout,
    footerFormSubmitLayout,
    handleUpload,
    filterFormItemLayout,
    PRODUCT_STATUS,
    filterFormItemStyle,
    enableStatusToString,
} from '../../utils';
import {Link} from 'react-router';

import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader/MainHeader';
import HeaderOperation from '../../components/HeaderOperation/HeaderOperation';


@connect(state=>({
    items: state.authority.items,
    loading: state.authority.loading,
    total: state.authority.total
}))
@Form.create()
export default class List extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            filterVisible: false
        }
    }

    componentDidMount() {
        this.fetchList(this.props.location.query);
    };

    fetchList(query) {
        this.props.dispatch({
            type: 'FETCH_AUTHORITY_LIST',
            query
        });
    };


    handleRowClick({name}) {
        this.props.history.push('/admin/authorities/' + name);
    }

    handleFilterVisible() {
        this.setState({
            filterVisible: !this.state.filterVisible
        });

    }

    handleFilterSubmit(e) {
        e.preventDefault();
        const formData = this.props.form.getFieldsValue();
        if (formData.categoryId && formData.categoryId[1]) {
            formData.categoryId = formData.categoryId[1];
        }
        const searchQuery = {...this.props.location.query, ...formData};
        console.log(searchQuery);
        this.props.history.replace(this.props.location.pathname + '?' + serialize(searchQuery));
        this.fetchList(searchQuery);
    }

    handleResetFilterForm(e) {
        e.preventDefault();
        this.props.form.setFieldsValue({
            id: undefined,
            status: undefined,
            categoryId: undefined,
            title: undefined
        });
    }

    render() {

        const {
            total, cates, items, loading,
            form:{getFieldProps},
            history:{replace},
            location:{pathname, query},
            dispatch
        } = this.props;

        const handleRemove = (id)=> {
            dispatch({
                type: 'DELETE_AUTHORITY_ITEM',
                id
            });
        };

        const columns = [
            {
                title: '角色ID',
                dataIndex: 'name',
                key: 'name',
                width: 150,
            }, {
                title: '名称',
                dataIndex: 'description',
                key: 'description',
                width: 100
            }, {
                title: '创建时间',
                dataIndex: 'dateCreated',
                key: 'dateCreated',
                width: 150,
                className: 'tac',
                render: (dateCreated, record)=>(
                    <span>
                        {dateCreated && formatDateTime(dateCreated)}
                    </span>
                )
            }, {
                title: '状态',
                dataIndex: 'status',
                key: 'status',
                width: 80,
                className: 'tac',
                render: (status)=>(
                    <span>{enableStatusToString(status)}</span>
                )
            }, {
                title: '操作',
                key: 'operation',
                width: 120,
                className: 'tac',
                render: (text, record)=>(
                    (record.name === 'ROLE_ADMIN' || record.name === 'ROLE_USER' || record.name === 'ROLE_DEFAULT') ?
                        ''
                        :
                        <Popconfirm title="确定要删除这个角色吗？"
                                    onClick={e=> {
                                        e.preventDefault();
                                        e.stopPropagation();
                                    }}
                                    onConfirm={handleRemove.bind(this, record.name)}>
                            <a href="javascript:void('删除')">删除</a>
                        </Popconfirm>
                )
            }
        ];


        const pagination = {
            total: total,
            pageSize: parseInt(query.s, 10) || 30,
            current: parseInt(query.p, 10) || 1,
            showSizeChanger: true,
            showTotal: total => `共 ${total} 条`,
            pageSizeOptions: ['10', '30', '50', '100'],
            onShowSizeChange: (current, pageSize)=> {
                console.log('Current: ', current, '; PageSize: ', pageSize);
                query.p = current;
                query.s = pageSize;
                replace(pathname + '?' + serialize(query));
                this.fetchList(query);
            },
            onChange: (current)=> {
                console.log('Current: ', current);
                query.p = current;
                replace(pathname + '?' + serialize(query));
                this.fetchList(query);
            }
        };


        const buttons = [{
            key: 'add',
            link: '/admin/authorities/create',
            onClick: ()=> {
            }
        }, {
            key: 'filter',
        }];

        const operation = (
            <HeaderOperation history={this.props.history} buttons={buttons}/>
        );


        const header = (
            <MainHeader breadcrumb={['角色管理', '角色列表']}
                        title="角色列表"
                        operation={operation}
            >
                {
                    this.state.filterVisible &&
                    <Form className="filterForm" inline onSubmit={this.handleFilterSubmit.bind(this)}>
                        <Form.Item label="ID">
                            <Input placeholder="请输入搜索ID" {...filterFormItemStyle} {...getFieldProps('id')}/>
                        </Form.Item>
                        <Form.Item label="类目">
                            {
                                cates &&
                                <Cascader options={cates} placeholder="请选产品类目" {...filterFormItemStyle}
                                          {...getFieldProps('categoryId')}
                                />
                            }
                        </Form.Item>
                        <Form.Item label="标题">
                            <Input placeholder="请输入搜索标题" {...filterFormItemStyle} {...getFieldProps('title')}/>
                        </Form.Item>
                        <Form.Item label="状态">
                            <Select placeholder="请选择状态"  {...filterFormItemStyle} {...getFieldProps('status')}>
                                <Select.Option key="status-option-default"
                                               value={null}>请选择</Select.Option>
                                {
                                    ProductStatus.map((status, index)=>
                                        <Select.Option key={status} data-value={status}
                                                       value={status}>{PRODUCT_STATUS[status]}</Select.Option>
                                    )
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item>
                            <Button.Group size="default">
                                <Button type="primary" size="default" htmlType="submit" loading={loading}><Icon
                                    type="search"/>筛选</Button>
                                <Button type="ghost" size="default" htmlType="reset"
                                        onClick={this.handleResetFilterForm.bind(this)}><Icon
                                    type="cross-circle-o"/>清空</Button>
                            </Button.Group>
                        </Form.Item>
                    </Form>
                }
            </MainHeader>
        );

        return (
            <Layout header={header}>
                <Table className="list-table" columns={columns}
                       dataSource={Array.isArray(items) ? items : []}
                       loading={loading}
                       pagination={pagination}
                       scroll={{y: window.innerHeight - (this.state.filterVisible ? 203 : 150)}}
                       onRowClick={this.handleRowClick.bind(this)}
                />
            </Layout>
        );
    }
}



