import React from 'react'
import { inject, observer } from 'mobx-react';
import { Radio, Spin } from 'antd'
import { WeaTableNew } from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;

@inject('payrollStore')
@observer
export default class TemplateSettingList extends React.Component {
    componentWillMount() {
        const { payrollStore } = this.props;
        const { getPayrollTemplateList } = payrollStore;
        getPayrollTemplateList();
    }

    // 编辑操作按钮
    onEdit(record) {
        this.props.onEdit && this.props.onEdit(record)
    }

    // 复制操作按钮
    onCopy(record) {
        this.props.onCopy && this.props.onCopy(record)
    }

    // 删除操作按钮
    onDelete(record) {
        this.props.onDelete && this.props.onDelete(record)
    }

    // 操作按钮
    onOperatesClick = (record, index, operate, flag) => {
        switch(operate.index.toString()){
            case '0': // 编辑
                this.onEdit(record);
                break;
            case "1": // 复制
                this.onCopy(record);
                break;
            case "2": // 删除
                this.onDelete(record);
                break;
        }
    };

    // 默认使用配置
    recordItemChange(record) {
        const { payrollStore } = this.props;
        const { changePayrollDefaultUse, getPayrollTemplateList } = payrollStore;
        changePayrollDefaultUse(record.id).then(() => {
            getPayrollTemplateList()
        })
    }

    // 增加编辑功能，重写columns绑定事件
    getColumns = (columns) => {
        let newColumns = '';
        newColumns = columns.map(column => {
        let newColumn = column;
        newColumn.render = (text, record, index) => { //前端元素转义
            let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
            switch(newColumn.dataIndex) {
            case "useType":
                return <Radio checked={record.useType == "1"} onChange={(value) => {this.recordItemChange(record)}}/>
            default:
                return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
            }
        }
        return newColumn;
        });
        return newColumns;
    }

    render() {
        const { payrollStore } = this.props;
        const { templateStore, loading } = payrollStore;
        return (
            <div>
                { loading ? 
                <div style={{width: '100%', textAlign: "center"}}>
                    <Spin />
                </div>
                 : 
                <WeaTable // table内部做了loading加载处理，页面就不需要再加了
                    comsWeaTableStore={templateStore} // table store
                    hasOrder={true} // 是否启用排序
                    needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
                    getColumns={this.getColumns}
                    onOperatesClick={this.onOperatesClick.bind(this)}
                />
                }
                
            </div>
        )
    }
}