import React, { Component } from 'react'
import { Radio, Tabs } from 'antd'
import { ComponentDynamic } from 'components'
import AntIcon from 'components/ant-icon'

const tabs = [
    {
        title: '按房屋等级',
        component: () => import('./tab1'),
    },
    {
        title: '按房屋结构',
        component: () => import('./tab2'),
    },
]

export default class index extends Component {

    state = {
        activeKey: '0',
        types: ['charts', 'charts']
    }

    render() {

        const { activeKey, types } = this.state

        return (
            <div className="yo-form-page">
                <div className="yo-form-page-layout">
                    <div className="yo-tab-external-mount">
                        <Tabs
                            tabBarExtraContent={
                                <Radio.Group
                                    buttonStyle="solid"
                                    value={types[activeKey]}
                                    onChange={(e) => {
                                        const t = [...types]
                                        t[activeKey] = e.target.value
                                        this.setState({
                                            types: t
                                        })
                                    }}
                                >
                                    <Radio.Button value="charts">
                                        <AntIcon type="bar-chart" />
                                    </Radio.Button>
                                    <Radio.Button value="table">
                                        <AntIcon type="table" />
                                    </Radio.Button>
                                </Radio.Group>
                            }
                            onChange={(activeKey) => this.setState({ activeKey })}
                        >
                            {
                                tabs.map((item, i) => (
                                    <Tabs.TabPane
                                        key={i}
                                        forceRender={true}
                                        tab={item.title}
                                    />
                                ))
                            }
                        </Tabs>
                        <div className="yo-tab-external-mount-content">
                            {
                                tabs.map((item, i) => (
                                    <div
                                        key={i}
                                        className={[
                                            'yo-tab-external-tabpane',
                                            activeKey == i ?
                                                'yo-tab-external-tabpane-active'
                                                :
                                                'yo-tab-external-tabpane-inactive'
                                        ].join(' ')}
                                    >
                                        <ComponentDynamic is={item.component} type={types[i]} />
                                    </div>
                                ))
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
