import React from 'react';
import { Row, Col, Table, DatePicker } from "antd"
import { inject, observer } from 'mobx-react';
import { WeaInput, WeaTextarea, WeaSearchGroup, WeaSelect, WeaCheckbox, WeaTable } from "ecCom";
import { slideColumns, slideDataSource, columns } from './columns';
import "./editSlideContent.less"

// import { WeaTableNew } from "comsMobx"
// const WeaTable = WeaTableNew.WeaTable;
import moment from 'moment'

const { MonthPicker } = DatePicker;


let emptyItem = {
    incomeLowerLimit: "0.00",
    incomeUpperLimit: "0.00",
    dutyFreeValue: "0.00",
    dutyFreeRate: "0.00",
    taxableIncomeLl: "0.00",
    taxableIncomeUl: "0.00",
    taxRate: "0.00",
    taxDeduction: "0.00"
}

@inject('attendanceStore')
@observer
export default class EditSlideContent extends React.Component {

    constructor(props) {
        super(props);
    }

    componentWillMount() { // 初始化渲染页面
        const {attendanceStore: {viewAttendQuote}} = this.props;
        viewAttendQuote({attendQuoteId: this.props.id})
    }

    getColumns(columns) {
        let result = [...columns]
        return result.filter(item => item.hide == "false")
    }

    getScrollWidth() {
        const { attendanceStore } = this.props;
        const { attendQuoteDetailTableStore} = attendanceStore;
        return this.getColumns(attendQuoteDetailTableStore.columns ? attendQuoteDetailTableStore.columns : []).length * 150
    }


    render() {
        const { attendanceStore } = this.props;
        const { attendQuoteDetailPageInfo, attendQuoteDetailTableStore} = attendanceStore;
        return (
            <div className="attendSlide">
                <div className="titleWrapper"> 
                    {
                        this.props.salaryYearMonth != "" && 
                        <div className="slideLeftTitle">考勤周期： {moment(this.props.salaryYearMonth + "-01").startOf("month").format("YYYY-MM-DD")} 至 {moment(this.props.salaryYearMonth + "-01").endOf("month").format("YYYY-MM-DD")}</div>
                    }
                </div>
                <div>
                    <WeaTable 
                        columns={this.getColumns(attendQuoteDetailTableStore.columns ? attendQuoteDetailTableStore.columns : [])}
                        dataSource={attendQuoteDetailPageInfo.list ? attendQuoteDetailPageInfo.list : []}
                        scroll={{x: this.getScrollWidth()}}
                    />
                </div>
            </div>                    
        )
    }
}