import React from 'react'
import { Button, Icon, Table } from 'antd'
import { WeaInputSearch, WeaHelpfulTip, WeaSelect } from 'ecCom'
import { slideStep3Columns, dataSource} from './columns'
import "./index.less"
import AddCategoryModal from './step3/AddCategoryModal'
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import CanMoveItem from './step3/canMoveItem'
import UserInfoSelected from './step3/UserInfoSelect'
import PreviewSalaryModal from './step3/previewSalaryModal'


@inject('ledgerStore')
@observer
export default class SalaryItemForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            addCategoryVisible: false,
            previewVisible: false
        }
        const { ledgerStore: { empFieldList }} = this.props;
        empFieldList();
    }

    componentWillMount() {
        const {ledgerStore: {getLedgerItemForm}} = this.props;
        getLedgerItemForm();
    }

    handleAddCategorySave(name) {
        const {ledgerStore: {addItemGroup}} = this.props;
        addItemGroup(name);
    }

    handleCanMoveItemChange(dataSource, item) {
        const {ledgerStore: {itemGroups, setItemGroups}} = this.props;
        let groups = [...itemGroups]
        groups.map(i => {
            if(i.title == item.title) {
                item.items = dataSource
            }
        })
        setItemGroups(groups)
    }

    // 薪资项目
    handleItemDataSourceChange(dataSource, item) {
        const { ledgerStore: {itemGroups, setItemGroups} } = this.props;
        let newItemGroups = [...itemGroups]
        newItemGroups.map(group => {
            if(group.id == item.id) {
                group.items = dataSource
            }
        })
        setItemGroups(newItemGroups)
    }

    // 预览点击事件
    handlePreview() {
        this.setState({previewVisible: true})
    }

    // 修改薪资分类标题回调
    handleItemTitleChange(item, value) {
        const { ledgerStore: {itemGroups, setItemGroups} } = this.props;
        let newItemGroups = [...itemGroups]
        newItemGroups.map(group => {
            if(group.id == item.id) {
                group.name = value
            }
        })
        setItemGroups(newItemGroups)
    }

    // 删除分类回调
    handleGroupDelete(item) {
        const { ledgerStore: {itemGroups, setItemGroups} } = this.props;
        let newItemGroups = [...itemGroups]
        newItemGroups = newItemGroups.filter(group => group.id !== item.id)
        setItemGroups(newItemGroups)
    }

    render() {
        const {ledgerStore: {itemGroups, salaryItems, empBrowserList, setAddCategoryVisible, addCategoryVisible}} = this.props;
        const { previewVisible } = this.state;
        return (
            <div className="salaryItemForm">
                <div className="btnBar">
                    <div className="btns">
                        <Button type="default" onClick={() => {setAddCategoryVisible(true)}}>新增分类</Button>
                        <Button type="default" style={{marginLeft: "10px"}} onClick={() => {this.handlePreview()}}>预览</Button>
                    </div>
                    {/* <div className="searchInputWrapper">
                        <WeaInputSearch style={{width: "150px"}} />
                    </div> */}
                </div>

                <div className="userInfoWrapper">
                    <div>
                        <span>
                            员工信息 <WeaHelpfulTip
                                style={{marginLeft: "10px"}}
                                width={100}
                                title="姓名、部门、个税扣缴义务人为必须项，不可删除"
                                placement="topLeft"
                            />
                        </span>
                        <div className="rightBtnsWrapper">
                            <Icon type="down" />
                        </div>

                    </div>

                    <UserInfoSelected />
                </div>
                {
                    itemGroups && itemGroups.map(item => {
                        if(item.items) {
                            item.items && item.items.map(i => {i.key = i.id})
                            return (
                                <CanMoveItem dataSource={toJS(item.items)} 
                                onDataSourceChange={(dataSource) => {this.handleItemDataSourceChange(dataSource, item)}} title={item.name} 
                                onGroupDelete={() => {this.handleGroupDelete(item)}} 
                                onTitleChange={(value) => {this.handleItemTitleChange(item, value)}} onChange={(dataSource) => {this.handleCanMoveItemChange(dataSource, item)}}/>
                            )
                        }
                        return ""
                    }
                    )
                }
                {
                    addCategoryVisible && 
                    <AddCategoryModal onSave={(value) => {this.handleAddCategorySave(value)}} visible={addCategoryVisible} onCancel={() => {
                        setAddCategoryVisible(false)
                    }} />
                }

                {
                    previewVisible &&
                    <PreviewSalaryModal 
                        visible={previewVisible}
                        onCancel={() => {this.setState({previewVisible: false})}}
                    />
                }
            </div>
        )
    }
}