import React from 'react'
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaInputSearch, WeaHelpfulTip, WeaTable, WeaTab, WeaTop } from 'ecCom'
import { dataSource, payrollColumns } from '../columns';
import { Menu, Button, Dropdown, Table } from 'antd'
import CustomTab from '../../../components/customTab'
import "./index.less"
import { getQueryString } from '../../../util/url'
import { renderNoright, getSearchs } from '../../../util';

@inject('payrollStore')
@observer
export default class PayrollDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentId: ""
        }
    }

    componentWillMount() {
        let id = getQueryString("id")
        this.setState({currentId: id})
        const { payrollStore: {getPayrollInfo, getPayrollDetailList, getPayrollDetailSa} } = this.props;
        getPayrollInfo(id)
        getPayrollDetailList({salarySendId: id})
        getPayrollDetailSa()
    }

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

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

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

    // 导出所选
    handleExportSelected() {

    }

    // 导出全部
    handleExportAll() {
        const { payrollStore } = this.props;
        const { exportDetailList } = payrollStore
        exportDetailList({salarySendId: this.state.currentId})
    }

    getSearchsAdQuick() {
        const handleMenuClick = (e) => {
            switch(e.key) {
                case "1":
                    this.handleExportSelected()
                    break;
            }
        }
        const menu = (
            <Menu onClick={handleMenuClick}>
              <Menu.Item key="1">导出所选</Menu.Item>
            </Menu>
        );
        return (
            <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu} onClick={() => {this.handleExportAll()}}>导出全部</Dropdown.Button>
        )
    }

    render() {
        const {payrollStore}  = this.props;
        const { setDetailListShowSearchAd, detailListShowSearchAd, getPayrollDetailList, detailListCondition, detailListConditionForm, salarySendDetailBaseInfo, salarySendDetailTableStore, salarySendDetailDataSource } = payrollStore;
        return (
            <div className="payrollGrant">
                <WeaTop
                    title="工资单发放" // 文字
                    icon={<i className='icon-coms-meeting' />} // 左侧图标
                    iconBgcolor='#F14A2D' // 左侧图标背景色
                    showDropIcon={true} // 是否显示下拉按钮
                    buttons={[this.getSearchsAdQuick()]}
                ></WeaTop>
                <WeaTab
                    searchType={['base', 'advanced']} // base：基础搜索框 advanced：显示高级搜索按钮
                    showSearchAd={detailListShowSearchAd} // 是否展开高级搜索面板
                    setShowSearchAd={bool => setDetailListShowSearchAd(bool)} //高级搜索面板受控
                    searchsAd={getSearchs(detailListConditionForm, toJS(detailListCondition), 2)} // 高级搜索内部数据
                    // buttonsAd={adBtn} // 高级搜索内部按钮
                    onSearch={getPayrollDetailList} // 点搜索按钮时的回调
                    // searchsAdQuick={this.getSearchsAdQuick()}
                    onSearchChange={v => detailListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
                    searchsBaseValue={detailListConditionForm.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
                />
                <div className="titleBar">
                    <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 className="titleBarRight">
                        <span>已发放：{salarySendDetailBaseInfo.sendNum}/<span style={{color: "red"}}>{salarySendDetailBaseInfo.sendTotal}</span></span>
                    </div>
                </div>

                <div className="tableWrapper">
                    <WeaTable dataSource={salarySendDetailDataSource} columns={this.getColumns()}/>
                </div>
            </div>
        )
    }
}