import React from "react"
import { Row, Col } from 'antd'
import { WeaHelpfulTip, WeaSearchGroup } from 'ecCom'
import GroupCard from "../../components/groupCard"
import { inject, observer } from 'mobx-react';
import "./index.less"
import SelectedTab from '../../components/selectedTab'
import SalaryItemChangeList from "./salaryItemChangeList";
import TaxAgentChangeList from "./taxAgentChangeList";

const selectedTabItems = [
    {
        key: '0',
        name: "薪资调整记录"
    },
    {
        key: "1",
        name: "个税扣缴义务人调整记录"
    }
]

@inject('salaryFileStore')
@observer
export default class SalaryFileViewSlide extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            baseInfoVisible: true,
            salaryItemVisible: true,
            selectedTab: "0"
        }
    }

    componentWillMount() {
        const { salaryFileStore: {getArchiveForm, fetchSingleSalaryItemList} } = this.props;
        getArchiveForm(this.props.id)
        fetchSingleSalaryItemList({salaryArchiveId: this.props.id})
    }

    // tab页签切换回调
    handleTabChange(item) {
        this.setState({ selectedTab: item.key})
    }

    render() {
        const { salaryFileStore: {detailForm} } = this.props;
        const { baseInfo, adjustSalaryItems } = detailForm;
        return (
            <div className="salaryFileViewSlide">
                <WeaSearchGroup title={"基本信息"} items={[]} onVisibleChange={(value) => {this.setState({baseInfoVisible: value})}}/>
                    {
                        this.state.baseInfoVisible && <div className="slideItemWrapper">
                        <Row className="formRow">
                            <Col span={8}>
                                <Row>
                                    <Col span={6} className="formTitle">姓名</Col>
                                    <Col span={18}>{baseInfo && baseInfo.employee && baseInfo.employee.username}</Col>
                                </Row>
                            </Col>
                            <Col span={8}>
                                <Row>
                                    <Col span={6} className="formTitle">部门</Col>
                                    <Col span={18}>{baseInfo && baseInfo.employee &&  baseInfo.employee.department}</Col>
                                </Row>
                            </Col>
                            <Col span={8}>
                                <Row>
                                    <Col span={6} className="formTitle">岗位</Col>
                                    <Col span={18}>{baseInfo && baseInfo.employee && baseInfo.employee.position}</Col>
                                </Row>
                            </Col>
                        </Row>
                        
                        <Row className="formRow">
                            <Col span={8}>
                                <Row>
                                    <Col span={6} className="formTitle">入职时间</Col>
                                    <Col span={18}>{baseInfo && baseInfo.employee && baseInfo.employee.hiredate}</Col>
                                </Row>
                            </Col>
                            <Col span={8}>
                                <Row>
                                    <Col span={6} className="formTitle">手机号</Col>
                                    <Col span={18}>{baseInfo && baseInfo.employee && baseInfo.employee.mobile}</Col>
                                </Row>
                            </Col>
                            <Col span={8}>
                                <Row>
                                    <Col span={6} className="formTitle">个税扣缴义务人</Col>
                                    <Col span={18}>{baseInfo && baseInfo.employee && baseInfo.employee.taxAgent}</Col>
                                </Row>
                            </Col>
                        </Row>
                    </div>
                    }
                    
                    <WeaSearchGroup title={<span>薪资档案 <WeaHelpfulTip
                        width={200}
                        title="提示：显示已生效的最新数据"
                        placement="topLeft"
                    /></span>} items={[]} onVisibleChange={(value) => {this.setState({salaryItemVisible: value})}}/>
                    {
                        this.state.salaryItemVisible && <div style={{lineHeight: '40px'}} className="slideItemWrapper">
                        {
                            adjustSalaryItems && adjustSalaryItems.map(item => (
                                <div style={{display: "inline-block", width: '50%' }}>
                                    <div style={{display:'inline-block', width: '50%'}}>{item.name}</div>
                                    <div style={{display:'inline-block', width: '50%'}}>{item.value}</div>
                                </div>
                            ))
                        }
                        </div>
                    }

                    <WeaSearchGroup title={<SelectedTab items={selectedTabItems} onChange={(item) => {this.handleTabChange(item)}}/>} items={[]} onVisibleChange={(value) => {this.setState({salaryItemVisible: value})}}/>
                    {
                        this.state.selectedTab == "0" ? <SalaryItemChangeList id={this.props.id}/> : <TaxAgentChangeList id={this.props.id}/>
                    }
                <div>

                </div>
            </div>
        )
    }
}