import './sass/zone_edit.scss';
import axios from 'axios';


// 链接定义
let editUrl = "http://blog.ourfor.com/_editor";
let pagesUrl = "http://blog.ourfor.com/_pages";
let writeUrl = $conf.api.path.editor.main;
let saveUrl = "https://api.ourfor.top/blog/essays";




class Table extends 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].articleId;
        children.push({
            article: "标题",
            articleId: index+1,
            summary: "编辑内容",
            writeAt: new Date()
        });
        this.setState({children});
    }
    render(){
        let children = this.state.children;
        return (
            <section>
                {
                    children.map(value=>{
                        return <Tr key={`${value.articleId}_tr`} content={value.summary} datetime={value.writeAt}
                            article={value.article} articleId={value.articleId} />;
                    })
                }
                <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 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
        }
        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 summary = this.state.value;
        let article = this.state.title;
        let updateAt = new Date();
        let writeAt = new Date(this.state.datetime);
        let articleId = this.props.articleId;
        let date = {summary,article,updateAt,writeAt,articleId};
        let send = JSON.stringify(date);
        axios.put(saveUrl,send,
            {headers: {'content-type': 'application/json;charset=UTF-8'}}
            ).then(res=>{
            let result = res.data
            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);
        });
    }
    preview(){
        this.setState({
            save: this.saveStyle,
            edit: this.editStyle,
        });
    }
    page(){
        // axios.post(editUrl,{id: this.props.articleId}).then(res=>{
        //     window.open(writeUrl,'_self');
        // });
        $.post(`${$conf.api.base}/${$conf.api.path.write.editBuff}`,{id: this.props.articleId},result=>{
            window.open(writeUrl,'_self');
        });
    }
    textChange(event){
        this.setState({
            value: event.target.value
        });
    }
    titleChange(event){
        this.setState({
            title: 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>
                    <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 tip={tip[6]} onMouseLeave={this.tipHidden} onMouseMove={this.tipShow} name="page" onClick={()=>{this.page()}}></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 Pages extends Component {
    constructor(props){
        super(props);
        let dom = React.createRef();
        this.state = {
            content: null,
            dom
        };
    }
    componentWillMount(){
        let api = `${$conf.api.base}/${$conf.api.path.essay.all}`;
        axios.get(api).then(res=>{
            this.setState({
                content: res.data
            });
        });
    }
    compnentDidMount(){
    }

    componentDidUpdate(){
        let dom = this.state.dom.current;
        let data = this.state.content;
        if(data) ReactDOM.render(<Table data={this.state.content} />,dom);
    }
    
    render(){
        return (
            <div ref={this.state.dom} id="pages-manage"></div>
        );
    }
}

// class Manager{
//     constructor(conf){
//         editUrl = conf.editUrl;
//         pagesUrl = conf.pagesUrl;
//         writeUrl = conf.writeUrl;
//         saveUrl = conf.saveUrl;

//         axios.get(pagesUrl).then(res=>{
//             ReactDOM.render(
//                 <Table data={res.data} />,
//                 $('#pages-manage')[0]
//             );
//         });
//     }
// }
// window.Manager = Manager;

export default Table;
export {Pages};

// let manager = new Manager({
//     editUrl: "${base}/_editor",
//     pagesUrl: "https://api.ourfor.top/blog/essays/all",
//     writeUrl: "${base}/dashboard/write",
// });