import React from 'react'
import { WeaSelect, WeaInput } from 'ecCom'
import { Table, Row, Col, Switch } from 'antd'
import { insertUpdateColumns } from './columns'
import { inject, observer } from 'mobx-react';
import SmallTab from '../../../components/smallTab'
import "./index.less"
import RequiredLabelTip from '../../../components/requiredLabelTip';

@inject('programmeStore')
@observer
export default class DefaultSlideForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: "SCHEME_TOWN",
            selectItem: "个人",
            dataSource: {}
        }
        insertUpdateColumns.map(item => {
            if(item.dataIndex == "isPayment") {
                item.render = (text, record) => {
                    return (<Switch checked={text} onChange={(e) => {
                        this.updateDataSource(record, e, "isPayment")
                    }}/>)
                } 
            } else if(item.dataIndex == "validNum") {
                let options = [
                    {
                        key: "0",
                        selected: false,
                        showname: "0"
                    },
                    {
                        key: "1",
                        selected: false,
                        showname: "1"
                    },
                    {
                        key: "2",
                        selected: true,
                        showname: "2"
                    }
                ]
                item.render = (text, record) => {
                    return (
                        <WeaSelect
                            options={options}
                            value={text}
                            onChange={v => {
                                this.updateDataSource(record, v, "validNum")
                            }}
                        />
                    )
                }
            } else if(item.dataIndex == "rententionRule") {
                let options = [
                    {
                        key: "1",
                        selected: false,
                        showname: "原始数据"
                    },
                    {
                        key: "2",
                        selected: false,
                        showname: "四舍五入"
                    },
                    {
                        key: "3",
                        selected: false,
                        showname: "向上舍入"
                    },
                    {
                        key: "4",
                        selected: false,
                        showname: "向下舍入"
                    },
                ]
                item.render = (text, record) => {
                    return (
                        <WeaSelect
                            options={options}
                            value={text}
                            onChange={v => {
                                this.updateDataSource(record, v, "rententionRule")
                            }}
                        />
                    )
                }
            } else if(item.dataIndex == "paymentProportion") {
                item.render = (text, record) => {
                    return (
                        <WeaInput value={text} onChange={(v) => {
                            this.updateDataSource(record, v, "paymentProportion")
                        }}/>
                    )
                } 
            } else if(item.dataIndex == "fixedCost") {
                item.render = (text, record) => {
                    return (
                        <WeaInput value={text} onChange={(v) => {
                            this.updateDataSource(record, v, "fixedCost")
                        }} />
                    )
                }
            }
        })
        
    }

    updateDataSource(record, e, key) {
        const { programmeStore: {defaultCompanyDataSource, defaultPersonDataSource, setDefaultPersonDataSource, setDefaultCompanyDataSource}} = this.props;
        let result = {...record}
        result[key] = e
        if(this.state.selectItem == "个人") {
            let dataSource = [...defaultPersonDataSource];
            dataSource = dataSource.map(item => {
                if(item.id == result.id) 
                    return result;
                else 
                    return item;
            })
            setDefaultPersonDataSource(dataSource)
        } else {
            let dataSource = [...defaultCompanyDataSource];
            dataSource = dataSource.map(item => {
                if(item.id == result.id) 
                    return result;
                else 
                    return item;
            })
            setDefaultCompanyDataSource(dataSource)
        }
    }

    componentWillMount() {
        const { programmeStore } = this.props;
        const { getForm, selectedKey, defaultPersonDataSource } = programmeStore
    }

    render() {
        const { programmeStore } = this.props;
        const { defaultPersonDataSource, defaultCompanyDataSource, selectedKey } = programmeStore
        const { dataSource } = this.state;
        const options = [
            {
              key: "SCHEME_TOWN",
              selected: true,
              showname: "城镇"
            },
            {
              key: "SCHEME_VILLAGE",
              selected: false,
              showname: "农村"
            }
        ]

        const handleSmallTabChange = (item) => {
            // let paymentArea = item == "paymentArea" ? "1": "2"
            // let requestParams = {...this.props.requestParams}
            // requestParams.paymentArea = paymentArea
            this.setState({
                selectItem: item.value,
            })
            // this.props.onChange(requestParams)
        }

        return (
            <div className="defaultSlideForm">
                <div>
                    <Row style={{lineHeight: "40px"}}>
                        <Col span={6}>
                            缴纳类型<RequiredLabelTip />
                        </Col>
                        <Col span={18}>
                        <WeaSelect
                            style={{width: "200px"}}
                            options={options}
                            value={this.props.requestParams.paymentType}
                            onChange={(v, showname) => {
                                let requestParams = {...this.props.requestParams}
                                requestParams.paymentType = v
                                this.props.onChange(requestParams)
                            }}
                        />
                        </Col>
                    </Row>

                    
                    <Row style={{lineHeight: "40px"}}>
                        <Col span={6}>
                            方案名称<RequiredLabelTip />
                        </Col>
                        <Col span={18}>
                            <WeaInput value={this.props.requestParams.schemeName} onChange={(value) => {
                                let requestParams = {...this.props.requestParams}
                                requestParams.schemeName = value
                                this.props.onChange(requestParams)
                            }}/>
                        </Col>
                    </Row>

                    <Row style={{lineHeight: "40px"}}>
                        <Col span={6}>
                            备注
                        </Col>
                        <Col span={18}>
                            <WeaInput value={this.props.requestParams.remarks} onChange={(value) => {
                                let requestParams = {...this.props.requestParams}
                                requestParams.remarks = value
                                this.props.onChange(requestParams)
                            }}/>
                        </Col>
                    </Row>
                </div>

                <div className="tableBar">
                    <div>
                        <SmallTab items={[{title: "个人", value: "个人"}, {title: '公司', value: '公司'}]} onChange={(item) => {handleSmallTabChange(item)}} />
                    </div>

                    <div className="tableWrapper">
                        {
                            this.state.selectItem == "个人" ? 
                            <Table dataSource={defaultPersonDataSource} columns={insertUpdateColumns} />
                            :
                            <Table dataSource={defaultCompanyDataSource} columns={insertUpdateColumns} />
                        }
                    </div>
                </div>
            </div>
        )
    }
}