import React, { useEffect, useState } from 'react';
import { Button, Collapse , Tooltip , Spin } from 'antd';
import axios from 'axios';
import Content from './historyContent';
import Fault from '../images/fault.png';
const { Panel } = Collapse;

function PushHistory({id,owner,projectsId,showNotification}) {
  const [ list , setList ] = useState(undefined);
  const [ isSpin , setIsSpin ] = useState(false);

  useEffect(()=>{
    if(id && owner && projectsId){
      Init();
    }
  },[id,owner,projectsId])

  function Init() {
    const url = `/${owner}/${projectsId}/webhooks/${id}/tasks.json`;
    axios.get(url,{
      params:{page:1,limit:10}
    }).then(result=>{
      if(result && result.data){
        setList(result.data.tasks);
        setIsSpin(false);
      }
    }).catch(error=>{})
  }

  function testFunc() {
    setIsSpin(true);
    const url =  `/${owner}/${projectsId}/webhooks/${id}/test.json`;
    axios.post(url).then(result=>{
      if(result && result.data){
        // Init();
        showNotification("测试推送已经加入到队列，请耐心等待数秒再刷新推送记录!");
        setIsSpin(false);
      }
    }).catch(error=>{setIsSpin(false);})
  }

  return(
    <div className="pt30">
      <div className="deschead">
        <span className="font-16">最近推送历史</span>
        <span>
          <a className="color-blue" onClick={Init}>刷新</a>
          <Button type="primary" className="ml20" onClick={testFunc} loading={isSpin}>测试推送</Button>
        </span>
      </div>
      {
        list && list.length>0 &&
        <Collapse accordion bordered={false} className="historyColl">
          {
            list.map((i,k)=>{
              return(
                <Panel header={
                  <div className="panelHeader">
                    {
                      i.is_succeed ? 
                      <Tooltip title={<span className="pl20 pr20">响应成功，类型：{i.response_content && i.response_content.status}</span>}>
                        <i className="iconfont icon-chenggongicon font-14 mr10" style={{color:"#2DB44D"}}></i>
                      </Tooltip>
                      :
                      <img src={Fault} alt="" className="mr10" height="15px" style={{marginTop:"2px"}}/>
                    }
                    <span className="name">{i.uuid}</span>
                    {/* <span>{i.type}</span> */}
                    <span className="time">{i.delivered_time}</span>
                  </div>
                }>
                  <Content request_content={i.request_content && i.request_content.headers} payload_content={i.payload_content} response_content={i.response_content}/>
                </Panel>
              )
            })
          }
        </Collapse>
      }
    </div>
  )
}
export default PushHistory;