import React from 'react'
import { Row, Col, Icon, Table, Modal } from 'antd'
import { WeaHelpfulTip, WeaInputSearch, WeaBrowser, WeaTable } from 'ecCom'
import { inject, observer } from 'mobx-react';
import { dataSource , monthOnMonthColumns, userSureColumns} from './columns'
import "./index.less"
import { getQueryString } from '../../util/url'
import CustomTable from '../../components/customTable'

@inject('calculateStore')
@observer
export default class UserSure extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedKey: "0",
            selectedRowKeys: [], // table 选中项
            userListSearchValue: '',
        }
        this.id = ""
    }

    componentWillMount() {
        let id = getQueryString("id")
        this.id = id;
        const { calculateStore } = this.props;
        const { salaryacctGetForm, acctemployeeList, reducedemployeeList, getSalarySobCycle } =  calculateStore
        salaryacctGetForm(id)
        acctemployeeList({salaryAcctRecordId: id, employeeName: this.state.userListSearchValue, current: 1})
        reducedemployeeList({salaryAcctRecordId: id, employeeName: this.state.userListSearchValue, current: 1})
        getSalarySobCycle(id)
    }

    // 添加人员回调
    handleUserBrowserChange(ids) {
        if(ids && ids.length > 0) {
            let idList = ids.split(",");
            const { calculateStore: { saveAcctemployee, reducedemployeeList, acctemployeeList, checkTaxAgent }} = this.props;
            saveAcctemployee(this.id, idList).then(() => {
                reducedemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: 1})
                acctemployeeList({salaryAcctRecordId:  this.id, employeeName: this.state.userListSearchValue, current: 1})
                checkTaxAgent(this.id)
            })
        }
    }

    // 导出
    handleExport() {
        const { calculateStore: { exportReducedEmployee, exportAcctEmployee }} = this.props;
        if(this.state.selectedKey == 0) {
            exportAcctEmployee(this.id)
        } else {
            exportReducedEmployee(this.id)
        }
    }

    // 批量删除
    handleBatchDelete() {
        const { selectedRowKeys } = this.state;
        const { calculateStore: { deleteAcctemployee, reducedemployeeList, acctemployeeList } } = this.props;
        if(selectedRowKeys.length == 0) {
            message.warning("未选择条目")
        }
        Modal.confirm({
            title: '信息确认',
            content: '确认删除',
            onOk:() => {
                deleteAcctemployee(this.id, selectedRowKeys).then(() => {
                    reducedemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: 1})
                    acctemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: 1})
                })
            },
            onCancel: () => {
            },
        });
    }

    // 人员范围列表
    getUserListColumns = () => {
        const { calculateStore: {acctemployeeListColumns}} = this.props;
        let columns = [...acctemployeeListColumns]
        columns.push({
            key: "cz",
            title: "操作",
            render: (text, record) => {
                return <a onClick={() => {this.handleDeleteItem(record)}}>删除</a>
            }
        })
        return columns;
    }

    // 获取人员列表，添加key
    getUserListDataSource = () => {
        const { calculateStore: {acctemployeeListDataSource}} = this.props;
        return acctemployeeListDataSource.map(item => {
            item = {...item}
            item.key = item.id
            return item
        })
    }

    // 删除人员
    handleDeleteItem = (record) => {
        const { calculateStore: {deleteAcctemployee}} = this.props;
        Modal.confirm({
            title: '信息确认',
            content: '确认删除',
            onOk:() => {
                deleteAcctemployee(this.id, [record.id]).then(() => {
                    reducedemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: 1})
                    acctemployeeList({salaryAcctRecordId: this.id,  employeeName: this.state.userListSearchValue,current: 1})
                })
            },
            onCancel: () => {
            },
        });
        
    } 

    // 刷新薪资核算人员的个税扣缴义务人
    handleRefresh = () => {
        const { calculateStore: {refreshTaxAgent, reducedemployeeList, acctemployeeList } } = this.props;
        refreshTaxAgent(this.id).then(() => {
            reducedemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: 1})
            acctemployeeList({salaryAcctRecordId: this.id , employeeName: this.state.userListSearchValue, current: 1})
        })
    }

    onSelectChange = selectedRowKeys => {
        this.setState({ selectedRowKeys, userListSearchValue: "" });
    }

    // 核算人员范围分页
    handleUserListPageChange(value) {
        const { calculateStore: {acctemployeeList}} = this.props;
        acctemployeeList({acctemployeeList: this.id, employeeName: this.state.userListSearchValue, current: value})
    }

    // 环比减少人员分页
    handleReducedemployeeListPageChange(value) {
        const { calculateStore: { reducedemployeeList }} = this.props;
        reducedemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: value})
    }

    // 搜索
    handleUserListSearch(value) {
        const { calculateStore: {acctemployeeList, reducedemployeeList}} = this.props;
        if(this.state.selectedKey == 0) {
            acctemployeeList({acctemployeeList: this.id, employeeName: value, current: 1})
        } else {
            reducedemployeeList({salaryAcctRecordId: this.id, employeeName: value, current: 1})
        }
    }

    render() {
        const { selectedRowKeys } = this.state;
        const { calculateStore } = this.props;
        const { calculateBaseForm, 
            acctemployeeListDataSource,
            acctemployeeListColumns,
            reducedemployeeListDataSource,
            reducedemployeeListColumns,
            baseSalarySobCycle,
            acctemployeeListPageInfo,
            loading,
            reducedemployeeListPageInfo
        } = calculateStore


        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        
        return (
            <div className="userSure">
                <div className="baseInfo">基本信息</div>
                <div className="formWrapper">
                    <Row>
                        <Col span={12}>
                            <Row>
                                <Col span={6}>薪资所属月：<WeaHelpfulTip
                                        width={100}
                                        title={`薪资周期\n
                                        ${baseSalarySobCycle.salaryCycle && baseSalarySobCycle.salaryCycle.fromDate}至${baseSalarySobCycle.salaryCycle && baseSalarySobCycle.salaryCycle.endDate}\n
                                        税款所属期\n
                                        ${baseSalarySobCycle.taxCycle}\n
                                        考勤取值周期\n
                                        ${baseSalarySobCycle.attendCycle && baseSalarySobCycle.attendCycle.fromDate}至${baseSalarySobCycle.attendCycle && baseSalarySobCycle.attendCycle.endDate}\n
                                        福利台账月份\n
                                        引用${baseSalarySobCycle.socialSecurityCycle}的福利台账数据`}
                                        placement="topLeft"
                                    />
                                </Col>
                                <Col span={18}>{calculateBaseForm.formDTO && calculateBaseForm.formDTO.salaryMonth}</Col>
                            </Row>
                        </Col>
                        <Col span={12}>
                        <Row>
                                <Col span={6}>核算账套：
                                </Col>
                                <Col span={18}>{calculateBaseForm.formDTO && calculateBaseForm.formDTO.salarySobName}</Col>
                            </Row>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={6}>备注：</Col>
                        <Col span={18}>{calculateBaseForm.formDTO && calculateBaseForm.formDTO.description}</Col>
                    </Row>
                </div>
                <div className="operateBarWrapper">
                    <div>
                        <div className="crumbsWrapper">
                            <span className={this.state.selectedKey == "0" ? "crumbItem crumbItemSelected": "crumbItem"} onClick={() => {this.setState({selectedKey: "0"})}}>核算人员范围</span>
                            <WeaHelpfulTip
                                        width={200}
                                        title="核算完若薪资档案中个税扣缴义务人发生调整，需先刷新【核算人员范围】再到【薪资核算】中重新核算"
                                        placement="topLeft"
                                    />
                                    {'  '}|{'  '}
                            <span className={this.state.selectedKey == "1" ? "crumbItem crumbItemSelected": "crumbItem"} onClick={() => {this.setState({selectedKey: "1"})}}>环比上月减少人员</span>
                            <WeaHelpfulTip
                                        width={200}
                                        title="提示：环比上期当前选择的账套归档的各个税扣缴义务人下减少的人员"
                                        placement="topLeft"
                                    />
                        </div>
                        <div className="crumbsOperateWrapper">
                            {
                                this.state.selectedKey == "0" && <div className="headerIcon">
                                    <Icon className="iconItem" type="minus-square" onClick={() => {this.handleBatchDelete()}}/>
                                    <WeaBrowser
                                        type={17}
                                        title="添加人员"
                                        isSingle={false}
                                        customized
                                        onChange={(ids, names, datas) =>
                                            this.handleUserBrowserChange(ids)
                                        }
                                    >
                                        <Icon className="iconItem" type="plus-square" />
                                    </WeaBrowser>
                                    <i className="icon-coms-fawen iconItem" onClick={() => {this.handleExport()}} />
                                    <i className="icon-coms-Synchro iconItem" onClick={() => {this.handleRefresh()}}/>
                                </div>
                            }
                            <WeaInputSearch  className="searchInput" value={this.state.userListSearchValue} onChange={(value) => {
                                this.setState({userListSearchValue: value})
                            }} onSearch={(value) => {this.handleUserListSearch(value)}}/>
                            
                        </div>
                    </div>
                    
                </div>
                <div className="tableWrapper">
                    {
                        this.state.selectedKey == 0 && <CustomTable 
                        loading={loading}
                        rowSelection={rowSelection} 
                        dataSource={this.getUserListDataSource()} 
                        columns={this.getUserListColumns()} 
                        pagination={{
                            onChange: (value) => {this.handleUserListPageChange(value)},
                            total: acctemployeeListPageInfo.total,
                            current: acctemployeeListPageInfo.pageNum
                          }}
                        />
                    }
                    {
                        this.state.selectedKey == 1 && <CustomTable 
                        dataSource={reducedemployeeListDataSource} 
                        columns={reducedemployeeListColumns} 
                        pagination={{
                            onChange: (value) => {this.handleReducedemployeeListPageChange(value)},
                            total: reducedemployeeListPageInfo.total,
                            current: reducedemployeeListPageInfo.pageNum
                          }}
                        />
                    }
                </div>
                
            </div>
        )
    }
}