import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { getImageUrl } from "educoder";
import { List, Popconfirm, Pagination, Button } from "antd";
import Attachments from "../Upload/attachment";
import RenderHtml from "../../components/render-html";
import "../Order/order.css";

class children_journals extends Component {
  constructor(props) {
    super(props);
    this.state = {
      journalsdata: this.props.comments,
      limit: 10,
      page: 1,
      journal_spin: false,
      search_count: this.props.comments && this.props.comments.journals_count,
      orderId: this.props.order_id,
      parent_id: this.props.parent_id
    };
  }

  //删除评论
  deleteorder = (id) => {
    const { orderId, parent_id , limit } = this.state;
    const url = `/issues/${orderId}/journals/${id}.json`;
    axios
      .delete(url, {
        data: {
          issue_id: orderId,
          id: id,
        },
      })
      .then((result) => {
        if (result) {
          this.props.getChildrenJournals(orderId,parent_id,1,limit);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // 翻页
  ChangePage = (page) => {
    const { orderId, parent_id, limit } = this.state;
    this.state.page = page 
    this.state.isSpin = true
    this.props.getChildrenJournals(orderId,parent_id,page,limit);
  };

  commentCtx = (v) => {
    return <RenderHtml className="break_word_comments imageLayerParent" value={v} />;
  };

  Paginations =()=> {
    const { page, limit, search_count } = this.state;
    if(search_count > limit){
      return(
        <div className="pt30 mb50 edu-txt-center btp1">
          <Pagination
            simple
            defaultCurrent={page}
            total={search_count}
            pageSize={limit}
            onChange={this.ChangePage}
          ></Pagination>
        </div>
      )
    }
  }

  renderList = (item) => {
    const { current_user } = this.props;
    return (
      <div className="width100">
        <div className="grid-item pb10">
          <Link
            to={`/users/${item && item.user_login}`}
            className="show-user-link"
          >
            <img
              className="radius"
              src={getImageUrl(`images/${item && item.user_picture}`)}
              alt=""
              width="30"
              height="30"
            />
          </Link>
          <span className="grid-item">
            <span>
              <Link
                to={`/users/${item && item.user_login}`}
                className="show-user-link color-blue ml10"
              >
                {item && item.user_name}
              </Link>
              <span className="color-grey-8 ml20">{item.created_at}</span>
            </span>

            <span className="text-right">
              {current_user &&
              (current_user.admin ||
                current_user.login === item.user_login) ? (
                <Popconfirm
                  placement="bottom"
                  title={"确定要删除当前评论吗?"}
                  okText="是"
                  cancelText="否"
                  onConfirm={() => this.deleteorder(item.id)}
                >
                  <Button type="link">
                    <i className="iconfont icon-shanchu font-15 color-grey-6"></i>
                  </Button>
                </Popconfirm>
              ) : (
                ""
              )}
            </span>
          </span>
        </div>
        <div className="ml30">
          {this.commentCtx(item.content)}
          {item && item.attachments && item.attachments.length > 0 ? (
            <Attachments
              attachments={item.attachments}
              showNotification={this.props.showNotification}
              canDelete={
                current_user &&
                (current_user.admin || current_user.login === item.user_login)
              }
            />
          ) : (
            ""
          )}
        </div>
      </div>
    );
  }

  render() {
    const { journalsdata , search_count , isSpin } = this.state;
    return (
      <div>
        {
          search_count > 0 && 
          <div className="children-comment-bg">
          <List
              size="large"
              loading={isSpin}
              dataSource={journalsdata.issue_journals}
              renderItem={(item) => <List.Item>{this.renderList(item)}</List.Item>}
            />
            {this.Paginations()}
        </div>
        }
      </div>
    )
  }
}

export default children_journals;
