import React from 'react';
import { Row, Col, Table } from "antd"
import { inject, observer } from 'mobx-react';
import { WeaInput, WeaTextarea, WeaSearchGroup } from "ecCom";
import { slideColumns} from './columns';
import EditableTable from '../../components/EditTable'
import RequiredLabelTip from '../../components/requiredLabelTip'

let emptyItem = {
    incomeLowerLimit: "0.00",
    incomeUpperLimit: "0.00",
    dutyFreeValue: "0.00",
    dutyFreeRate: "0.00",
    taxableIncomeLl: "0.00",
    taxableIncomeUl: "0.00",
    taxRate: "0.00",
    taxDeduction: "0.00"
}

@inject('taxRateStore')
@observer
export default class EditSlideContent extends React.Component {

    componentWillMount() { // 初始化渲染页面
        this.state = {
          editable: this.props.editable === undefined ? "true": this.props.editable
        }
    }

    addItem() {
        const { taxRateStore: {setDataSource}} = this.props;
        let dataSource = [...this.props.taxRateStore.dataSource];
        let indexNum = 1;
        if(dataSource.length > 0) {
            indexNum = dataSource[dataSource.length - 1].indexNum +  1
        }
        let item = {...emptyItem}
        item.indexNum = indexNum
        dataSource.push(item);
        setDataSource(dataSource)
    }
    render() {
        const { taxRateStore: {dataSource, nameValue, remarkValue, setNameValue, setRemarkValue, setDataSource}} = this.props;
        return (
            <div>
            <WeaSearchGroup showGroup={true} title={"基本信息"}>
                <Row gutter={16}>
                    <Col span={6}>
                        <div className="formLabel">名称:<RequiredLabelTip /></div>
                    </Col>
                    <Col span={18}>
                        <WeaInput
                            id="name"
                            value={nameValue}
                            onChange={value => {
                                setNameValue(value)
                            }}
                            viewAttr={this.props.editable ? 2: 1}
                        />
                    </Col>
                </Row>

                <Row gutter={16} style={{ marginTop: "16px" }}>
                    <Col span={6}>
                        <div className="formLabel">备注:</div>
                    </Col>
                    <Col span={18}>
                        <WeaInput
                            id="remark"
                            value={remarkValue}
                            onChange={value => {
                                setRemarkValue(value)
                            }}
                            viewAttr={this.props.editable ? 2: 1}
                        />
                    </Col>
                </Row>
            </WeaSearchGroup>
            <WeaSearchGroup showGroup={true} title={"详细设置"}>
            <EditableTable 
                columns={slideColumns}
                dataSource={dataSource}
                bordered
                type="number"
                addItem={() => {
this.addItem()
}}
                onDataSourceChange={setDataSource}
                editable={this.state.editable}
            />
            </WeaSearchGroup>
        </div>                    
        )
    }
}