import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import classnames from 'classnames';
import queryString from 'query-string';
import { Popover, Modal, Table, Menu, Icon, Badge } from 'antd';
import AnimTableBody from '../../../components/Animation/AnimTableBody';
import { statuses, Codes } from '../../../utils/config'
import styles from './table.less';

const confirm = Modal.confirm;

export default class TableList extends PureComponent {
  static propTypes = {
    location: PropTypes.object,
    onChange: PropTypes.func.isRequired,
    onDeleteItem: PropTypes.func.isRequired,
    onPlayVideo: PropTypes.func.isRequired,
  };

  handleDeleteItem = (record) => {
    const { onDeleteItem } = this.props;
    confirm({
      title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该视频?`,
      onOk () {
        onDeleteItem(record.id);
      },
    })
  }

  render() {
    const { curStatus, onPlayVideo, location, pagination, ...tableProps } = this.props;

    const columns = [{
      title: '视频编号',
      dataIndex: 'code',
      key: 'code',
    },{
      title: '视频名称',
      dataIndex: 'name',
      key: 'name',
    },{
      title: '视频大小(B)',
      dataIndex: 'size',
      key: 'size',
    },{
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text, record) => {
        const statusMap = {[Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error'};
        return (<Badge status={statusMap[record.status]} text={statuses[record.status]} />);
      },
      filters: Object.keys(statuses).map(key => ({ text: statuses[key], value: key })),
      filterMultiple: false,
      filteredValue: [curStatus],
    },{
      title: '添加时间',
      dataIndex: 'gmtCreated',
      key: 'gmtCreated',
      render: (text, record) => (
        <div>{moment(text).format('YYYY-MM-DD')}</div>
      )
    },{
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (text, record) => (
        <div>
          <a onClick={() => onPlayVideo(record)}>播放</a>
          <span className={styles.splitLine} />
          <a onClick={() => this.handleDeleteItem(record)}>{record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}</a>
        </div>
      )
    }];

    // 数据table列表表头的筛选按钮点击重置后status值为空，此时删除该参数
    columns.map(item => {
      item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
    });

    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
    const getBodyWrapperProps = {
      page: location.query.page,
      current: tableProps.pagination.current,
    };
    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);

    return (
      <Table
        simple
        bordered
        { ...tableProps }
        columns={columns}
        className={classnames({ [styles.table]: true, [styles.motion]: true })}
        rowKey={record => record.id}
        getBodyWrapper={getBodyWrapper}
      />
    );
  }
}