import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import './sass/zone_edit.scss';
import axios from 'axios';

// 链接定义

class Table extends React.Component{
    constructor(props){
        super(props);
        this.add = this.add.bind(this);
        let children = this.props.data;
        this.state = {
            children,
        };
    }
    add(){
        let children = this.state.children;
        let index = children[children.length-1].zid;
        children.push({
            title: "标题",
            zid: index+1,
            content: "编辑内容",
            datetime: new Date()
        });
        this.setState({children});
    }
    render(){
        return (
            <section>
                {
                    this.state.children.map(value=>{
                        return <Tr key={`${value.zid}_zone`} content={value.content} datetime={value.datetime}
                            article={value.title} articleId={value.zid} tag={value.tag} api={this.props.api} />;
                    })
                }
                <Toolbar add={this.add}/>
            </section>
        );
    }
}

class Toolbar extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return (
            <div className="toolbar">
                <div className="add-item" onClick={this.props.add}></div>
            </div>
        );
    }
}

class Tr extends React.Component{
    constructor(props){
        super(props);
        let editStyle = {
            display: "none"
        };
        let saveStyle = {
            display: "block"
        };
        let tip=['edit','','preview','','save','','page',''];
        this.dom = React.createRef();
        this.state = {
            props,
            save: saveStyle,
            edit: editStyle,
            value: this.props.content,
            tip: tip,
            title: this.props.article,
            datetime: this.props.datetime,
            tag: this.props.tag
        }
        this.editStyle = editStyle;
        this.saveStyle = saveStyle;
        this.textChange = this.textChange.bind(this);
        this.tipShow = this.tipShow.bind(this);
        this.tipHidden = this.tipHidden.bind(this);

    }
    edit(){
        this.setState({
            save: this.editStyle,
            edit: this.saveStyle
        });
    }
    save(){
        this.preview();
        let content = this.state.value;
        let title = this.state.title;
        let datetime = new Date(this.state.datetime);
        let zid = this.props.articleId;
        let tag = this.state.tag;
        let date = {content,title,datetime,tag,zid};
        let send = JSON.stringify(date);
        console.log(send)
        $.post(this.props.api,{update:true,json: send},result=>{
            let $dom = $(this.dom.current);
            if(result.ok){
                console.log("保存成功");
                $dom.attr('data-state','保存成功');
            } else {
                $dom.attr('data-state','保存失败');
            }
            $dom.addClass('tip');
            setInterval(()=>{
                $dom.removeClass('tip');
            },5000);
        },'json');
    }
    preview(){
        this.setState({
            save: this.saveStyle,
            edit: this.editStyle,
        });
    }
    textChange(event){
        this.setState({
            value: event.target.value
        });
    }
    titleChange(event){
        this.setState({
            title: event.target.value
        });
    }
    tagChange(event){
        this.setState({
            tag: event.target.value
        });
    }
    tipShow(event){
        let $dom = $(event.target);
        $dom.attr('data-tip',$dom.attr('tip'));
    }
    tipHidden(event){
        $(event.target).attr('data-tip','');
    }
    render(){
        let date = new Date(this.props.datetime);
        let content = this.state.value;
        let tip=this.state.tip;
        return (
            <div className="list-item" ref={this.dom}>
                <div className="list-header">
                    <div className="title-id">{this.props.articleId}</div>
                    <input style={this.state.edit} onChange={()=>this.titleChange(event)} className="title-edit" value={this.state.title}/>
                    <div style={this.state.save} className="title">{this.state.title}</div>
                    <input style={this.state.edit} onChange={()=>this.tagChange(event)} className="title-edit" value={this.state.tag}/>
                    <div style={this.state.save} className="tag">{this.state.tag}</div>
                    <div className="datetime">{date.toLocaleString()}</div>
                    <div tip={tip[0]} onMouseLeave={this.tipHidden} onMouseMove={this.tipShow} name="edit"  onClick={()=>{this.edit()}}></div>
                    <div tip={tip[2]} onMouseLeave={this.tipHidden} onMouseMove={this.tipShow} name="preview" onClick={()=>{this.preview()}}></div>
                    <div tip={tip[4]} onMouseLeave={this.tipHidden} onMouseMove={this.tipShow} name="save" onClick={()=>{this.save()}}></div>
                </div>
                <div style={this.state.save} className="list-body" 
                dangerouslySetInnerHTML={{__html: content}}></div>
                <textarea style={this.state.edit}
                value={content} onChange={this.textChange}></textarea>
            </div>
        );
    }
}

class Zones extends Component {
    constructor(props){
        super(props);
        let dom = React.createRef();
        this.state = {
            dom
        };
    }

    componentWillMount(){
        let api = 'https://api.ourfor.top/blog/zones';
        axios.get(api).then(res=>{
            this.setState({
                data: res.data,
                api
            });
        });
    }

    componentDidUpdate(){
        let dom = this.state.dom.current;
        ReactDOM.render(<Table data={this.state.data} api={this.state.api} />,dom);
    }

    render(){
        return <div ref={this.state.dom} id="zones-manager"></div>
    }

}

export {Zones};