import React from 'react'
import { Modal, Row, Col, Button, Select } from "antd"
const { Option } = Select
import { WeaDatePicker, WeaSelect } from "ecCom"
import { inject, observer } from 'mobx-react';
import moment from 'moment'
import RequiredLabelTip from '../../components/requiredLabelTip';


@inject("salaryFileStore")
@observer
export default class EditAgentModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            initSelected: false,
            request: {
                salaryArchiveId: this.props.currentId,
                effectiveTime: moment(new Date()).format("YYYY-MM-DD"),
                adjustReason: '',
                taxAgentId: ""
            }
        }


    }

    getAdjustReasonList() {
        const { salaryFileStore:{salaryArchiveTaxAgentForm}} = this.props;
        let adjustReasonList = salaryArchiveTaxAgentForm.adjustReasonList.map(item => {
            item = {...item}
            item.showname = item.content;
            item.key = item.id + "";
            item.selected = false
            return item;
        })
        return adjustReasonList
    }

    getTaxAgentList() {
        const { salaryFileStore:{salaryArchiveTaxAgentForm}} = this.props;
        return salaryArchiveTaxAgentForm.taxAgentList.map(item => {
            item = {...item}
            item.showname = item.name;
            item.key = item.id + "";
            item.selected = false
            return item
        })
    }

    handleSave() {
        const { salaryFileStore: {saveTaxAgent, fetchSingleTaxAgentList}} = this.props;
        saveTaxAgent(this.state.request).then(() => {
            fetchSingleTaxAgentList({salaryArchiveId: this.props.currentId})
            this.props.onCancel()
        })
    }

    handleChange(params) {
        const {request} = this.state;
        params = {...request, ...params}
        this.setState({
            request: params
        })
    }

    componentWillMount() {
        const { salaryFileStore: {salaryArchiveTaxAgentForm, getTaxAgentForm, fetchSingleTaxAgentList, getTaxAgentFormByTaxAgentId}} = this.props;
        let request = {...this.state.request}
        if(this.props.recordId) { // 点击条目进入
            getTaxAgentFormByTaxAgentId(this.props.recordId).then((data) => {
                request.taxAgentId = data.adjustAfter != undefined ? data.adjustAfter + "": ""
                // request.taxAgentId = "13"
                request.adjustReason = data.adjustReason != undefined ? data.adjustReason : ""
                this.setState({
                    request
                }, () => {
                    this.setState({
                        initSelected: true
                    })
                })
            })
        } else {
            getTaxAgentForm(this.props.currentId).then(() => {
                this.setState({initSelected: true})
            })
        }
    }

    render() {
        const { salaryFileStore } = this.props;
        const { salaryArchiveTaxAgentForm } = salaryFileStore
        const { request } = this.state;
        const {
            salaryArchiveId,
            effectiveTime,
            adjustReason,
            taxAgentId
        } = request;


        return (
            <Modal title="个税扣缴义务人调整" width={800} visible={this.props.visible} onClose={this.props.onCancel}
                footer={
                    <Button type="primary" onClick={() => {
this.handleSave()
}}>保存</Button>
                }
            >
                <div className="editAgentModal" style={{padding: "20px"}}>
                    <Row style={{lineHeight: '47px'}}>
                        <Col span={8}>生效日期<RequiredLabelTip /></Col>
                        <Col span={16}>
                            <WeaDatePicker value={effectiveTime} onChange={(value) => {
this.handleChange({effectiveTime: value})
}}/>
                        </Col>
                    </Row>
                    <Row style={{lineHeight: '47px'}}>
                        <Col span={8}>调整原因<RequiredLabelTip /></Col>
                        <Col span={16}>
                            {
                                this.state.initSelected &&
                                <Select defaultValue={adjustReason} value={adjustReason} style={{ width: 200 }} onChange={(value) => this.handleChange({adjustReason: value})}>
                                    {
                                        this.getAdjustReasonList().map(item => (
                                            <Option value={item.key}>{item.showname}</Option>
                                        ))
                                    }
                                </Select>
                            }
                        </Col>
                    </Row>
                    <Row style={{lineHeight: '47px'}}>
                        <Col span={8}>调整前</Col>
                        <Col span={16}>
                            {salaryArchiveTaxAgentForm.adjustBefore}
                        </Col>
                    </Row>
                    <Row style={{lineHeight: '47px'}}>
                        <Col span={8}>调整后<RequiredLabelTip /></Col>
                        <Col span={16}>
                            {
                                this.state.initSelected &&
                                <Select defaultValue={taxAgentId} value={taxAgentId} style={{ width: 200 }} onChange={(value) => this.handleChange({taxAgentId: value})}>
                                    {
                                        this.getTaxAgentList().map(item => (
                                            <Option value={item.key}>{item.showname}</Option>
                                        ))
                                    }
                                </Select>

                            }
                        </Col>
                    </Row>
                </div>
            </Modal>
        )
    }
}
