import React from "react";
import { Col, Row } from "antd";
import { WeaHelpfulTip, WeaSearchGroup } from "ecCom";
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, salaryAdjustmentInfo } } = this.props;
    getArchiveForm(this.props.id);
    fetchSingleSalaryItemList({ salaryArchiveId: this.props.id });
    salaryAdjustmentInfo()
  }

  // 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>
    );
  }
}