import React from 'react';
import { Button, Modal, Table, Icon, Row, Col, InputNumber  } from 'antd';
import { observer } from 'mobx-react'
import Api from '@/service/api'
// import { Link } from 'react-router-dom'
import { observable } from 'mobx'
import { Notification, Input, Label, TextAreaItem, Select, DatePicker } from '@/components/Common-Library'

function deepCopy(obj) {
    let result = Array.isArray(obj) ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object') {
                result[key] = deepCopy(obj[key]);   //递归复制
            } else {
                result[key] = obj[key];
            }
        }
    }
    return result;
}

@observer
export default class TableExpansion extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = this.props.dataSource
        this.init_header(this.props.columns);
    }
    shouldComponentUpdate(nextProps, nextState) {
        this.dataSource = nextProps.dataSource;
        this.dataHeader = this.init_header(nextProps.columns);
        return true;
    }
    // @observable
    dataHeader = []
    @observable
    visible = false
    // 表的内容
    @observable
    dataSource = []
    // 临时存放新增的数据
    @observable
    data = {}
    dataHeaderAdd = []

    addDeleteColumn = (columns) => {
        let resultCol = deepCopy(columns);
        resultCol.splice(columns.length, 0, {
            title: '操作',
            key: 'delete',
            width: 100,
            render: (text, row, record) => {
                return <Label value="删除" style={{ color: "blue",cursor:"pointer" }} onClick={() => { this.handleDelete(text, row, record) }} />
            }
        });
        this.dataHeader = resultCol;
        return resultCol;
    }
    fuzhi = () => {
        this.dataSource = this.props.dataSource;
    }
    // 给Table的header赋值
    init_header = (columns) => {
        let resultCol = deepCopy(columns);
        for (let i = 0; i < columns.length; i++) {
            if (columns[i].type && columns[i].type.edit) {
                // edit是需要编辑的栏位的一个数组集合
                let edit = columns[i].type.edit;
                if (edit.type == 'select') {
                    // 选择栏位
                    resultCol[i].render = (text, row, record) => {
                        return <Select
                            code={edit.code}
                            value={text}
                            onChange={(val) => {
                                this.dataSource[record][resultCol[i].dataIndex] = val
                                this.props.onChange(this.dataSource);
                                this.setState({});
                            }}
                        />
                    }
                } else if (edit.type == 'datePicker') {
                    // 日期选择栏位
                    resultCol[i].render = (text, row, record) => {
                        return <DatePicker
                            value={text}
                            placeholder={null}
                            onChange={(val) => {
                                this.dataSource[record][resultCol[i].dataIndex] = val
                                this.props.onChange(this.dataSource);
                                this.setState({});
                            }}
                        />
                    }
                } else if (edit.type == 'input') {
                    // 输入栏位
                    resultCol[i].render = (text, row, record) => {
                        return <Input
                            value={text}
                            onChange={(val) => {
                                this.dataSource[record][resultCol[i].dataIndex] = val
                                this.props.onChange(this.dataSource);
                                this.setState({});
                            }}
                            onBlur={()=>{
                              columns[i].onAfterBlur && columns[i].onAfterBlur();
                            }}
                        />
                    }
                }
            }
        }
        this.dataHeader = resultCol;
        if (this.props.delete && this.props.delete == true) {
            resultCol = this.addDeleteColumn(this.dataHeader);
        }
        return resultCol;
    }
    // 根据一个column返回一个组件，而不是根据一组columns返回一个组件列表
    init_headerAdd = (column) => {
        if (column.type && column.type.add) {
            // add是需要编辑的栏位的一个数组集合
            let add = column.type.add;
            if (add.type == 'select') {
                // 选择栏位
                if (this.data.hasOwnProperty(column.dataIndex) == false) {
                    this.data[column.dataIndex] = "";
                }
                // 存在默认值时，直接使用默认值
                column.defaultVal && (this.data[column.dataIndex]=column.defaultVal)
                return <Select
                    code={add.code}
                    value={this.data[column.dataIndex]}
                    onChange={(val) => {
                        this.data[column.dataIndex] = val;
                        this.setState({});
                        column.onAfterChange && column.onAfterChange(this.data);  //关联数据变化处理
                    }}
                    disabled={column.isDisabled}
                />
            } else if (add.type == 'datePicker') {
                // 日期选择栏位
                if (this.data.hasOwnProperty(column.dataIndex) == false) {
                    this.data[column.dataIndex] = "";
                }
                return <DatePicker
                    value={this.data[column.dataIndex]}
                    placeholder={null}
                    onChange={(val) => {
                        this.data[column.dataIndex] = val
                        this.setState({});
                    }}
                />
            } else if (add.type == 'input') {
                // 输入栏位
                if (this.data.hasOwnProperty(column.dataIndex) == false) {
                    this.data[column.dataIndex] = "";
                }
                return <Input
                    value={this.data[column.dataIndex]}
                    onChange={(val) => {
                        this.data[column.dataIndex] = val
                        this.setState({});
                    }}
                    disabled={column.isDisabled}
                />
            } 
        } else if (column.hasOwnProperty("dataIndex") == true) {
            // 输入栏位
            if (this.data.hasOwnProperty(column.dataIndex) == false) {
                this.data[column.dataIndex] = "";
            }
            return <Input
                value={this.data[column.dataIndex]}
                onChange={(val) => {
                    this.data[column.dataIndex] = val
                    this.setState({});
                    column.onAfterChange && column.onAfterChange(this.data);  //关联数据变化处理
                }}
                disabled={column.isDisabled}
            />
        }
    }
    handleDelete = (text, row, record) => {
        let dataTemp = this.dataSource.slice(0);
        dataTemp.splice(record, 1);
        this.dataSource = dataTemp;
        this.props.onChange(this.dataSource)
    }

    handleAdd = () => {
        this.visible = true;
    }
    handleOK = () => {
        console.log(this.props)
        let tempData = this.dataSource.slice(0);
        tempData.push({ ...this.data });
        this.dataSource = tempData;
        this.props.onChange(this.dataSource);
        //判断是否有额外的确定按钮点击事件
        this.props.OkEvent && this.props.OkEvent()
        // 隐藏弹出框
        this.visible = false;
        this.data = []
    }
    handleCancel = () => {
        this.visible = false;
    }
    render() {
        const { dataSource, columns, ...res } = this.props
        return (<div>
            <Table
                columns={this.dataHeader}
                dataSource={this.dataSource}
                {...res}
            >
            </Table>
            {
                this.props.add == false ? null : <Button block={true} icon="plus" {...this.props} onClick={this.handleAdd} style={{ marginTop: 12, marginBottom: 12 }} />
            }
            <Modal
                visible={this.visible}
                onCancel={this.handleCancel}
                onOk={this.handleOK}
                footer={
                    <div>
                        <Button onClick={this.handleCancel}>取消</Button>
                        <Button onClick={this.handleOK}>确定</Button>
                    </div>
                }
                width={650}
            >
              <Row>
                {
                  this.dataHeader.map((item) => {
                      if (item.hasOwnProperty("dataIndex") == true) {
                          return (
                            <Col span={24}>
                                <Row className='row'>
                                    <Col span={5} offset={2}>
                                        <Label value={item.title} />
                                    </Col>
                                    <Col span={14}>
                                        {
                                            this.init_headerAdd(item)
                                        }
                                    </Col>
                                </Row>
                            </Col>
                          )
                      } else {
                          return null;
                      }
                  })
                }
              </Row>
            </Modal>
        </div>);
    }
}