import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {Table} from "antd";
import {WeaLocaleProvider} from 'ecCom';
import uniq from 'lodash/uniq';
import find from 'lodash/find';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class SerialTableList extends Component{
    render(){
        const {
            store: {toJS, serialTableProps, getShiftCycleForm, deleteSerial, groupShiftOptions}
        } = this.props;
        let {
            columns,
            datas,
        } = serialTableProps;
        columns = columns.map(c => {
            if(c.dataIndex == 'serial'){
                return {
                    ...c,
                    render: (text, record, index) => {
                        const {serial} = record;
                        let arr = serial.split(',');
                        let coms = [];
                        uniq(arr).map(key => {
                            if(key != '-1'){
                                const d = find(toJS(groupShiftOptions), {key});
                                const showname = (d != null ? d.showname : '');
                                coms.push(
                                    <div style={{width: 210}} className='text-elli' title={showname}>{showname}</div>
                                )
                            }
                        });
                        return coms;
                    }
                }
            }else if(c.dataIndex == 'operate'){
                return {
                    ...c,
                    render: (text, record) => {
                        return (
                            <div>
                                <span>
                                    <a onClick={() => getShiftCycleForm(record)}>{getLabel('93','编辑')}</a>
                                </span>
                                <span style={{marginLeft: '10px'}}>
                                    <a onClick={() => deleteSerial(record)}>{getLabel(131966, '删除')}</a>
                                </span>
                            </div>
                        )
                    } 
                }
            }else if(c.dataIndex == 'shiftcyclename'){
                return {
                    ...c,
                    render: (text, record) => {
                        return (
                            <div className='text-elli' style={{width: 210}} title={record.shiftcyclename}>
                                {record.shiftcyclename}
                            </div>
                        )
                    } 
                }
            }else
                return c;
        })
        return (
            <div className="workdaySetting">
              <div className="table">
                <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@cccbhs`}
                  pagination={false}
                  columns={columns}
                  dataSource={datas}
                />
              </div>
            </div>
        )
    }
}