import React from 'react'
import CustomTab from '../../components/customTab'
import { Dropdown, Menu, Button, Table } from 'antd'
import { WeaHelpfulTip, WeaInputSearch, WeaSlideModal, WeaTable } from 'ecCom'
import { placeOnFileColumns, dataSource } from './columns'
import SlideModalTitle from "../../components/slideModalTitle"
import FileMergeDetail from './fileMergeDetail'
import { getQueryString } from "../../util/url";
import { inject, observer } from 'mobx-react';

@inject('calculateStore')
@observer
export default class PlaceOnFileDetail extends React.Component {
    constructor(props)  {
        super(props);
        placeOnFileColumns.map(item => {
            if(item.dataIndex == "username") {
                item.render = (text, record) => (
                    <a onClick={() => {this.onDetail()}}>{text}</a>
                )
            }
        })
        this.state = {
            slideVisiable: false,
        }
    }
    componentWillMount() {
        let id = getQueryString("id");
        const { calculateStore: { getSalarySobCycle, acctResultList } } = this.props;
        getSalarySobCycle(id)
        acctResultList(id)
    }


    // 获取列表的列
    getColumns() {
        const { calculateStore: {acctResultListTableStore }} = this.props;
        let columns = acctResultListTableStore.columns ? [...acctResultListTableStore.columns] : [];
        columns = columns.filter(item => item.hide == "false")
        columns.push({
            title: '操作',
            key: "cz",
            render: (text, record) => {
                return <a onClick={() => {this.handleEdit(record)}}>编辑</a>
            }
        })
        return columns;
    }

    onDetail() {
        this.setState({slideVisiable: true})
    }

    render() {

        const { calculateStore } = this.props;
        const { baseSalarySobCycle, acctResultListDateSource, acctResultListColumns } = calculateStore
        const menu = (
            <Menu>
              <Menu.Item key="3">导出所选</Menu.Item>
            </Menu>
        );

        const renderRightOperation = () => {
            return (
                <div style={{display: "inline-block"}}>
                    <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu}>导出全部</Dropdown.Button>
                    <WeaInputSearch />
                </div>
            )
        }

        const { slideVisiable } = this.state
        
        return (
            
            <div className="placeOnFileDetail">
                <CustomTab 
                    searchOperationItem={
                        renderRightOperation()
                    }
                />
                <div className="tabWrapper">
                    <span>薪资所属月：{baseSalarySobCycle.salaryMonth}</span>
                    <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"
                    />
                </div>
                <div className="tableWrapper">
                    <WeaTable columns={this.getColumns()} dataSource={acctResultListDateSource} />
                </div>

                {
                    slideVisiable && <WeaSlideModal visible={slideVisiable}
                    top={0}
                    width={40}
                    height={100}
                    direction={'right'}
                    measure={'%'}
                    title={
                        <SlideModalTitle 
                        subtitle={"合并计税详情"}
                        editable={true}
                        />
                    }
                    content={(<FileMergeDetail />)}
                    onClose={() => this.setState({slideVisiable: false})}
                    showMask={true}
                    closeMaskOnClick={() => this.setState({slideVisiable: false})} />
                }
            </div>
        )
    }
}