import * as React from 'react';
import { Icon, Tabs, Progress, Modal, Card } from 'antd';
import { dateFormat } from '../utils/utils';
import { message } from 'antd';
import { cancelTask  } from '../api/index';
import { RuningTaskData, FinishTaskData } from '../modal';
const { TabPane } = Tabs;

// const statusMap = [{
//   key: 4,
//   label: '取消'
// }, {
//   key: 5,
//   label: '失败'
// }, {
//   key: 6,
//   label: '超时'
// }, {
//   key: 7,
//   label: '成功'
// }];

// const operateTypeMap = [{
//   key: 0,
//   label: '无操作'
// }, {
//   key: 1,
//   label: '查看'
// }, {
//   key: 2,
//   label: '下载'
// }]

interface SiderListProps {
  /** 对话框是否隐藏*/
  showBar: boolean;
  /** 账号*/
  employee_id: number;
  /** 收起*/
  closeBar: Function;

  className?: string;

  fetchAllData: Function;

  data: {
    running_tasks: RuningTaskData[];
    finish_tasks: FinishTaskData[]
  }
}

interface RuningTaskProps {
  key: string | number;
  data: RuningTaskData;
  
  /** 取消回调*/
  cancelTask?: (...args: any[]) => any | PromiseLike<any>;
}

interface FinishTaskProps {
  key: string | number;
  data: FinishTaskData;
}

function showMore(msg: string) {
  Modal.info({
    title: '错误信息',
    width: 800,
    okText: null,
    maskClosable: true,
    content: <p>{msg}</p>
  });
}

const RuningTask = (props: RuningTaskProps) => {
  
  const { data, cancelTask} = props;
  const { name, description, progress, allow_cancel, create_time, all_time, status } = data;

  const percent = progress ? progress * 100 : 0;

  const now = Math.floor(Date.now() / 1000);
  const time = now - create_time;
  
  let timeNotice = '';
  if (time < 60) {
    timeNotice = '刚刚创建'
  } else if(time < 3600) {
    const minutes = Math.floor(time / 60);
    timeNotice = `${minutes}分钟前创建`
  } else {
    const hours = Math.floor(time / 3600);
    timeNotice = `${hours}小时前创建`
  }

  const leftTime = Math.floor(all_time * ( 1 - progress) );

  const leftTimeNotice = `预计剩余 ${leftTime} 秒`

  return (
    <div className='task-item'>
      <h4 className='name'>{name}</h4>
      <p className='desc'>{description}</p>
      <div className='process-wrap clearfix'>
        <div className='process-inner'>
          <Progress percent={percent} status="active" />
        </div>
        
        {
          allow_cancel && (
            status == 3 ? 
            <a href='javascript: void(0)' className='fr' >取消中...</a>
             :
            <a className='fr' href='javascript: void(0)' onClick={cancelTask}>取消</a>
          )
          
        }
      </div>
      <div className='notice clearfix'>
        <div className='fl'>{timeNotice}</div>
        <div className='fr'>{leftTimeNotice}</div>
      </div>
    </div>
  )
}

const FinishTask = (props: FinishTaskProps) => {
  
  const { data } = props;
  const { name, description, status, oper_type, url, message, create_time, end_time } = data;

  function getTit(status: number) {
    switch(status) {
      case 4:
        return (
          <h4 className='name reset-name'><span className='icon-wrap'><Icon type="info" /></span> {name} 取消</h4>
        )
      case 5:
        return (
          <h4 className='name fail-name'><span className='icon-wrap'><Icon type="close" /></span> {name} 失败</h4>
        )
      case 6:
        return (
          <h4 className='name outtime-name'><span className='icon-wrap'><Icon type="clock-circle" /></span> {name} 超时</h4>
        )
      case 7:
        return (
          <h4 className='name success-name'><span className='icon-wrap'><Icon type="check" /></span> {name} 成功</h4>
        )
        
    }
  }

  function getLink(oper_type: number, url: string) {
    if ( oper_type == 0 || !url ) {
      return ''
    } else {
      if(oper_type == 1) {
        return <a href={url}>查看</a>
      } else if( oper_type == 2 ) {
        return <a href={url}>下载</a>
      } else {
        return ''
      }
    }
  }

  const durationTime = end_time - create_time;
  let durationTimeStr = '';
  if (durationTime < 60) {
    durationTimeStr = `${durationTimeStr} 秒`
  } else if(durationTime < 3600) {
    const minutes = Math.floor(durationTime / 60);
    durationTimeStr = `${minutes} 分钟`
  } else {
    const hours = Math.floor(durationTime / 3600);
    durationTimeStr = `${hours} 小时`
  }
  
  
  return (
    <div className='task-item finish-item'>
      {
        getTit(status)
      }
      <p className='desc'>
        {description}
        {getLink(oper_type, url)}
      </p>
      {
        status == 5 &&
        <p className='fail-box'>
          <span className='message'>{message}</span>
          {
            message.length > 8 &&
            <a
              onClick={() => { showMore(message) }}
              href='javascript:void(0)'>显示更多</a>
          }
          
        </p>
      }
      
      <div className='notice clearfix'>
        <div className='fl'>{dateFormat(end_time * 1000, '{y}-{m}-{d} {h}:{i}:{s}')}</div>
        <div className='fr'>{`执行 ${durationTimeStr}`}</div>
      </div>
    </div>
  )
}


