import React, { Component } from 'react'
import { Card, Table } from 'antd'
import { isEqual } from 'lodash'

const columns = [
    {
        title: '区域',
        dataIndex: 'area',
        width: 150,
        fixed: true
    },
    {
        title: '总数',
        children: [
            {
                title: '幢数(占比)',
                dataIndex: 'z',
                width: 120,
            },
            {
                title: '建筑面积(占比)',
                dataIndex: 'j',
                width: 120,
            },
            {
                title: '户数',
                dataIndex: 'h',
                width: 80,
            },
        ],
    },
    {
        title: '房屋等级',
        children: [
            {
                title: '一级',
                children: [
                    {
                        title: '幢数',
                        dataIndex: 'z1',
                        width: 80,
                    },
                    {
                        title: '建筑面积',
                        dataIndex: 'j1',
                        width: 80,
                    },
                    {
                        title: '户数',
                        dataIndex: 'h1',
                        width: 80,
                    },
                ],
            },
            {
                title: '二级',
                children: [
                    {
                        title: '幢数',
                        dataIndex: 'z2',
                        width: 80,
                    },
                    {
                        title: '建筑面积',
                        dataIndex: 'j2',
                        width: 80,
                    },
                    {
                        title: '户数',
                        dataIndex: 'h2',
                        width: 80,
                    },
                ],
            },
            {
                title: '三级',
                children: [
                    {
                        title: '幢数',
                        dataIndex: 'z3',
                        width: 80,
                    },
                    {
                        title: '建筑面积',
                        dataIndex: 'j3',
                        width: 80,
                    },
                    {
                        title: '户数',
                        dataIndex: 'h3',
                        width: 80,
                    },
                ],
            },
            {
                title: '四级',
                children: [
                    {
                        title: '幢数',
                        dataIndex: 'z4',
                        width: 80,
                    },
                    {
                        title: '建筑面积',
                        dataIndex: 'j4',
                        width: 80,
                    },
                    {
                        title: '户数',
                        dataIndex: 'h4',
                        width: 80,
                    },
                ],
            },
            {
                title: 'C级',
                children: [
                    {
                        title: '幢数',
                        dataIndex: 'zc',
                        width: 80,
                    },
                    {
                        title: '建筑面积',
                        dataIndex: 'jc',
                        width: 80,
                    },
                    {
                        title: '户数',
                        dataIndex: 'hc',
                        width: 80,
                    },
                ],
            },
            {
                title: 'D级',
                children: [
                    {
                        title: '幢数',
                        dataIndex: 'zd',
                        width: 80,
                    },
                    {
                        title: '建筑面积',
                        dataIndex: 'jd',
                        width: 80,
                    },
                    {
                        title: '户数',
                        dataIndex: 'hd',
                        width: 80,
                    },
                ],
            },
        ],
    },
]

const data = []
for (let i = 0; i < 30; i++) {
    data.push({
        key: i,
        area: 'John Brown',
        z: 100,
        j: 1222.33,
        h: 39,
        z1: 20,
        j1: 20,
        h1: 20,
        z2: 20,
        j2: 20,
        h2: 20,
        z3: 20,
        j3: 20,
        h3: 20,
        z4: 20,
        j4: 20,
        h4: 20,
        zc: 20,
        jc: 20,
        hc: 20,
        zd: 20,
        jd: 20,
        hd: 20,
    })
}

export default class table extends Component {

    shouldComponentUpdate(props, state) {
        return !isEqual(this.state, state)
    }

    render() {
        return (
            <Card bordered={false}>
                <Table
                    columns={columns}
                    dataSource={data}
                    pagination={false}
                    scroll={{ x: 'max-content' }}
                    bordered
                    size="middle"
                    sticky
                />
            </Card>
        )
    }
}
