import * as React from "react";
import { Input, Table, Button, Select, Dialog } from "@alifd/next";
import { createElement } from 'react';

export default class AltSelucmleventSetter extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            ucmleventds: new Array(),
            widths: {
                eventWidths: 200,
                valueWidths: 200
            },
            visible: false
        }

    }

    componentDidMount() {
        const { onChange, value } = this.props;
        let uds = [];
        if (value != undefined) {
            uds = value;
            this.setState({
                ucmleventds: uds
            });
            onChange(uds);
        }
    }



    // 声明 Setter 的 title
    static displayName = 'AltSelucmleventSetter';

    render() {
        const { onChange, value, ucmlEventList } = this.props;
        const { widths } = this.state;
        const eventWidths = widths.eventWidths;
        const valueWidths = widths.valueWidths;
        const vhandleEdit = (index, newValue) => {
            const newData = [...this.state.ucmleventds];
            newData[index].value = newValue; // 直接更新 value  
            this.setState({
                ucmleventds: newData
            });
            onChange(newData);
        };
        const ehandleEdit = (index, newValue) => {
            const newData = [...this.state.ucmleventds];
            newData[index].event = newValue; // 直接更新 value  
            this.setState({
                ucmleventds: newData
            });
            onChange(newData);
        };
        const vrender = (value, index, record) => {
            return (<Input  // 使用Input组件代替input元素  
                value={record.value}
                onChange={(v, e) => vhandleEdit(index, v)}

            />)
        };

        const erender = (value, index, record) => {
            /*return (<Input  // 使用Input组件代替input元素  
                value={record.event}
                onChange={(v, e) => ehandleEdit(index, v)}
            />)*/

            return (
                <Select
                    value={record.event}
                    onChange={(v, c, i) => ehandleEdit(index, v)}
                    dataSource={ucmlEventList}
                    followTrigger={false}
                ></Select>)
        };

        const onAddUcmlEvent = () => {
            this.state.ucmleventds.push({ "event": "", "value": "" });
            this.setState({
                ucmleventds: this.state.ucmleventds
            });
        };

        const onRemove = id => {
            const { ucmleventds } = this.state;
            let index = -1;
            ucmleventds.forEach((item, i) => {
                if (item.id === id) {
                    index = i;
                }
            });
            if (index !== -1) {
                ucmleventds.splice(index, 1);
                this.setState({
                    ucmleventds: ucmleventds
                });
            }
            onChange(ucmleventds);
        };


        const renderOpt = (value, index, record) => {
            return (
                <a onClick={onRemove.bind(this, record.id)}>删除</a>
            );
        };

        const onResizeChange = (dataIndex, value) => {
            const { widths } = this.state;
            widths[dataIndex] = widths[dataIndex] + value;
            this.setState({
                widths
            });
        };
        const onOpen = () => {
            this.setState({
                visible: true
            });
        };
        const onClose = e => {
            this.setState({
                visible: false
            });
        };
        return (
            <>
                <Button onClick={onOpen} type="primary">
                    设置Ucml事件
                </Button>
                <Dialog
                    v2
                    title="UCML事件设置"
                    visible={this.state.visible}
                    onOk={onClose}
                    onClose={onClose}
                >
                    <div>
                        <p>
                            <Button onClick={onAddUcmlEvent}>添加事件</Button>
                        </p>
                        <Table dataSource={this.state.ucmleventds} onResizeChange={onResizeChange}>
                            <Table.Column resizable={true} asyncResizable={true} width={eventWidths} title="事件" dataIndex="event" cell={erender} />
                            <Table.Column resizable={true} asyncResizable={true} width={valueWidths} title="值" dataIndex="value" cell={vrender} />
                            <Table.Column title="操作" cell={renderOpt}  />
                        </Table>
                    </div>
                </Dialog>


            </>


        );
    }
}