import React from 'react';
import {Form, Input} from 'semantic-ui-react';
import { getRequest } from '../../../../actions';
import StdAction from './StdAction';

class UnitLeone extends React.Component {
    state = {
        list: [],
        data: {
            dev: '',
            devName: '',
            act: '',
            actName: ''
        }
    }

    componentDidMount() {
        let { showDialog } = this.props;
        fetch('/api/system/getselectlist', getRequest({ type: 'do' }))
            .then(response => response.json())
            .then(json => {
                if (json.status != 1) return showDialog(json.message);
                this.setState({
                    list: json.data.record || []
                })
            })
    }

    changeState = (tag, value) =>{
        let data = {...this.state.data};

        if(tag == 'act') {
            data.actName = value.name;
            data.act = value.act;
        }
        if(tag == 'dev'){
            data.dev = value.dev == '' ? '' : `do${value.dev}`;
            data.devName = value.name;
        }

        this.setState({
            data:{
                ...data
            }
        }, ()=>{
            this.updateData()
        })
    }

    updateData = () => {
        let data = {...this.state.data};
        data.type = 'do';

        this.props.updateData(data);
    }

    updateAct = (act, name) => {
        this.changeState('act', {act, name});
    }

    render() {
        let {i18n} = this.props;
        let dev = '';
        let m = this.state.data.dev.match(/(\d+)/);
        if(m!=null && m.length > 1){
            dev = m[1];
        }
        return (
            <div>
                <Form.Field>
                    <label>選擇裝置</label>
                    <select value={dev} onChange={e=>{
                            let el = e.target;
                            let json = {
                                dev: '',
                                name: ''
                            };

                            json.dev = el.value;
                            json.name = el.options[el.selectedIndex].innerHTML;

                            this.changeState('dev', json);
                        }}>
                        <option value="">選擇裝置</option>
                        {
                            this.state.list.map((t,idx) => (
                                <option key={idx} value={t.id}>{t.name}</option>
                            ))
                        }
                    </select>
                </Form.Field>
                <StdAction i18n={i18n} updateAct={this.updateAct} />
            </div>
        )
    }
}

export default UnitLeone;