import React from 'react';
import moment from 'moment';
import { Modal } from 'antd';
import { StandardTableList } from '../../../components/AXList';
import AXVideoPlayer from '../../../components/AXVideoPlayer';
import Ellipsis from '../../../components/Ellipsis';
import { renderStatus, renderVideoQuality } from '../../../utils/utils';

function VideoTableList({
  dataSource, loading, totalSize, pageSize, pageNo, modalDestroy, currentItem,
  onCreateClick, onDeleteClick, onUpdateClick, onFilterClick, onBatchClick,
  onModalCreate, onModalDestroy,
}) {
  const pagination = {
    pageNo,
    pageSize,
    totalSize,
  };
  const batchActions = [{
    key: 'delete',
    name: '批量删除',
  }, {
    key: 'edit',
    name: '批量编辑',
  }];
  const basicSearch = {
    keys: [{
      name: '视频编号',
      field: 'code',
    }, {
      name: '视频名称',
      field: 'name',
    }],
  };
  const columns = [{
    title: '视频编号',
    key: 1,
    dataIndex: 'code',
    width: '17%',
  }, {
    title: '视频名称',
    key: 2,
    dataIndex: 'name',
    width: '30%',
    render: text => (
      <Ellipsis tooltip lines={1}>{text}</Ellipsis>
    ),
  }, {
    title: '视频格式',
    key: 3,
    dataIndex: 'format',
    width: '10%',
  }, {
    title: '视频质量',
    key: 4,
    dataIndex: 'quality',
    render: text => renderVideoQuality(text),
    width: '10%',
  }, {
    title: '视频状态',
    key: 5,
    dataIndex: 'status',
    render: text => renderStatus(text),
    width: '10%',
  }, {
    title: '创建时间',
    key: 6,
    dataIndex: 'gmtModified',
    render: text => moment(text).format('YYYY-MM-DD'),
    width: '15%',
  }, {
    title: '操作',
    key: 8,
    dataIndex: 'operation',
    render: (_, record) => <a onClick={() => onModalCreate(record)}>播放</a>,
    width: '8%',
    align: 'right',
  }];
  return (
    <div>
      <StandardTableList
        columns={columns}
        loading={loading}
        dataSource={dataSource}
        header={{ basicSearch, onFilterClick, onCreateClick }}
        footer={{ pagination, batchActions, onBatchClick }}
      />
      {!modalDestroy && (
      <Modal
        title={currentItem.name}
        visible
        footer={null}
        onCancel={onModalDestroy}
        maskClosable={false}
        width={800}
      >
        <AXVideoPlayer
          width="100%"
          height="100%"
          url={currentItem.url}
          isM3U8={currentItem.format === 'm3u8'}
        />
      </Modal>
)}
    </div>
  );
}

export default VideoTableList;