type InitialState = {
  data: {
    running_tasks: RuningTaskData[];
    finish_tasks: FinishTaskData[]
  };

}

class SiderList extends React.Component<SiderListProps, object> {

  static defaultProps = {
    classPrefix: 'tabs',
    onChange: () => {}
  }

  state: InitialState = {
    data: {
      running_tasks: [],
      finish_tasks: []
    }
  }

  async handleCancel(id: number) {
    const { fetchAllData } = this.props;
    const { employee_id } = this.props;

    const { code } = await cancelTask({employee_id, task_id: id}, {
      callback: () => {
        message.success('任务取消成功！');
      },
      errorCb: (msg: string) => {
        message.error(msg || '任务取消失败！');
      }
    })
    if ( code === 200 ) {
      fetchAllData()
    }
  }
  
  render() {
    const { closeBar, className, data } = this.props;
    // console.log(loading)
    const { running_tasks, finish_tasks } = data;


    return <div className={`sideList ${className}`}>

      <div className='tit clearfix'>
        <h3>我的后台任务</h3>
        <Icon  onClick={() => {closeBar()}} type="close"/>
      </div>
      <div className='content'>
        <Tabs defaultActiveKey="running">
          <TabPane tab='进行中任务' key="running">
            <Card
              bordered={false}
              
              bodyStyle={{padding: 0}}
            >
              {
                running_tasks.length > 0 ? running_tasks.map(task => (
                  <RuningTask
                    key={task.id}
                    data={task} 
                    cancelTask={() => { this.handleCancel(task.id) }}
                  ></RuningTask>
                )):

                <div className='empty-task-msg'>
                  {/* <img src={ require('@/assets/images/empty.png') } alt='暂无数据'></img> */}

                  <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABSCAYAAACMhFB2AAAAAXNSR0IArs4c6QAACIxJREFUeAHtnVtsFUUYx3ujRUTFBhHaKEUtKigSxRvSlj4ZEoVoNJJoNCaaKDHxjQcMROMLTyQaTTTGaCReEhNJ0HiJxgIFfEFUQKO0RlQKGAlULV5qL/7+hzPHPYe9tZ3t7mnnSz5md3bmm2/+/53LzswplRUJyo4dO64dHBxcW1lZ2TI8PHwhRVUnWFyWTJ+izgdx6O3GxsZNzc3N/yTlXGUShjs6OmqowHpsr4O4miTKKBeb4HAAvb+tre2LJHxOhMBt27Y9BXEb5DDOnyR4D93Pdb/iJoHMHhoaaqGet6iu1PsEeCxsb28/Zrvu1luHuk2cX5d3vLOqquqe1tbWo7YdLwd727dvvxfiXkXrIfFFfF5l2+8q2wY15uGwutCTk5k84Uq3+To4bNQ1mKxkaLlK1zbFOoE4rK5D8u5kbXmnq3/6X3ojtbycgE2rubYVWieQN02zTb1x+205Wc52GPcOQ1xvvg45bGzWxzqBOJf7VMDpyTJhicOHwcL6nCMJAuNUyKWxhIAj0BKQaZlxBI4j8swLhm0X5wi0jaiPPXjrIHqwurq60+fxmKIcgWOCL15mZqKr6+rqZvFZ9VG8HPFTOQLjYzWmlEuXLj0xJgMBmR2BAcCUS7QjsFyYCvDTERgATLlEW18ZKJeKJ+inVqLq8zqVsBatQ0u37gaI00avVmn60OP5kCC+OALjYxWV8hwSzEVFXpyeTUSLWMlMtAn9Gz2C9qCDaKQ4AiMhikygVjYPtbFQLVuXoI3oITRyH9URCEpjkBnkXYhOGYMNv6xqmZej56PfoYGt0REIOqOUBvI1o6Vj2yjN+WabRexZ6AFU4+UZEqevPiOTi6i4AAzmo0mSZ2DW2Ho1mtumM5EmdAQaJOKH00l6ZfzkVlKqzCv8LDkC/VAJjhNeGvPSwE2tXt12kaThSJEDZXYjADUmpSVNFFzUlToC41OhCZ++89IULQpc5HXAEehFI/xaXZjtz4XwEv2fqhcoTJ4cgf4g+cVqtSQLolaomWlOHIEGifBQ444+qrMihZcpkx/ynGDeyLHENaBVNGAnhF43Rx5ujfjdwjTKztLLXmiBmSQQ8u4A1IKTCRFnzC7irIo+DY6ZCJ9QS1tRot2EX1B9s12MFsYpriU63KtFas1iNRkqfTn7iPsJ1TjblA8JfEXdaE4ySSDkrYLElXhYWsm821aD7paWlk8jLBYAC0j3J/Ffo8Por6haq3e2+C/3Oqlu1jSHuL4MNaJ8+9D+fIRCvVRBUnihMkkg3dm3eC7NikS9SH/hqEgwIkK9om0iQ57iS5+LYEOe33PFeaXgT5b6da+DWbsWwGGiXQmNkxKBOzt39f8/6lbPy98Kc30KeEUtXJ8pEnW92k4Kk4I/mWyBYZ6n9MzbOvxcEGlL0N9REVna5YqUxehvqPb8pKWiLlPPNQaal6E0jbkv+OMINJCEh+oCo0QtSy0xSERi2HPlM600yIaJV5edE9eFGiTCQ41ZcUgMt2LvqX62nhNHoEEiOkzkYG50sb4pCr44An3x8Y3UN14WpBcnCr2BIzA+JZpgCLy05UevA45ALxrR14eikySaQi9RYfxTSZmchfJ3Zh7Et4dYkSl8sMrZJIQVn66ampo1y5Yt+yOGfbVALYdFfafFMDXiJFoI0Am1IskkgXi4AfKaijxN6IZybhwYGHgD8x/ELOJ70mm6r4/z8ZSDFFa6gpPNFgioj+LsfbSO8WiB3Q0NDVFroV6itI6pdc1r0KgPbm++sVz/QGbfSVQmWyBroR/isDSrojOaX6Ii8eyEnezG/uGgMtwkJgiZ6HgtZ+1FNSYmIfpU+AoNJE+FZrIFyrEyEU0sulBtIV2K2tjDlM2j6CFUv2AKFUdgKDyxH2p2+jmqyU0Dql8oaVF6JKINXY1zIi+SOGPYEWiQsBPqO00q0QRHv1iaq5sA0aK0WrB2MWKT5rXlCPSiYfdaU37NHkWMutdSEXmaCPn+aKU0cdC9m8QEIWMv/mdM6dvRK1bIk0HXAr2wJnctEk+hs1C1ON2PqsskX5E4AovgSPRGW0CFbSBbJWWSQP5scxurMavRalsVHa0dVoN6OHa4KeZa6WiLGXW+TBLIX7l9BfLmjbpWFjPih6wdRl+2aNaaqUwSCGibePMfJsxKC/x4LIizu7KeujyAjbtYJtTM05pkkkAq+Rw1lE4U0eL8HF7KOwmtEug+I8bnFTE9iQmtleoItAZlOoYcgengbq1UR6A1KNMx5AhMB3drpToCrUGZjiFHYDq4WyvVEWgNynQMOQLTwd1aqY5Aa1CmY8gRmA7u1kp1BFqDMh1DjsB0cLdWaiZ3I6zVLmOG2I2o7+zsnD8St9hMPh72v74kQaDOfOjvmEideBBgo/oRqScq8pL/k3gDiZ4OSphEF5r7i0dsYKbxE6ygek7YeOstkG7iG8ibS9g+YVEbecX6weN9skVuUpNuCvhtQU3jCj03ap1ACt6KoysIF3GU4Obly5d/NvL6TrgcOi5/Llh8EFUz/tDfYtIY8pRceQPFmzAw0QgfvMVbZI7PPdvV1eXGwoqKnWB43e7duyOHFbC73Ys398obKNYJ5DxLL60vN+gSLunp6dk82UkEh9dgYGp/f/9LgUzwgOOUC0j7hEkDeZ1tbW06nh8o1glUSXQVz1D4O7rGobshcSddw026n4ySP4m2GSxWMKxs2bVrl05oFwn43MYM9RMiTY81SPq1RYl8bip94qxE7dmzZ1pfX5+c1kmsnEDqPu47CI+goYOzyTOBwunU/Um0hrr3Uq9OrvcSzuT+eq5v8Na1qqrqMVrf8944v+vECFRhOFXJG/c4DupcZL2fAy6uGIE8uWvoxd4sfuJ/lyiBpki6hxlcr8a5lRC5gHAOYelf9DPJJ10IHifAo4twa21t7QthKy+l4PwHhb4B2crvic0AAAAASUVORK5CYII='
                    alt='暂无数据'
                  ></img>
                  {/* <img src='src/assets/images/empty.png' alt='暂无数据'></img> */}
                  <p>没有进行中的任务<br/>可以查看已结束的任务</p>
                </div>
                
              }
            </Card>
          </TabPane>
          <TabPane tab="已结束任务" key="finished">
            <Card
              bordered={false}
              bodyStyle={{padding: 0}}
            >
              {
                finish_tasks.map(task => (
                  <FinishTask
                    key={task.id}
                    data={task}
                  ></FinishTask>
                ))
              }

            </Card>
          </TabPane>
        </Tabs>
      </div>

      
    </div>
  }
}


export default SiderList;