import Button from '../../button';
import React from 'react';
import ReactDOM from 'react-dom';
import Table from '..';
const dataSource = [
    {
        price: 'US $1',
        status: 1,
        parent: 'root',
        id: 1,
        product: [
            {
                title: "2014 New Fashion Novelty Tank Slim Women's Fashion Dresses With Lace",
                avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg',
            },
        ],
        children: [
            {
                price: 'US $1-1',
                status: 11,
                id: 2,
                parent: 0,
                index: 0,
                product: [
                    {
                        title: 'Free shipping women Casual dresses lady dress plus size 2014',
                        avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg',
                    },
                ],
            },
            {
                price: 'US $1-2',
                status: 12,
                id: 3,
                parent: 0,
                product: [
                    {
                        title: 'Free shipping women Casual dresses lady dress plus size 2014',
                        avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg',
                    },
                ],
            },
            {
                price: 'US $1-3',
                status: 13,
                id: 7,
                parent: 0,
                product: [
                    {
                        title: 'Free shipping women Casual dresses lady dress plus size 2014',
                        avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg',
                    },
                ],
            },
        ],
    },
    {
        price: 'US $3',
        status: 3,
        parent: 'root',
        id: 3,
        product: [
            {
                title: "2014 New Fashion Novelty Tank Slim Women's Fashion Dresses With Lace",
                avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg',
            },
        ],
        children: [
            {
                price: 'US $3-1',
                status: 31,
                id: 31,
                parent: 1,
                index: 0,
                product: [
                    {
                        title: 'Free shipping women Casual dresses lady dress plus size 2014',
                        avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg',
                    },
                ],
            },
            {
                price: 'US $3-2',
                status: 32,
                id: 32,
                parent: 1,
                product: [
                    {
                        title: 'Free shipping women Casual dresses lady dress plus size 2014',
                        avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg',
                    },
                ],
            },
            {
                price: 'US $3-3',
                status: 33,
                id: 33,
                parent: 1,
                product: [
                    {
                        title: 'Free shipping women Casual dresses lady dress plus size 2014',
                        avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg',
                    },
                ],
            },
            {
                price: 'US $3-4',
                status: 34,
                id: 34,
                parent: 1,
                product: [
                    {
                        title: 'Free shipping women Casual dresses lady dress plus size 2014',
                        avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg',
                    },
                ],
            },
        ],
    },
    {
        price: 'US $4',
        status: 4,
        parent: 'root',
        id: 4,
        product: [
            {
                title: "2014 New Fashion Novelty Tank Slim Women's Fashion Dresses With Lace",
                avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg',
            },
        ],
        children: [
            {
                price: 'US $4-1',
                status: 31,
                id: 31,
                parent: 2,
                index: 0,
                product: [
                    {
                        title: 'Free shipping women Casual dresses lady dress plus size 2014',
                        avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg',
                    },
                ],
            },
            {
                price: 'US $4-2',
                status: 32,
                id: 32,
                parent: 2,
                product: [
                    {
                        title: 'Free shipping women Casual dresses lady dress plus size 2014',
                        avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg',
                    },
                ],
            },
            {
                price: 'US $4-3',
                status: 33,
                id: 33,
                parent: 2,
                product: [
                    {
                        title: 'Free shipping women Casual dresses lady dress plus size 2014',
                        avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg',
                    },
                ],
            },
        ],
    },
], productRender = function (product) {
    return (React.createElement("div", { className: "media" },
        React.createElement("img", { src: product[0].avatar, className: "media-side" }),
        React.createElement("div", { className: "media-content" }, product[0].title)));
}, priceRender = function (price) {
    return React.createElement("b", null, price);
}, statusRender = function (status) {
    if (status) {
        return 'Already Priced';
    }
    return 'No Priced';
}, operRender = function () {
    return React.createElement("a", { href: "javascript:;" }, "View"); // eslint-disable-line
}, groupHeaderRender = function (record) {
    return React.createElement("div", null, record.product[0].title);
}, rowSelection = {
    onChange(selectedKeys) {
        console.log(selectedKeys);
    },
};
const cellProps = (rowIndex, colIndex, dataIndex, record) => {
    if (colIndex === 3 && record.index === 0) {
        return {
            rowSpan: dataSource[record.parent].children.length,
        };
    }
    if (colIndex === 4 && record.index === 0) {
        return {
            rowSpan: dataSource[record.parent].children.length,
        };
    }
};
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            hasSelection: false,
        };
        this.toggleGroupSelection = () => {
            this.setState({
                hasSelection: !this.state.hasSelection,
            });
        };
    }
    render() {
        return (React.createElement("div", null,
            React.createElement("p", null,
                React.createElement(Button, { onClick: this.toggleGroupSelection }, "Toggle GroupHeader Selection")),
            React.createElement(Table, { dataSource: dataSource, rowSelection: rowSelection, cellProps: cellProps },
                React.createElement(Table.GroupHeader, { cell: groupHeaderRender, hasChildrenSelection: this.state.hasSelection }),
                React.createElement(Table.GroupFooter, { cell: groupHeaderRender }),
                React.createElement(Table.Column, { cell: productRender, title: "Product Details", dataIndex: "product" }),
                React.createElement(Table.Column, { cell: priceRender, title: "Price", dataIndex: "price", width: 120 }),
                React.createElement(Table.Column, { cell: statusRender, title: "Status", dataIndex: "status", width: 100 }),
                React.createElement(Table.Column, { cell: operRender, title: "Operation", width: 100 }))));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('table-demo-13'));
