import React, { useState, useRef, useEffect } from "react";
import { connect } from "react-redux";
import { Modal, Spin,Input,TagInput } from "@douyinfe/semi-ui";

function programmeModal (props) {
    const {
        close,
        rowId,
        dispatch,
        actions,
        resolve,//解决方案
    } = props;
    const { offline } = actions;//接口
    const [myresolve, setMyResolve] = useState([]);//解决方案
    //初始化
    useEffect(() => {
        let resolvearr=[]
        for (let index = 0; index < resolve.length; index++) {
            resolvearr.push(resolve[index].resolve)
        }
        setMyResolve(resolvearr)
    }, []);

    function handleOk () {
        //点击弹框确定  右边按钮
        dispatch(
            offline.postStatusResolve({
                statusId:rowId,
                resolve:myresolve
            })
        ).then((res) => {
            close();
        })
    }
    function handleCancel () {
        close();
        //点击弹框取消  左边按钮
    }
    function onChange(value){
        setMyResolve(value)
    }
    return (
        <>
            <Modal
                title="方案"
                okText="确定"
                cancelText="取消"
                visible={true}
                onOk={handleOk}
                width={607}
                onCancel={handleCancel}
            >
                <div style={{margin:"17px 56px 18px 31px"}}>
                    <div style={{color:'rgba(0, 0, 0, 0.65)',}}>
                        解决方案设置：
                    </div>
                    <div style={{color:'rgba(0, 0, 0, 0.45)',fontSize:12,marginTop:4}}>
                        敲击回车键后，输入内容将成为标签
                    </div>
                    <div style={{marginTop:10}}>
                        <TagInput
                            defaultValue={myresolve}
                            placeholder='请输入解决方案'
                            size='large'
                            maxLength={18}
                            onChange={onChange}
                        />
                    </div>
                </div>
            </Modal>
        </>
    );
}
function mapStateToProps (state) {
    const { auth, global, members, CameraKind, CameraAbility } = state;
    return {
        loading: members.isRequesting,
        user: auth.user,
        actions: global.actions,
        CameraKind: CameraKind.data || [],
        CameraAbility: CameraAbility.data || [],
    };
}

export default connect(mapStateToProps)(programmeModal);