import React from 'react'
import { WeaInputSearch, WeaHelpfulTip, WeaTable } from "ecCom"
import { payrollGrantColumns, dataSource } from "../columns"
import { Menu, Button,Table, Modal, Dropdown } from "antd"
import { inject, observer } from 'mobx-react';


@inject('payrollStore')
@observer
export default class PayrollWithdrawModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedRowKeys: [],
            current: 1,
        }
    }

    componentWillMount() {
        const { payrollStore } = this.props
        const { batchWithdrawInfoList } = payrollStore
        batchWithdrawInfoList({salarySendId:this.props.sendId})
    }

    // 撤回
    handleWithdraw(record) {
        const { payrollStore } = this.props;
        const { withdrawPayroll, batchWithdrawInfoList } = payrollStore;
        withdrawPayroll({
            ids: [record.id],
            salarySendId: this.props.sendId
        }).then(() => {
            batchWithdrawInfoList({salarySendId:this.props.sendId})
        })
    }

    // 发送
    handleGrant(record) {
        const { payrollStore } = this.props;
        const { grantPayroll,batchWithdrawInfoList } = payrollStore;
        grantPayroll({
            ids: [record.id],
            salarySendId: this.props.sendId
        }).then(() => {
            batchWithdrawInfoList({salarySendId:this.props.sendId})
        })
    }

    getColumns() {
        const { payrollStore } = this.props;
        const { canWidthdrawColumns } = payrollStore
        if(!canWidthdrawColumns) {
            return []
        }
        return canWidthdrawColumns.map(item => {
            let result = {}
            result.title = item.text;
            result.key = item.column;
            result.dataIndex = item.column;
            result.width = item.width;
            if(result.key == "operation") {
                result.render = (text,record) => {
                    if(text == 'ALREADYSEND') {
                        return (
                            <a onClick={() => {this.handleWithdraw(record)}}>撤回</a>
                        )
                    } else {
                        return (
                            <a onClick={() => {this.handleGrant(record)}}>发送</a>
                        )
                    }
                }
            } else {
                result.dataIndex = item.column;
            }
            return result;
        })
    }

    onSelectChange = (value) => {
        this.setState({
            selectedRowKeys: value
        })
    }

    // 撤回
    fetchWithdrawPayroll(payload) {
        const { payrollStore: { grantPayroll, withdrawPayroll }} = this.props;
        withdrawPayroll(payload).then(() => {
            const { payrollStore: {getInfoList}} = this.props;
            getInfoList({
                salarySendId:this.props.sendId
            })
            this.props.onCancel && this.props.onCancel()
        })
    }


    handleMenuClick(e) {
        const { selectedRowKeys } = this.state;
        const { payrollStore: { grantPayroll }} = this.props;
        if(selectedRowKeys.length == 0) {
            message.warning("未选择条目");
            return
        }
        this.fetchWithdrawPayroll({ids: selectedRowKeys, salarySendId: this.props.sendId})
    }

   
    handleWithdrawAll() {
        this.fetchWithdrawPayroll({salarySendId: this.props.sendId})
    }

    // 分页
    handleDataPageChange(value) {
        this.setState({current: value})
        const { payrollStore } = this.props
        const { batchWithdrawInfoList } = payrollStore
        batchWithdrawInfoList({salarySendId:this.props.sendId, current: value})
    }

    

    handleSearch(value) {
        const { payrollStore: { batchWithdrawInfoList } } = this.props;
        batchWithdrawInfoList({salarySendId: this.props.sendId, keyword: value, current: this.state.current})
    }

    render() {
        const menu = (
            <Menu onClick={(e) => this.handleMenuClick(e)}>
              <Menu.Item key="1">撤回所选</Menu.Item>
            </Menu>
        );
        const {payrollStore}  = this.props;
        const { salarySendDetailBaseInfo, canWidthdrawColumns, canWithdrawDataSource, canWithdrawPageInfo } = payrollStore;
        const { selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange.bind(this),
        };


        return (
            <Modal width={800} visible={this.props.visible} onCancel={() => {this.props.onCancel()}}>
                <div style={{padding: "0px 10px", height: "47px", lineHeight: "47px"}}>
                    <span style={{fontSize: "14px", color: '#666'}}>批量撤回</span>
                    <div style={{float: "right", marginRight: "40px"}}>
                        <Dropdown.Button style={{marginRight: "10px"}} overlay={menu} onClick={() => {this.handleWithdrawAll()}}>全部撤回</Dropdown.Button>
                        <WeaInputSearch value={this.state.searchValue} onChange={(value) => {this.setState({searchValue: value})}} onSearch={(value) => {this.handleSearch(value)}}/>
                    </div>
                </div>
                <div style={{height: "40px", lineHeight: "40px"}}>
                    <div className="titleBarLeft">
                    <span>薪资所属月：{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.year}-{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.monthValue}</span>
                        <WeaHelpfulTip
                            style={{marginLeft: '10px', marginRight: "10px"}}
                            width={200}
                            title={`薪资周期\n
                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
                            税款所属期\n
                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.taxCycle}\n
                            考勤取值周期\n
                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.fromDate}至${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
                            福利台账月份\n
                            引用${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.socialSecurityCycle}的福利台账数据`}
                            placement="topLeft"
                        />
                        <span>工资单模板：{salarySendDetailBaseInfo.template}</span>
                    </div>
                </div>
                <div style={{marginTop: "10px", height: "500px", scrollY: "scroll"}}>
                    <WeaTable 
                    rowSelection={rowSelection} 
                    dataSource={canWithdrawDataSource} 
                    columns={this.getColumns()}
                    pagination={{
                        onChange: (value) => {this.handleDataPageChange(value)},
                        total: canWithdrawPageInfo.total,
                        current: canWithdrawPageInfo.pageNum,
                        showTotal: (total) => `共 ${total} 条`,
                      }}
                    />
                </div>
            </Modal>
        )
    }
}