import React, { Component } from 'react'
import { Button, Card, Cascader, Divider, Form, Radio } from 'antd'
import { Container } from 'components'

import StatisticsCharts from './charts'
import StatisticsTable from './table'

export default class index extends Component {

    state = {
        render: 'charts'
    }

    static getDerivedStateFromProps(props) {
        return {
            render: props.type
        }
    }

    render() {
        return (
            <Container mode="fluid">
                <Card bordered={false} type="inner">
                    <Form labelCol={{ flex: '70px' }} wrapperCol={{ flex: '1' }}>
                        <Form.Item className="yo-filter-item" label="房屋性质">
                            <Radio.Group defaultValue={''} buttonStyle="solid" size="small">
                                <Radio.Button value={''}>全部</Radio.Button>
                                <Radio.Button value="1">住宅</Radio.Button>
                                <Radio.Button value="2">非住宅</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Divider className="mt-sm mb-sm" dashed />
                        <Form.Item className="yo-filter-item" label="审核状态">
                            <Radio.Group defaultValue={''} buttonStyle="solid" size="small">
                                <Radio.Button value={''}>全部</Radio.Button>
                                <Radio.Button value="1">待建档</Radio.Button>
                                <Radio.Button value="2">暂存</Radio.Button>
                                <Radio.Button value="3">待提交</Radio.Button>
                                <Radio.Button value="4">退回</Radio.Button>
                                <Radio.Button value="5">待审核</Radio.Button>
                                <Radio.Button value="6">审核通过</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Divider className="mt-sm mb-sm" dashed />
                        <Form.Item className="yo-filter-item" label="土地性质">
                            <Radio.Group defaultValue={''} buttonStyle="solid" size="small">
                                <Radio.Button value={''}>全部</Radio.Button>
                                <Radio.Button value="1">国有土地</Radio.Button>
                                <Radio.Button value="2">集体土地</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Divider className="mt-sm mb-sm" dashed />
                        <Form.Item className="yo-filter-item" label="筛选范围">
                            <Cascader className="w-400" placeholder="请选择区域" />
                        </Form.Item>
                        <Divider className="mt-sm mb-sm" dashed />
                        <div className="text-center">
                            <Button className="mr-xs" type="primary">查询</Button>
                            <Button>导出Excel</Button>
                        </div>
                    </Form>
                </Card>
                {this.state.render == 'charts' && <StatisticsCharts />}
                {this.state.render == 'table' && <StatisticsTable />}
            </Container>
        )
    }
}
